TODO App wtih React (Simple)

TODO app using Redux

by Pratik Bhattachary

HTML

<!DOCTYPE html>
<html>
  <meta name="description" content="TODO App using Redux">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>TODO Redux</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.0/redux.js" type="text/javascript"></script>
  <script src="https://fb.me/react-0.14.3.js"></script>
  <script src="https://fb.me/react-dom-0.14.3.js"></script>
  <script src="https://unpkg.com/expect@%3C21/umd/expect.min.js"></script>

  <body>
    <div id="root"></div>

  </body>

</html>

Babel + JSX

const todos = (state = [], action) => {
	switch(action.type) {
		case 'ADD_TODO': 
			return [
				...state,
				{
					id: action.id,
					text: action.text,
					completed: false
				}
			];
		case 'TOGGLE_TODO': {
			return state.map(todo => {
				if (todo.id !== action.id) {
					return todo;
				} else {
					return Object.assign({}, todo, { completed: !todo.completed })
				}
			});
		}
		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
	 }
	];
	
	expect(
		todos(stateBefore, action)
	).toEqual(stateAfter);
}

const testToggleTodo = () => {
	const stateBefore = [
		{
			id: 0,
			text: 'Learn react',
			completed: true
		},
		{
			id: 1,
			text: 'Learn redux',
			completed: false
		}
	];
	const stateAfter = [
		{
			id: 0,
			text: 'Learn react',
			completed: true
		},
		{
			id: 1,
			text: 'Learn redux',
			completed: true
		}
	];
	const action = {
		type: "TOGGLE_TODO",
		id: 1
	};
	
	expect(
		todos(stateBefore, action)
	).toEqual(stateAfter);
}

testAddTodo();
console.log('Test Passed');