Created
February 7, 2016 20:50
-
-
Save anonymous/cd2eb07ee48ffe70802c to your computer and use it in GitHub Desktop.
React Hello World w/ JSBin // source http://jsbin.com/bapuda
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> | |
<script src="http://fb.me/react-with-addons-0.14.0.js"></script> | |
<script src="http://fb.me/react-dom-0.14.0.js"></script> | |
<!-- <script src="https://npmcdn.com/expect/umd/expect.min.js"></script> --> | |
<script src="https://wzrd.in/standalone/expect@latest"></script> | |
<script src="https://wzrd.in/standalone/deep-freeze@latest"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.3.0/redux.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.0.0/react-redux.js"></script> | |
<meta charset="utf-8"> | |
<title>React Hello World w/ JSBin</title> | |
<style id="jsbin-css"> | |
* { | |
font-family: sans-serif | |
} | |
</style> | |
</head> | |
<body> | |
<div id="root"></div> | |
<script id="jsbin-javascript"> | |
// Reducer Composition Pattern | |
// One Reducer called by another | |
'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; | |
} | |
}; | |
// Reducer | |
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; | |
} | |
}; | |
// Combine Reducers implement the same | |
// type of structure as implemented | |
// in the commented code below | |
// Reimplementation of combineReducers | |
// const combineReducers = (reducers) => { | |
// return (state = {}, action) => { | |
// return Object.keys(reducers).reduce( | |
// (nextState, key) => { | |
// nextState[key] = reducers[key]( | |
// state[key], | |
// action[key] | |
// ); | |
// return nextState; | |
// }, | |
// {} | |
// ); | |
// }; | |
// }; | |
var _Redux = Redux; | |
var combineReducers = _Redux.combineReducers; | |
var todoApp = combineReducers({ | |
todos: todos, | |
visibilityFilter: visibilityFilter | |
}); | |
// const todoApp = (state = {}, action) => { | |
// return { | |
// todos: todos( | |
// state.todos, | |
// action | |
// ), | |
// visibilityFilter: visibilityFilter( | |
// state.visibilityFilter, | |
// action | |
// ) | |
// }; | |
// }; | |
var _Redux2 = Redux; | |
var createStore = _Redux2.createStore; | |
var store = createStore(todoApp); | |
var _React = React; | |
var Component = _React.Component; | |
var Link = function Link(_ref) { | |
var active = _ref.active; | |
var currentFilter = _ref.currentFilter; | |
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 FilterLink = (function (_Component) { | |
_inherits(FilterLink, _Component); | |
function FilterLink() { | |
_classCallCheck(this, FilterLink); | |
_get(Object.getPrototypeOf(FilterLink.prototype), 'constructor', this).apply(this, arguments); | |
} | |
_createClass(FilterLink, [{ | |
key: 'componentDidMount', | |
value: function componentDidMount() { | |
var _this = this; | |
this.unsubscribe = store.subscribe(function () { | |
return _this.forceUpdate(); | |
}); | |
} | |
}, { | |
key: 'componentWillUnmount', | |
value: function componentWillUnmount() { | |
this.unsubscribe(); | |
} | |
}, { | |
key: 'render', | |
value: function render() { | |
var props = this.props; | |
var state = store.getState(); | |
return React.createElement( | |
Link, | |
{ | |
active: props.filter === state.visibilityFilter, | |
onClick: function () { | |
return store.dispatch({ | |
type: 'SET_VISIBILITY_FILTER', | |
filter: props.filter | |
}); | |
} | |
}, | |
props.children | |
); | |
} | |
}]); | |
return FilterLink; | |
})(Component); | |
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 VisibleTodoList = (function (_Component2) { | |
_inherits(VisibleTodoList, _Component2); | |
function VisibleTodoList() { | |
_classCallCheck(this, VisibleTodoList); | |
_get(Object.getPrototypeOf(VisibleTodoList.prototype), 'constructor', this).apply(this, arguments); | |
} | |
_createClass(VisibleTodoList, [{ | |
key: 'componentDidMount', | |
value: function componentDidMount() { | |
var _this2 = this; | |
this.unsubscribe = store.subscribe(function () { | |
return _this2.forceUpdate(); | |
}); | |
} | |
}, { | |
key: 'componentWillUnmount', | |
value: function componentWillUnmount() { | |
this.unsubscribe(); | |
} | |
}, { | |
key: 'render', | |
value: function render() { | |
var props = this.props; | |
var state = store.getState(); | |
return React.createElement(TodoList, { | |
todos: getVisibleTodos(state.todos, state.visibilityFilter), | |
onTodoClick: function (id) { | |
return store.dispatch({ | |
type: 'TOGGLE_TODO', | |
id: id | |
}); | |
} | |
}); | |
} | |
}]); | |
return VisibleTodoList; | |
})(Component); | |
var AddTodo = function AddTodo() { | |
var input = undefined; | |
return React.createElement( | |
'div', | |
null, | |
React.createElement('input', { ref: function (node) { | |
input = node; | |
} }), | |
React.createElement( | |
'button', | |
{ onClick: function () { | |
store.dispatch({ | |
type: 'ADD_TODO', | |
text: input.value, | |
id: nextTodoId++ | |
}); | |
input.value = ''; | |
} }, | |
'Add Todo' | |
) | |
); | |
}; | |
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 nextTodoId = 0; | |
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(TodoApp, null), document.getElementById('root')); | |
// Tests | |
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 | |
}]; | |
}; | |
testAddTodo(); | |
testToggleTodo(); | |
console.log('All tests passed.'); | |
</script> | |
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html> | |
<html> | |
<head> | |
<script src="//fb.me/react-with-addons-0.14.0.js"><\/script> | |
<script src="//fb.me/react-dom-0.14.0.js"><\/script> | |
<\!-- <script src="https://npmcdn.com/expect/umd/expect.min.js"><\/script> --> | |
<script src="https://wzrd.in/standalone/expect@latest"><\/script> | |
<script src="https://wzrd.in/standalone/deep-freeze@latest"><\/script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.3.0/redux.js"><\/script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.0.0/react-redux.js"><\/script> | |
<meta charset="utf-8"> | |
<title>React Hello World w/ JSBin</title> | |
</head> | |
<body> | |
<div id="root"></div> | |
</body> | |
</html></script> | |
<script id="jsbin-source-css" type="text/css">* { | |
font-family: sans-serif | |
}</script> | |
<script id="jsbin-source-javascript" type="text/javascript">// Reducer Composition Pattern | |
// One Reducer called by another | |
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; | |
} | |
}; | |
// Reducer | |
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; | |
} | |
}; | |
// Combine Reducers implement the same | |
// type of structure as implemented | |
// in the commented code below | |
// Reimplementation of combineReducers | |
// const combineReducers = (reducers) => { | |
// return (state = {}, action) => { | |
// return Object.keys(reducers).reduce( | |
// (nextState, key) => { | |
// nextState[key] = reducers[key]( | |
// state[key], | |
// action[key] | |
// ); | |
// return nextState; | |
// }, | |
// {} | |
// ); | |
// }; | |
// }; | |
const { combineReducers } = Redux; | |
const todoApp = combineReducers({ | |
todos, | |
visibilityFilter | |
}); | |
// const todoApp = (state = {}, action) => { | |
// return { | |
// todos: todos( | |
// state.todos, | |
// action | |
// ), | |
// visibilityFilter: visibilityFilter( | |
// state.visibilityFilter, | |
// action | |
// ) | |
// }; | |
// }; | |
const { createStore } = Redux; | |
const store = createStore(todoApp); | |
const { Component } = React; | |
const Link = ({ | |
active, | |
currentFilter, | |
children, | |
onClick | |
}) => { | |
if (active) { | |
return <span>{children}</span>; | |
} | |
return ( | |
<a href='#' | |
onClick={e => { | |
e.preventDefault(); | |
onClick(); | |
}} | |
> | |
{children} | |
</a> | |
); | |
}; | |
class FilterLink extends Component { | |
componentDidMount() { | |
this.unsubscribe = store.subscribe(() => | |
this.forceUpdate() | |
); | |
} | |
componentWillUnmount() { | |
this.unsubscribe(); | |
} | |
render() { | |
const props = this.props; | |
const state = store.getState(); | |
return ( | |
<Link | |
active={ | |
props.filter === state.visibilityFilter | |
} | |
onClick={() => | |
store.dispatch({ | |
type:'SET_VISIBILITY_FILTER', | |
filter: props.filter | |
}) | |
} | |
> | |
{props.children} | |
</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 | |
); | |
} | |
}; | |
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 VisibleTodoList extends Component { | |
componentDidMount() { | |
this.unsubscribe = store.subscribe(() => | |
this.forceUpdate() | |
); | |
} | |
componentWillUnmount() { | |
this.unsubscribe(); | |
} | |
render() { | |
const props = this.props; | |
const state = store.getState(); | |
return ( | |
<TodoList | |
todos={ | |
getVisibleTodos( | |
state.todos, | |
state.visibilityFilter | |
) | |
} | |
onTodoClick={id => | |
store.dispatch({ | |
type: 'TOGGLE_TODO', | |
id | |
}) | |
} | |
/> | |
) | |
} | |
} | |
const AddTodo = () => { | |
let input; | |
return ( | |
<div> | |
<input ref={node => { | |
input = node; | |
}} /> | |
<button onClick={() => { | |
store.dispatch({ | |
type: 'ADD_TODO', | |
text: input.value, | |
id: nextTodoId++ | |
}) | |
input.value = ''; | |
}}> | |
Add Todo | |
</button> | |
</div> | |
) | |
} | |
const Footer = () => { | |
return ( | |
<p> | |
Show: | |
{' '} | |
<FilterLink | |
filter='SHOW_ALL' | |
> | |
All | |
</FilterLink> | |
{' '} | |
<FilterLink | |
filter='SHOW_ACTIVE' | |
> | |
Active | |
</FilterLink> | |
{' '} | |
<FilterLink | |
filter='SHOW_COMPLETED' | |
> | |
Completed | |
</FilterLink> | |
{' '} | |
</p> | |
) | |
} | |
let nextTodoId = 0; | |
const TodoApp = () => ( | |
<div> | |
<AddTodo /> | |
<VisibleTodoList /> | |
<Footer /> | |
</div> | |
); | |
ReactDOM.render( | |
<TodoApp />, | |
document.getElementById('root') | |
); | |
// Tests | |
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 | |
} | |
]; | |
}; | |
testAddTodo(); | |
testToggleTodo(); | |
console.log('All tests passed.');</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
* { | |
font-family: sans-serif | |
} |
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
// Reducer Composition Pattern | |
// One Reducer called by another | |
'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; | |
} | |
}; | |
// Reducer | |
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; | |
} | |
}; | |
// Combine Reducers implement the same | |
// type of structure as implemented | |
// in the commented code below | |
// Reimplementation of combineReducers | |
// const combineReducers = (reducers) => { | |
// return (state = {}, action) => { | |
// return Object.keys(reducers).reduce( | |
// (nextState, key) => { | |
// nextState[key] = reducers[key]( | |
// state[key], | |
// action[key] | |
// ); | |
// return nextState; | |
// }, | |
// {} | |
// ); | |
// }; | |
// }; | |
var _Redux = Redux; | |
var combineReducers = _Redux.combineReducers; | |
var todoApp = combineReducers({ | |
todos: todos, | |
visibilityFilter: visibilityFilter | |
}); | |
// const todoApp = (state = {}, action) => { | |
// return { | |
// todos: todos( | |
// state.todos, | |
// action | |
// ), | |
// visibilityFilter: visibilityFilter( | |
// state.visibilityFilter, | |
// action | |
// ) | |
// }; | |
// }; | |
var _Redux2 = Redux; | |
var createStore = _Redux2.createStore; | |
var store = createStore(todoApp); | |
var _React = React; | |
var Component = _React.Component; | |
var Link = function Link(_ref) { | |
var active = _ref.active; | |
var currentFilter = _ref.currentFilter; | |
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 FilterLink = (function (_Component) { | |
_inherits(FilterLink, _Component); | |
function FilterLink() { | |
_classCallCheck(this, FilterLink); | |
_get(Object.getPrototypeOf(FilterLink.prototype), 'constructor', this).apply(this, arguments); | |
} | |
_createClass(FilterLink, [{ | |
key: 'componentDidMount', | |
value: function componentDidMount() { | |
var _this = this; | |
this.unsubscribe = store.subscribe(function () { | |
return _this.forceUpdate(); | |
}); | |
} | |
}, { | |
key: 'componentWillUnmount', | |
value: function componentWillUnmount() { | |
this.unsubscribe(); | |
} | |
}, { | |
key: 'render', | |
value: function render() { | |
var props = this.props; | |
var state = store.getState(); | |
return React.createElement( | |
Link, | |
{ | |
active: props.filter === state.visibilityFilter, | |
onClick: function () { | |
return store.dispatch({ | |
type: 'SET_VISIBILITY_FILTER', | |
filter: props.filter | |
}); | |
} | |
}, | |
props.children | |
); | |
} | |
}]); | |
return FilterLink; | |
})(Component); | |
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 VisibleTodoList = (function (_Component2) { | |
_inherits(VisibleTodoList, _Component2); | |
function VisibleTodoList() { | |
_classCallCheck(this, VisibleTodoList); | |
_get(Object.getPrototypeOf(VisibleTodoList.prototype), 'constructor', this).apply(this, arguments); | |
} | |
_createClass(VisibleTodoList, [{ | |
key: 'componentDidMount', | |
value: function componentDidMount() { | |
var _this2 = this; | |
this.unsubscribe = store.subscribe(function () { | |
return _this2.forceUpdate(); | |
}); | |
} | |
}, { | |
key: 'componentWillUnmount', | |
value: function componentWillUnmount() { | |
this.unsubscribe(); | |
} | |
}, { | |
key: 'render', | |
value: function render() { | |
var props = this.props; | |
var state = store.getState(); | |
return React.createElement(TodoList, { | |
todos: getVisibleTodos(state.todos, state.visibilityFilter), | |
onTodoClick: function (id) { | |
return store.dispatch({ | |
type: 'TOGGLE_TODO', | |
id: id | |
}); | |
} | |
}); | |
} | |
}]); | |
return VisibleTodoList; | |
})(Component); | |
var AddTodo = function AddTodo() { | |
var input = undefined; | |
return React.createElement( | |
'div', | |
null, | |
React.createElement('input', { ref: function (node) { | |
input = node; | |
} }), | |
React.createElement( | |
'button', | |
{ onClick: function () { | |
store.dispatch({ | |
type: 'ADD_TODO', | |
text: input.value, | |
id: nextTodoId++ | |
}); | |
input.value = ''; | |
} }, | |
'Add Todo' | |
) | |
); | |
}; | |
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 nextTodoId = 0; | |
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(TodoApp, null), document.getElementById('root')); | |
// Tests | |
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 | |
}]; | |
}; | |
testAddTodo(); | |
testToggleTodo(); | |
console.log('All tests passed.'); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment