jamesseanwright

import * as React from 'react';

const App = () => (
  <main>
    <h1>My App</h1>
    <React.Suspense fallback={<p>Loading...</p>}>
      <SomeSuspensefulComponent />
    </React.Suspense>
  </main>
);

jamesseanwright

import { Link } from './routing';

interface NavProps {
  paths: string[];
}

const getLinkText = (path: string) =>
  `${path[1].toUpperCase()}${path.slice(2)}`;

const Nav: React.FC<NavProps> = ({ paths }) => (

jamesseanwright

import { Router } from './routing';
import Nav from './Nav.jsx';
import * as pages from './pages';

const routes = new Map<string, React.ComponentType>([
  ['/', () => <p>Pick an Ipsum!</p>],
  ['/lorem', pages.Lorem],
  ['/bacon', pages.Bacon],
  ['/hipster', pages.Hipster],
  ['/office', pages.Office],

jamesseanwright

import * as React from 'react';

export default () => (
  <section>
    <h2>Bacon</h2>

    <p>
      Bacon ipsum dolor amet kielbasa swine jerky, beef ribs sausage turducken
      short ribs strip steak venison buffalo meatball tongue. T-bone short loin
      frankfurter capicola buffalo. Kevin ham hock chuck tail kielbasa short

jamesseanwright

const withGet = Component => 
  class AugmentedWithGet extends React.Component {
    get = url => {
      this.setState({
        isLoading: true,
      });
      
      axios.get(url)
        .then(({ data, status }) => {
          this.setState({

jamesseanwright

export const addMessage = (message: string) => ({
  type: ADD_MESSAGE,
  payload: {
    message,
  },
});

jamesseanwright

const rootReducer: React.Reducer<State, Action> = (state, action) => {
  if (isAddMessage(action)) {
    const { message } = action.payload;

    return {
      ...state,
      isLoadingQuote: false,
      hasQuoteError: false,
      isFormValid: !!message,
      messages: [

jamesseanwright

export type Thunk = (dispatch: React.Dispatch<Action>, state: State) => void;
export type AugmentedDispatch = React.Dispatch<Thunk | Action>;

const augmentDispatch = (dispatch: React.Dispatch<Action>, state: State) =>
  (input: Thunk | Action) =>
    input instanceof Function ? input(dispatch, state) : dispatch(input);
    
export const Provider: React.FC<ProviderProps> = ({
  reducer,
  children,

jamesseanwright

export const addRonSwansonQuote = () =>
  (dispatch: React.Dispatch<Action>) => {
    dispatch(setQuoteLoading());

    return fetch('https://ron-swanson-quotes.herokuapp.com/v2/quotes')
      .then(res => res.json())
      .then(([quote]: string[]) =>
        dispatch(addMessage(quote)),
      )
      .catch(() => dispatch(setQuoteError()));

jamesseanwright

export const connect = <TStateProps, TDispatchProps, TOwnProps = {}>(
  mapStateToProps?: (state: State, ownProps: TOwnProps) => TStateProps,
  mapDispatchToProps?: (dispatch: AugmentedDispatch, ownProps: TOwnProps) => TDispatchProps,
) =>
  (Component: React.ComponentType<TStateProps & TDispatchProps & TOwnProps>) => (
    (props: TOwnProps) =>
      <StateContext.Consumer>
        {({ state, dispatch }) => (
          <Component
            {...props}