adilbenmoussa/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="javascript-redux-writing-a-todo-list-reducer-toggling-a-todo">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://unpkg.com/expect/umd/expect.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.6.0/redux.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/freezer-js/0.12.1/freezer.js"></script>
  <script src="https://fb.me/react-15.1.0.js"></script>
  <script src="https://fb.me/react-dom-15.1.0.js"></script>

  <title>JS Bin</title>
</head>
<body>
  <div id="root"></div>
<script id="jsbin-javascript">
// javascript-redux-writing-a-todo-list-reducer-toggling-a-todo

'use strict';

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i]; return arr2; } else { return Array.from(arr); } }

var todos = function todos(state, action) {
  if (state === undefined) state = [];

  switch (action.type) {
    case 'ADD_TODO':
      return [].concat(_toConsumableArray(state), [{
        id: action.id,
        text: action.text,
        completed: false
      }]);
    case 'TOGGLE_TODO':
      return state.map(function (todo) {
        if (todo.id !== action.id) {
          return todo;
        }
        return _extends({}, todo, {
          completed: !todo.completed
        });
        // ==> Object.assign({}, todo, {completed: !todo.completed})
      });
    default:
      return state;
  }
};

var testAddTodo = function testAddTodo() {
  var stateBefore = [];
  var action = {
    type: 'ADD_TODO',
    id: 0,
    text: 'Learn Redux'
  };

  var stateAfter = [{
    id: 0,
    text: 'Learn Redux',
    completed: false
  }];

  Object.freeze(stateBefore);
  Object.freeze(action);

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

var testToggleTodo = function testToggleTodo() {
  var stateBefore = [{
    id: 0,
    text: 'Learn Redux',
    completed: false
  }, {
    id: 1,
    text: 'Go Redux',
    completed: false
  }];

  var action = {
    type: 'TOGGLE_TODO',
    id: 1
  };

  var stateAfter = [{
    id: 0,
    text: 'Learn Redux',
    completed: false
  }, {
    id: 1,
    text: 'Go Redux',
    completed: true
  }];

  Object.freeze(stateBefore);
  Object.freeze(action);

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

testAddTodo();
testToggleTodo();

console.log('Tests Ok!');
</script>


<script id="jsbin-source-javascript" type="text/javascript">// javascript-redux-writing-a-todo-list-reducer-toggling-a-todo

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;
        }
        return  {
          ...todo,
            completed: !todo.completed
        };
        // ==> 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
    }
  ];

  Object.freeze(stateBefore);
  Object.freeze(action);

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


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

  const action = {
    type: 'TOGGLE_TODO',
    id: 1
  };

  const stateAfter = [
    {
      id: 0,
      text: 'Learn Redux',
      completed: false
    },
    {
      id: 1,
      text: 'Go Redux',
      completed: true
    }
  ];

  Object.freeze(stateBefore);
  Object.freeze(action);

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

};


testAddTodo();
testToggleTodo();

console.log('Tests Ok!')
</script></body>
</html>

## jsbin.bobitif.js
// javascript-redux-writing-a-todo-list-reducer-toggling-a-todo

'use strict';

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i]; return arr2; } else { return Array.from(arr); } }

var todos = function todos(state, action) {
  if (state === undefined) state = [];

  switch (action.type) {
    case 'ADD_TODO':
      return [].concat(_toConsumableArray(state), [{
        id: action.id,
        text: action.text,
        completed: false
      }]);
    case 'TOGGLE_TODO':
      return state.map(function (todo) {
        if (todo.id !== action.id) {
          return todo;
        }
        return _extends({}, todo, {
          completed: !todo.completed
        });
        // ==> Object.assign({}, todo, {completed: !todo.completed})
      });
    default:
      return state;
  }
};

