Created
April 29, 2016 20:33
-
-
Save anonymous/493fdcae75485df7f3f019d0014ea41f to your computer and use it in GitHub Desktop.
JS Bin // source https://jsbin.com/pebesisaqi
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"> | |
<title>JS Bin</title> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.0.4/redux.js"></script> | |
<script src="https://fb.me/react-0.14.0.js"></script> | |
<script src="https://fb.me/react-dom-0.14.0.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.0.0/react-redux.js"></script> | |
<style id="jsbin-css"> | |
<link href='https://fonts.googleapis.com/css?family=Raleway:400,600' rel='stylesheet' type='text/css'> | |
body { | |
font-family: 'Raleway', sans-serif !default; | |
} | |
ul { | |
list-style-type: none; | |
padding: 5px; | |
border: 1px solid #ccc; | |
background-color: #fefefe; | |
} | |
li { | |
padding: 12px 10px; | |
margin: 10px 5px; | |
font-size: 19px; | |
border-radius: 3px; | |
background-color: #8295b2; | |
cursor: pointer; | |
transition: transform .5s; | |
color: #ededed; | |
} | |
li.completed { | |
background-color: #ddd; | |
color: #333; | |
} | |
li:hover { | |
transform: scale(1.015); | |
} | |
input { | |
padding: 7px; | |
font-size: 18px; | |
color: #555; | |
letter-spacing: 1.025px; | |
border: 1px solid #777; | |
border-radius: 2px; | |
margin: 0px 5px; | |
width: 70%; | |
} | |
button { | |
padding: 11px 21px; | |
background-color: #42a5cb; | |
border: 1px solid #ddd; | |
border-radius: 3px; | |
color: #eee; | |
font-weight: 600; | |
font-size: 14px; | |
text-transform: UPPERCASE; | |
cursor: pointer; | |
} | |
button:hover { | |
background-color: #3294ab; | |
color: #fff; | |
} | |
.search-wrapper { | |
border: 1px solid #444; | |
padding: 35px; | |
border-radius: 7px; | |
background-color: #ededed; | |
} | |
h2 { | |
font-family: 'Helvetica', sans-serif; | |
letter-spacing: 0.08em; | |
color: #555; | |
padding-bottom: 10px; | |
border-bottom: 2px solid #999; | |
text-align: center; | |
font-size: 38px; | |
text-shadow: -1px 0px 0px #333; | |
font-weight: 600; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="search-wrapper"> | |
<h2>ToDo</h2> | |
<div id='root'></div> | |
</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 _Redux = Redux; | |
var combineReducers = _Redux.combineReducers; | |
var todoApp = combineReducers({ | |
todos: todos, | |
visibilityFilter: visibilityFilter | |
}); | |
var nextTodoId = 0; | |
var addTodo = function addTodo(text) { | |
return { | |
type: 'ADD_TODO', | |
id: nextTodoId++, | |
text: text | |
}; | |
}; | |
var toggleTodo = function toggleTodo(id) { | |
return { | |
type: 'TOGGLE_TODO', | |
id: id | |
}; | |
}; | |
var setVisibilityFilter = function setVisibilityFilter(filter) { | |
return { | |
type: 'SET_VISIBILITY_FILTER', | |
filter: filter | |
}; | |
}; | |
var _React = React; | |
var Component = _React.Component; | |
var _ReactRedux = ReactRedux; | |
var Provider = _ReactRedux.Provider; | |
var connect = _ReactRedux.connect; | |
var Link = function Link(_ref) { | |
var active = _ref.active; | |
var children = _ref.children; | |
var onClick = _ref.onClick; | |
if (active) { | |
return React.createElement( | |
'span', | |
null, | |
children | |
); | |
} | |
return React.createElement( | |
'a', | |
{ href: '#', | |
onClick: function (e) { | |
e.preventDefault(); | |
onClick(); | |
} | |
}, | |
children | |
); | |
}; | |
var mapStateToLinkProps = function mapStateToLinkProps(state, ownProps) { | |
return { | |
active: ownProps.filter === state.visibilityFilter | |
}; | |
}; | |
var mapDispatchToLinkProps = function mapDispatchToLinkProps(dispatch, ownProps) { | |
return { | |
onClick: function onClick() { | |
dispatch(setVisibilityFilter(ownProps.filter)); | |
} | |
}; | |
}; | |
var FilterLink = connect(mapStateToLinkProps, mapDispatchToLinkProps)(Link); | |
var Footer = function Footer() { | |
return React.createElement( | |
'p', | |
null, | |
'Show:', | |
' ', | |
React.createElement( | |
FilterLink, | |
{ filter: 'SHOW_ALL' }, | |
'All' | |
), | |
', ', | |
React.createElement( | |
FilterLink, | |
{ filter: 'SHOW_ACTIVE' }, | |
'Active' | |
), | |
', ', | |
React.createElement( | |
FilterLink, | |
{ filter: 'SHOW_COMPLETED' }, | |
'Completed' | |
) | |
); | |
}; | |
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' | |
}, | |
className: completed ? 'completed' : '' | |
}, | |
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 dispatch = _ref4.dispatch; | |
var input = undefined; | |
return React.createElement( | |
'div', | |
null, | |
React.createElement('input', { ref: function (node) { | |
input = node; | |
} }), | |
React.createElement( | |
'button', | |
{ onClick: function () { | |
dispatch(addTodo(input.value)); | |
input.value = ''; | |
} }, | |
'Add Todo' | |
) | |
); | |
}; | |
AddTodo = connect()(AddTodo); | |
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 mapStateToTodoListProps = function mapStateToTodoListProps(state) { | |
return { | |
todos: getVisibleTodos(state.todos, state.visibilityFilter) | |
}; | |
}; | |
var mapDispatchToTodoListProps = function mapDispatchToTodoListProps(dispatch) { | |
return { | |
onTodoClick: function onTodoClick(id) { | |
dispatch(toggleTodo(id)); | |
} | |
}; | |
}; | |
var VisibleTodoList = connect(mapStateToTodoListProps, mapDispatchToTodoListProps)(TodoList); | |
var TodoApp = function TodoApp() { | |
return React.createElement( | |
'div', | |
null, | |
React.createElement(AddTodo, null), | |
React.createElement(VisibleTodoList, null), | |
React.createElement(Footer, null) | |
); | |
}; | |
var _Redux2 = Redux; | |
var createStore = _Redux2.createStore; | |
ReactDOM.render(React.createElement( | |
Provider, | |
{ store: createStore(todoApp) }, | |
React.createElement(TodoApp, null) | |
), document.getElementById('root')); | |
</script> | |
<script id="jsbin-source-css" type="text/css"><link href='https://fonts.googleapis.com/css?family=Raleway:400,600' rel='stylesheet' type='text/css'> | |
body { | |
font-family: 'Raleway', sans-serif !default; | |
} | |
ul { | |
list-style-type: none; | |
padding: 5px; | |
border: 1px solid #ccc; | |
background-color: #fefefe; | |
} | |
li { | |
padding: 12px 10px; | |
margin: 10px 5px; | |
font-size: 19px; | |
border-radius: 3px; | |
background-color: #8295b2; | |
cursor: pointer; | |
transition: transform .5s; | |
color: #ededed; | |
} | |
li.completed { | |
background-color: #ddd; | |
color: #333; | |
} | |
li:hover { | |
transform: scale(1.015); | |
} | |
input { | |
padding: 7px; | |
font-size: 18px; | |
color: #555; | |
letter-spacing: 1.025px; | |
border: 1px solid #777; | |
border-radius: 2px; | |
margin: 0px 5px; | |
width: 70%; | |
} | |
button { | |
padding: 11px 21px; | |
background-color: #42a5cb; | |
border: 1px solid #ddd; | |
border-radius: 3px; | |
color: #eee; | |
font-weight: 600; | |
font-size: 14px; | |
text-transform: UPPERCASE; | |
cursor: pointer; | |
} | |
button:hover { | |
background-color: #3294ab; | |
color: #fff; | |
} | |
.search-wrapper { | |
border: 1px solid #444; | |
padding: 35px; | |
border-radius: 7px; | |
background-color: #ededed; | |
} | |
h2 { | |
font-family: 'Helvetica', sans-serif; | |
letter-spacing: 0.08em; | |
color: #555; | |
padding-bottom: 10px; | |
border-bottom: 2px solid #999; | |
text-align: center; | |
font-size: 38px; | |
text-shadow: -1px 0px 0px #333; | |
font-weight: 600; | |
} | |
</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 } = Redux; | |
const todoApp = combineReducers({ | |
todos, | |
visibilityFilter | |
}); | |
let nextTodoId = 0; | |
const addTodo = (text) => { | |
return { | |
type: 'ADD_TODO', | |
id: nextTodoId++, | |
text | |
}; | |
}; | |
const toggleTodo = (id) => { | |
return { | |
type: 'TOGGLE_TODO', | |
id | |
}; | |
}; | |
const setVisibilityFilter = (filter) => { | |
return { | |
type: 'SET_VISIBILITY_FILTER', | |
filter | |
}; | |
}; | |
const { Component } = React; | |
const { Provider, connect } = ReactRedux; | |
const Link = ({ | |
active, | |
children, | |
onClick | |
}) => { | |
if (active) { | |
return <span>{children}</span>; | |
} | |
return ( | |
<a href='#' | |
onClick={e => { | |
e.preventDefault(); | |
onClick(); | |
}} | |
> | |
{children} | |
</a> | |
); | |
}; | |
const mapStateToLinkProps = ( | |
state, | |
ownProps | |
) => { | |
return { | |
active: | |
ownProps.filter === | |
state.visibilityFilter | |
}; | |
}; | |
const mapDispatchToLinkProps = ( | |
dispatch, | |
ownProps | |
) => { | |
return { | |
onClick: () => { | |
dispatch( | |
setVisibilityFilter(ownProps.filter) | |
); | |
} | |
}; | |
} | |
const FilterLink = connect( | |
mapStateToLinkProps, | |
mapDispatchToLinkProps | |
)(Link); | |
const Footer = () => ( | |
<p> | |
Show: | |
{' '} | |
<FilterLink filter='SHOW_ALL'> | |
All | |
</FilterLink> | |
{', '} | |
<FilterLink filter='SHOW_ACTIVE'> | |
Active | |
</FilterLink> | |
{', '} | |
<FilterLink filter='SHOW_COMPLETED'> | |
Completed | |
</FilterLink> | |
</p> | |
); | |
const Todo = ({ | |
onClick, | |
completed, | |
text | |
}) => ( | |
<li | |
onClick={onClick} | |
style={{ | |
textDecoration: | |
completed ? | |
'line-through' : | |
'none' | |
}} | |
className={ | |
completed ? | |
'completed' : | |
'' | |
} | |
> | |
{text} | |
</li> | |
); | |
const TodoList = ({ | |
todos, | |
onTodoClick | |
}) => ( | |
<ul> | |
{todos.map(todo => | |
<Todo | |
key={todo.id} | |
{...todo} | |
onClick={() => onTodoClick(todo.id)} | |
/> | |
)} | |
</ul> | |
); | |
let AddTodo = ({ dispatch }) => { | |
let input; | |
return ( | |
<div> | |
<input ref={node => { | |
input = node; | |
}} /> | |
<button onClick={() => { | |
dispatch(addTodo(input.value)); | |
input.value = ''; | |
}}> | |
Add Todo | |
</button> | |
</div> | |
); | |
}; | |
AddTodo = connect()(AddTodo); | |
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 | |
); | |
} | |
} | |
const mapStateToTodoListProps = ( | |
state | |
) => { | |
return { | |
todos: getVisibleTodos( | |
state.todos, | |
state.visibilityFilter | |
) | |
}; | |
}; | |
const mapDispatchToTodoListProps = ( | |
dispatch | |
) => { | |
return { | |
onTodoClick: (id) => { | |
dispatch(toggleTodo(id)); | |
} | |
}; | |
}; | |
const VisibleTodoList = connect( | |
mapStateToTodoListProps, | |
mapDispatchToTodoListProps | |
)(TodoList); | |
const TodoApp = () => ( | |
<div> | |
<AddTodo /> | |
<VisibleTodoList /> | |
<Footer /> | |
</div> | |
); | |
const { createStore } = Redux; | |
ReactDOM.render( | |
<Provider store={createStore(todoApp)}> | |
<TodoApp /> | |
</Provider>, | |
document.getElementById('root') | |
);</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
<link href='https://fonts.googleapis.com/css?family=Raleway:400,600' rel='stylesheet' type='text/css'> | |
body { | |
font-family: 'Raleway', sans-serif !default; | |
} | |
ul { | |
list-style-type: none; | |
padding: 5px; | |
border: 1px solid #ccc; | |
background-color: #fefefe; | |
} | |
li { | |
padding: 12px 10px; | |
margin: 10px 5px; | |
font-size: 19px; | |
border-radius: 3px; | |
background-color: #8295b2; | |
cursor: pointer; | |
transition: transform .5s; | |
color: #ededed; | |
} | |
li.completed { | |
background-color: #ddd; | |
color: #333; | |
} | |
li:hover { | |
transform: scale(1.015); | |
} | |
input { | |
padding: 7px; | |
font-size: 18px; | |
color: #555; | |
letter-spacing: 1.025px; | |
border: 1px solid #777; | |
border-radius: 2px; | |
margin: 0px 5px; | |
width: 70%; | |
} | |
button { | |
padding: 11px 21px; | |
background-color: #42a5cb; | |
border: 1px solid #ddd; | |
border-radius: 3px; | |
color: #eee; | |
font-weight: 600; | |
font-size: 14px; | |
text-transform: UPPERCASE; | |
cursor: pointer; | |
} | |
button:hover { | |
background-color: #3294ab; | |
color: #fff; | |
} | |
.search-wrapper { | |
border: 1px solid #444; | |
padding: 35px; | |
border-radius: 7px; | |
background-color: #ededed; | |
} | |
h2 { | |
font-family: 'Helvetica', sans-serif; | |
letter-spacing: 0.08em; | |
color: #555; | |
padding-bottom: 10px; | |
border-bottom: 2px solid #999; | |
text-align: center; | |
font-size: 38px; | |
text-shadow: -1px 0px 0px #333; | |
font-weight: 600; | |
} |
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 _Redux = Redux; | |
var combineReducers = _Redux.combineReducers; | |
var todoApp = combineReducers({ | |
todos: todos, | |
visibilityFilter: visibilityFilter | |
}); | |
var nextTodoId = 0; | |
var addTodo = function addTodo(text) { | |
return { | |
type: 'ADD_TODO', | |
id: nextTodoId++, | |
text: text | |
}; | |
}; | |
var toggleTodo = function toggleTodo(id) { | |
return { | |
type: 'TOGGLE_TODO', | |
id: id | |
}; | |
}; | |
var setVisibilityFilter = function setVisibilityFilter(filter) { | |
return { | |
type: 'SET_VISIBILITY_FILTER', | |
filter: filter | |
}; | |
}; | |
var _React = React; | |
var Component = _React.Component; | |
var _ReactRedux = ReactRedux; | |
var Provider = _ReactRedux.Provider; | |
var connect = _ReactRedux.connect; | |
var Link = function Link(_ref) { | |
var active = _ref.active; | |
var children = _ref.children; | |
var onClick = _ref.onClick; | |
if (active) { | |
return React.createElement( | |
'span', | |
null, | |
children | |
); | |
} | |
return React.createElement( | |
'a', | |
{ href: '#', | |
onClick: function (e) { | |
e.preventDefault(); | |
onClick(); | |
} | |
}, | |
children | |
); | |
}; | |
var mapStateToLinkProps = function mapStateToLinkProps(state, ownProps) { | |
return { | |
active: ownProps.filter === state.visibilityFilter | |
}; | |
}; | |
var mapDispatchToLinkProps = function mapDispatchToLinkProps(dispatch, ownProps) { | |
return { | |
onClick: function onClick() { | |
dispatch(setVisibilityFilter(ownProps.filter)); | |
} | |
}; | |
}; | |
var FilterLink = connect(mapStateToLinkProps, mapDispatchToLinkProps)(Link); | |
var Footer = function Footer() { | |
return React.createElement( | |
'p', | |
null, | |
'Show:', | |
' ', | |
React.createElement( | |
FilterLink, | |
{ filter: 'SHOW_ALL' }, | |
'All' | |
), | |
', ', | |
React.createElement( | |
FilterLink, | |
{ filter: 'SHOW_ACTIVE' }, | |
'Active' | |
), | |
', ', | |
React.createElement( | |
FilterLink, | |
{ filter: 'SHOW_COMPLETED' }, | |
'Completed' | |
) | |
); | |
}; | |
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' | |
}, | |
className: completed ? 'completed' : '' | |
}, | |
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 dispatch = _ref4.dispatch; | |
var input = undefined; | |
return React.createElement( | |
'div', | |
null, | |
React.createElement('input', { ref: function (node) { | |
input = node; | |
} }), | |
React.createElement( | |
'button', | |
{ onClick: function () { | |
dispatch(addTodo(input.value)); | |
input.value = ''; | |
} }, | |
'Add Todo' | |
) | |
); | |
}; | |
AddTodo = connect()(AddTodo); | |
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 mapStateToTodoListProps = function mapStateToTodoListProps(state) { | |
return { | |
todos: getVisibleTodos(state.todos, state.visibilityFilter) | |
}; | |
}; | |
var mapDispatchToTodoListProps = function mapDispatchToTodoListProps(dispatch) { | |
return { | |
onTodoClick: function onTodoClick(id) { | |
dispatch(toggleTodo(id)); | |
} | |
}; | |
}; | |
var VisibleTodoList = connect(mapStateToTodoListProps, mapDispatchToTodoListProps)(TodoList); | |
var TodoApp = function TodoApp() { | |
return React.createElement( | |
'div', | |
null, | |
React.createElement(AddTodo, null), | |
React.createElement(VisibleTodoList, null), | |
React.createElement(Footer, null) | |
); | |
}; | |
var _Redux2 = Redux; | |
var createStore = _Redux2.createStore; | |
ReactDOM.render(React.createElement( | |
Provider, | |
{ store: createStore(todoApp) }, | |
React.createElement(TodoApp, null) | |
), document.getElementById('root')); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment