Lab 4

package.json

@@ -1,17 +1,21 @@
 {
-  "name": "swpp-p3-react-tutorial",
+  "name": "todo",
   "version": "0.1.0",
-  "private": true,
+  "private": false,
+  "proxy": "http://127.0.0.1:8000",
   "dependencies": {
+    "@reduxjs/toolkit": "^1.8.5",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "13.3.0",
     "@testing-library/user-event": "13.5.0",
     "@types/jest": "27.5.2",
     "@types/node": "16.11.56",
     "@types/react": "18.0.17",
     "@types/react-dom": "18.0.6",
+    "axios": "^0.27.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-redux": "^8.0.4",
     "react-router": "6.3.0",
     "react-router-dom": "6.3.0",
     "react-scripts": "5.0.1",

src/App.tsx

@@ -3,6 +3,7 @@ import TodoList from "./containers/TodoList/TodoList"; // can omit.js
 import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
 import NewTodo from "./containers/TodoList/NewTodo/NewTodo";
 import TodoDetail from "./components/TodoDetail/TodoDetail";
+import React from "react";
 
 function App() {
   return (
@@ -27,4 +28,4 @@ export default App;
  * this syntax is compiled to React.createElement(‘div’, {className: ‘TodoList’})
  * by React Transpiler.
  * );
- */
+ */

src/components/Todo/Todo.tsx

@@ -1,19 +1,24 @@
+import React from "react";
 import "./Todo.css";
 
 interface IProps {
   title: string;
-  clicked?: React.MouseEventHandler<HTMLDivElement>; // Defined by React
+  clickDetail?: React.MouseEventHandler<HTMLDivElement>; // Defined by React
+  clickDone?: () => void;
+  clickDelete?: () => void;
   done: boolean;
 }
 
 const Todo = (props: IProps) => {
   return (
     <div className="Todo">
-      <div className={`text ${props.done && "done"}`} onClick={props.clicked}>
+      <div 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/components/TodoDetail/TodoDetail.tsx

@@ -1,22 +1,32 @@
+import React from "react";
+import { useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { useParams } from "react-router";
+import { AppDispatch } from "../../store";
+import { selectTodo, fetchTodo } from "../../store/slices/todo";
 import "./TodoDetail.css";
 
-type Props = {
-  title: string;
-  content: string;
-};
+const TodoDetail = () => {
+  const { id } = useParams();
+  const dispatch = useDispatch<AppDispatch>();
+  const todoState = useSelector(selectTodo);
+
+  useEffect(() => {
+    dispatch(fetchTodo(Number(id)));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [id]);
 
-const TodoDetail = (props: Props) => {
   return (
     <div className="TodoDetail">
       <div className="row">
         <div className="left">Name:</div>
-        <div className="right">{props.title}</div>
+        <div className="right">{todoState.selectedTodo?.title}</div>
       </div>
       <div className="row">
         <div className="left">Content:</div>
-        <div className="right">{props.content}</div>
+        <div className="right">{todoState.selectedTodo?.content}</div>
       </div>
     </div>
   );
 };
-export default TodoDetail;
+export default TodoDetail;

src/containers/TodoList/NewTodo/NewTodo.tsx

@@ -1,12 +1,17 @@
+import React from "react";
 import { useState } from "react";
+import { useDispatch } from "react-redux";
 import { Navigate } from "react-router-dom";
 // import { useNavigate } from "react-router-dom";
+import { AppDispatch } from "../../../store";
+import { postTodo } from "../../../store/slices/todo";
 import "./NewTodo.css";
 
 export default function NewTodo() {
   const [title, setTitle] = useState<string>("");
   const [content, setContent] = useState<string>("");
   const [submitted, setSubmitted] = useState<boolean>(false);
+  const dispatch = useDispatch<AppDispatch>();
 
   // const navigate = useNavigate()
   // const postTodoHandler = () => {
@@ -16,10 +21,14 @@ export default function NewTodo() {
   //   navigate('/todos')
   // };
 
-  const postTodoHandler = () => {
+  const postTodoHandler = async () => {
     const data = { title: title, content: content };
-    alert("Submitted\n" + data.title + "\n" + data.content);
-    setSubmitted(true);
+    const result = await dispatch(postTodo(data));
+    if (result.type === `${postTodo.typePrefix}/fulfilled`) {
+      setSubmitted(true);
+    } else {
+      alert("Error on post Todo");
+    }
   };
 
   if (submitted) {
@@ -44,4 +53,4 @@ export default function NewTodo() {
       </div>
     );
   }
-}
+}

src/containers/TodoList/TodoList.tsx

@@ -1,8 +1,16 @@
-import { useMemo, useState } from "react";
-import { NavLink } from "react-router-dom";
+import { useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { NavLink, useNavigate } from "react-router-dom";
 import Todo from "../../components/Todo/Todo";
-import TodoDetail from "../../components/TodoDetail/TodoDetail";
+import {
+  fetchTodos,
+  selectTodo,
+  toggleDone,
+  deleteTodo,
+} from "../../store/slices/todo";
 import "./TodoList.css";
+import { AppDispatch } from "../../store";
+import React from "react";
 
 interface IProps {
   title: string;
@@ -11,46 +19,39 @@ interface IProps {
 type TodoType = { id: number; title: string; content: string; done: boolean };
 
 export default function TodoList(props: IProps) {
+  const navigate = useNavigate();
   const { title } = props;
-  const [selectedTodo, setSelectedTodo] = useState<TodoType | null>(null);
 
-  const [todos, setTodos] = useState<TodoType[]>([
-    { 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 },
-  ]);
+  const todoState = useSelector(selectTodo);
+  const dispatch = useDispatch<AppDispatch>();
+
+  useEffect(() => {
+    dispatch(fetchTodos());
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   const clickTodoHandler = (td: TodoType) => {
-    if (selectedTodo === td) {
-      setSelectedTodo(null);
-    } else {
-      setSelectedTodo(td);
-    }
+    navigate("/todos/" + td.id);
   };
 
-  const todoDetail = useMemo(() => {
-    return selectedTodo ? (
-      <TodoDetail title={selectedTodo.title} content={selectedTodo.content} />
-    ) : null;
-  }, [selectedTodo]);
-
   return (
     <div className="TodoList">
       <div className="title">{title}</div>
       <div className="todos">
-        {todos.map((td) => {
+        {todoState.todos.map((td) => {
           return (
             <Todo
               key={`${td.id}_todo`}
               title={td.title}
               done={td.done}
-              clicked={() => clickTodoHandler(td)}
+              clickDetail={() => clickTodoHandler(td)}
+              clickDone={() => dispatch(toggleDone(td.id))}
+              clickDelete={() => dispatch(deleteTodo(td.id))}
             />
           );
         })}
-        {todoDetail}
-        <NavLink to="/new-todo" >New Todo</NavLink>
+        <NavLink to="/new-todo">New Todo</NavLink>
       </div>
     </div>
   );
-}
+}

src/index.tsx

@@ -1,13 +1,18 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { Provider } from "react-redux";
+
+import "./index.css";
+import App from "./App";
+import { store } from "./store";
 
 const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
+  document.getElementById("root") as HTMLElement
 );
 root.render(
   <React.StrictMode>
-    <App />
+    <Provider store={store}>
+      <App />
+    </Provider>
   </React.StrictMode>
-);
+);

src/redux-basics.js

@@ -0,0 +1,18 @@
+const { configureStore } = require ('@reduxjs/toolkit');
+const initialState = { number : 0 };
+
+const reducer = ( state = initialState, action) => {
+    if(action.type === 'ADD') { return ({ ...state, number: state.number + 1});}
+    else if(action.type === 'ADD_VALUE') {
+        return ({...state, number: state.number + action.value});
+    }
+    return state;
+}
+
+// create redux store
+const store =  configureStore({ reducer : reducer });
+console.log(store.getState());  // { number : 0 }
+store.dispatch({ type: 'ADD'});     
+console.log(store.getState());  // { number : 1 }
+store.dispatch({ type : 'ADD_VALUE', value: 5});
+console.log(store.getState());  // { number : 6 }

src/store/index.ts

@@ -0,0 +1,11 @@
+import { configureStore } from "@reduxjs/toolkit";
+import todoReducer from "./slices/todo";
+
+export const store = configureStore({
+  reducer: {
+    todo: todoReducer,
+  },
+});
+
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;