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

import superagent from 'superagent';
import Promise from 'promise';

/**
 * Is this response object considered successful?
 * @param {Object} res
 * @returns {boolean}
 */
function isSuccess(res:Object) {
  return res.ok && res.body.status && res.body.status.success && (!res.body.status.errors || !res.body.status.errors.length);

chrisui

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

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

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

/* 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

// container component
class HandlerA {

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

chrisui

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

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

const selector = createSelector([
  selectRoutedSupplierThread,
  selectRoutedSupplierThreadMessages

chrisui

Num modules:
1123

Num components:
647

Most depended on components:
[ { name: 'Text', usages: 568 },
  { name: 'Button', usages: 160 },
  { name: 'Icon', usages: 127 },

chrisui

export function Component({state, increment}) {
  return (
    <div>
      {state.count} hits!
      <button onClick={increment}>Hit me!</button>
    </div>
  );
}

chrisui

• "React" - Needs no introduction...
• "React Patterns" - A nice learning resource for all the patterns you'll see used across the React ecosystem
• “Real World Redux” - Talk I gave back in feb on our experience with Redux (there’s a recording linked on that page)
• “Recompose” - Is a react utility library we use extensively which is allowing us to move towards writing dumber components with localised containers (ie. removing api redux as a first class api)
  • An extra talk on recompose by the creator here: https://www.youtube.com/watch?v=zD_judE-bXk
• Can also see how we’re writing our own Higher order components and component enhancers here: