laere · February 15, 2016 02:33 · Feb 15, 2016 · Feb 15, 2016 · Feb 15, 2016 · Feb 15, 2016
diff --git a/1Reducer.jsx b/1Reducer.jsx
@@ -1,27 +1,28 @@
-
+import dotProp from 'dot-prop-immutable';
 //save string values to vars
 const ADD_TODO = 'ADD_TODO';
 
 let nextId = 0;
-
+//the action is whats performed to alter state
+//addItem is an action creator and nees to return an action
 export const AddTodo = (text) =>  {
   return {
     type: ADD_TODO,
     id: nextId++,
     text
   };
 }
-
 //initial state of items and text
 const initialState = {
   items: [],
-  text: ''
 }
-
+//A pure function that takes the current/prev state
+//and an action, and returns the next state
+//Reducer controls the state, and is where state lives.
 export const ToDoState = (state = initialState, action) => {
   switch(action.type) {
     case ADD_TODO:
-      state = dotProp.set(state, 'items', items => [...items, { text: action.text, id: action.id }]);
+      state = dotProp.set(state, 'items', items => [...items, {text: action.text, id: action.id }])
       console.log(state, action);
       return state;
   default:

diff --git a/3App.jsx b/3App.jsx
@@ -13,8 +13,7 @@ class App extends Component {
   }
 
   handleSubmit(e) {
-    e.preventDefault();
-    this.props.AddTodo(this.refs.inputfield.value);
+    this.props.AddTodo();
   }
 
   render() {
@@ -23,7 +22,7 @@ class App extends Component {
         <h1>To Do App</h1>
           <List
             items={this.props.items}
-            handleOnClick={this.handleSubmit}
+            handleSubmit={this.handleSubmit}
              />
       </div>
     )

diff --git a/4List.jsx b/4List.jsx
@@ -3,6 +3,19 @@ import ListItem from '../components/ListItem';
 
 export default class List extends Component {
 
+  constructor(props) {
+    super(props);
+
+    this.handleOnClick = this.handleOnClick.bind(this);
+  }
+
+  handleOnClick(e) {
+    e.preventDefault();
+    let inputValue = this.refs.inputfield.value;
+    this.props.handleSubmit(inputValue);
+    console.log(inputValue);
+  }
+
   renderTodos() {
     return this.props.items.map((item) => {
       return (
@@ -14,7 +27,7 @@ export default class List extends Component {
   render() {
     return (
       <div>
-        <form onSubmit={this.props.handleSubmit}>
+        <form onSubmit={this.handleOnClick}>
           <input type="text" ref="inputfield"/>
           <input type="submit" value="Add" />
         </form>

diff --git a/1Reducer.jsx b/1Reducer.jsx
@@ -3,8 +3,7 @@
 const ADD_TODO = 'ADD_TODO';
 
 let nextId = 0;
-//the action is whats performed to alter state
-//addItem is an action creator and nees to return an action
+
 export const AddTodo = (text) =>  {
   return {
     type: ADD_TODO,
@@ -18,9 +17,7 @@ const initialState = {
   items: [],
   text: ''
 }
-//A pure function that takes the current/prev state
-//and an action, and returns the next state
-//Reducer controls the state, and is where state lives.
+
 export const ToDoState = (state = initialState, action) => {
   switch(action.type) {
     case ADD_TODO:

diff --git a/3App.jsx b/3App.jsx
@@ -1,23 +1,20 @@
 import React, { Component } from 'react';
-//import actions
 import { AddTodo } from '../reducers/reducer_todos';
-// import { RemoveToDo } from '../reducers/reducer_todos';
-//connect to store
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-//import List component
 import List from '../containers/List';
 
 class App extends Component {
 
   constructor(props) {
     super(props);
+
+    this.handleSubmit = this.handleSubmit.bind(this);
   }
 
   handleSubmit(e) {
     e.preventDefault();
     this.props.AddTodo(this.refs.inputfield.value);
-    this.refs.inputfield.value = ''
   }
 
   render() {
@@ -26,7 +23,7 @@ class App extends Component {
         <h1>To Do App</h1>
           <List
             items={this.props.items}
-            handleSubmit={this.props.handleSubmit}
+            handleOnClick={this.handleSubmit}
              />
       </div>
     )

diff --git a/1Reducer.jsx b/1Reducer.jsx
@@ -1,10 +1,10 @@
 
 //save string values to vars
 const ADD_TODO = 'ADD_TODO';
-const UPDATE_TEXT = 'UPDATE_TEXT';
 
 let nextId = 0;
-
+//the action is whats performed to alter state
+//addItem is an action creator and nees to return an action
 export const AddTodo = (text) =>  {
   return {
     type: ADD_TODO,
@@ -13,25 +13,19 @@ export const AddTodo = (text) =>  {
   };
 }
 
-export const UpdateText = (text) => {
-  return {
-    type: UPDATE_TEXT,
-    text
-  };
-}
-
+//initial state of items and text
 const initialState = {
   items: [],
   text: ''
 }
-
+//A pure function that takes the current/prev state
+//and an action, and returns the next state
+//Reducer controls the state, and is where state lives.
 export const ToDoState = (state = initialState, action) => {
   switch(action.type) {
     case ADD_TODO:
       state = dotProp.set(state, 'items', items => [...items, { text: action.text, id: action.id }]);
-      return state;
-    case UPDATE_TEXT:
-      state.UpdateText = action.text;
+      console.log(state, action);
       return state;
   default:
     return state;

diff --git a/3App.jsx b/3App.jsx
@@ -1,9 +1,6 @@
 import React, { Component } from 'react';
 //import actions
-import { UpdateText } from '../reducers/reducer_todos';
 import { AddTodo } from '../reducers/reducer_todos';
-
-
 // import { RemoveToDo } from '../reducers/reducer_todos';
 //connect to store
 import { connect } from 'react-redux';
@@ -17,20 +14,10 @@ class App extends Component {
     super(props);
   }
 
-  handleOnChange(e) {
-    this.props.UpdateText(e.target.value);
-    console.log(e.target.value);
-  }
-
-  handleOnClick(e) {
+  handleSubmit(e) {
     e.preventDefault();
-    this.props.AddTodo(this.getInputText());
-    console.log('test click');
-  }
-
-  getInputText() {
-    return this.refs.inputfield.value;
-    console.log(this.refs.inputfield.value);
+    this.props.AddTodo(this.refs.inputfield.value);
+    this.refs.inputfield.value = ''
   }
 
   render() {
@@ -39,8 +26,7 @@ class App extends Component {
         <h1>To Do App</h1>
           <List
             items={this.props.items}
-            handleOnClick={this.props.handleOnClick}
-            handleOnChange={this.props.handleOnChange}
+            handleSubmit={this.props.handleSubmit}
              />
       </div>
     )
@@ -50,8 +36,7 @@ class App extends Component {
 let mapDispatchToProps = (dispatch) => {
   return bindActionCreators(
     {
-      AddTodo: AddTodo,
-      UpdateText: UpdateText
+      AddTodo: AddTodo
     }, dispatch);
 }
 

diff --git a/4List.jsx b/4List.jsx
@@ -14,9 +14,9 @@ export default class List extends Component {
   render() {
     return (
       <div>
-        <form>
-          <input onChange={this.props.handleOnChange} ref="inputfield"/>
-          <button onClick={this.props.handleOnClick} >Add</button>
+        <form onSubmit={this.props.handleSubmit}>
+          <input type="text" ref="inputfield"/>
+          <input type="submit" value="Add" />
         </form>
         <ul>
           {this.renderTodos()}

diff --git a/5ListItem.jsx b/5ListItem.jsx
@@ -4,7 +4,7 @@ export default class ListItem extends Component {
   render() {
     return (
       <li>
-        <h4>{this.props.text}</h4>
+        {this.props.text}
       </li>
     );
   }

diff --git a/1Reducer.jsx b/1Reducer.jsx
@@ -5,7 +5,7 @@ const UPDATE_TEXT = 'UPDATE_TEXT';
 
 let nextId = 0;
 
-export const AddToDo = (text) =>  {
+export const AddTodo = (text) =>  {
   return {
     type: ADD_TODO,
     id: nextId++,

diff --git a/3App.jsx b/3App.jsx
@@ -1,9 +1,8 @@
 import React, { Component } from 'react';
 //import actions
 import { UpdateText } from '../reducers/reducer_todos';
-import { AddToDo } from '../reducers/reducer_todos';
-console.log(AddToDo);
-console.log(UpdateText);
+import { AddTodo } from '../reducers/reducer_todos';
+
 
 // import { RemoveToDo } from '../reducers/reducer_todos';
 //connect to store
@@ -51,7 +50,7 @@ class App extends Component {
 let mapDispatchToProps = (dispatch) => {
   return bindActionCreators(
     {
-      AddToDo: AddToDo,
+      AddTodo: AddTodo,
       UpdateText: UpdateText
     }, dispatch);
 }

diff --git a/1Reducer.jsx b/1Reducer.jsx
@@ -2,7 +2,6 @@
 //save string values to vars
 const ADD_TODO = 'ADD_TODO';
 const UPDATE_TEXT = 'UPDATE_TEXT';
-const REMOVE_TODO = 'REMOVE_TODO';
 
 let nextId = 0;
 

diff --git a/Reducer.jsx → 1Reducer.jsx b/Reducer.jsx → 1Reducer.jsx
diff --git a/Root.jsx → 2Root.jsx b/Root.jsx → 2Root.jsx
diff --git a/App.jsx → 3App.jsx b/App.jsx → 3App.jsx
diff --git a/List.jsx → 4List.jsx b/List.jsx → 4List.jsx
diff --git a/ListItem.jsx → 5ListItem.jsx b/ListItem.jsx → 5ListItem.jsx
diff --git a/App.jsx b/App.jsx
@@ -0,0 +1,66 @@
+import React, { Component } from 'react';
+//import actions
+import { UpdateText } from '../reducers/reducer_todos';
+import { AddToDo } from '../reducers/reducer_todos';
+console.log(AddToDo);
+console.log(UpdateText);
+
+// import { RemoveToDo } from '../reducers/reducer_todos';
+//connect to store
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+//import List component
+import List from '../containers/List';
+
+class App extends Component {
+
+  constructor(props) {
+    super(props);
+  }
+
+  handleOnChange(e) {
+    this.props.UpdateText(e.target.value);
+    console.log(e.target.value);
+  }
+
+  handleOnClick(e) {
+    e.preventDefault();
+    this.props.AddTodo(this.getInputText());
+    console.log('test click');
+  }
+
+  getInputText() {
+    return this.refs.inputfield.value;
+    console.log(this.refs.inputfield.value);
+  }
+
+  render() {
+    return (
+      <div>
+        <h1>To Do App</h1>
+          <List
+            items={this.props.items}
+            handleOnClick={this.props.handleOnClick}
+            handleOnChange={this.props.handleOnChange}
+             />
+      </div>
+    )
+  }
+}
+
+let mapDispatchToProps = (dispatch) => {
+  return bindActionCreators(
+    {
+      AddToDo: AddToDo,
+      UpdateText: UpdateText
+    }, dispatch);
+}
+
+let mapStateToProps = (state) => {
+  return {
+    items: state.items,
+    text: state.text
+  }
+}
+
+ export default connect(mapStateToProps, mapDispatchToProps)(App);
diff --git a/List.jsx b/List.jsx
@@ -0,0 +1,27 @@
+import React, { Component } from 'react';
+import ListItem from '../components/ListItem';
+
+export default class List extends Component {
+
+  renderTodos() {
+    return this.props.items.map((item) => {
+      return (
+        <ListItem key={item.id} text={item.text} />
+      );
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <form>
+          <input onChange={this.props.handleOnChange} ref="inputfield"/>
+          <button onClick={this.props.handleOnClick} >Add</button>
+        </form>
+        <ul>
+          {this.renderTodos()}
+        </ul>
+      </div>
+    );
+  }
+}
diff --git a/ListItem.jsx b/ListItem.jsx
@@ -0,0 +1,11 @@
+import React, { Component } from 'react';
+
+export default class ListItem extends Component {
+  render() {
+    return (
+      <li>
+        <h4>{this.props.text}</h4>
+      </li>
+    );
+  }
+}
diff --git a/Reducer.jsx b/Reducer.jsx
@@ -0,0 +1,40 @@
+
+//save string values to vars
+const ADD_TODO = 'ADD_TODO';
+const UPDATE_TEXT = 'UPDATE_TEXT';
+const REMOVE_TODO = 'REMOVE_TODO';
+
+let nextId = 0;
+
+export const AddToDo = (text) =>  {
+  return {
+    type: ADD_TODO,
+    id: nextId++,
+    text
+  };
+}
+
+export const UpdateText = (text) => {
+  return {
+    type: UPDATE_TEXT,
+    text
+  };
+}
+
+const initialState = {
+  items: [],
+  text: ''
+}
+
+export const ToDoState = (state = initialState, action) => {
+  switch(action.type) {
+    case ADD_TODO:
+      state = dotProp.set(state, 'items', items => [...items, { text: action.text, id: action.id }]);
+      return state;
+    case UPDATE_TEXT:
+      state.UpdateText = action.text;
+      return state;
+  default:
+    return state;
+  }
+}
diff --git a/Root.jsx b/Root.jsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './components/app';
+import dotProp from 'dot-prop-immutable';
+
+import { Provider } from 'react-redux';
+import { createStore } from 'redux';
+import { ToDoState } from '../src/reducers/reducer_todos';
+
+let store = createStore(ToDoState);
+
+console.log(store);
+
+  ReactDOM.render(
+    <Provider store={store}>
+      <App />
+    </Provider>,
+  document.querySelector('.container'));