Atom snippets

snippets.cson

# Your snippets
#
# Atom snippets allow you to enter a simple prefix in the editor and hit tab to
# expand the prefix into a larger code block with templated values.
#
# You can create a new snippet in this file by typing "snip" and then hitting
# tab.
#
# An example CoffeeScript snippet to expand log to console.log:
#
# '.source.coffee':
#   'Console log':
#     'prefix': 'log'
#     'body': 'console.log $1'
#
# Each scope (e.g. '.source.coffee' above) can only be declared once.
#
# This file uses CoffeeScript Object Notation (CSON).
# If you are unfamiliar with CSON, you can read more about it in the
# Atom Flight Manual:
# https://atom.io/docs/latest/using-atom-basic-customization#cson
'.source.js':
  'React Stateless Component':
    'prefix': 'rsc'
    'body': """
      import React from 'react'

      const ${1:Name} = (${2:props}) => {
      	return (
      		<h3>${1:Name}</h3>
      	)
      }

      export default ${1:Name};
    """
  'React Component':
    'prefix': 'rc'
    'body': """
      import React, { Component } from 'react';
      class ${1:Name} extends Component {
        render() {
          return (
            <h3>${1:Name}</h3>
          )
        }
      }
      export default ${1:Name};
    """
  'React Connect Container Component':
    'prefix': 'rcc'
    'body': """
      import React, { Component } from 'react';
      import { connect } from 'react-redux';
      class ${1:Name} extends Component {
        render() {
          return (
            <h3>${1:Name}</h3>
          )
        }
      }
      const mstp = ({ ${3:state }) => ({ ${3:state });
      export default connect(mstp)(${1:Name});
    """
  'React Redux Form Container Component':
    'prefix': 'rrf'
    'body': """
			import React, { Component } from 'react';
			import { Field, reduxForm } from 'redux-form';
			import { Form, Button } from 'semantic-ui-react';
			import UiFieldText from '../common/UiFieldText';

			class ${1:name}Form extends Component {
			  handleSubmit = (values) => {
			    this.props.save(values);
			    this.props.reset();
			  }
			  render() {
			    const { handleSubmit, save } = this.props;
			    return (
						<Form onSubmit={handleSubmit(this.handleSubmit)}>
							<Field name="${2:field}" placeholder="${2:field}" component={UiFieldText} />
							<Button>${3:Save}</Button>
						</Form>
			    )
			  }
			}
			export default reduxForm({
			  form: '${1:name}'
			})(${1:name}Form);
    """
  'Promise Arrow Function':
    'prefix': 'afpr'
    'body': """
			const ${1:name} = (${2:params}) => new Promise((resolve, reject) =>{
				resolve()
			})
    """
  'import Spread Component':
    'prefix': 'imp'
    'body': """
      import { $1 } from '$2';$3
    """
  'React Spread props':
    'prefix': 'cps'
    'body': """
      const { $1 } = this.props;$2
    """
  'React Spread state':
    'prefix': 'css'
    'body': """
      const { $1 } = this.state;$2
    """
  'React Constructor':
    'prefix': 'ctor'
    'body': """
      constructor(props) {
        super(props);
        this.state = {};
        this.${1:method} = this.${1:method}.bind(this);
      }
    """
  'import Module Component':
    'prefix': 'impm'
    'body': """
      import $1 from '$1';$2
    """
  'import File Component':
    'prefix': 'impf'
    'body': """
      import $1 from './$1';$2
    """
  'require module':
    'prefix': 'reqm'
    'body': """
      const $1 = require('$1');$2
    """
  'require file':
    'prefix': 'reqf'
    'body': """
      const $1 = require('./$1');$2
    """
  'require destructor file':
    'prefix': 'reqd'
    'body': """
      const { $1 } = require('$2');$3
    """
  'eslint disable rule':
    'prefix': 'esld'
    'body': """
      /* eslint-disable ${1:no-console} */$2
    """
  'Express route':
    'prefix': 'route'
    'body': """
	${1:api}.${2:get}('/${3:users}', (req, res) => {
		res.${4:send}($5);
	});$6
    """
  'json stringify':
    'prefix': 'jss'
    'body': """
      JSON.stringify(${1:data}, null, 2)
    """
  'Redux Reducer':
    'prefix': 'redr'
    'body': """
      export default (state = [], action) => {
      	switch (action.type) {
      		case '${1:SOME_TYPE}':
      			return state;
      		default:
      			return state;
      	}
      }
    """