jacobp100

export default connect(
  null,
  dispatch => ({
    handleCatAddition: formDispatcher(dispatch),
  })
)(AddCat);

jacobp100

import serialize from 'form-serialize';
import actionCreators from './actionCreators';

export const formDispatcher = dispatch => event => {
  event.preventDefault();
  const actionParams = serialize(event.currentTarget, { hash: true, empty: true });
  const actionCreator = actionCreators[actionParams['action-creator']];
  const action = actionCreator(actionParams);
  dispatch(action);
};

jacobp100

import { addCatViaForm } from './actions/cats';

export default {
  'add-cat': addCatViaForm,
};

jacobp100

export const addCat = params => async dispatch => {
  const cat = await fetchJson('PUT', '/cats', params);
  dispatch({ type: UPDATE_CAT, cat });
};

export const addCatViaForm = inputParams => async dispatch => {
  const params = await schema.validate(inputParams, {
    abortEarly: false,
    stripUnknown: true,
  });

jacobp100

const schema = yup.object().shape({
  name: yup.string().required('You must provide a name'),
  age: yup.number().typeError('Must be a number'),
  gender: yup.string().oneOf(['male', 'female'], 'Must select a valid gender'),
});

jacobp100

const AddCat = ({ handleCatAddition }) => (
  <div>
    <form method="POST" onSubmit={handleCatAddition}>
      <input type="hidden" name="action-creator" value="add-cat" />
      <input name="name" />
      <input type="number" name="age" />
      <select name="gender">
        <option value="male">Male</option>
        <option value="female">Female</option>
      </select>

jacobp100

import cssnano from 'gulp-cssnano';
import esCssModules from 'es-css-modules';

gulp.task('compile-css', ['compile-bootstrap'], () => {
  const cssClass = cssClassGenerator();

  return gulp.src('styles/**/*.css')
    .pipe(postcss([
      esCssModules({
        jsFiles: 'src/index.js',

jacobp100

import webpack from 'webpack';

gulp.task('compile-js', ['compile-css'], (cb) => (
  webpack({
    entry: './src/index',
    output: {
      path: './dist',
      filename: 'index.js',
    },
    module: {

jacobp100

import React from 'react';
import classnames from 'classnames';
import {
  container, navbar, navbarLight, bgFaded, navbarToggler, hiddenSmUp, collapse, navbarToggleableXs,
  navbarBrand, nav, navbarNav, navItem, active, navLink, srOnly, formInline, pullXsRight, btn,
  btnSuccessOutline, formControl, jumbotron, btnLg, btnPrimary,
} from '../../styles/bootstrap.m.css';

export default () => (
  <div className={container}>

jacobp100

import esCssModules from 'es-css-modules';

gulp.task('compile-css', ['compile-bootstrap'], () => {
  return gulp.src('styles/**/*.css')
    .pipe(postcss([
      esCssModules({
        jsFiles: 'src/index.js',
      }),
    ]))
    .pipe(gulp.dest('dist'));