lab 4 PR

package.json

@@ -2,12 +2,16 @@
   "name": "swppfront",
   "version": "0.1.0",
   "private": true,
+  "proxy": "http://localhost:8000",
   "dependencies": {
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
+    "react-redux": "^7.2.1",
     "react-router": "^5.0.1",
     "react-router-dom": "^5.0.1",
-    "react-scripts": "3.1.1"
+    "react-scripts": "3.1.1",
+    "redux": "^4.0.5",
+    "redux-thunk": "^2.3.0"
   },
   "scripts": {
     "start": "react-scripts start",

src/components/Todo/Todo.js

@@ -8,10 +8,12 @@ const Todo = (props) => {
     <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 this todo</button>
     </div>
   );
 };

src/containers/TodoList/NewTodo/NewTodo.js

@@ -1,30 +1,24 @@
 import React, { Component } from 'react';
+import { connect } from 'react-redux';
 
 import { Redirect } from 'react-router-dom';
+import * as actionTypes from '../../../store/actions/actionTypes';
+import * as actionCreators from '../../../store/actions/index';
+//all of them are inside actionTypes
 
 import './NewTodo.css';
 
 class NewTodo extends Component {
   state = {
     title: '',
     content: '',
-    submitted: false
   }
 
   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.setState({ submitted: true });
+    this.props.onStoreTodo(this.state.title, this.state.content);
   }
 
   render() {
-    let redirect = null;
-    if (this.state.submitted) {
-      redirect = <Redirect to='/todos' />
-    }
     return (
       <div className="NewTodo">
         <h1>Add a New Todo!</h1>
@@ -36,7 +30,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 +39,11 @@ 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,55 @@
 import React, { Component } from 'react';
-
+import * as actionCreators from '../../../store/actions/index';
 import './RealDetail.css';
 
+import { connect } from 'react-redux';
+import * as actionTypes from '../../../store/actions/actionTypes';
+
 class RealDetail extends Component {
+
+  componentDidMount() {
+    this.props.onGetTodo(parseInt(this.props.match.params.id));
+  }
+
   render() {
+    let content = '', title='';
+    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 className="right">
+            {title}
           </div>
         </div>
         <div className="row">
           <div className="left">
             Content:
         </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,7 +1,96 @@
+
 import React, { Component } from 'react';
+import axios from 'axios';
+import Todo from '../../components/Todo/Todo';
+import TodoDetail from '../../components/TodoDetail/TodoDetail';
+
+import { NavLink } from 'react-router-dom';
+
+import './TodoList.css';
+
+import { connect } from 'react-redux';
+import { withRouter } from 'react-router';
+import * as actionTypes from '../../store/actions/actionTypes';
+import * as actionTypes from '../../store/actions/index';
+
+class TodoList extends Component {
+  componentDidMount() {
+    this.props.onGetAll();
+  }
+
+  state = {
+    todos: [],
+    selectedTodo: null,
+  }
+
+  clickTodoHandler = (td) => {
+    this.props.history.push(this.props.match.url + '/' + td.id);
+  }
+
+  render() {
+    const todos = this.props.storedTodos.map(td => {
+      return (
+        <Todo
+          key={td.id}
+          title={td.title}
+          done={td.done}
+          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'>
+          {this.props.title}
+        </div>
+        <div className='todos'>
+          {todos}
+        </div>
+        {todo}
+        <NavLink to='/new-todo' exact>New Todo</NavLink>
+      </div>
+    )
+  }
+}
 
+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));
+
+/*
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import {withRouter} from 'react-router';
 import Todo from '../../components/Todo/Todo';
 import TodoDetail from '../../components/TodoDetail/TodoDetail';
+import * as actionTypes from '../../store/actions/actionTypes';
 
 import { NavLink } from 'react-router-dom';
 
@@ -18,30 +107,29 @@ class TodoList extends Component {
   }
 
   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) {
+    if (this.props.selectedTodo) {
       todo = <TodoDetail
-        title={this.state.selectedTodo.title}
-        content={this.state.selectedTodo.content}
+        title={this.props.selectedTodo.title}
+        content={this.props.selectedTodo.content}
       />
     }
     return (
@@ -59,4 +147,22 @@ class TodoList extends Component {
   }
 }
 
-export default TodoList;
+//func bringing info (first param)
+const mapStateToProps = state => { //global state 
+  return {
+    storedTodos: state.td.todos,
+    selectedTodo: state.td.selectedTodo,
+    //td acts like a namespace
+  };
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    onToggleTodo: (id) => dispatch({ type: actionTypes.TOGGLE_DONE, targetID: id }),
+    onDeleteTodo: (id) =>  dispatch({ type: actionTypes.DELETE_TODO, targetID: id }),
+  }
+}
+
+
+export default connect(mapStateToProps, mapDispatchToProps)(withRouter(TodoList));
+*/

src/index.js

@@ -3,8 +3,29 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
+import { Provider } from 'react-redux';
+import thunk from 'redux-thunk';
+import { createStore, combineReducers, applyMiddleware, compose } from 'redux';	
+//import thunk from 'redux-thunk';	
+//import { connectRouter, routerMiddleware } from 'connected-react-router';	
+import { createBrowserHistory } from 'history';
+import todoReducer from './store/reducers/todo';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+const rootReducer = combineReducers({
+    td: todoReducer, //td: used as name space
+  });
+
+
+const store = createStore(rootReducer,applyMiddleware(thunk));
+
+
+
+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 ADD_TODO = 'ADD_TODO';
+export const TOGGLE_DONE = 'TOGGLE_DONE';
+export const DELETE_TODO = 'DELETE_TODO';
+export const GET_TODO = 'GET_TODO';

src/store/actions/index.js

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