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