Skip to content

Instantly share code, notes, and snippets.

@chrisui
chrisui / request.js
Created May 7, 2015 10:51
Generic promise & data formatting wrapper around superagent
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
chrisui / example.js
Created June 15, 2015 08:45
Responsive CSS in JS
// 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
});
@chrisui
chrisui / gate.js
Created September 1, 2015 18:03
Promise Gating
/**
* 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
chrisui / withState.example.js
Created October 7, 2015 20:01
withState composition
withReducer(
'setCounter',
(state, param) =>
{counter: param, ...state})
)
withReducers({
setCounter: (state, param) =>
{counter: param, ...state})
})
@chrisui
chrisui / messenger-inbox-handler.js
Created November 11, 2015 15:30
Redux selector examples
import Page from 'components/messenger-inbox-page';
import {
selectRoutedSupplierThread,
selectRoutedSupplierThreadMessages
} from 'services/messenger-service';
const selector = createSelector([
selectRoutedSupplierThread,
selectRoutedSupplierThreadMessages
@chrisui
chrisui / button.jsx
Created February 11, 2016 14:21
cx .undefined
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
chrisui / raw-breaking-mutation.js
Last active April 7, 2016 13:04
Arrow function binding
// 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
chrisui / action.js
Created April 11, 2016 19:22
Thunk Middleware with Custom API Utils
// 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
chrisui / playground.js
Created April 14, 2016 12:00
Redocs Playground
/* 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
chrisui / example.jsx
Created May 19, 2016 13:23
Clone `children` to pass extra props
// container component
class HandlerA {
handleSubmit(event) {
// do stuff
}
render() {
const {
children // react-router passes your child in here