jamesseanwright

export interface State {
  messages: string[];
  isFormValid: boolean;
  isLoadingQuote: boolean;
  hasQuoteError: boolean;
}

export const defaultState: State = {
  messages: [],
  isFormValid: true,

jamesseanwright

export default () => (
  <Provider
    defaultState={defaultState}
    reducer={rootReducer}
  >
    <Status />
    <MessageForm />
    <MessageList />
  </Provider>
);

jamesseanwright

const mapStateToProps = ({ isFormValid, hasQuoteError, isLoadingQuote }: StateProps) => ({
  isFormValid,
  hasQuoteError,
  isLoadingQuote,
});

const mapDispatchToProps = (dispatch: React.Dispatch<Action>) => ({
  addMessage: (message: string) => dispatch(addMessage(message)),
  addRonSwansonQuote: () => dispatch(addRonSwansonQuote()),
});

jamesseanwright

interface Context {
  state: State;
  dispatch: React.Dispatch<Action>;
}
    
const StateContext = React.createContext<Context>({
  state: defaultState,
  dispatch: defaultDispatch,
});

jamesseanwright

export const Provider: React.FC<ProviderProps> = ({
  reducer,
  children,
}) => {
  const [state, dispatch] = React.useReducer(reducer, defaultState);

  return (
    <StateContext.Provider value={{
      state,
      dispatch,

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}

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

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 const addMessage = (message: string) => ({
  type: ADD_MESSAGE,
  payload: {
    message,
  },
});