Created
March 18, 2017 14:38
-
-
Save yashikagarg13/61426d5d906bb1f4420137980decf07a to your computer and use it in GitHub Desktop.
TODO App using Redux - source https://jsbin.com/keqexaj
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 charset="utf-8"> | |
<meta name="viewport" content="width=device-width"> | |
<title>JS Bin</title> | |
<script src="https://unpkg.com/react@15/dist/react.js"></script> | |
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script> | |
<script src="https://wzrd.in/standalone/deep-freeze@latest"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.6.0/redux.js"></script> | |
</head> | |
<body> | |
<div id="app"></div> | |
<script id="jsbin-javascript"> | |
"use strict"; | |
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); | |
var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } }; | |
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); } } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
var todoReducer = function todoReducer(state, action) { | |
if (state === undefined) state = {}; | |
switch (action.type) { | |
case "ADD_TODO": | |
return _extends({}, action.todo, { completed: false }); | |
case "TOGGLE_TODO": | |
if (state.id !== action.id) { | |
return state; | |
} | |
return _extends({}, state, { | |
completed: !state.completed | |
}); | |
default: | |
return state; | |
} | |
}; | |
var todosReducer = function todosReducer(state, action) { | |
if (state === undefined) state = []; | |
switch (action.type) { | |
case "ADD_TODO": | |
return [].concat(_toConsumableArray(state), [todoReducer(undefined, action)]); | |
case "TOGGLE_TODO": | |
return state.map(function (todo) { | |
return todoReducer(todo, action); | |
}); | |
default: | |
return state; | |
} | |
}; | |
var visbilityFilterReducer = function visbilityFilterReducer(state, action) { | |
if (state === undefined) state = "SHOW_ALL"; | |
switch (action.type) { | |
case "SET_VISIBILITY_FILTER": | |
return action.filter; | |
default: | |
return state; | |
} | |
}; | |
var _Redux = Redux; | |
var combineReducers = _Redux.combineReducers; | |
var todoAppReducer = combineReducers({ | |
todos: todosReducer, | |
visbilityFilter: visbilityFilterReducer | |
}); | |
var _Redux2 = Redux; | |
var createStore = _Redux2.createStore; | |
var store = createStore(todoAppReducer); | |
var _React = React; | |
var Component = _React.Component; | |
var FilterLink = function FilterLink(_ref) { | |
var filter = _ref.filter; | |
var currentFilter = _ref.currentFilter; | |
var children = _ref.children; | |
return filter === currentFilter ? React.createElement( | |
"span", | |
null, | |
children | |
) : React.createElement( | |
"a", | |
{ href: "#", | |
onClick: function (e) { | |
e.preventDefault(); | |
store.dispatch({ | |
type: "SET_VISIBILITY_FILTER", | |
filter: filter | |
}); | |
} }, | |
children | |
); | |
}; | |
var getVisibleTodos = function getVisibleTodos(todos, filter) { | |
switch (filter) { | |
case "SHOW_ALL": | |
return todos; | |
case "SHOW_ACTIVE": | |
return todos.filter(function (t) { | |
return !t.completed; | |
}); | |
case "SHOW_COMPLETED": | |
return todos.filter(function (t) { | |
return t.completed; | |
}); | |
default: | |
return todos; | |
} | |
}; | |
var nextTodoId = 0; | |
var TodoApp = (function (_Component) { | |
_inherits(TodoApp, _Component); | |
function TodoApp() { | |
_classCallCheck(this, TodoApp); | |
_get(Object.getPrototypeOf(TodoApp.prototype), "constructor", this).apply(this, arguments); | |
} | |
_createClass(TodoApp, [{ | |
key: "addTodo", | |
value: function addTodo() { | |
this.props.addTodo(this.input.value); | |
this.input.value = ""; | |
} | |
}, { | |
key: "render", | |
value: function render() { | |
var _this = this; | |
var _props = this.props; | |
var todos = _props.todos; | |
var visbilityFilter = _props.visbilityFilter; | |
var completedStyle = { | |
textDecoration: "line-through" | |
}; | |
var visibleTodos = getVisibleTodos(todos, visbilityFilter); | |
return React.createElement( | |
"div", | |
null, | |
React.createElement("input", { type: "text", ref: function (node) { | |
_this.input = node; | |
} }), | |
React.createElement( | |
"button", | |
{ type: "button", | |
onClick: this.addTodo.bind(this) }, | |
"Submit" | |
), | |
React.createElement( | |
"ul", | |
null, | |
visibleTodos.map(function (todo) { | |
return React.createElement( | |
"li", | |
{ onClick: _this.props.toggleTodo.bind(null, todo.id), | |
key: todo.id, | |
style: todo.completed ? completedStyle : null }, | |
todo.text | |
); | |
}) | |
), | |
React.createElement( | |
"p", | |
null, | |
"Show: ", | |
React.createElement( | |
FilterLink, | |
{ filter: "SHOW_ALL", currentFilter: visbilityFilter }, | |
"All" | |
), | |
" ", | |
React.createElement( | |
FilterLink, | |
{ filter: "SHOW_ACTIVE", currentFilter: visbilityFilter }, | |
"Active" | |
), | |
" ", | |
React.createElement( | |
FilterLink, | |
{ filter: "SHOW_COMPLETED", currentFilter: visbilityFilter }, | |
"Completed" | |
) | |
) | |
); | |
} | |
}]); | |
return TodoApp; | |
})(Component); | |
var dispatchAddTodo = function dispatchAddTodo(todoText) { | |
store.dispatch({ type: "ADD_TODO", todo: { text: todoText, id: ++nextTodoId } }); | |
}; | |
var dispatchToggleTodo = function dispatchToggleTodo(id) { | |
store.dispatch({ type: "TOGGLE_TODO", id: id }); | |
}; | |
var render = function render() { | |
var props = _extends({ | |
addTodo: dispatchAddTodo | |
}, store.getState(), { | |
toggleTodo: dispatchToggleTodo | |
}); | |
ReactDOM.render(React.createElement(TodoApp, props), document.getElementById("app")); | |
}; | |
render(); | |
store.subscribe(render); | |
</script> | |
<script id="jsbin-source-javascript" type="text/javascript">const todoReducer = (state = {}, action) => { | |
switch(action.type) { | |
case "ADD_TODO": | |
return {...action.todo, completed: false}; | |
case "TOGGLE_TODO": | |
if (state.id !== action.id) { | |
return state; | |
} | |
return { | |
...state, | |
completed: !state.completed | |
} | |
default: | |
return state; | |
} | |
} | |
const todosReducer = (state = [], action) => { | |
switch(action.type) { | |
case "ADD_TODO": | |
return [...state, todoReducer(undefined, action)]; | |
case "TOGGLE_TODO": | |
return state.map(todo => todoReducer(todo, action)); | |
default: | |
return state; | |
} | |
} | |
const visbilityFilterReducer = (state = "SHOW_ALL", action) => { | |
switch(action.type) { | |
case "SET_VISIBILITY_FILTER": | |
return action.filter; | |
default: | |
return state; | |
} | |
} | |
const {combineReducers} = Redux; | |
const todoAppReducer = combineReducers({ | |
todos: todosReducer, | |
visbilityFilter: visbilityFilterReducer, | |
}); | |
const {createStore} = Redux; | |
const store = createStore(todoAppReducer); | |
const {Component} = React | |
const FilterLink = ({ | |
filter, | |
currentFilter, | |
children | |
}) => { | |
return filter === currentFilter | |
? <span>{children}</span> | |
: <a href= "#" | |
onClick={e => { | |
e.preventDefault(); | |
store.dispatch({ | |
type: "SET_VISIBILITY_FILTER", | |
filter | |
}) | |
} | |
}> | |
{children} | |
</a> | |
}; | |
const getVisibleTodos = (todos, filter) => { | |
switch(filter) { | |
case "SHOW_ALL": | |
return todos; | |
case "SHOW_ACTIVE": | |
return todos.filter(t => !t.completed); | |
case "SHOW_COMPLETED": | |
return todos.filter(t => t.completed); | |
default: | |
return todos; | |
} | |
} | |
let nextTodoId = 0; | |
class TodoApp extends Component { | |
addTodo () { | |
this.props.addTodo(this.input.value); | |
this.input.value = ""; | |
} | |
render() { | |
const {todos, visbilityFilter} = this.props; | |
const completedStyle = { | |
textDecoration: "line-through", | |
}; | |
const visibleTodos = getVisibleTodos(todos, visbilityFilter); | |
return ( | |
<div> | |
<input type="text" ref={node => {this.input = node;}} /> | |
<button type="button" | |
onClick={this.addTodo.bind(this)}>Submit</button> | |
<ul> | |
{visibleTodos.map(todo => ( | |
<li onClick={this.props.toggleTodo.bind(null, todo.id)} | |
key={todo.id} | |
style={todo.completed ? completedStyle : null }> | |
{todo.text}</li>) | |
)} | |
</ul> | |
<p>Show: | |
<FilterLink filter="SHOW_ALL" currentFilter={visbilityFilter}> | |
All</FilterLink> | |
<FilterLink filter="SHOW_ACTIVE" currentFilter={visbilityFilter}> | |
Active</FilterLink> | |
<FilterLink filter="SHOW_COMPLETED" currentFilter={visbilityFilter}> | |
Completed</FilterLink> | |
</p> | |
</div> | |
); | |
} | |
} | |
const dispatchAddTodo = (todoText) => { | |
store.dispatch({type: "ADD_TODO", todo: {text: todoText, id: ++nextTodoId}}); | |
} | |
const dispatchToggleTodo = (id) => { | |
store.dispatch({type: "TOGGLE_TODO", id}); | |
} | |
const render = () => { | |
const props = { | |
addTodo: dispatchAddTodo, | |
...store.getState(), | |
toggleTodo: dispatchToggleTodo | |
}; | |
ReactDOM.render(<TodoApp {...props} />, document.getElementById("app")); | |
} | |
render(); | |
store.subscribe(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 _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); | |
var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } }; | |
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); } } | |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
var todoReducer = function todoReducer(state, action) { | |
if (state === undefined) state = {}; | |
switch (action.type) { | |
case "ADD_TODO": | |
return _extends({}, action.todo, { completed: false }); | |
case "TOGGLE_TODO": | |
if (state.id !== action.id) { | |
return state; | |
} | |
return _extends({}, state, { | |
completed: !state.completed | |
}); | |
default: | |
return state; | |
} | |
}; | |
var todosReducer = function todosReducer(state, action) { | |
if (state === undefined) state = []; | |
switch (action.type) { | |
case "ADD_TODO": | |
return [].concat(_toConsumableArray(state), [todoReducer(undefined, action)]); | |
case "TOGGLE_TODO": | |
return state.map(function (todo) { | |
return todoReducer(todo, action); | |
}); | |
default: | |
return state; | |
} | |
}; | |
var visbilityFilterReducer = function visbilityFilterReducer(state, action) { | |
if (state === undefined) state = "SHOW_ALL"; | |
switch (action.type) { | |
case "SET_VISIBILITY_FILTER": | |
return action.filter; | |
default: | |
return state; | |
} | |
}; | |
var _Redux = Redux; | |
var combineReducers = _Redux.combineReducers; | |
var todoAppReducer = combineReducers({ | |
todos: todosReducer, | |
visbilityFilter: visbilityFilterReducer | |
}); | |
var _Redux2 = Redux; | |
var createStore = _Redux2.createStore; | |
var store = createStore(todoAppReducer); | |
var _React = React; | |
var Component = _React.Component; | |
var FilterLink = function FilterLink(_ref) { | |
var filter = _ref.filter; | |
var currentFilter = _ref.currentFilter; | |
var children = _ref.children; | |
return filter === currentFilter ? React.createElement( | |
"span", | |
null, | |
children | |
) : React.createElement( | |
"a", | |
{ href: "#", | |
onClick: function (e) { | |
e.preventDefault(); | |
store.dispatch({ | |
type: "SET_VISIBILITY_FILTER", | |
filter: filter | |
}); | |
} }, | |
children | |
); | |
}; | |
var getVisibleTodos = function getVisibleTodos(todos, filter) { | |
switch (filter) { | |
case "SHOW_ALL": | |
return todos; | |
case "SHOW_ACTIVE": | |
return todos.filter(function (t) { | |
return !t.completed; | |
}); | |
case "SHOW_COMPLETED": | |
return todos.filter(function (t) { | |
return t.completed; | |
}); | |
default: | |
return todos; | |
} | |
}; | |
var nextTodoId = 0; | |
var TodoApp = (function (_Component) { | |
_inherits(TodoApp, _Component); | |
function TodoApp() { | |
_classCallCheck(this, TodoApp); | |
_get(Object.getPrototypeOf(TodoApp.prototype), "constructor", this).apply(this, arguments); | |
} | |
_createClass(TodoApp, [{ | |
key: "addTodo", | |
value: function addTodo() { | |
this.props.addTodo(this.input.value); | |
this.input.value = ""; | |
} | |
}, { | |
key: "render", | |
value: function render() { | |
var _this = this; | |
var _props = this.props; | |
var todos = _props.todos; | |
var visbilityFilter = _props.visbilityFilter; | |
var completedStyle = { | |
textDecoration: "line-through" | |
}; | |
var visibleTodos = getVisibleTodos(todos, visbilityFilter); | |
return React.createElement( | |
"div", | |
null, | |
React.createElement("input", { type: "text", ref: function (node) { | |
_this.input = node; | |
} }), | |
React.createElement( | |
"button", | |
{ type: "button", | |
onClick: this.addTodo.bind(this) }, | |
"Submit" | |
), | |
React.createElement( | |
"ul", | |
null, | |
visibleTodos.map(function (todo) { | |
return React.createElement( | |
"li", | |
{ onClick: _this.props.toggleTodo.bind(null, todo.id), | |
key: todo.id, | |
style: todo.completed ? completedStyle : null }, | |
todo.text | |
); | |
}) | |
), | |
React.createElement( | |
"p", | |
null, | |
"Show: ", | |
React.createElement( | |
FilterLink, | |
{ filter: "SHOW_ALL", currentFilter: visbilityFilter }, | |
"All" | |
), | |
" ", | |
React.createElement( | |
FilterLink, | |
{ filter: "SHOW_ACTIVE", currentFilter: visbilityFilter }, | |
"Active" | |
), | |
" ", | |
React.createElement( | |
FilterLink, | |
{ filter: "SHOW_COMPLETED", currentFilter: visbilityFilter }, | |
"Completed" | |
) | |
) | |
); | |
} | |
}]); | |
return TodoApp; | |
})(Component); | |
var dispatchAddTodo = function dispatchAddTodo(todoText) { | |
store.dispatch({ type: "ADD_TODO", todo: { text: todoText, id: ++nextTodoId } }); | |
}; | |
var dispatchToggleTodo = function dispatchToggleTodo(id) { | |
store.dispatch({ type: "TOGGLE_TODO", id: id }); | |
}; | |
var render = function render() { | |
var props = _extends({ | |
addTodo: dispatchAddTodo | |
}, store.getState(), { | |
toggleTodo: dispatchToggleTodo | |
}); | |
ReactDOM.render(React.createElement(TodoApp, props), document.getElementById("app")); | |
}; | |
render(); | |
store.subscribe(render); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment