Skip to content

Instantly share code, notes, and snippets.

import Component from 'react-pure-render/component';
import React, { PropTypes } from 'react';
import facebook from '../components/facebook';
class FacebookComments extends Component {
static propTypes = {
href: PropTypes.string.isRequired
}
@steida
steida / App.react.js
Created March 11, 2016 20:37
How to use redux-storage in React Native (on browser use ReactDOM.render callback)
import 'react-native-browser-polyfill';
import App from './app/App.react';
import React, {AppRegistry, Component} from 'react-native';
import configureStore from '../common/configureStore';
import createEngine from 'redux-storage/engines/reactNativeAsyncStorage';
import deps from './deps';
import {Provider} from 'react-redux/native';
// TODO: We can't use <IntlProvider> yet because it's not ready for
// react-native. Therefore we can't use <FormattedMessage> etc.
@steida
steida / example.js
Last active February 10, 2016 02:49
Declarative FirebaseQuery React component
// firebaesMiddleware.js
import * as actions from './constants';
import Firebase from 'firebase';
import snakeCase from 'lodash.snakecase';
const filterListeners = props => {
const listeners = [];
Object.keys(props).forEach(key => {
const isOnce = key.startsWith('once');
const isListener = isOnce || key.startsWith('on');
import Firebase from 'firebase';
import Fireproof from 'fireproof';
import Promise from 'bluebird';
import appReducer from './app/reducer';
import createFirebaseSyncMiddleware from './lib/createFirebaseSyncMiddleware.js';
import createLogger from 'redux-logger';
import injectDependencies from './lib/injectDependencies';
import promiseMiddleware from 'redux-promise-middleware';
import promiseTypeSuffixes from './promiseTypeSuffixes';
import shortid from 'shortid';
@steida
steida / globalLocalState.js
Last active January 18, 2016 21:12
Crazy experiment. Globalized local state in Flux.
<form onSubmit={this.onFormSubmit}>
<state model="forms.login">
{(login, update) =>
<fieldset disabled={auth.form.disabled}>
<legend>{msg.auth.form.legend}</legend>
<input
autoFocus
placeholder={msg.auth.form.placeholder.email}
type="email"
value={login.email || ''}
@steida
steida / Login.react.js
Created January 18, 2016 19:22
Simple Redux form
// Simple login form from Este.
<form onSubmit={this.onFormSubmit}>
<fieldset disabled={auth.form.disabled}>
<legend>{msg.auth.form.legend}</legend>
<input
autoFocus
name="email"
onChange={actions.onAuthFormFieldChange}
placeholder={msg.auth.form.placeholder.email}
value={auth.form.fields.email}
@steida
steida / staticRender.js
Created January 6, 2016 22:39
Gulp task for static rendering for Este
gulp.task('static-render', done => {
args.production = true;
const pages = {
'/': 'index.html',
'/foo-bla-bar': '404.html'
};
const fetch = path => new Promise((resolve, reject) => {
require('http').get({host: 'localhost', path, port: 8000}, res => {
@steida
steida / createPendingsReducer.js
Created December 13, 2015 07:35
pending async actions
/*
Pending promises states. Revived from old Este. Pretty useful pattern.
Remember this reducer is memory only. Never revive nor rehydrate anything.
Otherwise, app could freeze in wrong state forever.
TODO: Subclass map and add handy helper for actions payloads stored as array.
Usage:
<FacebookLogin
actions={actions}
@steida
steida / migrate.js
Last active November 30, 2015 04:45
// Example
engine = storageDecoratorsMigrate(engine, [
state => {
const viewer = state.focuses.map;
delete state.focuses.map;
state.focuses.viewer = viewer;
return state;
},
state => {
@steida
steida / createFirebae.js
Created November 13, 2015 13:40
Firebase helper
import Firebase from 'firebase';
import Promise from 'bluebird';
import ValidationError from '../lib/ValidationError';
// Promisify Firebase onComplete callback.
export const promisify = callback => new Promise((resolve, reject) => {
callback((error, data) => {
if (error) {
reject(firebaseError(error));
return;