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':
  'cl':
    'prefix': 'cl'
    'body': 'console.log($1)'
  'jsx':
    'prefix': 'jsx'
    'body': '''
      import React, {
        PropTypes,
        Component,
      } from 'react'
      import {connect} from 'react-redux'
      import {createStructuredSelector} from 'reselect'

      import Actions from 'lw-actions'
      import {styles} from 'lw-decorators'
      import {colors} from 'lw-styles'

      @connect(
        createStructuredSelector({
          ${2:storeName}: state => state.data.${2:storeName},
        }),
        Actions,
        (state, actions, props) => {
          return {
            // TODO: Spread out `state.${2:storeName}` state here.
            // TODO: Spread out `actions` here.
            ...props,
          }
        },
      )
      class ${1:MyComponent} extends Component {
        static propTypes = {}

        static defaultProps = {}

        render () {
          return (
            ${3:<div>${4}</div>}
          )
        }
      }

      export default ${1:MyComponent}

    '''
  'actions':
    'prefix': 'actions'
    'body': '''
      // NOTE: Prefix everything (usually with the name of the reducer/store, in
      // these examples we'll pretend it's `fooBar`)

      import {
        // TODO: Prefixed action_types go here (ex: `FOO_BAR_SET_QUERY`)
      } from './action_types'

      // Sync
      // NOTE: Prefixed synchronous actions go here.

      // ```
      // export function fooBarSetQuery (query) {
      //   return {
      //     type: FOO_BAR_SET_QUERY,
      //     payload: query,
      //   }
      // }
      // ```

      // Sync - Handlers
      // NOTE: Prefixed action handlers go here.

      // ```
      // export function fooBarHandleBtnClick () {
      //   return (dispatch, getState) => {
      //     const state = getState().data.fooBar
      //     dispatch(fooBarRequestResults(state.query))
      //   }
      // }
      // ```

      // Async
      // NOTE: Prefixed asynchronous actions go here.

      // ```
      // export function fooBarRequestResults () {
      //   return (dispatch, getState) => {
      //     const state = getState().data.fooBar
      //
      //     fetch(state.query)
      //       .then(
      //         response => {
      //           ...
      //         }
      //       )
      //   }
      // }
      // ```

    '''
  'reducer':
    'prefix': 'reducer'
    'body': '''
      import {
        // NOTE: Prefixed action_types go here (ex: `FOO_BAR_SET_QUERY`)
        ${2:FOO_BAR_SET_QUERY},
      } from 'lw-actions/action_types'

      const defaultState = {
        // query: '',
      }

      function ${1:fooBar} (state = defaultState, action) {

        switch (action.type) {
          case ${2:FOO_BAR_SET_QUERY}: {
            return {
              ...state,
              query: action.payload,
            }
          }
          default: {
            return state
          }
        }
      }

      export default ${1:fooBar}

    '''