var testAddTodo = function testAddTodo() {
  var stateBefore = [];
  var action = {
    type: 'ADD_TODO',
    id: 0,
    text: 'Learn Redux'
  };

  var stateAfter = [{
    id: 0,
    text: 'Learn Redux',
    completed: false
  }];

  Object.freeze(stateBefore);
  Object.freeze(action);

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

var testToggleTodo = function testToggleTodo() {
  var stateBefore = [{
    id: 0,
    text: 'Learn Redux',
    completed: false
  }, {
    id: 1,
    text: 'Go Redux',
    completed: false
  }];

  var action = {
    type: 'TOGGLE_TODO',
    id: 1
  };

  var stateAfter = [{
    id: 0,
    text: 'Learn Redux',
    completed: false
  }, {
    id: 1,
    text: 'Go Redux',
    completed: true
  }];

  Object.freeze(stateBefore);
  Object.freeze(action);

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

testAddTodo();
testToggleTodo();

console.log('Tests Ok!');
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="javascript-redux-writing-a-todo-list-reducer-toggling-a-todo">
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<script src="https://unpkg.com/expect/umd/expect.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.6.0/redux.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/freezer-js/0.12.1/freezer.js"></script>
	<script src="https://fb.me/react-15.1.0.js"></script>
	<script src="https://fb.me/react-dom-15.1.0.js"></script>

	<title>JS Bin</title>
	</head>
	<body>
	<div id="root"></div>
	<script id="jsbin-javascript">
	// javascript-redux-writing-a-todo-list-reducer-toggling-a-todo

	'use strict';

	var _extends = Object.assign \|\| function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

	function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i]; return arr2; } else { return Array.from(arr); } }

	var todos = function todos(state, action) {
	if (state === undefined) state = [];

	switch (action.type) {
	case 'ADD_TODO':
	return [].concat(_toConsumableArray(state), [{
	id: action.id,
	text: action.text,
	completed: false
	}]);
	case 'TOGGLE_TODO':
	return state.map(function (todo) {
	if (todo.id !== action.id) {
	return todo;
	}
	return _extends({}, todo, {
	completed: !todo.completed
	});
	// ==> Object.assign({}, todo, {completed: !todo.completed})
	});
	default:
	return state;
	}
	};

	var testAddTodo = function testAddTodo() {
	var stateBefore = [];
	var action = {
	type: 'ADD_TODO',
	id: 0,
	text: 'Learn Redux'
	};

	var stateAfter = [{
	id: 0,
	text: 'Learn Redux',
	completed: false
	}];

	Object.freeze(stateBefore);
	Object.freeze(action);

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

	var testToggleTodo = function testToggleTodo() {
	var stateBefore = [{
	id: 0,
	text: 'Learn Redux',
	completed: false
	}, {
	id: 1,
	text: 'Go Redux',
	completed: false
	}];

	var action = {
	type: 'TOGGLE_TODO',
	id: 1
	};

	var stateAfter = [{
	id: 0,
	text: 'Learn Redux',
	completed: false
	}, {
	id: 1,
	text: 'Go Redux',
	completed: true
	}];

	Object.freeze(stateBefore);
	Object.freeze(action);

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

	testAddTodo();
	testToggleTodo();

	console.log('Tests Ok!');
	</script>



	<script id="jsbin-source-javascript" type="text/javascript">// javascript-redux-writing-a-todo-list-reducer-toggling-a-todo

	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;
	}
	return {
	...todo,
	completed: !todo.completed
	};
	// ==> 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
	}
	];

	Object.freeze(stateBefore);
	Object.freeze(action);

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


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

	const action = {
	type: 'TOGGLE_TODO',
	id: 1
	};

	const stateAfter = [
	{
	id: 0,
	text: 'Learn Redux',
	completed: false
	},
	{
	id: 1,
	text: 'Go Redux',
	completed: true
	}
	];

	Object.freeze(stateBefore);
	Object.freeze(action);

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

	};


	testAddTodo();
	testToggleTodo();

	console.log('Tests Ok!')
	</script></body>
	</html>