Created
March 29, 2018 18:41
-
-
Save aksswami/bad269a4557cb463f1e1105ca43a1611 to your computer and use it in GitHub Desktop.
JS Bin [TODO Refactor done] // source https://jsbin.com/jarugew
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta name="description" content="[TODO Refactor done]"> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width"> | |
<title>JS Bin</title> | |
<script src="https://fb.me/react-15.1.0.js"></script> | |
<script src="https://fb.me/react-dom-15.1.0.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.7.2/redux.min.js"> </script> | |
</head> | |
<body> | |
<div id='root'></div> | |
<script id="jsbin-javascript"> | |
'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 todo = function 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 _extends({}, state, { | |
completed: !state.completed | |
}); | |
default: | |
return state; | |
}; | |
}; | |
var todos = function todos(state, action) { | |
if (state === undefined) state = []; | |
switch (action.type) { | |
case 'ADD_TODO': | |
return [].concat(_toConsumableArray(state), [todo(undefined, action)]); | |
case 'TOGGLE_TODO': | |
return state.map(function (t) { | |
return todo(t, action); | |
}); | |
default: | |
return state; | |
}; | |
}; | |
var visibilityFilter = function visibilityFilter(state, action) { | |
if (state === undefined) state = 'SHOW_ALL'; | |
switch (action.type) { | |
case 'SET_VISIBILITY_FILTER': | |
return action.filter; | |
default: | |
return state; | |
}; | |
}; | |
var combineReducers = function combineReducers(reducers) { | |
return function (state, action) { | |
if (state === undefined) state = {}; | |
return Object.keys(reducers).reduce(function (nextState, key) { | |
nextState[key] = reducers[key](state[key], action); | |
return nextState; | |
}, {}); | |
}; | |
}; | |
var todoApp = combineReducers({ | |
todos: todos, | |
visibilityFilter: visibilityFilter | |
}); | |
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 | |
}]; | |
expect(todos(stateBefore, action)).toEqual(stateAfter); | |
}; | |
var testToggleTodo = function testToggleTodo() { | |
var stateBefore = [{ | |
id: 0, | |
text: 'Learn Redux', | |
completed: false | |
}, { | |
id: 1, | |
text: 'Go shopping', | |
completed: false | |
}]; | |
var action = { | |
type: 'TOGGLE_TODO', | |
id: 1 | |
}; | |
var stateAfter = [{ | |
id: 0, | |
text: 'Learn Redux', | |
completed: false | |
}, { | |
id: 1, | |
text: 'Go shopping', | |
completed: true | |
}]; | |
expect(todos(stateBefore, action)).toEqual(stateAfter); | |
}; | |
var _React = React; | |
var Component = _React.Component; | |
var _Redux = Redux; | |
var createStore = _Redux.createStore; | |
var store = createStore(todoApp); | |
var FilterLink = function FilterLink(_ref) { | |
var filter = _ref.filter; | |
var currentFilter = _ref.currentFilter; | |
var children = _ref.children; | |
var onClick = _ref.onClick; | |
if (filter == currentFilter) { | |
return React.createElement( | |
'span', | |
null, | |
children | |
); | |
} | |
return React.createElement( | |
'a', | |
{ href: '#', | |
onClick: function (e) { | |
e.preventDefault(); | |
onClick(filter); | |
} | |
}, | |
children | |
); | |
}; | |
var Todo = function Todo(_ref2) { | |
var onClick = _ref2.onClick; | |
var completed = _ref2.completed; | |
var text = _ref2.text; | |
return React.createElement( | |
'li', | |
{ | |
onClick: onClick, | |
style: { | |
textDecoration: completed ? 'line-through' : 'none' | |
} }, | |
text | |
); | |
}; | |
var TodoList = function TodoList(_ref3) { | |
var todos = _ref3.todos; | |
var onTodoClick = _ref3.onTodoClick; | |
return React.createElement( | |
'ul', | |
null, | |
todos.map(function (todo) { | |
return React.createElement(Todo, _extends({ | |
key: todo.id | |
}, todo, { | |
onClick: function () { | |
return onTodoClick(todo.id); | |
} | |
})); | |
}) | |
); | |
}; | |
var AddTodo = function AddTodo(_ref4) { | |
var onAddClick = _ref4.onAddClick; | |
var input = undefined; | |
return React.createElement( | |
'div', | |
null, | |
React.createElement('input', { ref: function (node) { | |
input = node; | |
} }), | |
React.createElement( | |
'button', | |
{ onClick: function () { | |
onAddClick(input.value); | |
input.value = ''; | |
} }, | |
'Add Todo' | |
) | |
); | |
}; | |
var Footer = function Footer(_ref5) { | |
var visibilityFilter = _ref5.visibilityFilter; | |
var onFilterClick = _ref5.onFilterClick; | |
return React.createElement( | |
'p', | |
null, | |
'Show:', | |
'\n', | |
React.createElement( | |
FilterLink, | |
{ | |
filter: 'SHOW_ALL', | |
currentFilter: visibilityFilter, | |
onClick: onFilterClick | |
}, | |
'All' | |
), | |
', ', | |
React.createElement( | |
FilterLink, | |
{ | |
filter: 'SHOW_ACTIVE', | |
currentFilter: visibilityFilter, | |
onClick: onFilterClick | |
}, | |
'Active' | |
), | |
', ', | |
React.createElement( | |
FilterLink, | |
{ | |
filter: 'SHOW_COMPLETED', | |
currentFilter: visibilityFilter, | |
onClick: onFilterClick | |
}, | |
'Completed' | |
) | |
); | |
}; | |
var getVisibleTodos = function getVisibleTodos(todos, filter) { | |
switch (filter) { | |
case 'SHOW_ALL': | |
return todos; | |
case 'SHOW_COMPLETED': | |
return todos.filter(function (t) { | |
return t.completed; | |
}); | |
case 'SHOW_ACTIVE': | |
return todos.filter(function (t) { | |
return !t.completed; | |
}); | |
} | |
}; | |
var nextTodoId = 0; | |
var TodoApp = function TodoApp(_ref6) { | |
var todos = _ref6.todos; | |
var visibilityFilter = _ref6.visibilityFilter; | |
return React.createElement( | |
'div', | |
null, | |
React.createElement(AddTodo, { | |
onAddClick: function (text) { | |
return store.dispatch({ | |
type: 'ADD_TODO', | |
id: nextTodoId++, | |
text: text | |
}); | |
} }), | |
React.createElement(TodoList, { | |
todos: getVisibleTodos(todos, visibilityFilter), | |
onTodoClick: function (id) { | |
return store.dispatch({ | |
type: 'TOGGLE_TODO', | |
id: id | |
}); | |
} }), | |
React.createElement(Footer, { | |
visibilityFilter: visibilityFilter, | |
onFilterClick: function (filter) { | |
return store.dispatch({ | |
type: 'SET_VISIBILITY_FILTER', | |
filter: filter | |
}); | |
} }) | |
); | |
}; | |
var render = function render() { | |
ReactDOM.render(React.createElement(TodoApp, store.getState()), document.getElementById('root')); | |
}; | |
store.subscribe(render); | |
render(); | |
</script> | |
<script id="jsbin-source-javascript" type="text/javascript">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 visibilityFilter = ( | |
state = 'SHOW_ALL', | |
action | |
) => { | |
switch (action.type) { | |
case 'SET_VISIBILITY_FILTER': | |
return action.filter; | |
default: | |
return state; | |
}; | |
}; | |
const combineReducers = (reducers) => { | |
return (state = {}, action) => { | |
return Object.keys(reducers).reduce( | |
(nextState, key) => { | |
nextState[key] = reducers[key]( | |
state[key], | |
action | |
); | |
return nextState; | |
}, | |
{} | |
); | |
}; | |
}; | |
const todoApp = combineReducers({ | |
todos, | |
visibilityFilter | |
}) | |
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 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 | |
} | |
]; | |
expect( | |
todos(stateBefore, action) | |
).toEqual(stateAfter); | |
}; | |
const { Component } = React; | |
const { createStore } = Redux; | |
const store = createStore(todoApp); | |
const FilterLink = ({ | |
filter, | |
currentFilter, | |
children, | |
onClick | |
}) => { | |
if (filter == currentFilter) { | |
return <span>{children}</span> | |
} | |
return ( | |
<a href='#' | |
onClick={e => { | |
e.preventDefault(); | |
onClick(filter); | |
}} | |
> | |
{children} | |
</a> | |
); | |
}; | |
const Todo = ({ | |
onClick, | |
completed, | |
text | |
}) => ( | |
<li | |
onClick={onClick} | |
style={{ | |
textDecoration: completed? 'line-through' : 'none' | |
}}> | |
{text} | |
</li> | |
); | |
const TodoList = ({ | |
todos, | |
onTodoClick | |
}) => ( | |
<ul> | |
{todos.map(todo => | |
<Todo | |
key={todo.id} | |
{...todo} | |
onClick={() => onTodoClick(todo.id)} | |
/> | |
)} | |
</ul> | |
); | |
const AddTodo = ({ | |
onAddClick | |
}) => { | |
let input; | |
return ( | |
<div> | |
<input ref={node => { | |
input = node; | |
}} /> | |
<button onClick={() => { | |
onAddClick(input.value); | |
input.value = ''; | |
}}> | |
Add Todo | |
</button> | |
</div> | |
) | |
} | |
const Footer = ({ | |
visibilityFilter, | |
onFilterClick | |
}) => { | |
return ( | |
<p> | |
Show: | |
{'\n'} | |
<FilterLink | |
filter='SHOW_ALL' | |
currentFilter={visibilityFilter} | |
onClick={onFilterClick} | |
> | |
All | |
</FilterLink> | |
{', '} | |
<FilterLink | |
filter='SHOW_ACTIVE' | |
currentFilter={visibilityFilter} | |
onClick={onFilterClick} | |
> | |
Active | |
</FilterLink> | |
{', '} | |
<FilterLink | |
filter='SHOW_COMPLETED' | |
currentFilter={visibilityFilter} | |
onClick={onFilterClick} | |
> | |
Completed | |
</FilterLink> | |
</p> | |
); | |
} | |
const getVisibleTodos = ( | |
todos, | |
filter | |
) => { | |
switch (filter) { | |
case 'SHOW_ALL': | |
return todos; | |
case 'SHOW_COMPLETED': | |
return todos.filter(t => t.completed); | |
case 'SHOW_ACTIVE': | |
return todos.filter(t => !t.completed); | |
} | |
} | |
let nextTodoId = 0; | |
const TodoApp = ({ | |
todos, | |
visibilityFilter | |
}) => ( | |
<div> | |
<AddTodo | |
onAddClick={text => | |
store.dispatch({ | |
type: 'ADD_TODO', | |
id: nextTodoId++, | |
text | |
}) | |
} /> | |
<TodoList | |
todos={getVisibleTodos( | |
todos, | |
visibilityFilter | |
)} | |
onTodoClick={id => | |
store.dispatch({ | |
type: 'TOGGLE_TODO', | |
id | |
}) | |
} /> | |
<Footer | |
visibilityFilter={visibilityFilter} | |
onFilterClick={filter => | |
store.dispatch({ | |
type: 'SET_VISIBILITY_FILTER', | |
filter | |
}) | |
} /> | |
</div> | |
); | |
const render = () => { | |
ReactDOM.render( | |
<TodoApp | |
{...store.getState()} | |
/>, | |
document.getElementById('root') | |
); | |
}; | |
store.subscribe(render); | |
render();</script></body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'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 todo = function 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 _extends({}, state, { | |
completed: !state.completed | |
}); | |
default: | |
return state; | |
}; | |
}; | |
var todos = function todos(state, action) { | |
if (state === undefined) state = []; | |
switch (action.type) { | |
case 'ADD_TODO': | |
return [].concat(_toConsumableArray(state), [todo(undefined, action)]); | |
case 'TOGGLE_TODO': | |
return state.map(function (t) { | |
return todo(t, action); | |
}); | |
default: | |
return state; | |
}; | |
}; | |
var visibilityFilter = function visibilityFilter(state, action) { | |
if (state === undefined) state = 'SHOW_ALL'; | |
switch (action.type) { | |
case 'SET_VISIBILITY_FILTER': | |
return action.filter; | |
default: | |
return state; | |
}; | |
}; | |
var combineReducers = function combineReducers(reducers) { | |
return function (state, action) { | |
if (state === undefined) state = {}; | |
return Object.keys(reducers).reduce(function (nextState, key) { | |
nextState[key] = reducers[key](state[key], action); | |
return nextState; | |
}, {}); | |
}; | |
}; | |
var todoApp = combineReducers({ | |
todos: todos, | |
visibilityFilter: visibilityFilter | |
}); | |
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 | |
}]; | |
expect(todos(stateBefore, action)).toEqual(stateAfter); | |
}; | |
var testToggleTodo = function testToggleTodo() { | |
var stateBefore = [{ | |
id: 0, | |
text: 'Learn Redux', | |
completed: false | |
}, { | |
id: 1, | |
text: 'Go shopping', | |
completed: false | |
}]; | |
var action = { | |
type: 'TOGGLE_TODO', | |
id: 1 | |
}; | |
var stateAfter = [{ | |
id: 0, | |
text: 'Learn Redux', | |
completed: false | |
}, { | |
id: 1, | |
text: 'Go shopping', | |
completed: true | |
}]; | |
expect(todos(stateBefore, action)).toEqual(stateAfter); | |
}; | |
var _React = React; | |
var Component = _React.Component; | |
var _Redux = Redux; | |
var createStore = _Redux.createStore; | |
var store = createStore(todoApp); | |
var FilterLink = function FilterLink(_ref) { | |
var filter = _ref.filter; | |
var currentFilter = _ref.currentFilter; | |
var children = _ref.children; | |
var onClick = _ref.onClick; | |
if (filter == currentFilter) { | |
return React.createElement( | |
'span', | |
null, | |
children | |
); | |
} | |
return React.createElement( | |
'a', | |
{ href: '#', | |
onClick: function (e) { | |
e.preventDefault(); | |
onClick(filter); | |
} | |
}, | |
children | |
); | |
}; | |
var Todo = function Todo(_ref2) { | |
var onClick = _ref2.onClick; | |
var completed = _ref2.completed; | |
var text = _ref2.text; | |
return React.createElement( | |
'li', | |
{ | |
onClick: onClick, | |
style: { | |
textDecoration: completed ? 'line-through' : 'none' | |
} }, | |
text | |
); | |
}; | |
var TodoList = function TodoList(_ref3) { | |
var todos = _ref3.todos; | |
var onTodoClick = _ref3.onTodoClick; | |
return React.createElement( | |
'ul', | |
null, | |
todos.map(function (todo) { | |
return React.createElement(Todo, _extends({ | |
key: todo.id | |
}, todo, { | |
onClick: function () { | |
return onTodoClick(todo.id); | |
} | |
})); | |
}) | |
); | |
}; | |
var AddTodo = function AddTodo(_ref4) { | |
var onAddClick = _ref4.onAddClick; | |
var input = undefined; | |
return React.createElement( | |
'div', | |
null, | |
React.createElement('input', { ref: function (node) { | |
input = node; | |
} }), | |
React.createElement( | |
'button', | |
{ onClick: function () { | |
onAddClick(input.value); | |
input.value = ''; | |
} }, | |
'Add Todo' | |
) | |
); | |
}; | |
var Footer = function Footer(_ref5) { | |
var visibilityFilter = _ref5.visibilityFilter; | |
var onFilterClick = _ref5.onFilterClick; | |
return React.createElement( | |
'p', | |
null, | |
'Show:', | |
'\n', | |
React.createElement( | |
FilterLink, | |
{ | |
filter: 'SHOW_ALL', | |
currentFilter: visibilityFilter, | |
onClick: onFilterClick | |
}, | |
'All' | |
), | |
', ', | |
React.createElement( | |
FilterLink, | |
{ | |
filter: 'SHOW_ACTIVE', | |
currentFilter: visibilityFilter, | |
onClick: onFilterClick | |
}, | |
'Active' | |
), | |
', ', | |
React.createElement( | |
FilterLink, | |
{ | |
filter: 'SHOW_COMPLETED', | |
currentFilter: visibilityFilter, | |
onClick: onFilterClick | |
}, | |
'Completed' | |
) | |
); | |
}; | |
var getVisibleTodos = function getVisibleTodos(todos, filter) { | |
switch (filter) { | |
case 'SHOW_ALL': | |
return todos; | |
case 'SHOW_COMPLETED': | |
return todos.filter(function (t) { | |
return t.completed; | |
}); | |
case 'SHOW_ACTIVE': | |
return todos.filter(function (t) { | |
return !t.completed; | |
}); | |
} | |
}; | |
var nextTodoId = 0; | |
var TodoApp = function TodoApp(_ref6) { | |
var todos = _ref6.todos; | |
var visibilityFilter = _ref6.visibilityFilter; | |
return React.createElement( | |
'div', | |
null, | |
React.createElement(AddTodo, { | |
onAddClick: function (text) { | |
return store.dispatch({ | |
type: 'ADD_TODO', | |
id: nextTodoId++, | |
text: text | |
}); | |
} }), | |
React.createElement(TodoList, { | |
todos: getVisibleTodos(todos, visibilityFilter), | |
onTodoClick: function (id) { | |
return store.dispatch({ | |
type: 'TOGGLE_TODO', | |
id: id | |
}); | |
} }), | |
React.createElement(Footer, { | |
visibilityFilter: visibilityFilter, | |
onFilterClick: function (filter) { | |
return store.dispatch({ | |
type: 'SET_VISIBILITY_FILTER', | |
filter: filter | |
}); | |
} }) | |
); | |
}; | |
var render = function render() { | |
ReactDOM.render(React.createElement(TodoApp, store.getState()), document.getElementById('root')); | |
}; | |
store.subscribe(render); | |
render(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment