From 3d9057c1e96d24bad5afc2eccb328483a835554b Mon Sep 17 00:00:00 2001 From: htuszynski Date: Wed, 1 Nov 2017 17:59:44 +0100 Subject: [PATCH] Working todo after store mutating in reducer bug: https://github.com/reactjs/redux/issues/585 --- src/components/ToDoList/AddTodo.js | 34 ++++++++++++++++++++++ src/components/ToDoList/Link.js | 12 ++++---- src/components/ToDoList/Todo.js | 28 +++++++++--------- src/components/ToDoList/TodoList.js | 34 ++++++++++++---------- src/components/ToDoList/VisibleTodoList.js | 6 ++-- src/components/ToDoList/index.js | 3 +- src/components/app.js | 3 +- src/components/test-decomposition.js | 5 ---- src/components/toggle.js | 1 + src/index.js | 12 ++++---- src/reducers/index.js | 2 +- 11 files changed, 88 insertions(+), 52 deletions(-) create mode 100644 src/components/ToDoList/AddTodo.js diff --git a/src/components/ToDoList/AddTodo.js b/src/components/ToDoList/AddTodo.js new file mode 100644 index 0000000..3c2bb98 --- /dev/null +++ b/src/components/ToDoList/AddTodo.js @@ -0,0 +1,34 @@ +import React from 'react'; +import { connect } from 'react-redux'; +import { Button } from 'react-bootstrap'; +import * as Actions from '../../actions'; + +class AddTodo extends React.Component { + dispatch = undefined; + input = undefined; + + constructor(props) { + super(props); + this.dispatch = props.dispatch; + this.addTodo = this.addTodo.bind(this); + } + + addTodo(){ + this.dispatch(Actions.addTodo(this.input.value)); + this.input.value = ''; + } + + render() { + return ( +
+ this.input = e} /> + {' '} + +
+ ); + } +} + +let AddTodoContainer = connect()(AddTodo); + +export default AddTodoContainer; \ No newline at end of file diff --git a/src/components/ToDoList/Link.js b/src/components/ToDoList/Link.js index bbd53bc..8c43011 100644 --- a/src/components/ToDoList/Link.js +++ b/src/components/ToDoList/Link.js @@ -7,20 +7,18 @@ class Link extends React.Component { constructor(props) { super(props); - debugger; this.onClick = props.onClick.bind(this); } render() { if (this.props.active) { - return (); + return (); } else { - return ( - ); + return (); } } } diff --git a/src/components/ToDoList/Todo.js b/src/components/ToDoList/Todo.js index c7fd58e..d21881e 100644 --- a/src/components/ToDoList/Todo.js +++ b/src/components/ToDoList/Todo.js @@ -1,21 +1,23 @@ import React from 'react' import PropTypes from 'prop-types' -const Todo = ({ onClick, completed, text }) => ( -
  • - {text} -
    • -) + +class Todo extends React.Component { + render() { + return (
  • + {this.props.text} +
    • ) + } +} Todo.propTypes = { - onClick: PropTypes.func.isRequired, - completed: PropTypes.bool.isRequired, - text: PropTypes.string.isRequired + onClick: PropTypes.func.isRequired, + isDone: PropTypes.bool.isRequired, + text: PropTypes.string.isRequired } export default Todo \ No newline at end of file diff --git a/src/components/ToDoList/TodoList.js b/src/components/ToDoList/TodoList.js index 484985c..1cd94e5 100644 --- a/src/components/ToDoList/TodoList.js +++ b/src/components/ToDoList/TodoList.js @@ -2,23 +2,27 @@ import React from 'react' import PropTypes from 'prop-types' import Todo from './Todo' -const TodoList = ({ todos, onTodoClick }) => ( - -) +class TodoList extends React.Component { + render() { + return ( + ); + + } +} TodoList.propTypes = { - todos: PropTypes.arrayOf( - PropTypes.shape({ - id: PropTypes.number.isRequired, - completed: PropTypes.bool.isRequired, - text: PropTypes.string.isRequired - }).isRequired - ).isRequired, - onTodoClick: PropTypes.func.isRequired + todos: PropTypes.arrayOf( + PropTypes.shape({ + id: PropTypes.number.isRequired, + isDone: PropTypes.bool.isRequired, + text: PropTypes.string.isRequired + }).isRequired + ).isRequired, + onTodoClick: PropTypes.func.isRequired } export default TodoList \ No newline at end of file diff --git a/src/components/ToDoList/VisibleTodoList.js b/src/components/ToDoList/VisibleTodoList.js index 28bcd3f..8021895 100644 --- a/src/components/ToDoList/VisibleTodoList.js +++ b/src/components/ToDoList/VisibleTodoList.js @@ -8,11 +8,11 @@ import { connect } from 'react-redux'; function getVisibleTodos(todos, visibilityFilter) { switch (visibilityFilter) { case VisibilityFilters.SHOW_ALL: - return todos; + return todos.map((e,i)=>{e.id = i; return e;}); case VisibilityFilters.SHOW_ACTIVE: - return todos.filter(t => !t.isDone); + return todos.filter(t => !t.isDone).map((e,i)=>{e.id = i; return e;}); case VisibilityFilters.SHOW_COMPLETED: - return todos.filter(t => t.isDone); + return todos.filter(t => t.isDone).map((e,i)=>{e.id = i; return e;}); default: return todos; } diff --git a/src/components/ToDoList/index.js b/src/components/ToDoList/index.js index a2016e5..d6faf06 100644 --- a/src/components/ToDoList/index.js +++ b/src/components/ToDoList/index.js @@ -1,6 +1,7 @@ import VisibleTodoList from './VisibleTodoList'; import Footer from './Footer'; +import AddTodoContainer from './AddTodo'; -export { Footer }; +export { Footer, AddTodoContainer }; export default VisibleTodoList; \ No newline at end of file diff --git a/src/components/app.js b/src/components/app.js index 45a3884..015c0e0 100644 --- a/src/components/app.js +++ b/src/components/app.js @@ -8,7 +8,7 @@ import { TestDecomposition } from "./test-decomposition"; import mock from '../data/mock'; import FilterableProductTable from "./filterable-product-data"; import { addTodo, removeTodo } from '../actions' -import VisibleTodoList, {Footer} from './ToDoList'; +import VisibleTodoList, {Footer, AddTodoContainer} from './ToDoList'; export class App extends React.Component { @@ -72,6 +72,7 @@ export class App extends React.Component {
    +
    diff --git a/src/components/test-decomposition.js b/src/components/test-decomposition.js index 5cd4b92..22731be 100644 --- a/src/components/test-decomposition.js +++ b/src/components/test-decomposition.js @@ -4,11 +4,6 @@ export class TestDecomposition extends React.Component { i = 0; - constructor(props) { - super(props); - console.log(`Props decomposition: ${props}`); - } - testIfStringAndAddToItems(obj) { let items = []; diff --git a/src/components/toggle.js b/src/components/toggle.js index 9ff01d3..3b0a909 100644 --- a/src/components/toggle.js +++ b/src/components/toggle.js @@ -19,6 +19,7 @@ export class Toggle extends React.Component { } handleClick = (e) => { + e.preventDefault(); this.setState(prevState => ({ isToggleOn: !prevState.isToggleOn })); diff --git a/src/index.js b/src/index.js index 5139688..c3788cb 100644 --- a/src/index.js +++ b/src/index.js @@ -13,9 +13,9 @@ import "./index.css"; let store = createStore(todoApp, /* preloadedState, */ window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()); -let unsubscribe = store.subscribe(()=>{ - console.log(store.getState()); -}); +// let unsubscribe = store.subscribe(()=>{ +// console.log(store.getState()); +// }); store.dispatch(addTodo("hello")); @@ -26,7 +26,7 @@ ReactDOM.render( document.getElementById("root") ); -window.onunload = () => { - unsubscribe(); -} +// window.onunload = () => { +// unsubscribe(); +// } diff --git a/src/reducers/index.js b/src/reducers/index.js index 258f4b1..19547f3 100644 --- a/src/reducers/index.js +++ b/src/reducers/index.js @@ -25,7 +25,7 @@ function todos(state = [], action) { let todo = state[action.id]; state[action.id].isDone = !todo.isDone; } - return state; + return [...state]; default: return state; }