SWPP lab4

src/components/Todo/Todo.js

@@ -3,15 +3,16 @@ import React from 'react';
 import './Todo.css';
 
 const Todo = (props) => {
-
   return (
     <div className="Todo">
       <div
         className={`text ${props.done && 'done'}`}
-        onClick={props.clicked}>
+        onClick={props.clickDetail}>
         {props.title}
       </div>
       {props.done && <div className="done-mark">&#x2713;</div>}
+      <button onClick={props.clickDone}>{(props.done) ? "Undone" : "Done"}</button>
+      <button onClick={props.clickDelete}>Delete</button>
     </div>
   );
 };

src/containers/TodoList/NewTodo/NewTodo.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
-
 import { Redirect } from 'react-router-dom';
+import { connect } from 'react-redux';
+import * as actionCreators from '../../../store/actions/index';
 
 import './NewTodo.css';
 
@@ -12,12 +13,9 @@ class NewTodo extends Component {
   }
 
   postTodoHandler = () => {
-    const data =
-      { title: this.state.title, content: this.state.content }
-    alert('submitted' + data.title);
-    // this.props.history.push('/todos');
-    this.props.history.goBack();
+    this.props.onStoreTodo(this.state.title, this.state.content);
     this.setState({ submitted: true });
+    console.log("submitted: ", this.state.submitted);
   }
 
   render() {
@@ -36,7 +34,7 @@ class NewTodo extends Component {
         ></input>
         <label>Content</label>
         <textarea rows="4" type="text" value={this.state.content}
-          onChange={(event) => this.setState({ content: event.target.content })}
+          onChange={(event) => this.setState({ content: event.target.value })}
         >
         </textarea>
         <button onClick={() => this.postTodoHandler()}>Submit</button>
@@ -45,4 +43,12 @@ class NewTodo extends Component {
   }
 }
 
-export default NewTodo;
+const mapDispatchToProps = dispatch => {
+  return {
+    onStoreTodo: (title, content) => {
+      dispatch(actionCreators.postTodo({title: title, content: content}));
+    }
+  };
+}
+
+export default connect(null, mapDispatchToProps)(NewTodo);

src/containers/TodoList/RealDetail/RealDetail.js

@@ -1,28 +1,54 @@
 import React, { Component } from 'react';
-
+import { connect } from 'react-redux';
+import * as actionCreators from '../../../store/actions/index';
 import './RealDetail.css';
 
 class RealDetail extends Component {
+  componentDidMount() {
+    this.props.onGetTodo(parseInt(this.props.match.params.id));
+  }
+
   render() {
+    let title = ''; let content = '';
+    if (this.props.selectedTodo) {
+      title = this.props.selectedTodo.title;
+      content = this.props.selectedTodo.content;
+    }
     return (
       <div className="RealDetail" >
         <div className="row">
           <div className="left">
             Name:
-        </div>
+          </div>
           <div className="right">
+            {title}
           </div>
         </div>
         <div className="row">
           <div className="left">
             Content:
-        </div>
+          </div>
           <div className="right">
+            {content}
           </div>
         </div>
       </div>
     );
   }
 };
 
-export default RealDetail;
+const mapStateToProps = state => {
+  return {
+    selectedTodo: state.td.selectedTodo
+  };
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    onGetTodo: id => {
+      dispatch(actionCreators.getTodo(id));
+    }
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(RealDetail);

src/containers/TodoList/TodoList.js

@@ -1,49 +1,35 @@
 import React, { Component } from 'react';
-
-import Todo from '../../components/Todo/Todo';
-import TodoDetail from '../../components/TodoDetail/TodoDetail';
-
+import { connect } from 'react-redux';
 import { NavLink } from 'react-router-dom';
+import { withRouter } from 'react-router';
+import Todo from '../../components/Todo/Todo';
+import * as actionCreators from '../../store/actions/index';
 
 import './TodoList.css';
 
 class TodoList extends Component {
-  state = {
-    todos: [
-      { id: 1, title: 'SWPP', content: 'take swpp class', done: true },
-      { id: 2, title: 'Movie', content: 'watch movie', done: false },
-      { id: 3, title: 'Dinner', content: 'eat dinner', done: false }
-    ],
-    selectedTodo: null,
+  componentDidMount() {
+    this.props.onGetAll();
   }
 
   clickTodoHandler = (td) => {
-    if (this.state.selectedTodo === td) {
-      this.setState({ ...this.state, selectedTodo: null });
-    } else {
-      this.setState({ ...this.state, selectedTodo: td });
-    }
+    this.props.history.push(`/todos/${td.id}`);
   }
 
   render() {
-    const todos = this.state.todos.map(td => {
+    const todos = this.props.storedTodos.map(td => {
       return (
         <Todo
           key={td.id}
           title={td.title}
           done={td.done}
-          clicked={() => this.clickTodoHandler(td)}
+          clickDetail={() => this.clickTodoHandler(td)}
+          clickDone={() => this.props.onToggleTodo(td.id)}
+          clickDelete={() => this.props.onDeleteTodo(td.id)}
         />
       );
     });
 
-    let todo = null;
-    if (this.state.selectedTodo) {
-      todo = <TodoDetail
-        title={this.state.selectedTodo.title}
-        content={this.state.selectedTodo.content}
-      />
-    }
     return (
       <div className="TodoList">
         <div className='title'>
@@ -52,11 +38,30 @@ class TodoList extends Component {
         <div className='todos'>
           {todos}
         </div>
-        {todo}
         <NavLink to='/new-todo' exact>New Todo</NavLink>
       </div>
     )
   }
 }
 
-export default TodoList;
+const mapStateToProps = state => {
+  return {
+    storedTodos: state.td.todos
+  };
+};
+
+const mapDispatchToprops = dispatch => {
+  return {
+    onToggleTodo: (id) => {
+      dispatch(actionCreators.toggleTodo(id));
+    },
+    onDeleteTodo: (id) => {
+      dispatch(actionCreators.deleteTodo(id));
+    },
+    onGetAll: () => {
+      dispatch(actionCreators.getTodos());
+    }
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToprops)(withRouter(TodoList));

src/index.js

@@ -3,8 +3,16 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
+import { Provider } from 'react-redux';
+import { createStore, combineReducers, applyMiddleware } from 'redux'
+import thunk from 'redux-thunk';
+import todoReducer from './store/reducers/todo';
+const rootReducer = combineReducers({
+    td: todoReducer,
+});
+const store = createStore(rootReducer, applyMiddleware(thunk));
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById('root'));
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.

src/store/actions/actionTypes.js

@@ -0,0 +1,5 @@
+export const GET_ALL = 'GET_ALL';
+export const GET_TODO = 'GET_TODO';
+export const TOGGLE_DONE = 'TOGGLE_DONE';
+export const DELETE_TODO = 'DELETE_TODO';
+export const ADD_TODO = 'ADD_TODO';

src/store/actions/index.js

@@ -0,0 +1,3 @@
+export {
+    getTodos, postTodo, deleteTodo, toggleTodo, getTodo
+} from './todo';

src/store/actions/todo.js

@@ -0,0 +1,73 @@
+import * as actionTypes from './actionTypes';
+import axios from 'axios';
+
+export const getTodos_ = (todos) => {
+  return {type: actionTypes.GET_ALL, todos: todos}
+}
+
+export const getTodos = () => {
+	return dispatch => {
+		return axios.get('/api/todo')
+			.then(res => dispatch(getTodos_(res.data)));
+	}
+}
+
+export const postTodo_ = (td) => {
+	return {
+		type: actionTypes.ADD_TODO,
+		id: td.id,
+		title: td.title,
+		content: td.content
+	}
+}
+
+export const postTodo = (td) => {
+	return dispatch => {
+		return axios.post('/api/todo/', td)
+			.then(res => {
+				dispatch(postTodo_(res.data));
+			});
+	}
+}
+
+export const deleteTodo_ = (id) => {
+	return {
+		type: actionTypes.DELETE_TODO,
+		targetID: id	
+	}
+}
+
+export const deleteTodo = (id) => {
+	return dispatch => {
+		return axios.delete(`/api/todo/${id}`)
+			.then(res => dispatch(deleteTodo_(id)));
+	}
+}
+
+export const toggleTodo_ = (id) => {
+	return {
+		type: actionTypes.TOGGLE_DONE,
+		targetID: id
+	}
+}
+
+export const toggleTodo = (id) => {
+	return dispatch => {
+		return axios.put(`/api/todo/${id}`)
+			.then(res => dispatch(toggleTodo_(id)));
+	}
+}
+
+export const getTodo_ = (td) => {
+	return {
+		type: actionTypes.GET_TODO,
+		target: td
+	}
+}
+
+export const getTodo = (id) => {
+	return dispatch => {
+		return axios.get(`/api/todo/${id}`)
+			.then(res => dispatch(getTodo_(res.data)));
+	}
+}

src/store/reducers/todo.js

@@ -0,0 +1,43 @@
+import * as actionTypes from '../actions/actionTypes';
+
+const initialState = {
+	todos: [
+  ],
+  selectedTodo: null
+}
+
+const reducer = (state = initialState, action) => {
+	switch(action.type) {
+		case actionTypes.ADD_TODO:
+			const newTodo = {
+				id: action.id,
+				title: action.title,
+				content: action.content,
+				done: action.done
+			}
+			return {...state, todos: [...state.todos, newTodo]};
+		case actionTypes.TOGGLE_DONE:
+			const modified = state.todos.map((todo) => {
+				if(todo.id === action.targetID) {
+					return {...todo, done: !todo.done};
+				} else {
+					return todo;
+				}
+			});
+			return {...state, todos: modified, };
+		case actionTypes.DELETE_TODO:
+			const deleted = state.todos.filter((todo) => {
+				return todo.id !== action.targetID;
+			});
+			return {...state, todos: deleted};
+		case actionTypes.GET_TODO:
+			return {...state, selectedTodo: action.target};
+		case actionTypes.GET_ALL:
+			return {...state, todos: action.todos};
+		default:
+			break;
+	}
+	return state;
+}
+
+export default reducer;