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

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

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

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

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

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

jacobp100

// SETUP STORE
server.all('*', (req, res, next) => {
  req.store = createStore(reducers, middlewares);
  next();
});

// FORM HANDLERS
server.post('*', async (req, res, next) => {
  try {
    const actionParams = req.body;

jacobp100

const Cat = ({ cat, handleCatUpdateDelete }) => (
  <div>
    <h1>{cat.name}</h1>
    <form method="POST">
      <input type="hidden" name="action-creator" value="update-remove-cat" />
      <input type="hidden" name="id" value={cat.id} />
      <input name="name" defaultValue={cat.name} />
      <inputtype="number" name="age" defaultValue={cat.age} />
      <select name="gender" defaultValue={cat.gender}>
        <option value="male">Male</option>

jacobp100

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

export const formDispatcher = dispatch => event => {
  event.preventDefault();
  
  const { currentTarget } = event;
  const isChild = 'form' in currentTarget;
  const form = isChild ? currentTarget.form : currentTarget;

jacobp100

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

  return await action === 'remove'
    ? dispatch(removeCat(id))
    : dispatch(updateCat(id, params));

jacobp100

class Cats extends Component {
  static fetchData({ dispatch }) {
    return dispatch(getCats());
  }

  componentDidMount() {
    Cats.fetchData(this.props);
  }

  render() {