From 105b0fc39a610507b728d8bc51870e47c7098555 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EC=A0=95=ED=99=98?= Date: Mon, 25 Jul 2022 21:58:48 +0900 Subject: [PATCH] [FIX] : Change 'MemoState&DispatchContext' level in comp trees --- src/App.tsx | 105 +++++++++++++++++++++++++++------ src/DetailPage/DetailPage.tsx | 36 +++++++++--- src/MainPage/Main.tsx | 107 ++++++---------------------------- src/MainPage/MemoItem.tsx | 2 +- src/MainPage/MemoList.tsx | 2 +- 5 files changed, 134 insertions(+), 118 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index c85d815..40e36c0 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { useEffect, useReducer, useRef, useState } from "react"; import "./App.css"; import { BrowserRouter as Router, @@ -45,24 +45,95 @@ const memoData = [ }, ]; +const reducer = (state: any, action: any) => { + let newState = []; + switch (action.type) { + case "INIT": { + return action.data; + } + case "CREATE": { + newState = [...state, action.data]; + break; + } + case "REMOVE": { + newState = state.filter((it) => it.id !== action.targetId); + break; + } + case "EDIT": { + newState = state.map((it) => { + return it.id === action.data.id ? { ...action.data } : it; + }); + break; + } + default: + return state; + } + return newState; +}; + +export const MemoStateContext = React.createContext<[]>([]); +export const MemoDispatchContext = React.createContext<{}>({}); + function App() { + const [data, dispatch] = useReducer(reducer, memoData); + const dataId = useRef(4); + + useEffect(() => { + if (data) { + dispatch({ type: "INIT", data: data }); + } + }, [data]); + + const onCreate = () => { + dispatch({ + type: "CREATE", + data: { + id: dataId.current, + title: "메모장 이름", + date: "지정 날짜", + description: "메모장 소개", + color: 0, + }, + }); + dataId.current += 1; + }; + + const onRemove = (targetId) => { + dispatch({ type: "REMOVE", targetId }); + }; + + const onEdit = (targetId, title, date, description, color) => { + dispatch({ + type: "EDIT", + data: { + id: targetId, + title, + date, + description, + color, + }, + }); + }; + return ( - <> - - - {/* }> */} - }> - }> - }> - } - > - }> - {/* }> */} - - - + + + + + {/* }> */} + }> + }> + }> + } + > + }> + {/* }> */} + + + + ); } diff --git a/src/DetailPage/DetailPage.tsx b/src/DetailPage/DetailPage.tsx index 5d7750d..734dd12 100644 --- a/src/DetailPage/DetailPage.tsx +++ b/src/DetailPage/DetailPage.tsx @@ -1,33 +1,51 @@ import React, { useContext, useEffect, useState } from "react"; import { useNavigate, useParams } from "react-router-dom"; -import { MemoStateContext } from "../MainPage/Main"; +import { MemoStateContext } from "../App"; + +interface IMemoItem { + id: number; + title: string; + date: string; + description: string; + color: number; +} const DetailPage = () => { const { id } = useParams(); const memoList = useContext(MemoStateContext); - console.log(memoList); - const [data, setData] = useState(); + const [data, setData] = useState(null); const navigate = useNavigate(); useEffect(() => { - console.log(memoList); if (memoList.length >= 1) { const targetMemo = memoList.find( (it: any) => parseInt(it.id) === parseInt(id) ); - console.log(targetMemo); - if (memoList) { + if (targetMemo) { setData(targetMemo); } else { - alert("메모장이 없습니다."); + alert("존재하지 않는 메모입니다"); navigate("/", { replace: true }); } } else { - alert("XX"); + alert("존재하지 않는 메모입니다"); + navigate("/", { replace: true }); } }, [id, memoList]); - return
; + if (!data) { + return
Loading Now...
; + } else { + return ( +
+ {Object.keys(data).map((key) => ( +
+ {key} : {data[key]} +
+ ))} +
+ ); + } }; export default DetailPage; diff --git a/src/MainPage/Main.tsx b/src/MainPage/Main.tsx index 9ee6bdf..34debb8 100644 --- a/src/MainPage/Main.tsx +++ b/src/MainPage/Main.tsx @@ -1,5 +1,4 @@ import React, { useEffect, useReducer, useRef, useState } from "react"; -import { memo } from "../App"; import SideBar from "../CommonPage/SideBar/SideBar"; import "./Main.css"; import MemoList from "./MemoList"; @@ -7,102 +6,30 @@ import TodoTemplete from "./TodoList/TodoTemplete"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faClipboardList } from "@fortawesome/free-solid-svg-icons"; import { faCalendarDays } from "@fortawesome/free-solid-svg-icons"; -import DetailPage from "../DetailPage/DetailPage"; - -const reducer = (state: any, action: any) => { - let newState = []; - switch (action.type) { - case "INIT": { - return action.data; - } - case "CREATE": { - newState = [...state, action.data]; - break; - } - case "REMOVE": { - newState = state.filter((it) => it.id !== action.targetId); - break; - } - case "EDIT": { - newState = state.map((it) => { - return it.id === action.data.id ? { ...action.data } : it; - }); - break; - } - default: - return state; - } - return newState; -}; - -export const MemoStateContext = React.createContext<[]>([]); -export const MemoDispatchContext = React.createContext<{}>({}); const MainPage = ({ memoData }) => { const [addTodo, setAddTodo] = useState(false); - const [data, dispatch] = useReducer(reducer, memoData); - const dataId = useRef(4); - - useEffect(() => { - if (data) { - dispatch({ type: "INIT", data: data }); - } - }, [data]); - - const onCreate = () => { - dispatch({ - type: "CREATE", - data: { - id: dataId.current, - title: "메모장 이름", - date: "지정 날짜", - description: "메모장 소개", - color: 0, - }, - }); - dataId.current += 1; - }; - - const onRemove = (targetId) => { - dispatch({ type: "REMOVE", targetId }); - }; - - const onEdit = (targetId, title, date, description, color) => { - dispatch({ - type: "EDIT", - data: { - id: targetId, - title, - date, - description, - color, - }, - }); - }; return (
- - -
-

DA : HAENG

- -
-
-
- setAddTodo(!addTodo)} - /> -
- {addTodo && } -
- {}} /> -
-
- - + +
+

DA : HAENG

+ +
+
+
+ setAddTodo(!addTodo)} + /> +
+ {addTodo && } +
+ {}} /> +
+
); }; diff --git a/src/MainPage/MemoItem.tsx b/src/MainPage/MemoItem.tsx index b6867cc..0118d1b 100644 --- a/src/MainPage/MemoItem.tsx +++ b/src/MainPage/MemoItem.tsx @@ -1,8 +1,8 @@ import { faPencil, faTrash } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { useContext, useState } from "react"; -import { MemoDispatchContext } from "./Main"; import { useNavigate } from "react-router-dom"; +import { MemoDispatchContext } from "../App"; import "./Main.css"; const MemoItem = ({ id, title, date, description, color }: any) => { diff --git a/src/MainPage/MemoList.tsx b/src/MainPage/MemoList.tsx index 80e2aca..d582949 100644 --- a/src/MainPage/MemoList.tsx +++ b/src/MainPage/MemoList.tsx @@ -1,10 +1,10 @@ import { useContext } from "react"; -import { MemoDispatchContext, MemoStateContext } from "./Main"; import MemoItem from "./MemoItem"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faPlus } from "@fortawesome/free-solid-svg-icons"; import "./Main.css"; import { useEffect } from "react"; +import { MemoDispatchContext, MemoStateContext } from "../App"; const MemoList = () => { const memoData = useContext(MemoStateContext);