davidfurlong

import React from 'react';
import { Tabs } from 'antd';
import PropTypes from 'prop-types';
import { withRouter } from 'react-router-dom';

const propTypes = {
  history: PropTypes.any,
  location: PropTypes.any,

  action: PropTypes.oneOf(['push', 'replace']).isRequired,

davidfurlong

// React-router 4 doesn't support 'exact' redirects. Very annoying. This fixes that.
import React from 'react';
import { Route, Redirect } from 'react-router-dom';

const RedirectExact = ({ from, to }) => (
  <Route exact path={from} render={() => (
    <Redirect from={from} to={to} />
  )} />
);

davidfurlong

import React from 'react';

const withPageDimensions = WrappedComponent => 
  class PageDimensions extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        width: 0,
        height: 0
      };

davidfurlong

{
	"name": "bookshelf-bug",
	"version": "0.1.0",
	"dependencies": {
		"bookshelf": "*",
		"bluebird": "*",
		"knex": "*",
		"sqlite3": "*"
	}
}

davidfurlong

import React from 'react';
import { Tabs } from 'antd';
import PropTypes from 'prop-types';
import { browserHistory } from 'react-router';

function isLeftClickEvent(event) {
  return event.button === 0;
}

function isModifiedEvent(event) {

davidfurlong

Make it real

Ideas are cheap. Make a prototype, sketch a CLI session, draw a wireframe. Discuss around concrete examples, not hand-waving abstractions. Don't say you did something, provide a URL that proves it.

Ship it

Nothing is real until it's being used by a real user. This doesn't mean you make a prototype in the morning and blog about it in the evening. It means you find one person you believe your product will help and try to get them to use it.

Do it with style

davidfurlong

// Spec http://www.ecma-international.org/ecma-262/6.0/#sec-json.stringify
const replacer = (key, value) =>
	value instanceof Object && !(value instanceof Array) ? 
		Object.keys(value)
		.sort()
		.reduce((sorted, key) => {
			sorted[key] = value[key];
			return sorted 
		}, {}) :
		value;

davidfurlong

const _ = (obj, cond = (val) => typeof val === 'undefined' || val === null) => 
  Object.assign({},
    ...(Object.keys(obj).map(key => 
      cond(obj[key]) ? {} : {
        [key]: obj[key]
      })
    )
  );
  
/* 

davidfurlong

/* its not immediately obvious how to do this, which is why I've added it here */
const connectSubmitButton = (WrappedComponent) => {
  const connectContext = (props, context) => (<WrappedComponent {...props} _reduxForm={context._reduxForm} />);
  
  connectContext.contextTypes = {
    _reduxForm: PropTypes.object.isRequired
  };
  return connectContext;
};

davidfurlong

/*

A react higher order component (HOC) for disabling server side rendering (SSR) for a particular component.
Useful if a particular library / page doesn't support SSR and you 
a) dont want to mess around with the server routing to handle it 
b) dont want to the component to even be constructed on the server
c) dont want to modify the component's methods to handle loading the library on the client 
(for example, you need to use window/client methods in the constructor)

DISCLAIMER: this is hacky, and will throw a console warning (in development) that the checksum is invalid (which means server & client rendering dont agree on HTML string)