Skip to content

Instantly share code, notes, and snippets.

@filipegorges

filipegorges/javascript.json

Created February 22, 2019 22:43
Show Gist options
  • Save filipegorges/b77ca01cf7b37a7aaa2119b806dfab49 to your computer and use it in GitHub Desktop.
Save filipegorges/b77ca01cf7b37a7aaa2119b806dfab49 to your computer and use it in GitHub Desktop.
Download ZIP
vscode javascript snippets
Raw
javascript.json
{
// Place your snippets for javascript here. Each snippet is defined under a snippet name and has a prefix, body and
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
// same ids are connected.
// Example:
// "Print to console": {
// "prefix": "log",
// "body": [
// "console.log('$1');",
// "$2"
// ],
// "description": "Log output to console"
// }
"functionalComponent": {
"prefix": "funcc",
"body": [
"import React from 'react';",
"",
"const ${1:ComponentName} = (props) => {",
" return (",
" <${2:markup}>$0</$2>",
" );",
"};",
"",
"export default $1;",
""
],
"description": "React functional component structure."
},
"materialFunctionalComponent": {
"prefix": "mfuncc",
"body": [
"import React from 'react';",
"import PropTypes from 'prop-types';",
"",
"const ${1:ComponentName} = (props) => {",
" const { ${2:prop} } = props;",
" return (",
" <${3:markup}>$0</$3>",
" );",
"};",
"",
"$1.propTypes = {",
" $2: PropTypes.shape({}).isRequired,",
"};",
"",
"export default $1;",
""
],
"description": "React functional component structure."
},
"classComponent": {
"prefix": "classc",
"body": [
"import React, { Component } from 'react';",
"",
"class ${1:ComponentName} extends Component {",
" render() {",
" return (",
" <${2:markup}>$0</$2>",
" );",
" }",
"}",
"",
"export default $1;",
""
],
"description": "React container component structure."
},
"classReduxComponent": {
"prefix": "classrc",
"body": [
"import React, { Component } from 'react';",
"import { connect } from 'react-redux';",
"import PropTypes from 'prop-types';",
"import * as actions from '${1:actionsIndex}';",
"",
"class ${2:ComponentName} extends Component {",
" render() {",
" const { ${3:props} } = this.props;",
" return (",
" <${7:markup}>$0</$7>",
" );",
" }",
"}",
"",
"$2.defaultProps = {",
" $3: null,",
"};",
"",
"$2.propTypes = {",
" $3: PropTypes.shape({}),",
"};",
"",
"const mapStateToProps = (state) => {",
" return {",
" $3: state.${4:reducer}.$3,",
" };",
"};",
"",
"const mapDispatchToProps = (dispatch) => {",
" return {",
" ${5:handler}: dispatch(() => actions.${6:actionName}()),",
" };",
"};",
"",
"export default connect(mapStateToProps, mapDispatchToProps)($2);",
""
],
"description": "React container component structure."
},
"extractReducer": {
"prefix": "red",
"body": [
"const ${1:reducerBehavior} = (state, action) => {",
" $0",
"};"
],
"description": "Extract reducer behavior into function."
},
"mapStateToProps": {
"prefix": "mapsp",
"body": [
"const mapStateToProps = state => {",
" return {",
" $0",
" };",
"};"
],
"description": "Map state to props."
},
"mapDispatchToProps": {
"prefix": "mapdp",
"body": [
"const mapDispatchToProps = dispatch => {",
" return {",
" $0",
" };",
"};"
],
"description": "Map dispatch to props."
},
"actionCreatorsDefaults": {
"prefix": "acd",
"body": [
"import * as actionTypes from './actionTypes';",
"import history from '../../helpers/Router/History/History';",
"",
"const ${1:asyncAction}Success = (${2:parameter}) => {",
" return {",
" type: actionTypes.${3:ACTION_NAME}_SUCCESS,",
" $2,",
" };",
"};",
"",
"const $1Failure = (error) => {",
" return {",
" type: actionTypes.$3_FAILURE,",
" error,",
" };",
"};",
"",
"export const $1 = ($2) => {",
" return (dispatch) => {",
" if ($2) {",
" dispatch($1Success($2));",
" history.push('/${4:redirectionRoute}');",
" } else {",
" dispatch($1Failure('error'));",
" }",
" };",
"};",
""
],
"description": "Default implementation of async action creators."
},
"actionCreatorsCRUDDefaults": {
"prefix": "accd",
"body": [
"import * as actionTypes from './actionTypes';",
"import history from '../../helpers/Router/History/History';",
"import { ${1:firebaseInterface} } from '../firebase';",
"",
"const create${2:asyncAction}Success = (${3:parameter}) => {",
" return {",
" type: actionTypes.CREATE_${4:ACTION_NAME}_SUCCESS,",
" $3,",
" };",
"};",
"",
"const create$2Failure = (error) => {",
" return {",
" type: actionTypes.CREATE_$4_FAILURE,",
" error,",
" };",
"};",
"",
"export const create$2 = ($3) => {",
" return (dispatch) => {",
" $1.doCreate$2($3)",
" .then(() => {",
" history.push('/${6:redirectionRoute}');",
" })",
" .catch((error) => {",
" dispatch(create$2Failure(error));",
" });",
" };",
"};",
"",
"const fetch$2Success = ($3) => {",
" return {",
" type: actionTypes.FETCH_$4_SUCCESS,",
" $3,",
" };",
"};",
"",
"const fetch$2Failure = (error) => {",
" return {",
" type: actionTypes.FETCH_$4_FAILURE,",
" error,",
" };",
"};",
"",
"export const fetch$2 = (id) => {",
" return (dispatch) => {",
" $1.doRead$2(id)",
" .then((snapshot) => {",
" const $2Value = Object.values(snapshot.val())[0];",
" dispatch(fetch$2Success($2Value));",
" })",
" .catch((error) => {",
" dispatch(fetch$2Failure(error));",
" });",
" };",
"};",
"",
"const fetch$2sSuccess = (snapshot) => {",
" let $3List;",
" if (snapshot.val()) {",
" $3List = Object.values(snapshot.val());",
" }",
" return {",
" type: actionTypes.FETCH_$4_SUCCESS,",
" $3s: $3List,",
" };",
"};",
"",
"export const fetch$2s = () => {",
" return (dispatch) => {",
" $1.doRead$2s(dispatch, fetch$2sSuccess);",
" };",
"};",
"",
"const update$2Success = ($3) => {",
" return {",
" type: actionTypes.UPDATE_$4_SUCCESS,",
" $3,",
" };",
"};",
"",
"const update$2Failure = (error) => {",
" return {",
" type: actionTypes.UPDATE_$4_FAILURE,",
" error,",
" };",
"};",
"",
"export const update$2 = ($3) => {",
" return (dispatch) => {",
" $1.doUpdate$2($3)",
" .then((snapshot) => {",
" history.push(`/$6/${$3.id}`);",
" })",
" .catch((error) => {",
" dispatch(update$2Failure(error));",
" });",
" };",
"};",
"",
"const delete$2Success = () => {",
" return {",
" type: actionTypes.DELETE_$4_SUCCESS,",
" };",
"};",
"",
"const delete$2Failure = (error) => {",
" return {",
" type: actionTypes.DELETE_$4_FAILURE,",
" error,",
" };",
"};",
"",
"export const delete$2 = (id) => {",
" return (dispatch) => {",
" $1.doDelete$2(id)",
" .then(() => {",
" dispatch(delete$2Success());",
" history.push('/$6');",
" })",
" .catch((error) => {",
" dispatch(delete$2Failure(error));",
" });",
" };",
"};",
""
],
"description": "Default implementation of async action creators."
},
"reducerDefaults": {
"prefix": "redd",
"body": [
"import * as actionTypes from '../actions/actionTypes';",
"",
"const initialState = {",
" ${1:mainProp}: null,",
" error: null,",
"};",
"",
"const ${2:asyncAction}Success = (state, action) => {",
" return {",
" ...state,",
" $1: action.$1,",
" };",
"};",
"",
"const $2Failure = (state, action) => {",
" return {",
" ...state,",
" error: action.error,",
" };",
"};",
"",
"const reducer = (state = initialState, action) => {",
" switch (action.type) {",
" case actionTypes.${3:ACTION_NAME}_SUCCESS: return $2Success(state, action);",
" case actionTypes.$3_FAILURE: return $2Failure(state, action);",
" default: return state;",
" }",
"};",
"",
"export default reducer;",
""
],
"description": "Default implementation of async-responsive reducer"
},
"reducerCRUDDefaults": {
"prefix": "redcd",
"body": [
"import * as actionTypes from '../actions/actionTypes';",
"",
"const initialState = {",
" ${1:mainProp}: null,",
" error: null,",
"};",
"",
"const create${2:asyncAction}Success = (state, action) => {",
" return {",
" ...state,",
" $1: action.$1,",
" };",
"};",
"",
"const create$2Failure = (state, action) => {",
" return {",
" ...state,",
" error: action.error,",
" };",
"};",
"",
"const fetch${2:asyncAction}Success = (state, action) => {",
" return {",
" ...state,",
" $1: action.$1,",
" };",
"};",
"",
"const fetch$2Failure = (state, action) => {",
" return {",
" ...state,",
" error: action.error,",
" };",
"};",
"",
"const fetch${2:asyncAction}sSuccess = (state, action) => {",
" return {",
" ...state,",
" $1: action.$1,",
" };",
"};",
"",
"const fetch$2sFailure = (state, action) => {",
" return {",
" ...state,",
" error: action.error,",
" };",
"};",
"",
"const update${2:asyncAction}Success = (state, action) => {",
" return {",
" ...state,",
" $1: action.$1,",
" };",
"};",
"",
"const update$2Failure = (state, action) => {",
" return {",
" ...state,",
" error: action.error,",
" };",
"};",
"",
"const delete${2:asyncAction}Success = (state, action) => {",
" return {",
" ...state,",
" $1: action.$1,",
" };",
"};",
"",
"const delete$2Failure = (state, action) => {",
" return {",
" ...state,",
" error: action.error,",
" };",
"};",
"",
"const reducer = (state = initialState, action) => {",
" switch (action.type) {",
" case actionTypes.CREATE_${3:ACTION_NAME}_SUCCESS: return create$2Success(state, action);",
" case actionTypes.CREATE_$3_FAILURE: return create$2Failure(state, action);",
" case actionTypes.FETCH_${3:ACTION_NAME}S_SUCCESS: return fetch$2sSuccess(state, action);",
" case actionTypes.FETCH_$3S_FAILURE: return fetch$2sFailure(state, action);",
" case actionTypes.FETCH_${3:ACTION_NAME}_SUCCESS: return fetch$2Success(state, action);",
" case actionTypes.FETCH_$3_FAILURE: return fetch$2Failure(state, action);",
" case actionTypes.UPDATE_${3:ACTION_NAME}_SUCCESS: return update$2Success(state, action);",
" case actionTypes.UPDATE_$3_FAILURE: return update$2Failure(state, action);",
" case actionTypes.DELETE_${3:ACTION_NAME}_SUCCESS: return delete$2Success(state, action);",
" case actionTypes.DELETE_$3_FAILURE: return delete$2Failure(state, action);",
" default: return state;",
" }",
"};",
"",
"export default reducer;",
""
],
"description": "Default implementation of async-responsive reducer"
},
"asyncActionTypes": {
"prefix": "asyncact",
"body": [
"export const FETCH_${1:ACTION_NAME}_SUCCESS = 'FETCH_$1_SUCCESS';",
"export const FETCH_$1_FAILURE = 'FETCH_$1_FAILURE';",
""
],
"description": "Default implementation of async actionTypes"
},
"asyncActionCRUD": {
"prefix": "asyncact",
"body": [
"export const CREATE_${1:ACTION_NAME}_SUCCESS = 'CREATE_$1_SUCCESS';",
"export const CREATE_$1_FAILURE = 'CREATE_$1_FAILURE';",
"export const FETCH_$1_SUCCESS = 'FETCH_$1_SUCCESS';",
"export const FETCH_$1_FAILURE = 'FETCH_$1_FAILURE';",
"export const FETCH_$1S_SUCCESS = 'FETCH_$1S_SUCCESS';",
"export const FETCH_$1S_FAILURE = 'FETCH_$1S_FAILURE';",
"export const UPDATE_$1_SUCCESS = 'UPDATE_$1_SUCCESS';",
"export const UPDATE_$1_FAILURE = 'UPDATE_$1_FAILURE';",
"export const DELETE_$1_SUCCESS = 'DELETE_$1_SUCCESS';",
"export const DELETE_$1_FAILURE = 'DELETE_$1_FAILURE';",
""
],
"description": "Default implementation of async actionTypes for CRUD"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment