Lab4 제출

package.json

@@ -1,20 +1,25 @@
 {
-  "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",
+    "redux": "^4.2.0",
     "typescript": "4.7.4",
     "web-vitals": "2.1.4"
   },

src/components/Todo/Todo.tsx

@@ -2,18 +2,25 @@ 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}>
-        {props.title}
-      </div>
-      {props.done && <div className="done-mark">&#x2713;</div>}
-    </div>
-  );
-};
+   <div className="Todo">
+   <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;

src/components/TodoDetail/TodoDetail.tsx

@@ -1,20 +1,31 @@
 import "./TodoDetail.css";
+import { useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { useParams } from "react-router";
+import { selectTodo, fetchTodo } from "../../store/slices/todo";
+import { AppDispatch } from "../../store";
 
-type Props = {
-  title: string;
-  content: string;
-};
 
-const TodoDetail = (props: Props) => {
+
+const TodoDetail = () => {
+  const { id } = useParams();
+  const dispatch = useDispatch();
+  const todoState = useSelector(selectTodo);
+
+  useEffect(() => {
+    dispatch(fetchTodo(Number(id)));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [id]);
+
   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>
   );

src/containers/TodoList/NewTodo/NewTodo.tsx

@@ -1,5 +1,11 @@
 import { useState } from "react";
 import { Navigate } from "react-router-dom";
+import { useDispatch } from "react-redux";
+import { todoActions } from "../../../store/slices/todo";
+import { AppDispatch } from "../../../store";
+import { postTodo } from "../../../store/slices/todo";
+
+
 // import { useNavigate } from "react-router-dom";
 import "./NewTodo.css";
 
@@ -15,12 +21,19 @@ export default function NewTodo() {
   //   setSubmitted(true);
   //   navigate('/todos')
   // };
+  const dispatch = useDispatch()
+
 
-  const postTodoHandler = () => {
+  const postTodoHandler = async () => {
     const data = { title: title, content: content };
-    alert("Submitted\n" + data.title + "\n" + data.content);
+    const result = await dispatch(postTodo(data));
+    if (result.payload) {
     setSubmitted(true);
+    } else {
+    alert("Error on post Todo");
+    }
   };
+
 
   if (submitted) {
     return <Navigate to="/todos" />;

src/containers/TodoList/TodoList.tsx

@@ -1,8 +1,12 @@
-import { useMemo, useState } from "react";
-import { NavLink } from "react-router-dom";
+import { useMemo, useState, useEffect } from "react";
+import { NavLink, useNavigate } from "react-router-dom";
 import Todo from "../../components/Todo/Todo";
 import TodoDetail from "../../components/TodoDetail/TodoDetail";
 import "./TodoList.css";
+import { useDispatch, useSelector } from "react-redux";
+import { toggleDone, deleteTodo, fetchTodos, selectTodo, todoActions } from "../../store/slices/todo";
+import axios from 'axios';
+import {AppDispatch} from "../../store/";
 
 interface IProps {
   title: string;
@@ -13,19 +17,24 @@ type TodoType = { id: number; title: string; content: string; done: boolean };
 export default function TodoList(props: IProps) {
   const { title } = props;
   const [selectedTodo, setSelectedTodo] = useState<TodoType | null>(null);
+  const todoState = useSelector(selectTodo);
+  const dispatch = useDispatch<AppDispatch>();
+  const navigate = useNavigate()
+
 
+  useEffect(() => {
+    dispatch(fetchTodos())
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    },[]);
+
   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 clickTodoHandler = (td: TodoType) => {
-    if (selectedTodo === td) {
-      setSelectedTodo(null);
-    } else {
-      setSelectedTodo(td);
-    }
+    navigate('/todos/' + td.id)
   };
 
   const todoDetail = useMemo(() => {
@@ -38,13 +47,14 @@ export default function TodoList(props: IProps) {
     <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))}
             />
           );
         })}

src/index.tsx

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

src/store/index.ts

@@ -0,0 +1,13 @@
+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;

src/store/slices/todo.ts

@@ -0,0 +1,112 @@
+import { createAsyncThunk, createSlice, PayloadAction } from "@reduxjs/toolkit";
+import { RootState } from "..";
+import axios from 'axios';
+
+export interface TodoType { id: number; title: string; content: string; done: boolean; }
+export interface TodoState { todos: TodoType[]; selectedTodo: TodoType | null; }
+const initialState: TodoState = {
+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,
+}; // continue
+
+export const fetchTodo = createAsyncThunk( "todo/fetchTodo",
+async (id: TodoType["id"], { dispatch }) => {
+ const response = await axios.get(`/api/todo/${id}/`);
+ return response.data ?? null;
+ }
+);
+
+export const fetchTodos = createAsyncThunk(
+    "todo/fetchTodos",
+    async () => {
+    const response = await
+   axios.get<TodoType[]>("/api/todo/");
+    return response.data;
+    }
+);
+
+
+export const postTodo = createAsyncThunk(
+    "todo/postTodo",
+    async (td: Pick<TodoType, "title" | "content">, { dispatch }) => {
+     const response = await axios.post("/api/todo/", td);
+     dispatch(todoActions.addTodo(response.data));
+     }
+);
+
+export const deleteTodo = createAsyncThunk(
+    "todo/deleteTodo",
+    async (id: TodoType["id"], { dispatch }) => {
+     await axios.delete(`/api/todo/${id}/`);
+     dispatch(todoActions.deleteTodo({ targetId: id }));
+     }
+);
+
+export const toggleDone = createAsyncThunk(
+    "todo/toggleDone",
+    async (id: TodoType["id"], { dispatch }) => {
+     await axios.put(`/api/todo/${id}/`);
+     dispatch(todoActions.toggleDone({ targetId: id }));
+     }
+);
+
+export const todoSlice = createSlice({
+    name: "todo",
+    initialState,
+    reducers: {
+     getAll: (state, action: PayloadAction<{ todos: TodoType[] }>) => {},
+     getTodo: (state, action: PayloadAction<{ targetId: number }>) => {
+        const target = state.todos.find((td) => td.id === action.payload.targetId);
+        state.selectedTodo = target ?? null    
+     },
+     toggleDone: (state, action: PayloadAction<{ targetId: number }>) => {
+        const todo = state.todos.find(
+        (value) => value.id === action.payload.targetId
+        );
+        if (todo) {
+        todo.done = !todo.done;
+        }
+     },
+     deleteTodo: (state, action: PayloadAction<{ targetId: number }>) => {
+        const deleted = state.todos.filter((todo) => {
+        return todo.id !== action.payload.targetId;
+        });
+        state.todos = deleted;
+     },
+     addTodo: (
+        state,
+        action: PayloadAction<{ title: string; content: string }>
+        ) => {
+        const newTodo = {
+        id: state.todos[state.todos.length - 1].id + 1, // temporary
+        title: action.payload.title,
+        content: action.payload.content,
+        done: false,
+        };
+        state.todos.push(newTodo);
+     }, 
+
+     extraReducers: (builder) => {
+        builder.addCase(fetchTodo.fulfilled,
+        (state, action) => {
+        state.selectedTodo = action.payload;
+        });
+        builder.addCase(fetchTodos.fulfilled, (state, action) => {
+            state.todos = action.payload;
+        });
+        builder.addCase(postTodo.rejected, (_state, action) =>{
+            console.error(action.error);
+        })  
+        },
+
+});
+
+export const todoActions = todoSlice.actions;
+export const selectTodo = (state: RootState) => state.todo;
+export default todoSlice.reducer;
+
+
+