ta session 4

package.json

@@ -2,12 +2,18 @@
   "name": "swppfront",
   "version": "0.1.0",
   "private": true,
+  "proxy": "http://localhost:8000",
   "dependencies": {
+    "axios": "^0.20.0",
+    "connected-react-router": "^6.8.0",
     "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/App.js

@@ -1,25 +1,30 @@
-import React from 'react';
-import './App.css';
+import React from "react";
+import "./App.css";
 
-import TodoList from './containers/TodoList/TodoList';
-import RealDetail from './containers/TodoList/RealDetail/RealDetail';
-import NewTodo from './containers/TodoList/NewTodo/NewTodo';
+import TodoList from "./containers/TodoList/TodoList";
+import RealDetail from "./containers/TodoList/RealDetail/RealDetail";
+import NewTodo from "./containers/TodoList/NewTodo/NewTodo";
 
-import { BrowserRouter, Route, Redirect, Switch } from 'react-router-dom';
+import { Route, Redirect, Switch } from "react-router-dom";
+import { ConnectedRouter } from "connected-react-router";
 
-function App() {
+function App(props) {
   return (
-    <BrowserRouter>
-      <div className="App" >
+    <ConnectedRouter history={props.history}>
+      <div className="App">
         <Switch>
-          <Route path='/todos' exact render={() => <TodoList title="My TODOs!" />} />
-          <Route path='/todos/:id' exact component={RealDetail} />
-          <Route path='/new-todo' exact component={NewTodo} />
-          <Redirect exact from='/' to='todos' />
+          <Route
+            path="/todos"
+            exact
+            render={() => <TodoList title="My TODOs!" />}
+          />
+          <Route path="/todos/:id" exact component={RealDetail} />
+          <Route path="/new-todo" exact component={NewTodo} />
+          <Redirect exact from="/" to="todos" />
           <Route render={() => <h1>Not Found</h1>} />
         </Switch>
-      </div >
-    </BrowserRouter>
+      </div>
+    </ConnectedRouter>
   );
 }
 

src/components/Todo/Todo.js

@@ -1,19 +1,23 @@
-import React from 'react';
+import React from "react";
 
-import './Todo.css';
-
-const Todo = (props) => {
+import "./Todo.css";
 
+const Todo = props => {
   return (
     <div className="Todo">
       <div
-        className={`text ${props.done && 'done'}`}
-        onClick={props.clicked}>
+        className={`text ${props.done && "done"}`}
+        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>
   );
 };
 
-export default Todo;
+export default Todo;

src/containers/TodoList/NewTodo/NewTodo.js

@@ -1,48 +1,51 @@
-import React, { Component } from 'react';
+import React, { Component } from "react";
 
-import { Redirect } from 'react-router-dom';
+import "./NewTodo.css";
 
-import './NewTodo.css';
+import { connect } from "react-redux";
+import * as actionCreators from "../../../store/actions/index";
 
 class NewTodo extends Component {
   state = {
-    title: '',
-    content: '',
-    submitted: false
-  }
+    title: "",
+    content: ""
+  };
 
   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>
         <label>Title</label>
         <input
           type="text"
           value={this.state.title}
-          onChange={(event) => this.setState({ title: event.target.value })}
+          onChange={event => this.setState({ title: event.target.value })}
         ></input>
         <label>Content</label>
-        <textarea rows="4" type="text" value={this.state.content}
-          onChange={(event) => this.setState({ content: event.target.content })}
-        >
-        </textarea>
+        <textarea
+          rows="4"
+          type="text"
+          value={this.state.content}
+          onChange={event => this.setState({ content: event.target.value })}
+        ></textarea>
         <button onClick={() => this.postTodoHandler()}>Submit</button>
       </div>
     );
   }
 }
 
-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,50 @@
-import React, { Component } from 'react';
+import React, { Component } from "react";
 
-import './RealDetail.css';
+import "./RealDetail.css";
+
+import { connect } from "react-redux";
+import * as actionCreators from "../../../store/actions/index";
 
 class RealDetail extends Component {
+  componentDidMount() {
+    this.props.onGetTodo(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="RealDetail">
         <div className="row">
-          <div className="left">
-            Name:
-        </div>
-          <div className="right">
-          </div>
+          <div className="left">Name:</div>
+          <div className="right">{title}</div>
         </div>
         <div className="row">
-          <div className="left">
-            Content:
-        </div>
-          <div className="right">
-          </div>
+          <div className="left">Content:</div>
+          <div className="right">{content}</div>
         </div>
       </div>
     );
   }
+}
+
+const mapStateToProps = state => {
+  return {
+    selectedTodo: state.td.selectedTodo
+  };
+};
+
+const mapDispatchToProps = dispatch => {
+  return {
+    onGetTodo: id => dispatch(actionCreators.getTodo(id))
+  };
 };
 
-export default RealDetail;
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(RealDetail);

src/containers/TodoList/TodoList.js

@@ -1,62 +1,61 @@
-import React, { Component } from 'react';
-
-import Todo from '../../components/Todo/Todo';
-import TodoDetail from '../../components/TodoDetail/TodoDetail';
-
-import { NavLink } from 'react-router-dom';
-
-import './TodoList.css';
+import React, { Component } from "react";
+import Todo from "../../components/Todo/Todo";
+import { NavLink } from "react-router-dom";
+import "./TodoList.css";
+import { connect } from "react-redux";
+import { withRouter } from "react-router";
+import * as actionCreators from "../../store/actions/index";
 
 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 });
-    }
-  }
+  clickTodoHandler = 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'>
-          {this.props.title}
-        </div>
-        <div className='todos'>
-          {todos}
-        </div>
-        {todo}
-        <NavLink to='/new-todo' exact>New Todo</NavLink>
+        <div className="title">{this.props.title}</div>
+        {todos}
+        <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,40 @@ 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, 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 history = createBrowserHistory();
+const rootReducer = combineReducers({
+    td: todoReducer,
+    router: connectRouter(history),
+});
+
+const logger = store => {
+    return next => {
+        return action => {
+            console.log('[Middleware] Dispatching', action);
+            const result = next(action);
+            console.log('[Middleware] Next State', store.getState());
+            return result;
+        };
+    };
+};
+
+const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+const store = createStore(rootReducer,
+    composeEnhancers(
+        applyMiddleware(logger, thunk, routerMiddleware(history))));
+
+ReactDOM.render(
+    <Provider store={store}>
+        <App history={history} />
+    </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';