chrisui

// all of our components are in their own directories with local css
// so we use index.js (node resolution paradigm) so we can write:
//   `import Button from 'components/button'`
//  rather than:
//    `import Button from 'components/button/button'`
//
// eg. dir structure
//   /components/button
//   /components/button/index.js
//   /components/button/button.js

chrisui

// container component
class HandlerA {

  handleSubmit(event) {
    // do stuff
  }
  
  render() {
    const {
      children // react-router passes your child in here

chrisui

/* global MATCH_COMPONENTS */
import React from 'react';
import ReactDOM from 'react-dom';

import 'styles/master.css';

import Playground from 'redocs/lib/playground/components/playground';

const reqCoreManifests = require.context('./core/components', true, MATCH_COMPONENTS);
const reqAthenaManifests = require.context('./athena/components', true, MATCH_COMPONENTS);

chrisui

// Now your action creators can pull utilities our of their thunk api!
export function fetchUser(id) {
  return ({api, dispatch}) =>
    api.fetch(`users/${id}`).then(resp =>
      dispatch({action: FETCH_USER, user: resp.body.data}));
}

chrisui

// given a reference to mutableData we can't guarantee that .mutableProperty would
// still be the same reference *after* binding.
function Component({mutableData, onClick}) {
  return <button onClick={event => onClick(mutableData.mutableProperty, event)} />
}

chrisui

import cx from 'classnames';
import styles from './button.css';

const Button = ({children}) => (
  <button className={cx({[styles.button]: true})}>{children}</button>
);

// If we didn't define .button inside button.css then the above cx call
// looks like cx({[undefined]: true}) which actually means the class name
// "undefined" is set.

chrisui

import Page from 'components/messenger-inbox-page';

import {
  selectRoutedSupplierThread,
  selectRoutedSupplierThreadMessages
} from 'services/messenger-service';

const selector = createSelector([
  selectRoutedSupplierThread,
  selectRoutedSupplierThreadMessages

chrisui

withReducer(
  'setCounter',
  (state, param) =>
    {counter: param, ...state})
)

withReducers({
  setCounter: (state, param) =>
    {counter: param, ...state})
})

chrisui

/**
 * Create a "gated" (throttled) version of the user function. This throttling is not time
 * based but rather throttles execution to prevent two async actions occuring in parallel.
 * Ie. Two syncronous calls to the returned function will return reference to the same promise
 * - An example use case of this would be to prevent firing too many api requests to the same
 *   endpoint in a short amount of time
 * @param {Function} func func *must* return a promise
 * @returns {Function} throttled function which will always return a promise
 */
export function gate(func) {

chrisui

// Responsive init ----------------
import Responsive, {Breakpoints} from 'responsive';

// Register breakpoints - creates a Symbol for each breakpoint descriptor
// - Basic breakpoint descriptor is as seen here. A simple desktop-first Number
Responsive.registerBreakpoints({
  SMALL: 320,
  MEDIUM: 768,
  LARGE: 1024
});