SiteOne React Snippets

Write s1- in JavaScript React file and pick one of snippets below. Use Tab To fill in names conveniently.

Proper function of these snippets assumes you are using:

• flow
• react >= 16.7.x
• eslint config @siteone/eslint-config

Have fun.

0.0.4

• Fixed more errors in snippets, tweaked names

0.0.3

Changes

• Fixed minor errors in existing templates.

s1-st Storybook basic story

import React from 'react'
import { storiesOf } from '@storybook/react'
import MyComponent from './MyComponent'
import debug from 'debug'

const log = debug('story:MyComponent:log')

storiesOf('My component group/MyComponent', module).add('Default', () => (
  <MyComponent onClick={() => log('clicked')}>Click Me!</MyComponent>
))

s1-sg New saga

import { put, takeLatest } from 'redux-saga/effects'

import {
  TRIGGER_ACTION,
  createNextAction,
} from './actions'

/**
 * Saga description
 */
export function* createNextActionSaga(action:Object<{type:string, payload?:any}>) {
  yield put(createNextAction(`Hello action ${type}`))
}

/**
 * Root saga manages watcher lifecycle
 */
export default function* triggerActionSage() {
  yield takeLatest(TRIGGER_ACTION, createNextActionSaga)
}

0.0.2

s1-qc

// @flow
import React, { memo } from 'react'
import PropTypes from 'prop-types'

import { Query } from 'react-apollo'
import gql from 'graphql-tag'

import WhateverView from './Whatever'

type WhateverContainerProps = {
  any: String,
  i: String,
}

const QUERY = gql`
  # Query here
`

const WhateverContainer = memo(({ ...props }: WhateverContainerProps) => (
  <Query query={QUERY} variables={{ props }}>
    {({ data, error, loading }) => {
      if (error) return '💩 Oops!'
      if (loading) return 'Načítám...'

      return (<WhateverView {...data} />)
    }}
  </Query>
))

export default WhateverContainer

0.0.1

s1-c

// @flow
import React, { Node } from 'react'
import PropTypes from 'prop-types'
import styles from './MyComponent.scss'

type MyComponentProps = {
  children: Node
}

const MyComponent = ({children}: MyComponentProps) => {
  <div>{children}</div>
}

export default MyComponent

s1-m

// @flow
import React, { memo, Node } from 'react'
import PropTypes from 'prop-types'
import styles from './MyComponent.scss'

type MyComponentProps = {
  children?: Node
}

const MyComponent = memo(({children}: MyComponentProps) => {
  <div>{children}</div>
})

export default MyComponent

s1-l

// @flow
import React, { lazy, Suspense, Node } from 'react'
import PropTypes from 'prop-types'
const MyLazyComponent = lazy(() => import('./MyLazyComponent'))

type MyComponentProps = {
  children?: Node
}

const MyComponent = ({children}: MyComponentProps) => {
  <Suspense fallback={<div>Načítám...</div>}>
    <MyLazyComponent>{children}</MyLazyComponent>
  </Suspense>
}

export default MyComponent