Skip to content

Instantly share code, notes, and snippets.

@th3mon

th3mon/index.writing-a-todo-list-toggling-reducer.html

Last active October 29, 2017 01:26
Show Gist options
  • Save th3mon/beb97e8e819bf853ab26fb9fa8c6950a to your computer and use it in GitHub Desktop.
Save th3mon/beb97e8e819bf853ab26fb9fa8c6950a to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin// source http://jsbin.com/muqigog
Raw
index.writing-a-todo-list-toggling-reducer.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/expect/1.20.2/expect.min.js"></script>
<script src="https://wzrd.in/standalone/deep-freeze@latest"></script>
<script id="jsbin-javascript">
console.clear()
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.slice(0, action.id),
// {
// ...state[action.id],
// completed: !state[action.id].completed
// },
// ...state.slice(action.id + 1)
// ]
return state.map(todo => {
if (todo.id !== action.id) {
return todo;
}
return {
...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
}]
deepFreeze(stateBefore)
deepFreeze(action)
expect(
todos(stateBefore, action)
).toEqual(stateAfter)
}
const testToggleTodo = () => {
const stateBefore = [
{
id: 0,
text: 'Learn Redux',
completed: false
},
{
id: 1,
text: 'Learn ES7',
completed: false
}
]
const action = {
type: 'TOGGLE_TODO',
id: 1
}
const stateAfter = [
{
id: 0,
text: 'Learn Redux',
completed: false
},
{
id: 1,
text: 'Learn ES7',
completed: true
}
]
deepFreeze(stateBefore)
deepFreeze(action)
expect(
todos(stateBefore, action)
).toEqual(stateAfter)
}
testAddTodo()
testToggleTodo()
console.log('All test passed.')
</script>
<script id="jsbin-source-javascript" type="text/javascript">console.clear()
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.slice(0, action.id),
// {
// ...state[action.id],
// completed: !state[action.id].completed
// },
// ...state.slice(action.id + 1)
// ]
return state.map(todo => {
if (todo.id !== action.id) {
return todo;
}
return {
...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
}]
deepFreeze(stateBefore)
deepFreeze(action)
expect(
todos(stateBefore, action)
).toEqual(stateAfter)
}
const testToggleTodo = () => {
const stateBefore = [
{
id: 0,
text: 'Learn Redux',
completed: false
},
{
id: 1,
text: 'Learn ES7',
completed: false
}
]
const action = {
type: 'TOGGLE_TODO',
id: 1
}
const stateAfter = [
{
id: 0,
text: 'Learn Redux',
completed: false
},
{
id: 1,
text: 'Learn ES7',
completed: true
}
]
deepFreeze(stateBefore)
deepFreeze(action)
expect(
todos(stateBefore, action)
).toEqual(stateAfter)
}
testAddTodo()
testToggleTodo()
console.log('All test passed.')</script></body>
</html>
Raw
jsbin.muqigog.writing-a-todo-list-toggling-reducer.js
console.clear()
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.slice(0, action.id),
// {
// ...state[action.id],
// completed: !state[action.id].completed
// },
// ...state.slice(action.id + 1)
// ]
return state.map(todo => {
if (todo.id !== action.id) {
return todo;
}
return {
...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
}]
deepFreeze(stateBefore)
deepFreeze(action)
expect(
todos(stateBefore, action)
).toEqual(stateAfter)
}
const testToggleTodo = () => {
const stateBefore = [
{
id: 0,
text: 'Learn Redux',
completed: false
},
{
id: 1,
text: 'Learn ES7',
completed: false
}
]
const action = {
type: 'TOGGLE_TODO',
id: 1
}
const stateAfter = [
{
id: 0,
text: 'Learn Redux',
completed: false
},
{
id: 1,
text: 'Learn ES7',
completed: true
}
]
deepFreeze(stateBefore)
deepFreeze(action)
expect(
todos(stateBefore, action)
).toEqual(stateAfter)
}
testAddTodo()
testToggleTodo()
console.log('All test passed.')
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment