From acec9f6615649a529f8c87e2bc8fee9df7533fb9 Mon Sep 17 00:00:00 2001 From: ashleydb Date: Sun, 5 Feb 2017 21:48:06 -0800 Subject: [PATCH] Refactor TodoSearch with Redux --- app/app.jsx | 4 --- app/components/TodoApp.jsx | 2 +- app/components/TodoList.jsx | 12 ++++----- app/components/TodoSearch.jsx | 26 ++++++++++++++++---- app/tests/components/TodoList.test.jsx | 2 +- app/tests/components/TodoSearch.test.jsx | 31 +++++++++++++----------- public/bundle.js | 8 +++--- 7 files changed, 50 insertions(+), 35 deletions(-) diff --git a/app/app.jsx b/app/app.jsx index 32431c4..e8f159a 100644 --- a/app/app.jsx +++ b/app/app.jsx @@ -17,10 +17,6 @@ store.subscribe(() => { console.log('New state', store.getState()); }); -store.dispatch(actions.addTodo('Clean up')); -store.dispatch(actions.setSearchText('up')); -store.dispatch(actions.toggleShowCompleted()); - //Use jQuery to start foundation $(document).foundation(); diff --git a/app/components/TodoApp.jsx b/app/components/TodoApp.jsx index 69b045e..9ae8637 100644 --- a/app/components/TodoApp.jsx +++ b/app/components/TodoApp.jsx @@ -5,7 +5,7 @@ var moment = require('moment'); // Get the default React version of the TodoList component import TodoList from 'TodoList'; import AddTodo from 'AddTodo'; -var TodoSearch = require('TodoSearch'); +import TodoSearch from 'TodoSearch'; var TodoAPI = require('TodoAPI'); //Main component of this app, maintaining state diff --git a/app/components/TodoList.jsx b/app/components/TodoList.jsx index dc4e6d4..5244886 100644 --- a/app/components/TodoList.jsx +++ b/app/components/TodoList.jsx @@ -1,10 +1,12 @@ var React = require('react'); var {connect} = require('react-redux'); //Partner to Provider import Todo from 'Todo'; +var TodoAPI = require('TodoAPI'); export var TodoList = React.createClass({ render: function() { - var {todos} = this.props; + // All of these props come from the Redux state, setup in connect() + var {todos, showCompleted, searchText} = this.props; var renderTodoList = () => { if (todos.length === 0) { @@ -13,7 +15,7 @@ export var TodoList = React.createClass({ ) } - return todos.map((todo) => { + return TodoAPI.filterTodos(todos, showCompleted, searchText).map((todo) => { return (
@@ -34,11 +36,9 @@ export var TodoList = React.createClass({ // Exports will make the TodoList avialable to be called elsewhere. // Connect is providing access to state variables from the Redux store. -// This syntax means that we can use todos as if it were a prop on this component. +// This syntax means that we can use all properties of the Redux state as if there were props on this component. export default connect( (state) => { - return { - todos: state.todos - }; + return state; } )(TodoList); diff --git a/app/components/TodoSearch.jsx b/app/components/TodoSearch.jsx index 3a389b8..c7c5ee1 100644 --- a/app/components/TodoSearch.jsx +++ b/app/components/TodoSearch.jsx @@ -1,21 +1,31 @@ var React = require('react'); +var {connect} = require('react-redux'); +var actions = require('actions'); -var TodoSearch = React.createClass({ +export var TodoSearch = React.createClass({ handleSearch: function() { var searchText = this.refs.searchText.value; var showCompleted = this.refs.showCompleted.checked; this.props.onSearch(searchText, showCompleted); }, render: function() { - var {id, text, time, complete} = this.props; + // All of these props come from the Redux state, setup in connect() + var {dispatch, showCompleted, searchText} = this.props; return (
- + { + var searchText = this.refs.searchText.value; + dispatch(actions.setSearchText(searchText)); + }}/>
@@ -23,4 +33,10 @@ var TodoSearch = React.createClass({ } }); -module.exports = TodoSearch; +export default connect( + (state) => { + return { + showCompleted: state.showCompleted, + searchText: state.searchText + }; + })(TodoSearch); diff --git a/app/tests/components/TodoList.test.jsx b/app/tests/components/TodoList.test.jsx index fe36cf3..817c77e 100644 --- a/app/tests/components/TodoList.test.jsx +++ b/app/tests/components/TodoList.test.jsx @@ -22,7 +22,7 @@ describe('TodoList', () => { {id: 3, text: 'profit', createdAt: 300, completedAt: undefined, complete: false}, ]; - var store = configureStore.configure({todos}); + var store = configureStore.configure({todos, showCompleted: true}); var provider = TestUtils.renderIntoDocument(); var todoList = TestUtils.scryRenderedComponentsWithType(provider, ConnectedTodoList)[0]; diff --git a/app/tests/components/TodoSearch.test.jsx b/app/tests/components/TodoSearch.test.jsx index 970deb0..9109655 100644 --- a/app/tests/components/TodoSearch.test.jsx +++ b/app/tests/components/TodoSearch.test.jsx @@ -4,45 +4,48 @@ var expect = require('expect'); var $ = require('jQuery'); var TestUtils = require('react-addons-test-utils'); -var TodoSearch = require('TodoSearch'); +// Get the React version of the component +import {TodoSearch} from 'TodoSearch'; describe('TodoSearch', () => { it('should exist', () => { expect(TodoSearch).toExist(); }); - it('should call onSearch as text is entered', () => { + it('should dispatch SET_SEARCH_TEXT when text is entered', () => { //A spy is a function that we can watch, e.g. for callbacks var spy = expect.createSpy(); - var todoSearch = TestUtils.renderIntoDocument(); - - //Make sure we know what the checkbox value is, (should be false) - //var check = todoSearch.refs.showCompleted.checked; + var todoSearch = TestUtils.renderIntoDocument(); //Set the value in the form's text field var testData = 'DOG'; todoSearch.refs.searchText.value = testData; TestUtils.Simulate.change(todoSearch.refs.searchText); + var action = { + type: 'SET_SEARCH_TEXT', + searchText: testData + }; + // The form was changed, so did our spy function get triggered? - //expect(spy).toHaveBeenCalledWith(testData, check); - expect(spy).toHaveBeenCalledWith(testData, false); + expect(spy).toHaveBeenCalledWith(action); }); - it('should call onSearch when completed checkbox is changed', () => { + it('should dispatch TOGGLE_SHOW_COMPLETED when completed checkbox is changed', () => { //A spy is a function that we can watch, e.g. for callbacks var spy = expect.createSpy(); - var todoSearch = TestUtils.renderIntoDocument(); - - //Make sure we know what the text value is (should be '') - //var testData = todoSearch.refs.searchText.value; + var todoSearch = TestUtils.renderIntoDocument(); //Change the form's checkbox (should go from false to true) todoSearch.refs.showCompleted.checked = true; TestUtils.Simulate.change(todoSearch.refs.showCompleted); + var action = { + type: 'TOGGLE_SHOW_COMPLETED' + }; + // The form was changed, so did our spy function get triggered? //expect(spy).toHaveBeenCalledWith(testData, true); - expect(spy).toHaveBeenCalledWith('', true); + expect(spy).toHaveBeenCalledWith(action); }); }); diff --git a/public/bundle.js b/public/bundle.js index 9a1e153..29a3114 100644 --- a/public/bundle.js +++ b/public/bundle.js @@ -83,7 +83,7 @@ /* 6 */ /***/ function(module, exports, __webpack_require__) { - eval("/* WEBPACK VAR INJECTION */(function($) {'use strict';\n\n//Include our npm dependencies\nvar React = __webpack_require__(8);\nvar ReactDOM = __webpack_require__(39);\n\nvar _require = __webpack_require__(185),\n Provider = _require.Provider;\n\n//Creates multiple variables at once in ES6 destructuring syntax\n// Same as var Route = require('react-router').Route; repeated for each item in the list.\n\n\nvar _require2 = __webpack_require__(233),\n Route = _require2.Route,\n Router = _require2.Router,\n IndexRoute = _require2.IndexRoute,\n hashHistory = _require2.hashHistory;\n\n//Include our component dependencies\n\n\nvar TodoApp = __webpack_require__(286);\n\nvar actions = __webpack_require__(459);\nvar store = __webpack_require__(463).configure();\n\nstore.subscribe(function () {\n console.log('New state', store.getState());\n});\n\nstore.dispatch(actions.addTodo('Clean up'));\nstore.dispatch(actions.setSearchText('up'));\nstore.dispatch(actions.toggleShowCompleted());\n\n//Use jQuery to start foundation\n$(document).foundation();\n\n//App css\n__webpack_require__(465);\n\nReactDOM.render(React.createElement(\n Provider,\n { store: store },\n React.createElement(TodoApp, null)\n), document.getElementById('app'));\n/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(7)))//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiNi5qcyIsInNvdXJjZXMiOlsid2VicGFjazovLy9hcHAvYXBwLmpzeD9iYjQ5Il0sInNvdXJjZXNDb250ZW50IjpbIi8vSW5jbHVkZSBvdXIgbnBtIGRlcGVuZGVuY2llc1xudmFyIFJlYWN0ID0gcmVxdWlyZSgncmVhY3QnKTtcbnZhciBSZWFjdERPTSA9IHJlcXVpcmUoJ3JlYWN0LWRvbScpO1xudmFyIHtQcm92aWRlcn0gPSByZXF1aXJlKCdyZWFjdC1yZWR1eCcpO1xuXG4vL0NyZWF0ZXMgbXVsdGlwbGUgdmFyaWFibGVzIGF0IG9uY2UgaW4gRVM2IGRlc3RydWN0dXJpbmcgc3ludGF4XG4vLyBTYW1lIGFzIHZhciBSb3V0ZSA9IHJlcXVpcmUoJ3JlYWN0LXJvdXRlcicpLlJvdXRlOyByZXBlYXRlZCBmb3IgZWFjaCBpdGVtIGluIHRoZSBsaXN0LlxudmFyIHtSb3V0ZSwgUm91dGVyLCBJbmRleFJvdXRlLCBoYXNoSGlzdG9yeX0gPSByZXF1aXJlKCdyZWFjdC1yb3V0ZXInKTtcblxuLy9JbmNsdWRlIG91ciBjb21wb25lbnQgZGVwZW5kZW5jaWVzXG52YXIgVG9kb0FwcCA9IHJlcXVpcmUoJ1RvZG9BcHAnKTtcblxudmFyIGFjdGlvbnMgPSByZXF1aXJlKCdhY3Rpb25zJyk7XG52YXIgc3RvcmUgPSByZXF1aXJlKCdjb25maWd1cmVTdG9yZScpLmNvbmZpZ3VyZSgpO1xuXG5zdG9yZS5zdWJzY3JpYmUoKCkgPT4ge1xuICAgIGNvbnNvbGUubG9nKCdOZXcgc3RhdGUnLCBzdG9yZS5nZXRTdGF0ZSgpKTtcbn0pO1xuXG5zdG9yZS5kaXNwYXRjaChhY3Rpb25zLmFkZFRvZG8oJ0NsZWFuIHVwJykpO1xuc3RvcmUuZGlzcGF0Y2goYWN0aW9ucy5zZXRTZWFyY2hUZXh0KCd1cCcpKTtcbnN0b3JlLmRpc3BhdGNoKGFjdGlvbnMudG9nZ2xlU2hvd0NvbXBsZXRlZCgpKTtcblxuLy9Vc2UgalF1ZXJ5IHRvIHN0YXJ0IGZvdW5kYXRpb25cbiQoZG9jdW1lbnQpLmZvdW5kYXRpb24oKTtcblxuLy9BcHAgY3NzXG5yZXF1aXJlKCdhcHBsaWNhdGlvblN0eWxlcycpO1xuXG5SZWFjdERPTS5yZW5kZXIoXG4gIDxQcm92aWRlciBzdG9yZT17c3RvcmV9PlxuICAgIDxUb2RvQXBwLz5cbiAgPC9Qcm92aWRlcj4sXG4gIGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdhcHAnKVxuKTtcblxuXG5cbi8vIFdFQlBBQ0sgRk9PVEVSIC8vXG4vLyBhcHAvYXBwLmpzeCJdLCJtYXBwaW5ncyI6Ijs7QUFBQTtBQUNBO0FBQ0E7QUFDQTtBQUFBO0FBQUE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBREE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBREE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQUE7QUFDQTtBQURBOyIsInNvdXJjZVJvb3QiOiIifQ=="); + eval("/* WEBPACK VAR INJECTION */(function($) {'use strict';\n\n//Include our npm dependencies\nvar React = __webpack_require__(8);\nvar ReactDOM = __webpack_require__(39);\n\nvar _require = __webpack_require__(185),\n Provider = _require.Provider;\n\n//Creates multiple variables at once in ES6 destructuring syntax\n// Same as var Route = require('react-router').Route; repeated for each item in the list.\n\n\nvar _require2 = __webpack_require__(233),\n Route = _require2.Route,\n Router = _require2.Router,\n IndexRoute = _require2.IndexRoute,\n hashHistory = _require2.hashHistory;\n\n//Include our component dependencies\n\n\nvar TodoApp = __webpack_require__(286);\n\nvar actions = __webpack_require__(459);\nvar store = __webpack_require__(463).configure();\n\nstore.subscribe(function () {\n console.log('New state', store.getState());\n});\n\n//Use jQuery to start foundation\n$(document).foundation();\n\n//App css\n__webpack_require__(465);\n\nReactDOM.render(React.createElement(\n Provider,\n { store: store },\n React.createElement(TodoApp, null)\n), document.getElementById('app'));\n/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(7)))//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiNi5qcyIsInNvdXJjZXMiOlsid2VicGFjazovLy9hcHAvYXBwLmpzeD9iYjQ5Il0sInNvdXJjZXNDb250ZW50IjpbIi8vSW5jbHVkZSBvdXIgbnBtIGRlcGVuZGVuY2llc1xudmFyIFJlYWN0ID0gcmVxdWlyZSgncmVhY3QnKTtcbnZhciBSZWFjdERPTSA9IHJlcXVpcmUoJ3JlYWN0LWRvbScpO1xudmFyIHtQcm92aWRlcn0gPSByZXF1aXJlKCdyZWFjdC1yZWR1eCcpO1xuXG4vL0NyZWF0ZXMgbXVsdGlwbGUgdmFyaWFibGVzIGF0IG9uY2UgaW4gRVM2IGRlc3RydWN0dXJpbmcgc3ludGF4XG4vLyBTYW1lIGFzIHZhciBSb3V0ZSA9IHJlcXVpcmUoJ3JlYWN0LXJvdXRlcicpLlJvdXRlOyByZXBlYXRlZCBmb3IgZWFjaCBpdGVtIGluIHRoZSBsaXN0LlxudmFyIHtSb3V0ZSwgUm91dGVyLCBJbmRleFJvdXRlLCBoYXNoSGlzdG9yeX0gPSByZXF1aXJlKCdyZWFjdC1yb3V0ZXInKTtcblxuLy9JbmNsdWRlIG91ciBjb21wb25lbnQgZGVwZW5kZW5jaWVzXG52YXIgVG9kb0FwcCA9IHJlcXVpcmUoJ1RvZG9BcHAnKTtcblxudmFyIGFjdGlvbnMgPSByZXF1aXJlKCdhY3Rpb25zJyk7XG52YXIgc3RvcmUgPSByZXF1aXJlKCdjb25maWd1cmVTdG9yZScpLmNvbmZpZ3VyZSgpO1xuXG5zdG9yZS5zdWJzY3JpYmUoKCkgPT4ge1xuICAgIGNvbnNvbGUubG9nKCdOZXcgc3RhdGUnLCBzdG9yZS5nZXRTdGF0ZSgpKTtcbn0pO1xuXG4vL1VzZSBqUXVlcnkgdG8gc3RhcnQgZm91bmRhdGlvblxuJChkb2N1bWVudCkuZm91bmRhdGlvbigpO1xuXG4vL0FwcCBjc3NcbnJlcXVpcmUoJ2FwcGxpY2F0aW9uU3R5bGVzJyk7XG5cblJlYWN0RE9NLnJlbmRlcihcbiAgPFByb3ZpZGVyIHN0b3JlPXtzdG9yZX0+XG4gICAgPFRvZG9BcHAvPlxuICA8L1Byb3ZpZGVyPixcbiAgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2FwcCcpXG4pO1xuXG5cblxuLy8gV0VCUEFDSyBGT09URVIgLy9cbi8vIGFwcC9hcHAuanN4Il0sIm1hcHBpbmdzIjoiOztBQUFBO0FBQ0E7QUFDQTtBQUNBO0FBQUE7QUFBQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFEQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFEQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQUE7QUFDQTtBQURBOyIsInNvdXJjZVJvb3QiOiIifQ=="); /***/ }, /* 7 */ @@ -1763,7 +1763,7 @@ /* 286 */ /***/ function(module, exports, __webpack_require__) { - eval("'use strict';\n\nvar _TodoList = __webpack_require__(457);\n\nvar _TodoList2 = _interopRequireDefault(_TodoList);\n\nvar _AddTodo = __webpack_require__(460);\n\nvar _AddTodo2 = _interopRequireDefault(_AddTodo);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _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); } }\n\nvar React = __webpack_require__(8);\nvar UUID = __webpack_require__(287);\nvar moment = __webpack_require__(347);\n\n// Get the default React version of the TodoList component\n\nvar TodoSearch = __webpack_require__(461);\nvar TodoAPI = __webpack_require__(462);\n\n//Main component of this app, maintaining state\nvar TodoApp = React.createClass({\n displayName: 'TodoApp',\n\n getInitialState: function getInitialState() {\n return {\n showCompleted: false,\n searchText: '',\n todos: TodoAPI.getTodos()\n };\n },\n componentDidUpdate: function componentDidUpdate() {\n //This is a little over eager to update even if the filter changes, but it works\n TodoAPI.setTodos(this.state.todos);\n },\n handleAddTodo: function handleAddTodo(text) {\n this.setState({\n todos: [].concat(_toConsumableArray(this.state.todos), [{ id: UUID(), text: text, createdAt: moment().unix(), completedAt: undefined, complete: false }])\n });\n },\n handleFilterTodo: function handleFilterTodo(searchText, showCompleted) {\n this.setState({\n showCompleted: showCompleted,\n searchText: searchText.toLowerCase()\n });\n },\n render: function render() {\n var _state = this.state,\n todos = _state.todos,\n showCompleted = _state.showCompleted,\n searchText = _state.searchText;\n\n var filteredTodos = TodoAPI.filterTodos(todos, showCompleted, searchText);\n return React.createElement(\n 'div',\n null,\n React.createElement(\n 'h1',\n { className: 'page-title' },\n 'Todo App'\n ),\n React.createElement(\n 'div',\n { className: 'row' },\n React.createElement(\n 'div',\n { className: 'column small-centered small-11 medium-6 large-5' },\n React.createElement(\n 'div',\n { className: 'container' },\n React.createElement(TodoSearch, { onSearch: this.handleFilterTodo }),\n React.createElement(_TodoList2.default, null),\n React.createElement(_AddTodo2.default, { onNewTodo: this.handleAddTodo })\n )\n )\n )\n );\n }\n});\n\nmodule.exports = TodoApp;//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMjg2LmpzIiwic291cmNlcyI6WyJ3ZWJwYWNrOi8vL2FwcC9jb21wb25lbnRzL1RvZG9BcHAuanN4P2ExMDgiXSwic291cmNlc0NvbnRlbnQiOlsidmFyIFJlYWN0ID0gcmVxdWlyZSgncmVhY3QnKTtcbnZhciBVVUlEID0gcmVxdWlyZSgnbm9kZS11dWlkJyk7XG52YXIgbW9tZW50ID0gcmVxdWlyZSgnbW9tZW50Jyk7XG5cbi8vIEdldCB0aGUgZGVmYXVsdCBSZWFjdCB2ZXJzaW9uIG9mIHRoZSBUb2RvTGlzdCBjb21wb25lbnRcbmltcG9ydCBUb2RvTGlzdCBmcm9tICdUb2RvTGlzdCc7XG5pbXBvcnQgQWRkVG9kbyBmcm9tICdBZGRUb2RvJztcbnZhciBUb2RvU2VhcmNoID0gcmVxdWlyZSgnVG9kb1NlYXJjaCcpO1xudmFyIFRvZG9BUEkgPSByZXF1aXJlKCdUb2RvQVBJJyk7XG5cbi8vTWFpbiBjb21wb25lbnQgb2YgdGhpcyBhcHAsIG1haW50YWluaW5nIHN0YXRlXG52YXIgVG9kb0FwcCA9IFJlYWN0LmNyZWF0ZUNsYXNzKHtcbiAgZ2V0SW5pdGlhbFN0YXRlOiBmdW5jdGlvbigpIHtcbiAgICByZXR1cm4ge1xuICAgICAgc2hvd0NvbXBsZXRlZDogZmFsc2UsXG4gICAgICBzZWFyY2hUZXh0OiAnJyxcbiAgICAgIHRvZG9zOiBUb2RvQVBJLmdldFRvZG9zKClcbiAgICB9XG4gIH0sXG4gICAgY29tcG9uZW50RGlkVXBkYXRlOiBmdW5jdGlvbigpIHtcbiAgICAgICAgLy9UaGlzIGlzIGEgbGl0dGxlIG92ZXIgZWFnZXIgdG8gdXBkYXRlIGV2ZW4gaWYgdGhlIGZpbHRlciBjaGFuZ2VzLCBidXQgaXQgd29ya3NcbiAgICAgICAgVG9kb0FQSS5zZXRUb2Rvcyh0aGlzLnN0YXRlLnRvZG9zKTtcbiAgICB9LFxuICBoYW5kbGVBZGRUb2RvOiBmdW5jdGlvbih0ZXh0KSB7XG4gICAgdGhpcy5zZXRTdGF0ZSh7XG4gICAgICB0b2RvczogW1xuICAgICAgICAuLi50aGlzLnN0YXRlLnRvZG9zLFxuICAgICAgICB7aWQ6IFVVSUQoKSwgdGV4dDogdGV4dCwgY3JlYXRlZEF0OiBtb21lbnQoKS51bml4KCksIGNvbXBsZXRlZEF0OiB1bmRlZmluZWQsIGNvbXBsZXRlOiBmYWxzZX1cbiAgICAgIF1cbiAgICB9KTtcbiAgfSxcbiAgaGFuZGxlRmlsdGVyVG9kbzogZnVuY3Rpb24oc2VhcmNoVGV4dCwgc2hvd0NvbXBsZXRlZCkge1xuICAgIHRoaXMuc2V0U3RhdGUoe1xuICAgICAgc2hvd0NvbXBsZXRlZDogc2hvd0NvbXBsZXRlZCxcbiAgICAgIHNlYXJjaFRleHQ6IHNlYXJjaFRleHQudG9Mb3dlckNhc2UoKVxuICAgIH0pO1xuICB9LFxuICByZW5kZXI6IGZ1bmN0aW9uKCkge1xuICAgIHZhciB7dG9kb3MsIHNob3dDb21wbGV0ZWQsIHNlYXJjaFRleHR9ID0gdGhpcy5zdGF0ZTtcbiAgICB2YXIgZmlsdGVyZWRUb2RvcyA9IFRvZG9BUEkuZmlsdGVyVG9kb3ModG9kb3MsIHNob3dDb21wbGV0ZWQsIHNlYXJjaFRleHQpO1xuICAgIHJldHVybiAoXG4gICAgICA8ZGl2PlxuICAgICAgICA8aDEgY2xhc3NOYW1lPVwicGFnZS10aXRsZVwiPlRvZG8gQXBwPC9oMT5cbiAgICAgICAgPGRpdiBjbGFzc05hbWU9XCJyb3dcIj5cbiAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT1cImNvbHVtbiBzbWFsbC1jZW50ZXJlZCBzbWFsbC0xMSBtZWRpdW0tNiBsYXJnZS01XCI+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT1cImNvbnRhaW5lclwiPlxuICAgICAgICAgICAgICAgIDxUb2RvU2VhcmNoIG9uU2VhcmNoPXt0aGlzLmhhbmRsZUZpbHRlclRvZG99Lz5cbiAgICAgICAgICAgICAgICA8VG9kb0xpc3QvPlxuICAgICAgICAgICAgICAgIDxBZGRUb2RvIG9uTmV3VG9kbz17dGhpcy5oYW5kbGVBZGRUb2RvfS8+XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICApO1xuICB9XG59KTtcblxubW9kdWxlLmV4cG9ydHMgPSBUb2RvQXBwO1xuXG5cblxuLy8gV0VCUEFDSyBGT09URVIgLy9cbi8vIGFwcC9jb21wb25lbnRzL1RvZG9BcHAuanN4Il0sIm1hcHBpbmdzIjoiOztBQUtBO0FBQ0E7OztBQUFBO0FBQ0E7Ozs7Ozs7QUFQQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFFQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQUE7QUFDQTtBQUFBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFIQTtBQUtBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFEQTtBQU1BO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFGQTtBQUlBO0FBQ0E7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQUE7QUFDQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQ0E7QUFBQTtBQUFBO0FBQ0E7QUFBQTtBQUFBO0FBQ0E7QUFBQTtBQUFBO0FBQ0E7QUFDQTtBQUNBO0FBSEE7QUFEQTtBQURBO0FBRkE7QUFhQTtBQTNDQTtBQUNBO0FBNkNBIiwic291cmNlUm9vdCI6IiJ9"); + eval("'use strict';\n\nvar _TodoList = __webpack_require__(457);\n\nvar _TodoList2 = _interopRequireDefault(_TodoList);\n\nvar _AddTodo = __webpack_require__(460);\n\nvar _AddTodo2 = _interopRequireDefault(_AddTodo);\n\nvar _TodoSearch = __webpack_require__(461);\n\nvar _TodoSearch2 = _interopRequireDefault(_TodoSearch);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _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); } }\n\nvar React = __webpack_require__(8);\nvar UUID = __webpack_require__(287);\nvar moment = __webpack_require__(347);\n\n// Get the default React version of the TodoList component\n\nvar TodoAPI = __webpack_require__(462);\n\n//Main component of this app, maintaining state\nvar TodoApp = React.createClass({\n displayName: 'TodoApp',\n\n getInitialState: function getInitialState() {\n return {\n showCompleted: false,\n searchText: '',\n todos: TodoAPI.getTodos()\n };\n },\n componentDidUpdate: function componentDidUpdate() {\n //This is a little over eager to update even if the filter changes, but it works\n TodoAPI.setTodos(this.state.todos);\n },\n handleAddTodo: function handleAddTodo(text) {\n this.setState({\n todos: [].concat(_toConsumableArray(this.state.todos), [{ id: UUID(), text: text, createdAt: moment().unix(), completedAt: undefined, complete: false }])\n });\n },\n handleFilterTodo: function handleFilterTodo(searchText, showCompleted) {\n this.setState({\n showCompleted: showCompleted,\n searchText: searchText.toLowerCase()\n });\n },\n render: function render() {\n var _state = this.state,\n todos = _state.todos,\n showCompleted = _state.showCompleted,\n searchText = _state.searchText;\n\n var filteredTodos = TodoAPI.filterTodos(todos, showCompleted, searchText);\n return React.createElement(\n 'div',\n null,\n React.createElement(\n 'h1',\n { className: 'page-title' },\n 'Todo App'\n ),\n React.createElement(\n 'div',\n { className: 'row' },\n React.createElement(\n 'div',\n { className: 'column small-centered small-11 medium-6 large-5' },\n React.createElement(\n 'div',\n { className: 'container' },\n React.createElement(_TodoSearch2.default, { onSearch: this.handleFilterTodo }),\n React.createElement(_TodoList2.default, null),\n React.createElement(_AddTodo2.default, { onNewTodo: this.handleAddTodo })\n )\n )\n )\n );\n }\n});\n\nmodule.exports = TodoApp;//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMjg2LmpzIiwic291cmNlcyI6WyJ3ZWJwYWNrOi8vL2FwcC9jb21wb25lbnRzL1RvZG9BcHAuanN4P2ExMDgiXSwic291cmNlc0NvbnRlbnQiOlsidmFyIFJlYWN0ID0gcmVxdWlyZSgncmVhY3QnKTtcbnZhciBVVUlEID0gcmVxdWlyZSgnbm9kZS11dWlkJyk7XG52YXIgbW9tZW50ID0gcmVxdWlyZSgnbW9tZW50Jyk7XG5cbi8vIEdldCB0aGUgZGVmYXVsdCBSZWFjdCB2ZXJzaW9uIG9mIHRoZSBUb2RvTGlzdCBjb21wb25lbnRcbmltcG9ydCBUb2RvTGlzdCBmcm9tICdUb2RvTGlzdCc7XG5pbXBvcnQgQWRkVG9kbyBmcm9tICdBZGRUb2RvJztcbmltcG9ydCBUb2RvU2VhcmNoIGZyb20gJ1RvZG9TZWFyY2gnO1xudmFyIFRvZG9BUEkgPSByZXF1aXJlKCdUb2RvQVBJJyk7XG5cbi8vTWFpbiBjb21wb25lbnQgb2YgdGhpcyBhcHAsIG1haW50YWluaW5nIHN0YXRlXG52YXIgVG9kb0FwcCA9IFJlYWN0LmNyZWF0ZUNsYXNzKHtcbiAgZ2V0SW5pdGlhbFN0YXRlOiBmdW5jdGlvbigpIHtcbiAgICByZXR1cm4ge1xuICAgICAgc2hvd0NvbXBsZXRlZDogZmFsc2UsXG4gICAgICBzZWFyY2hUZXh0OiAnJyxcbiAgICAgIHRvZG9zOiBUb2RvQVBJLmdldFRvZG9zKClcbiAgICB9XG4gIH0sXG4gICAgY29tcG9uZW50RGlkVXBkYXRlOiBmdW5jdGlvbigpIHtcbiAgICAgICAgLy9UaGlzIGlzIGEgbGl0dGxlIG92ZXIgZWFnZXIgdG8gdXBkYXRlIGV2ZW4gaWYgdGhlIGZpbHRlciBjaGFuZ2VzLCBidXQgaXQgd29ya3NcbiAgICAgICAgVG9kb0FQSS5zZXRUb2Rvcyh0aGlzLnN0YXRlLnRvZG9zKTtcbiAgICB9LFxuICBoYW5kbGVBZGRUb2RvOiBmdW5jdGlvbih0ZXh0KSB7XG4gICAgdGhpcy5zZXRTdGF0ZSh7XG4gICAgICB0b2RvczogW1xuICAgICAgICAuLi50aGlzLnN0YXRlLnRvZG9zLFxuICAgICAgICB7aWQ6IFVVSUQoKSwgdGV4dDogdGV4dCwgY3JlYXRlZEF0OiBtb21lbnQoKS51bml4KCksIGNvbXBsZXRlZEF0OiB1bmRlZmluZWQsIGNvbXBsZXRlOiBmYWxzZX1cbiAgICAgIF1cbiAgICB9KTtcbiAgfSxcbiAgaGFuZGxlRmlsdGVyVG9kbzogZnVuY3Rpb24oc2VhcmNoVGV4dCwgc2hvd0NvbXBsZXRlZCkge1xuICAgIHRoaXMuc2V0U3RhdGUoe1xuICAgICAgc2hvd0NvbXBsZXRlZDogc2hvd0NvbXBsZXRlZCxcbiAgICAgIHNlYXJjaFRleHQ6IHNlYXJjaFRleHQudG9Mb3dlckNhc2UoKVxuICAgIH0pO1xuICB9LFxuICByZW5kZXI6IGZ1bmN0aW9uKCkge1xuICAgIHZhciB7dG9kb3MsIHNob3dDb21wbGV0ZWQsIHNlYXJjaFRleHR9ID0gdGhpcy5zdGF0ZTtcbiAgICB2YXIgZmlsdGVyZWRUb2RvcyA9IFRvZG9BUEkuZmlsdGVyVG9kb3ModG9kb3MsIHNob3dDb21wbGV0ZWQsIHNlYXJjaFRleHQpO1xuICAgIHJldHVybiAoXG4gICAgICA8ZGl2PlxuICAgICAgICA8aDEgY2xhc3NOYW1lPVwicGFnZS10aXRsZVwiPlRvZG8gQXBwPC9oMT5cbiAgICAgICAgPGRpdiBjbGFzc05hbWU9XCJyb3dcIj5cbiAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT1cImNvbHVtbiBzbWFsbC1jZW50ZXJlZCBzbWFsbC0xMSBtZWRpdW0tNiBsYXJnZS01XCI+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT1cImNvbnRhaW5lclwiPlxuICAgICAgICAgICAgICAgIDxUb2RvU2VhcmNoIG9uU2VhcmNoPXt0aGlzLmhhbmRsZUZpbHRlclRvZG99Lz5cbiAgICAgICAgICAgICAgICA8VG9kb0xpc3QvPlxuICAgICAgICAgICAgICAgIDxBZGRUb2RvIG9uTmV3VG9kbz17dGhpcy5oYW5kbGVBZGRUb2RvfS8+XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICApO1xuICB9XG59KTtcblxubW9kdWxlLmV4cG9ydHMgPSBUb2RvQXBwO1xuXG5cblxuLy8gV0VCUEFDSyBGT09URVIgLy9cbi8vIGFwcC9jb21wb25lbnRzL1RvZG9BcHAuanN4Il0sIm1hcHBpbmdzIjoiOztBQUtBO0FBQ0E7OztBQUFBO0FBQ0E7OztBQUFBO0FBQ0E7Ozs7Ozs7QUFSQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFHQTtBQUNBO0FBQ0E7QUFDQTtBQUFBO0FBQ0E7QUFBQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBSEE7QUFLQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBREE7QUFNQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBRkE7QUFJQTtBQUNBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUFBO0FBQ0E7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUNBO0FBQUE7QUFBQTtBQUNBO0FBQUE7QUFBQTtBQUNBO0FBQUE7QUFBQTtBQUNBO0FBQ0E7QUFDQTtBQUhBO0FBREE7QUFEQTtBQUZBO0FBYUE7QUEzQ0E7QUFDQTtBQTZDQSIsInNvdXJjZVJvb3QiOiIifQ=="); /***/ }, /* 287 */ @@ -2789,7 +2789,7 @@ /* 457 */ /***/ function(module, exports, __webpack_require__) { - eval("'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.TodoList = undefined;\n\nvar _Todo = __webpack_require__(458);\n\nvar _Todo2 = _interopRequireDefault(_Todo);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar React = __webpack_require__(8);\n\nvar _require = __webpack_require__(185),\n connect = _require.connect; //Partner to Provider\n\n\nvar TodoList = exports.TodoList = React.createClass({\n displayName: 'TodoList',\n\n render: function render() {\n var todos = this.props.todos;\n\n\n var renderTodoList = function renderTodoList() {\n if (todos.length === 0) {\n return React.createElement(\n 'p',\n { className: 'container__message' },\n 'Nothing to do'\n );\n }\n\n return todos.map(function (todo) {\n return React.createElement(\n 'div',\n { className: 'row', key: todo.id },\n React.createElement(\n 'div',\n { className: 'small-centered columns' },\n React.createElement(_Todo2.default, todo)\n )\n );\n });\n };\n\n return React.createElement(\n 'div',\n null,\n renderTodoList()\n );\n }\n});\n\n// Exports will make the TodoList avialable to be called elsewhere.\n// Connect is providing access to state variables from the Redux store.\n// This syntax means that we can use todos as if it were a prop on this component.\nexports.default = connect(function (state) {\n return {\n todos: state.todos\n };\n})(TodoList);//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiNDU3LmpzIiwic291cmNlcyI6WyJ3ZWJwYWNrOi8vL2FwcC9jb21wb25lbnRzL1RvZG9MaXN0LmpzeD9iYjIwIl0sInNvdXJjZXNDb250ZW50IjpbInZhciBSZWFjdCA9IHJlcXVpcmUoJ3JlYWN0Jyk7XG52YXIge2Nvbm5lY3R9ID0gcmVxdWlyZSgncmVhY3QtcmVkdXgnKTsgLy9QYXJ0bmVyIHRvIFByb3ZpZGVyXG5pbXBvcnQgVG9kbyBmcm9tICdUb2RvJztcblxuZXhwb3J0IHZhciBUb2RvTGlzdCA9IFJlYWN0LmNyZWF0ZUNsYXNzKHtcbiAgcmVuZGVyOiBmdW5jdGlvbigpIHtcbiAgICB2YXIge3RvZG9zfSA9IHRoaXMucHJvcHM7XG5cbiAgICB2YXIgcmVuZGVyVG9kb0xpc3QgPSAoKSA9PiB7XG4gICAgICAgIGlmICh0b2Rvcy5sZW5ndGggPT09IDApIHtcbiAgICAgICAgICAgIHJldHVybiAoXG4gICAgICAgICAgICAgICAgPHAgY2xhc3NOYW1lPVwiY29udGFpbmVyX19tZXNzYWdlXCI+Tm90aGluZyB0byBkbzwvcD5cbiAgICAgICAgICAgIClcbiAgICAgICAgfVxuICAgICAgICBcbiAgICAgIHJldHVybiB0b2Rvcy5tYXAoKHRvZG8pID0+IHtcbiAgICAgICAgcmV0dXJuIChcbiAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT1cInJvd1wiIGtleT17dG9kby5pZH0+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT1cInNtYWxsLWNlbnRlcmVkIGNvbHVtbnNcIj5cbiAgICAgICAgICAgICAgPFRvZG8gey4uLnRvZG99Lz5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICApO1xuICAgICAgfSk7XG4gICAgfTtcblxuICAgIHJldHVybiAoXG4gICAgICA8ZGl2PlxuICAgICAgICB7cmVuZGVyVG9kb0xpc3QoKX1cbiAgICAgIDwvZGl2PlxuICAgICk7XG4gIH1cbn0pO1xuXG4vLyBFeHBvcnRzIHdpbGwgbWFrZSB0aGUgVG9kb0xpc3QgYXZpYWxhYmxlIHRvIGJlIGNhbGxlZCBlbHNld2hlcmUuXG4vLyBDb25uZWN0IGlzIHByb3ZpZGluZyBhY2Nlc3MgdG8gc3RhdGUgdmFyaWFibGVzIGZyb20gdGhlIFJlZHV4IHN0b3JlLlxuLy8gVGhpcyBzeW50YXggbWVhbnMgdGhhdCB3ZSBjYW4gdXNlIHRvZG9zIGFzIGlmIGl0IHdlcmUgYSBwcm9wIG9uIHRoaXMgY29tcG9uZW50LlxuZXhwb3J0IGRlZmF1bHQgY29ubmVjdChcbiAgICAoc3RhdGUpID0+IHtcbiAgICAgICAgcmV0dXJuIHtcbiAgICAgICAgICAgIHRvZG9zOiBzdGF0ZS50b2Rvc1xuICAgICAgICB9O1xuICAgIH1cbikoVG9kb0xpc3QpO1xuXG5cblxuLy8gV0VCUEFDSyBGT09URVIgLy9cbi8vIGFwcC9jb21wb25lbnRzL1RvZG9MaXN0LmpzeCJdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQUVBO0FBQ0E7Ozs7O0FBSEE7QUFDQTtBQUFBO0FBQUE7QUFDQTtBQUNBO0FBQ0E7QUFBQTtBQUNBO0FBQUE7QUFBQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUFBO0FBQUE7QUFBQTtBQUVBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFBQTtBQUNBO0FBQUE7QUFBQTtBQUNBO0FBREE7QUFEQTtBQU1BO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFBQTtBQUNBO0FBREE7QUFJQTtBQTNCQTtBQUNBO0FBNkJBO0FBQ0E7QUFDQTtBQUNBO0FBRUE7QUFDQTtBQURBO0FBR0EiLCJzb3VyY2VSb290IjoiIn0="); + eval("'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.TodoList = undefined;\n\nvar _Todo = __webpack_require__(458);\n\nvar _Todo2 = _interopRequireDefault(_Todo);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar React = __webpack_require__(8);\n\nvar _require = __webpack_require__(185),\n connect = _require.connect; //Partner to Provider\n\n\nvar TodoAPI = __webpack_require__(462);\n\nvar TodoList = exports.TodoList = React.createClass({\n displayName: 'TodoList',\n\n render: function render() {\n // All of these props come from the Redux state, setup in connect()\n var _props = this.props,\n todos = _props.todos,\n showCompleted = _props.showCompleted,\n searchText = _props.searchText;\n\n\n var renderTodoList = function renderTodoList() {\n if (todos.length === 0) {\n return React.createElement(\n 'p',\n { className: 'container__message' },\n 'Nothing to do'\n );\n }\n\n return TodoAPI.filterTodos(todos, showCompleted, searchText).map(function (todo) {\n return React.createElement(\n 'div',\n { className: 'row', key: todo.id },\n React.createElement(\n 'div',\n { className: 'small-centered columns' },\n React.createElement(_Todo2.default, todo)\n )\n );\n });\n };\n\n return React.createElement(\n 'div',\n null,\n renderTodoList()\n );\n }\n});\n\n// Exports will make the TodoList avialable to be called elsewhere.\n// Connect is providing access to state variables from the Redux store.\n// This syntax means that we can use all properties of the Redux state as if there were props on this component.\nexports.default = connect(function (state) {\n return state;\n})(TodoList);//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiNDU3LmpzIiwic291cmNlcyI6WyJ3ZWJwYWNrOi8vL2FwcC9jb21wb25lbnRzL1RvZG9MaXN0LmpzeD9iYjIwIl0sInNvdXJjZXNDb250ZW50IjpbInZhciBSZWFjdCA9IHJlcXVpcmUoJ3JlYWN0Jyk7XG52YXIge2Nvbm5lY3R9ID0gcmVxdWlyZSgncmVhY3QtcmVkdXgnKTsgLy9QYXJ0bmVyIHRvIFByb3ZpZGVyXG5pbXBvcnQgVG9kbyBmcm9tICdUb2RvJztcbnZhciBUb2RvQVBJID0gcmVxdWlyZSgnVG9kb0FQSScpO1xuXG5leHBvcnQgdmFyIFRvZG9MaXN0ID0gUmVhY3QuY3JlYXRlQ2xhc3Moe1xuICByZW5kZXI6IGZ1bmN0aW9uKCkge1xuICAgIC8vIEFsbCBvZiB0aGVzZSBwcm9wcyBjb21lIGZyb20gdGhlIFJlZHV4IHN0YXRlLCBzZXR1cCBpbiBjb25uZWN0KClcbiAgICB2YXIge3RvZG9zLCBzaG93Q29tcGxldGVkLCBzZWFyY2hUZXh0fSA9IHRoaXMucHJvcHM7XG5cbiAgICB2YXIgcmVuZGVyVG9kb0xpc3QgPSAoKSA9PiB7XG4gICAgICAgIGlmICh0b2Rvcy5sZW5ndGggPT09IDApIHtcbiAgICAgICAgICAgIHJldHVybiAoXG4gICAgICAgICAgICAgICAgPHAgY2xhc3NOYW1lPVwiY29udGFpbmVyX19tZXNzYWdlXCI+Tm90aGluZyB0byBkbzwvcD5cbiAgICAgICAgICAgIClcbiAgICAgICAgfVxuICAgICAgICBcbiAgICAgIHJldHVybiBUb2RvQVBJLmZpbHRlclRvZG9zKHRvZG9zLCBzaG93Q29tcGxldGVkLCBzZWFyY2hUZXh0KS5tYXAoKHRvZG8pID0+IHtcbiAgICAgICAgcmV0dXJuIChcbiAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT1cInJvd1wiIGtleT17dG9kby5pZH0+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT1cInNtYWxsLWNlbnRlcmVkIGNvbHVtbnNcIj5cbiAgICAgICAgICAgICAgPFRvZG8gey4uLnRvZG99Lz5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICApO1xuICAgICAgfSk7XG4gICAgfTtcblxuICAgIHJldHVybiAoXG4gICAgICA8ZGl2PlxuICAgICAgICB7cmVuZGVyVG9kb0xpc3QoKX1cbiAgICAgIDwvZGl2PlxuICAgICk7XG4gIH1cbn0pO1xuXG4vLyBFeHBvcnRzIHdpbGwgbWFrZSB0aGUgVG9kb0xpc3QgYXZpYWxhYmxlIHRvIGJlIGNhbGxlZCBlbHNld2hlcmUuXG4vLyBDb25uZWN0IGlzIHByb3ZpZGluZyBhY2Nlc3MgdG8gc3RhdGUgdmFyaWFibGVzIGZyb20gdGhlIFJlZHV4IHN0b3JlLlxuLy8gVGhpcyBzeW50YXggbWVhbnMgdGhhdCB3ZSBjYW4gdXNlIGFsbCBwcm9wZXJ0aWVzIG9mIHRoZSBSZWR1eCBzdGF0ZSBhcyBpZiB0aGVyZSB3ZXJlIHByb3BzIG9uIHRoaXMgY29tcG9uZW50LlxuZXhwb3J0IGRlZmF1bHQgY29ubmVjdChcbiAgICAoc3RhdGUpID0+IHtcbiAgICAgICAgcmV0dXJuIHN0YXRlO1xuICAgIH1cbikoVG9kb0xpc3QpO1xuXG5cblxuLy8gV0VCUEFDSyBGT09URVIgLy9cbi8vIGFwcC9jb21wb25lbnRzL1RvZG9MaXN0LmpzeCJdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQUVBO0FBQ0E7Ozs7O0FBSEE7QUFDQTtBQUFBO0FBQUE7QUFDQTtBQUNBO0FBQUE7QUFDQTtBQUNBO0FBQUE7QUFDQTtBQUFBO0FBQ0E7QUFEQTtBQUFBO0FBQUE7QUFBQTtBQUNBO0FBQ0E7QUFFQTtBQUNBO0FBQ0E7QUFDQTtBQUFBO0FBQUE7QUFBQTtBQUVBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFBQTtBQUNBO0FBQUE7QUFBQTtBQUNBO0FBREE7QUFEQTtBQU1BO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFBQTtBQUNBO0FBREE7QUFJQTtBQTVCQTtBQUNBO0FBOEJBO0FBQ0E7QUFDQTtBQUNBO0FBRUE7Iiwic291cmNlUm9vdCI6IiJ9"); /***/ }, /* 458 */ @@ -2813,7 +2813,7 @@ /* 461 */ /***/ function(module, exports, __webpack_require__) { - eval("\"use strict\";\n\nvar React = __webpack_require__(8);\n\nvar TodoSearch = React.createClass({\n displayName: \"TodoSearch\",\n\n handleSearch: function handleSearch() {\n var searchText = this.refs.searchText.value;\n var showCompleted = this.refs.showCompleted.checked;\n this.props.onSearch(searchText, showCompleted);\n },\n render: function render() {\n var _props = this.props,\n id = _props.id,\n text = _props.text,\n time = _props.time,\n complete = _props.complete;\n\n return React.createElement(\n \"div\",\n { className: \"container__header\" },\n React.createElement(\n \"div\",\n null,\n React.createElement(\"input\", { type: \"search\", placeholder: \"Enter search filter\", ref: \"searchText\", onChange: this.handleSearch })\n ),\n React.createElement(\n \"div\",\n null,\n React.createElement(\n \"label\",\n null,\n React.createElement(\"input\", { type: \"checkbox\", ref: \"showCompleted\", onChange: this.handleSearch }),\n \" Show Completed To Dos\"\n )\n )\n );\n }\n});\n\nmodule.exports = TodoSearch;//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiNDYxLmpzIiwic291cmNlcyI6WyJ3ZWJwYWNrOi8vL2FwcC9jb21wb25lbnRzL1RvZG9TZWFyY2guanN4PzAwOWMiXSwic291cmNlc0NvbnRlbnQiOlsidmFyIFJlYWN0ID0gcmVxdWlyZSgncmVhY3QnKTtcblxudmFyIFRvZG9TZWFyY2ggPSBSZWFjdC5jcmVhdGVDbGFzcyh7XG4gIGhhbmRsZVNlYXJjaDogZnVuY3Rpb24oKSB7XG4gICAgdmFyIHNlYXJjaFRleHQgPSB0aGlzLnJlZnMuc2VhcmNoVGV4dC52YWx1ZTtcbiAgICB2YXIgc2hvd0NvbXBsZXRlZCA9IHRoaXMucmVmcy5zaG93Q29tcGxldGVkLmNoZWNrZWQ7XG4gICAgdGhpcy5wcm9wcy5vblNlYXJjaChzZWFyY2hUZXh0LCBzaG93Q29tcGxldGVkKTtcbiAgfSxcbiAgcmVuZGVyOiBmdW5jdGlvbigpIHtcbiAgICB2YXIge2lkLCB0ZXh0LCB0aW1lLCBjb21wbGV0ZX0gPSB0aGlzLnByb3BzO1xuICAgIHJldHVybiAoXG4gICAgICA8ZGl2IGNsYXNzTmFtZT1cImNvbnRhaW5lcl9faGVhZGVyXCI+XG4gICAgICAgIDxkaXY+XG4gICAgICAgICAgPGlucHV0IHR5cGU9XCJzZWFyY2hcIiBwbGFjZWhvbGRlcj1cIkVudGVyIHNlYXJjaCBmaWx0ZXJcIiByZWY9XCJzZWFyY2hUZXh0XCIgb25DaGFuZ2U9e3RoaXMuaGFuZGxlU2VhcmNofS8+XG4gICAgICAgIDwvZGl2PlxuICAgICAgICA8ZGl2PlxuICAgICAgICAgIDxsYWJlbD5cbiAgICAgICAgICAgIDxpbnB1dCB0eXBlPVwiY2hlY2tib3hcIiByZWY9XCJzaG93Q29tcGxldGVkXCIgb25DaGFuZ2U9e3RoaXMuaGFuZGxlU2VhcmNofS8+IFNob3cgQ29tcGxldGVkIFRvIERvc1xuICAgICAgICAgIDwvbGFiZWw+XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9kaXY+XG4gICAgKTtcbiAgfVxufSk7XG5cbm1vZHVsZS5leHBvcnRzID0gVG9kb1NlYXJjaDtcblxuXG5cbi8vIFdFQlBBQ0sgRk9PVEVSIC8vXG4vLyBhcHAvY29tcG9uZW50cy9Ub2RvU2VhcmNoLmpzeCJdLCJtYXBwaW5ncyI6Ijs7QUFBQTtBQUNBO0FBQ0E7QUFBQTtBQUNBO0FBQUE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUNBO0FBQ0E7QUFDQTtBQUFBO0FBQ0E7QUFBQTtBQUFBO0FBQ0E7QUFEQTtBQUdBO0FBQUE7QUFBQTtBQUNBO0FBQUE7QUFBQTtBQUNBO0FBREE7QUFBQTtBQURBO0FBSkE7QUFXQTtBQXBCQTtBQUNBO0FBc0JBIiwic291cmNlUm9vdCI6IiJ9"); + eval("'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nvar React = __webpack_require__(8);\n\nvar _require = __webpack_require__(185),\n connect = _require.connect;\n\nvar actions = __webpack_require__(459);\n\nvar TodoSearch = exports.TodoSearch = React.createClass({\n displayName: 'TodoSearch',\n\n handleSearch: function handleSearch() {\n var searchText = this.refs.searchText.value;\n var showCompleted = this.refs.showCompleted.checked;\n this.props.onSearch(searchText, showCompleted);\n },\n render: function render() {\n var _this = this;\n\n // All of these props come from the Redux state, setup in connect()\n var _props = this.props,\n dispatch = _props.dispatch,\n showCompleted = _props.showCompleted,\n searchText = _props.searchText;\n\n return React.createElement(\n 'div',\n { className: 'container__header' },\n React.createElement(\n 'div',\n null,\n React.createElement('input', { type: 'search', placeholder: 'Enter search filter', ref: 'searchText', value: searchText,\n onChange: function onChange() {\n var searchText = _this.refs.searchText.value;\n dispatch(actions.setSearchText(searchText));\n } })\n ),\n React.createElement(\n 'div',\n null,\n React.createElement(\n 'label',\n null,\n React.createElement('input', { type: 'checkbox', ref: 'showCompleted', checked: showCompleted,\n onChange: function onChange() {\n dispatch(actions.toggleShowCompleted());\n } }),\n ' Show Completed To Dos'\n )\n )\n );\n }\n});\n\nexports.default = connect(function (state) {\n return {\n showCompleted: state.showCompleted,\n searchText: state.searchText\n };\n})(TodoSearch);//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiNDYxLmpzIiwic291cmNlcyI6WyJ3ZWJwYWNrOi8vL2FwcC9jb21wb25lbnRzL1RvZG9TZWFyY2guanN4PzAwOWMiXSwic291cmNlc0NvbnRlbnQiOlsidmFyIFJlYWN0ID0gcmVxdWlyZSgncmVhY3QnKTtcbnZhciB7Y29ubmVjdH0gPSByZXF1aXJlKCdyZWFjdC1yZWR1eCcpO1xudmFyIGFjdGlvbnMgPSByZXF1aXJlKCdhY3Rpb25zJyk7XG5cbmV4cG9ydCB2YXIgVG9kb1NlYXJjaCA9IFJlYWN0LmNyZWF0ZUNsYXNzKHtcbiAgaGFuZGxlU2VhcmNoOiBmdW5jdGlvbigpIHtcbiAgICB2YXIgc2VhcmNoVGV4dCA9IHRoaXMucmVmcy5zZWFyY2hUZXh0LnZhbHVlO1xuICAgIHZhciBzaG93Q29tcGxldGVkID0gdGhpcy5yZWZzLnNob3dDb21wbGV0ZWQuY2hlY2tlZDtcbiAgICB0aGlzLnByb3BzLm9uU2VhcmNoKHNlYXJjaFRleHQsIHNob3dDb21wbGV0ZWQpO1xuICB9LFxuICByZW5kZXI6IGZ1bmN0aW9uKCkge1xuICAgIC8vIEFsbCBvZiB0aGVzZSBwcm9wcyBjb21lIGZyb20gdGhlIFJlZHV4IHN0YXRlLCBzZXR1cCBpbiBjb25uZWN0KClcbiAgICB2YXIge2Rpc3BhdGNoLCBzaG93Q29tcGxldGVkLCBzZWFyY2hUZXh0fSA9IHRoaXMucHJvcHM7XG4gICAgcmV0dXJuIChcbiAgICAgIDxkaXYgY2xhc3NOYW1lPVwiY29udGFpbmVyX19oZWFkZXJcIj5cbiAgICAgICAgPGRpdj5cbiAgICAgICAgICA8aW5wdXQgdHlwZT1cInNlYXJjaFwiIHBsYWNlaG9sZGVyPVwiRW50ZXIgc2VhcmNoIGZpbHRlclwiIHJlZj1cInNlYXJjaFRleHRcIiB2YWx1ZT17c2VhcmNoVGV4dH1cbiAgICAgICAgICAgICAgb25DaGFuZ2U9eygpID0+IHtcbiAgICAgICAgICAgICAgICAgICAgdmFyIHNlYXJjaFRleHQgPSB0aGlzLnJlZnMuc2VhcmNoVGV4dC52YWx1ZTtcbiAgICAgICAgICAgICAgICAgICAgZGlzcGF0Y2goYWN0aW9ucy5zZXRTZWFyY2hUZXh0KHNlYXJjaFRleHQpKTtcbiAgICAgICAgICAgICAgICB9fS8+XG4gICAgICAgIDwvZGl2PlxuICAgICAgICA8ZGl2PlxuICAgICAgICAgIDxsYWJlbD5cbiAgICAgICAgICAgIDxpbnB1dCB0eXBlPVwiY2hlY2tib3hcIiByZWY9XCJzaG93Q29tcGxldGVkXCIgY2hlY2tlZD17c2hvd0NvbXBsZXRlZH1cbiAgICAgICAgICAgICAgICBvbkNoYW5nZT17KCkgPT4ge1xuICAgICAgICAgICAgICAgICAgICAgIGRpc3BhdGNoKGFjdGlvbnMudG9nZ2xlU2hvd0NvbXBsZXRlZCgpKTtcbiAgICAgICAgICAgICAgICAgIH19Lz4gU2hvdyBDb21wbGV0ZWQgVG8gRG9zXG4gICAgICAgICAgPC9sYWJlbD5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICApO1xuICB9XG59KTtcblxuZXhwb3J0IGRlZmF1bHQgY29ubmVjdChcbiAgKHN0YXRlKSA9PiB7XG4gICAgcmV0dXJuIHtcbiAgICAgIHNob3dDb21wbGV0ZWQ6IHN0YXRlLnNob3dDb21wbGV0ZWQsXG4gICAgICBzZWFyY2hUZXh0OiBzdGF0ZS5zZWFyY2hUZXh0XG4gICAgfTtcbiAgfSkoVG9kb1NlYXJjaCk7XG5cblxuXG4vLyBXRUJQQUNLIEZPT1RFUiAvL1xuLy8gYXBwL2NvbXBvbmVudHMvVG9kb1NlYXJjaC5qc3giXSwibWFwcGluZ3MiOiI7Ozs7O0FBQUE7QUFDQTtBQUFBO0FBQUE7QUFDQTtBQUFBO0FBQ0E7QUFDQTtBQUFBO0FBQ0E7QUFBQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFBQTtBQUNBO0FBQUE7QUFEQTtBQUFBO0FBQUE7QUFBQTtBQUNBO0FBRUE7QUFDQTtBQUFBO0FBQ0E7QUFBQTtBQUFBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUxBO0FBT0E7QUFBQTtBQUFBO0FBQ0E7QUFBQTtBQUFBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFKQTtBQUFBO0FBREE7QUFSQTtBQWtCQTtBQTVCQTtBQUNBO0FBOEJBO0FBRUE7QUFDQTtBQUNBO0FBRkE7QUFJQSIsInNvdXJjZVJvb3QiOiIifQ=="); /***/ }, /* 462 */