Workshop Base Fiddle

by liormb

HTML

<script src="https://npmcdn.com/redux/dist/redux.js"></script>
<script src="https://npmcdn.com/react-redux/dist/react-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/react-dom/dist/react-dom.js"></script>
<script src="https://npmcdn.com/react/dist/react.js"></script>
<div id="root"></div>

Babel + JSX

/* Write a todo list reducer
 * ADD_TODO adds a todo with `id`, `text`, and `completed`
 * TOGGLE_TODO toggles a todo's `completed` field
 * Don't mutate the state!
 * Use tests to verify.
 */

const todos = (state = [], action) => {
	switch (action.type) {
	  case 'ADD_TODO':
			return [
			  ...state,
			  {
				  id: action.id,
					text: action.text,
					completed: false
				}
			];
		case 'TOGGLE_TODO':
			// {
			//   type: 'TOGGLE_TODO',
			//   id: someId
			// }
		 return state.map(todo => {
		   if (todo.id !== action.id) {
			   return todo;
			 }
			 
			 return {
			   ...todo,
				 completed: !todo.completed
			 };
		 });
	  default:
		  return state;
	}
};


/* Tests */
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.');