Workshop Base Fiddle

by liormb

HTML

<script src="https://npmcdn.com/redux/dist/redux.js"></script>
<script src="https://npmcdn.com/expect/umd/expect.js"></script>
<script src="https://wzrd.in/standalone/deep-freeze@latest"></script>
<script src="https://npmcdn.com/[email protected]/dist/react.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/react-dom.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/react-redux.js"></script>
<div id="root"></div>

Babel + JSX

/**
 * Split the `todo` reducer out of the `todos` reducer.
 *
 * The `todo` reducer would contain the logic for how an individual todo
 * is added and updated, and the `todos` reducer would contain the logic
 * for adding and mapping items in the array.
 *
 * Make sure the tests still pass after the refactoring.
 */
 
 const todo = (state, action) => {
 	switch (action.type) {
		case 'ADD_TODO':
			return {
				id: action.id,
        text: action.text,
        completed: false
			};
		case 'TOGGLE_TODO':
			if (state.id !== action.id) {
          return state;
        }
      return {
        ...state,
        completed: !state.completed
      };
		default:
			return state;
	}
 };

const todos = (state = [], action) => {
  switch (action.type) {
    case 'ADD_TODO':
			return [
				...state,
				todo(undefined, action)
			];
    case 'TOGGLE_TODO':
      return state.map(t => todo(t, action));
    default:
      return state;
  }
};

const testAddTodo = () => {
  const stateBefore = [];
  const action = {
    type: 'ADD_TODO',
    id: 0,
    text: 'Learn Redux'
  };
  const stateAfter = [
    {
      id: 0,
      text: 'Learn Redux',
      completed: false
    }
  ];

  deepFreeze(stateBefore);
  deepFreeze(action);

  expect(
    todos(stateBefore, action)
  ).toEqual(stateAfter);
};

const testToggleTodo = () => {
  const stateBefore = [
    {
      id: 0,
      text: 'Learn Redux',
      completed: false
    },
    {
      id: 1,
      text: 'Go shopping',
      completed: false
    }
  ];
  const action = {
    type: 'TOGGLE_TODO',
    id: 1
  };
  const stateAfter = [
    {
      id: 0,
      text: 'Learn Redux',
      completed: false
    },
    {
      id: 1,
      text: 'Go shopping',
      completed: true
    }
  ];

  deepFreeze(stateBefore);
  deepFreeze(action);

  expect(
    todos(stateBefore, action)
  ).toEqual(stateAfter);
};


testAddTodo();
testToggleTodo();
console.log('All tests passed.');