vscode javascript snippets

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"
	}
}