Created
July 14, 2017 12:45
-
-
Save giopunt/d57364c4f3fb28dbe132f328b897b53e 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> | |
</head> | |
<body> | |
<div id="root"><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 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 todoApp = combineReducers({ | |
todos: todos, | |
visibilityFilter: visibilityFilter | |
}); | |
var store = createStore(todoApp); | |
var nextTodoId = 0; | |
var FilterLink = function FilterLink(_ref) { | |
var filter = _ref.filter; | |
var currentFilter = _ref.currentFilter; | |
var children = _ref.children; | |
if (filter == currentFilter) { | |
return React.createElement( | |
"span", | |
null, | |
children | |
); | |
} | |
return 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; | |
}); | |
} | |
}; | |
var Todo = function Todo(_ref2) { | |
var onClick = _ref2.onClick; | |
var completed = _ref2.completed; | |
var text = _ref2.text; | |
return React.createElement( | |
"li", | |
{ key: todo.id, | |
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 TodoApp = (function (_React$Component) { | |
_inherits(TodoApp, _React$Component); | |
function TodoApp() { | |
_classCallCheck(this, TodoApp); | |
_get(Object.getPrototypeOf(TodoApp.prototype), "constructor", this).apply(this, arguments); | |
} | |
_createClass(TodoApp, [{ | |
key: "render", | |
value: function render() { | |
var _this = this; | |
var _props = this.props; | |
var todos = _props.todos; | |
var visibilityFilter = _props.visibilityFilter; | |
var visibleTodos = getVisibleTodos(todos, visibilityFilter); | |
return React.createElement( | |
"div", | |
null, | |
React.createElement("input", { ref: function (node) { | |
_this.input = node; | |
} }), | |
React.createElement( | |
"button", | |
{ onClick: function () { | |
store.dispatch({ | |
type: 'ADD_TODO', | |
text: _this.input.value, | |
id: nextTodoId++ | |
}); | |
_this.input.value = ''; | |
} }, | |
"ADD TODO" | |
), | |
React.createElement(TodoList, { | |
todos: visibleTodos, | |
onTodoClick: function (id) { | |
store.dispatch({ | |
type: 'TOGGLE_TODO', | |
id: id | |
}); | |
} | |
}), | |
React.createElement( | |
"p", | |
null, | |
"Show:", | |
' ', | |
React.createElement( | |
FilterLink, | |
{ filter: "SHOW_ALL", currentFilter: visibilityFilter }, | |
"All" | |
), | |
' ', | |
React.createElement( | |
FilterLink, | |
{ filter: "SHOW_ACTIVE", currentFilter: visibilityFilter }, | |
"Active" | |
), | |
' ', | |
React.createElement( | |
FilterLink, | |
{ filter: "SHOW_COMPLETED", currentFilter: visibilityFilter }, | |
"Completed" | |
) | |
) | |
); | |
} | |
}]); | |
return TodoApp; | |
})(React.Component); | |
; | |
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 { createStore, combineReducers } = Redux; | |
const todoApp = combineReducers({ | |
todos, | |
visibilityFilter | |
}); | |
const store = createStore(todoApp); | |
let nextTodoId = 0; | |
const FilterLink = ({ | |
filter, | |
currentFilter, | |
children | |
}) => { | |
if(filter == currentFilter) { | |
return <span>{children}</span> | |
} | |
return( | |
<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); | |
} | |
} | |
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> | |
) | |
class TodoApp extends React.Component { | |
render(){ | |
const { | |
todos, | |
visibilityFilter | |
} = this.props; | |
const visibleTodos = getVisibleTodos( | |
todos, | |
visibilityFilter | |
); | |
return( | |
<div> | |
<input ref={node => { | |
this.input = node; | |
}} /> | |
<button onClick={() => { | |
store.dispatch({ | |
type: 'ADD_TODO', | |
text: this.input.value, | |
id: nextTodoId++ | |
}) | |
this.input.value = ''; | |
}}>ADD TODO</button> | |
<TodoList | |
todos={visibleTodos} | |
onTodoClick={id => { | |
store.dispatch({ | |
type: 'TOGGLE_TODO', | |
id | |
}); | |
}} | |
/> | |
<p> | |
Show: | |
{' '} | |
<FilterLink filter="SHOW_ALL" currentFilter={visibilityFilter}>All</FilterLink> | |
{' '} | |
<FilterLink filter="SHOW_ACTIVE" currentFilter={visibilityFilter}>Active</FilterLink> | |
{' '} | |
<FilterLink filter="SHOW_COMPLETED" currentFilter={visibilityFilter}>Completed</FilterLink> | |
</p> | |
</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 _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 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 todoApp = combineReducers({ | |
todos: todos, | |
visibilityFilter: visibilityFilter | |
}); | |
var store = createStore(todoApp); | |
var nextTodoId = 0; | |
var FilterLink = function FilterLink(_ref) { | |
var filter = _ref.filter; | |
var currentFilter = _ref.currentFilter; | |
var children = _ref.children; | |
if (filter == currentFilter) { | |
return React.createElement( | |
"span", | |
null, | |
children | |
); | |
} | |
return 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; | |
}); | |
} | |
}; | |
var Todo = function Todo(_ref2) { | |
var onClick = _ref2.onClick; | |
var completed = _ref2.completed; | |
var text = _ref2.text; | |
return React.createElement( | |
"li", | |
{ key: todo.id, | |
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 TodoApp = (function (_React$Component) { | |
_inherits(TodoApp, _React$Component); | |
function TodoApp() { | |
_classCallCheck(this, TodoApp); | |
_get(Object.getPrototypeOf(TodoApp.prototype), "constructor", this).apply(this, arguments); | |
} | |
_createClass(TodoApp, [{ | |
key: "render", | |
value: function render() { | |
var _this = this; | |
var _props = this.props; | |
var todos = _props.todos; | |
var visibilityFilter = _props.visibilityFilter; | |
var visibleTodos = getVisibleTodos(todos, visibilityFilter); | |
return React.createElement( | |
"div", | |
null, | |
React.createElement("input", { ref: function (node) { | |
_this.input = node; | |
} }), | |
React.createElement( | |
"button", | |
{ onClick: function () { | |
store.dispatch({ | |
type: 'ADD_TODO', | |
text: _this.input.value, | |
id: nextTodoId++ | |
}); | |
_this.input.value = ''; | |
} }, | |
"ADD TODO" | |
), | |
React.createElement(TodoList, { | |
todos: visibleTodos, | |
onTodoClick: function (id) { | |
store.dispatch({ | |
type: 'TOGGLE_TODO', | |
id: id | |
}); | |
} | |
}), | |
React.createElement( | |
"p", | |
null, | |
"Show:", | |
' ', | |
React.createElement( | |
FilterLink, | |
{ filter: "SHOW_ALL", currentFilter: visibilityFilter }, | |
"All" | |
), | |
' ', | |
React.createElement( | |
FilterLink, | |
{ filter: "SHOW_ACTIVE", currentFilter: visibilityFilter }, | |
"Active" | |
), | |
' ', | |
React.createElement( | |
FilterLink, | |
{ filter: "SHOW_COMPLETED", currentFilter: visibilityFilter }, | |
"Completed" | |
) | |
) | |
); | |
} | |
}]); | |
return TodoApp; | |
})(React.Component); | |
; | |
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