Working todo after store mutating in reducer bug: reduxjs/redux#585

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 (
+            <div>
+                <input type="text" placeholder="Nowe zadanie..." ref={e => this.input = e} />
+                {' '}
+                <Button bsSize="small" onClick={this.addTodo}>Dodaj</Button>
+            </div>
+        );
+    }
+}
+
+let AddTodoContainer = connect()(AddTodo);
+
+export default AddTodoContainer; 

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 (<Button bsStyle="primary" bpSize="small" disabled>{this.props.children}</Button>);
+            return (<Button bsStyle="primary" bsSize="small" disabled>{this.props.children}</Button>);
         }
         else {
-            return (<Button bpStyle="primary" bpSize="small" onClick={e => {
-                    e.preventDefault();
-                    this.onClick();
-                }}>{this.props.children}</Button>
-            );
+            return (<Button bsStyle="primary" bsSize="small" onClick={e => {
+                e.preventDefault();
+                this.onClick();
+            }}>{this.props.children}</Button>);
         }
     }
 }

src/components/ToDoList/Todo.js

@@ -1,21 +1,23 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-const Todo = ({ onClick, completed, text }) => (
-  <li
-    onClick={onClick}
-    style={{
-      textDecoration: completed ? 'line-through' : 'none'
-    }}
-  >
-    {text}
-  </li>
-)
+
+class Todo extends React.Component {
+    render() {
+        return (<li
+            onClick={this.props.onClick}
+            style={{
+                textDecoration: this.props.isDone ? 'line-through' : 'none'
+            }}>
+            {this.props.text}
+        </li>)
+    }
+}
 
 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

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 }) => (
-  <ul>
-    {todos.map((todo, index) => (
-      <Todo key={index} {...todo} onClick={() => onTodoClick(index)} />
-    ))}
-  </ul>
-)
+class TodoList extends React.Component {
+    render() {
+        return (
+            <ul>
+                {this.props.todos.map((todo, index) => (
+                    <Todo key={index} {...todo} onClick={() => this.props.onTodoClick(index)} />
+                ))}
+            </ul>);
+
+    }
+}
 
 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

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;
     }

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;

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 {
                     <FilterableProductTable data={mock} />
                 </div>
                 <div className="pan lc">
+                    <AddTodoContainer />
                     <VisibleTodoList />
                     <Footer />
                 </div>

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 = [];
 

src/components/toggle.js

@@ -19,6 +19,7 @@ export class Toggle extends React.Component {
     }
 
     handleClick = (e) => {
+        e.preventDefault();
         this.setState(prevState => ({
             isToggleOn: !prevState.isToggleOn
         }));

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();
+// }
 

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;
     }