Created
July 15, 2017 13:07
-
-
Save giopunt/5d92ab3fb6381078fa9d2ff0981e073c to your computer and use it in GitHub Desktop.
REDUX TRANING - APPLY UI // source https://jsbin.com/xareso
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>REDUX TRANING - APPLY UI</title> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.0.4/redux.js"></script> | |
<script src="https://unpkg.com/react@0.14.0/dist/react.js"></script> | |
<script src="https://unpkg.com/react-dom@0.14.0/dist/react-dom.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.0.0/react-redux.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 _Redux = Redux; | |
var createStore = _Redux.createStore; | |
var combineReducers = _Redux.combineReducers; | |
var _ReactRedux = ReactRedux; | |
var connect = _ReactRedux.connect; | |
var _ReactRedux2 = ReactRedux; | |
var Provider = _ReactRedux2.Provider; | |
var todoApp = combineReducers({ | |
todos: todos, | |
visibilityFilter: visibilityFilter | |
}); | |
var nextTodoId = 0; | |
var Link = function Link(_ref) { | |
var active = _ref.active; | |
var onClick = _ref.onClick; | |
var children = _ref.children; | |
if (active) { | |
return React.createElement( | |
"span", | |
null, | |
children | |
); | |
} | |
return React.createElement( | |
"a", | |
{ href: "#", onClick: function (e) { | |
e.preventDefault(); | |
onClick(); | |
} }, | |
children | |
); | |
}; | |
var mapStateLinkProps = function mapStateLinkProps(state, ownProps) { | |
return { | |
active: ownProps.filter === state.visibilityFilter | |
}; | |
}; | |
var mapDispatchLinkProps = function mapDispatchLinkProps(dispatch) { | |
return { | |
onClick: function onClick() { | |
dispatch({ | |
type: 'SET_VISIBILITY_FILTER', | |
filter: ownProps.filter | |
}); | |
} | |
}; | |
}; | |
var FilterLink = connect(mapStateLinkProps, mapDispatchLinkProps)(Link); | |
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; | |
}); | |
} | |
}; | |
var AddTodo = function AddTodo(_ref2) { | |
var dispatch = _ref2.dispatch; | |
var input = undefined; | |
return React.createElement( | |
"div", | |
null, | |
React.createElement("input", { ref: function (node) { | |
input = node; | |
} }), | |
React.createElement( | |
"button", | |
{ onClick: function () { | |
dispatch({ | |
type: 'ADD_TODO', | |
text: input.value, | |
id: nextTodoId++ | |
}); | |
input.value = ''; | |
} }, | |
"ADD TODO" | |
) | |
); | |
}; | |
AddTodo = connect()(AddTodo); | |
var Todo = function Todo(_ref3) { | |
var onClick = _ref3.onClick; | |
var completed = _ref3.completed; | |
var text = _ref3.text; | |
return React.createElement( | |
"li", | |
{ key: todo.id, | |
onClick: onClick, | |
style: { | |
textDecoration: completed ? 'line-through' : 'none' | |
} }, | |
text | |
); | |
}; | |
var TodoList = function TodoList(_ref4) { | |
var todos = _ref4.todos; | |
var onTodoClick = _ref4.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 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 mapStateTodoProps = function mapStateTodoProps(state) { | |
return { | |
todos: getVisibleTodos(state.todos, state.visibilityFilter) | |
}; | |
}; | |
var mapDispatchTodoProps = function mapDispatchTodoProps(dispatch) { | |
return { | |
onTodoClick: function onTodoClick(id) { | |
dispatch({ | |
type: 'TOGGLE_TODO', | |
id: id | |
}); | |
} | |
}; | |
}; | |
var VisibleTodoList = connect(mapStateTodoProps, mapDispatchTodoProps)(TodoList); | |
var TodoApp = function TodoApp() { | |
return React.createElement( | |
"div", | |
null, | |
React.createElement(AddTodo, null), | |
React.createElement(VisibleTodoList, null), | |
React.createElement(Footer, null) | |
); | |
}; | |
ReactDOM.render(React.createElement( | |
Provider, | |
{ store: createStore(todoApp) }, | |
React.createElement(TodoApp, null) | |
), document.getElementById('root')); | |
</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 { | |
createStore, | |
combineReducers | |
} = Redux; | |
const { connect } = ReactRedux; | |
const { Provider } = ReactRedux; | |
const todoApp = combineReducers({ | |
todos, | |
visibilityFilter | |
}); | |
let nextTodoId = 0; | |
const Link = ({ | |
active, | |
onClick, | |
children | |
}) => { | |
if (active) { | |
return <span>{children}</span> | |
} | |
return ( | |
<a href="#" onClick={e => { | |
e.preventDefault(); | |
onClick(); | |
}}> | |
{children} | |
</a> | |
) | |
}; | |
const mapStateLinkProps = (state, ownProps) => { | |
return { | |
active: | |
ownProps.filter === state.visibilityFilter | |
}; | |
} | |
const mapDispatchLinkProps = (dispatch) => { | |
return { | |
onClick: () => { | |
dispatch({ | |
type: 'SET_VISIBILITY_FILTER', | |
filter: ownProps.filter | |
}) | |
} | |
} | |
} | |
const FilterLink = connect( | |
mapStateLinkProps, | |
mapDispatchLinkProps | |
)(Link); | |
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); | |
} | |
} | |
let AddTodo = ( | |
{ dispatch } | |
) => { | |
let input; | |
return ( | |
<div> | |
<input ref={node => { | |
input = node; | |
}} /> | |
<button onClick={() => { | |
dispatch({ | |
type: 'ADD_TODO', | |
text: input.value, | |
id: nextTodoId++ | |
}) | |
input.value = ''; | |
}}> | |
ADD TODO | |
</button> | |
</div> | |
) | |
}; | |
AddTodo = connect()(AddTodo); | |
const Todo = ({ | |
onClick, | |
completed, | |
text | |
}) => ( | |
<li key={todo.id} | |
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 Footer = () => ( | |
<p> | |
Show: | |
{' '} | |
<FilterLink filter="SHOW_ALL">All</FilterLink> | |
{', '} | |
<FilterLink filter="SHOW_ACTIVE">Active</FilterLink> | |
{', '} | |
<FilterLink filter="SHOW_COMPLETED">Completed</FilterLink> | |
</p> | |
) | |
const mapStateTodoProps = (state) => { | |
return { | |
todos: getVisibleTodos( | |
state.todos, | |
state.visibilityFilter | |
) | |
}; | |
} | |
const mapDispatchTodoProps = (dispatch) => { | |
return { | |
onTodoClick: (id) => { | |
dispatch({ | |
type: 'TOGGLE_TODO', | |
id | |
}); | |
} | |
} | |
} | |
const VisibleTodoList = connect( | |
mapStateTodoProps, | |
mapDispatchTodoProps | |
)(TodoList); | |
const TodoApp = () => ( | |
<div> | |
<AddTodo/> | |
<VisibleTodoList/> | |
<Footer/> | |
</div> | |
); | |
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
"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 createStore = _Redux.createStore; | |
var combineReducers = _Redux.combineReducers; | |
var _ReactRedux = ReactRedux; | |
var connect = _ReactRedux.connect; | |
var _ReactRedux2 = ReactRedux; | |
var Provider = _ReactRedux2.Provider; | |
var todoApp = combineReducers({ | |
todos: todos, | |
visibilityFilter: visibilityFilter | |
}); | |
var nextTodoId = 0; | |
var Link = function Link(_ref) { | |
var active = _ref.active; | |
var onClick = _ref.onClick; | |
var children = _ref.children; | |
if (active) { | |
return React.createElement( | |
"span", | |
null, | |
children | |
); | |
} | |
return React.createElement( | |
"a", | |
{ href: "#", onClick: function (e) { | |
e.preventDefault(); | |
onClick(); | |
} }, | |
children | |
); | |
}; | |
var mapStateLinkProps = function mapStateLinkProps(state, ownProps) { | |
return { | |
active: ownProps.filter === state.visibilityFilter | |
}; | |
}; | |
var mapDispatchLinkProps = function mapDispatchLinkProps(dispatch) { | |
return { | |
onClick: function onClick() { | |
dispatch({ | |
type: 'SET_VISIBILITY_FILTER', | |
filter: ownProps.filter | |
}); | |
} | |
}; | |
}; | |
var FilterLink = connect(mapStateLinkProps, mapDispatchLinkProps)(Link); | |
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; | |
}); | |
} | |
}; | |
var AddTodo = function AddTodo(_ref2) { | |
var dispatch = _ref2.dispatch; | |
var input = undefined; | |
return React.createElement( | |
"div", | |
null, | |
React.createElement("input", { ref: function (node) { | |
input = node; | |
} }), | |
React.createElement( | |
"button", | |
{ onClick: function () { | |
dispatch({ | |
type: 'ADD_TODO', | |
text: input.value, | |
id: nextTodoId++ | |
}); | |
input.value = ''; | |
} }, | |
"ADD TODO" | |
) | |
); | |
}; | |
AddTodo = connect()(AddTodo); | |
var Todo = function Todo(_ref3) { | |
var onClick = _ref3.onClick; | |
var completed = _ref3.completed; | |
var text = _ref3.text; | |
return React.createElement( | |
"li", | |
{ key: todo.id, | |
onClick: onClick, | |
style: { | |
textDecoration: completed ? 'line-through' : 'none' | |
} }, | |
text | |
); | |
}; | |
var TodoList = function TodoList(_ref4) { | |
var todos = _ref4.todos; | |
var onTodoClick = _ref4.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 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 mapStateTodoProps = function mapStateTodoProps(state) { | |
return { | |
todos: getVisibleTodos(state.todos, state.visibilityFilter) | |
}; | |
}; | |
var mapDispatchTodoProps = function mapDispatchTodoProps(dispatch) { | |
return { | |
onTodoClick: function onTodoClick(id) { | |
dispatch({ | |
type: 'TOGGLE_TODO', | |
id: id | |
}); | |
} | |
}; | |
}; | |
var VisibleTodoList = connect(mapStateTodoProps, mapDispatchTodoProps)(TodoList); | |
var TodoApp = function TodoApp() { | |
return React.createElement( | |
"div", | |
null, | |
React.createElement(AddTodo, null), | |
React.createElement(VisibleTodoList, null), | |
React.createElement(Footer, null) | |
); | |
}; | |
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