[3주차] 정대헌 미션 제출합니다.

src/App.js

@@ -1,73 +1,32 @@
 import { React, useState, useReducer, useEffect } from "react";
 import { FaBookReader } from "react-icons/fa";
 
+import { GlobalProvider } from "./context/GlobalState";
 import InputContainer from "./containers/InputContainer";
 import ListItemContainer from "./containers/ListItemContainer";
 
 //로컬 스토리지의 정보구성 {list: {item1, item2, ...}}
 
-const initList = localStorage.getItem("list")
-  ? JSON.parse(localStorage.getItem("list"))
-  : [];
-
-const listReducer = (state, action) => {
-  let listBuffer = [];
-  //DELETE = 아이템 삭제, ADD = 아이템 추가, MODIFY = 아이템 type 수정(done/todo)
-  switch (action.type) {
-    case "DELETE":
-      listBuffer = state.filter((item) => item.id !== action.payload.id);
-      break;
-    case "ADD":
-      listBuffer = state.concat([action.payload]);
-      break;
-    case "MODIFY":
-      listBuffer = state.map((item) =>
-        item.id === action.payload.id ? action.payload : item
-      );
-      break;
-    default:
-      listBuffer = [...state];
-      break;
-  }
-  localStorage.setItem("list", JSON.stringify(listBuffer));
-  return [...listBuffer];
-};
-
 function App() {
   // listState의 item obj는 다음의 형태를 지닌다 {id: "uniqueID", type: "done | todo", content: "item content"}
-  const [listState, dispatchListState] = useReducer(listReducer, initList);
-  const [listCnt, setListCnt] = useState({ todo: 0, done: 0 });
-
-  useEffect(() => {
-    setListCnt({
-      todo: listState.filter((item) => item.type === "todo").length,
-      done: listState.filter((item) => item.type === "done").length,
-    });
-  }, [listState, setListCnt]);
 
   return (
-    <div className="background">
-      <div className="container">
-        <InputContainer dispatchListState={dispatchListState} />
-        {/* modType은 MODIFY 시 변경되는 type이다 */}
-        <ListItemContainer
-          title={"해야할 일"}
-          listState={listState}
-          listType={"todo"}
-          listCnt={listCnt.todo}
-          modType={"done"}
-          dispatchListState={dispatchListState}
-        />
-        <ListItemContainer
-          title={"완료한 일"}
-          listState={listState}
-          listType={"done"}
-          listCnt={listCnt.done}
-          modType={"todo"}
-          dispatchListState={dispatchListState}
-        />
+    <GlobalProvider>
+      <div className="background">
+        <div className="container">
+          <InputContainer />
+          {/* modType은 MODIFY 시 변경되는 type이다 */}
+          <ListItemContainer
+            title={"해야할 일"}
+            listType={"todo"} // 2: todoList
+          />
+          <ListItemContainer
+            title={"완료한 일"}
+            listType={"done"} // -2: doneList
+          />
+        </div>
       </div>
-    </div>
+    </GlobalProvider>
   );
 }
 

src/components/ListItem.js

@@ -1,46 +1,32 @@
-import React from "react";
+import React, { useContext } from "react";
 import { FaTrash } from "react-icons/fa";
 
-const ListItem = (props) => {
+import { GlobalContext } from "../context/GlobalState";
+
+const ListItem = ({ item }) => {
+  const { deleteItem, moveItem } = useContext(GlobalContext);
+
   return (
     <div className="item">
       <div className="itemScrollArea">
         <button
           className="itemFinish"
           type="button"
           onClick={() => {
-            props.dispatchListState({
-              type: "MODIFY",
-              payload: {
-                id: props.item.id,
-                type: props.modType,
-                content: props.item.content,
-              },
-            });
+            moveItem(item.id);
           }}
         >
           <p className="itemTitle">
             {/* listType의 done/todo에 따라 del 태그 삽입 */}
-            {props.listType === "done" ? (
-              <del>{props.item.content}</del>
-            ) : (
-              props.item.content
-            )}
+            {item.type === "done" ? <del>{item.content}</del> : item.content}
           </p>
         </button>
       </div>
       <button
         className="itemDelete"
         type="button"
         onClick={() => {
-          props.dispatchListState({
-            type: "DELETE",
-            payload: {
-              id: props.item.id,
-              type: props.item.type,
-              content: props.item.content,
-            },
-          });
+          deleteItem(item.id);
         }}
       >
         <p className="deleteIcon">

src/containers/InputContainer.js

@@ -1,6 +1,8 @@
-import React, { useState } from "react";
+import React, { useState, useContext } from "react";
 import styled from "styled-components";
 
+import { GlobalContext } from "../context/GlobalState";
+
 // styled component를 사용한다
 
 const AppInput = styled.div`
@@ -60,16 +62,13 @@ const SubmitBtn = styled.button`
 
 const InputContainer = (props) => {
   const [text, setText] = useState("");
+  const { addItem } = useContext(GlobalContext);
 
   const submitHandler = (e) => {
     e.preventDefault();
-    // form 내 입력이 존재하는 경우만 업데이트 한다
     if (text !== "") {
       const uid = new Date().getTime().toString();
-      props.dispatchListState({
-        type: "ADD",
-        payload: { id: uid, type: "todo", content: text },
-      });
+      addItem(uid, "todo", text);
       setText("");
     }
   };

src/containers/ListItemContainer.js

@@ -1,25 +1,23 @@
-import React from "react";
+import React, { useContext } from "react";
 import ListItem from "../components/ListItem";
+import { GlobalContext } from "../context/GlobalState";
+
+const ListItemContainer = ({ title, listType }) => {
+  const { listItems } = useContext(GlobalContext);
 
-const ListItemContainer = (props) => {
   return (
     <section className="itemSection">
       <h4 className="sectionTitle">
-        {props.title}(<p className="itemCount">{props.listCnt}</p>)
+        {title}(
+        <p className="itemCount">
+          {listItems.filter((item) => item.type === listType).length}
+        </p>
+        )
       </h4>
       <div className="itemList invisibleScrollbar">
-        {/* props.listType은 done/todo로 구분된다 */}
-        {props.listState.map((item) => {
-          if (item.type === props.listType) {
-            return (
-              <ListItem
-                key={item.id}
-                item={item}
-                listType={props.listType}
-                modType={props.modType}
-                dispatchListState={props.dispatchListState}
-              />
-            );
+        {listItems.map((item) => {
+          if (item.type === listType) {
+            return <ListItem key={item.id} item={item} />;
           }
           return;
         })}

src/context/AppReducer.js

@@ -0,0 +1,21 @@
+const AppReducer = (state, action) => {
+  //DELETE = 아이템 삭제, ADD = 아이템 추가, MODIFY = 아이템 type 수정(done/todo)
+  switch (action.type) {
+    case "DELETE":
+      return [...state.filter((item) => item.id !== action.payload.id)];
+    case "ADD":
+      return [...state.concat([action.payload])];
+    case "MODIFY":
+      return [
+        ...state.map((item) =>
+          item.id === action.payload.id
+            ? { ...item, type: item.type === "todo" ? "done" : "todo" }
+            : item
+        ),
+      ];
+    default:
+      return [...state];
+  }
+};
+
+export default AppReducer;

src/context/GlobalState.js

@@ -0,0 +1,55 @@
+import React, { createContext, useReducer, useEffect } from "react";
+import AppReducer from "./AppReducer";
+
+const initialItems = localStorage.getItem("list")
+  ? JSON.parse(localStorage.getItem("list"))
+  : [];
+
+export const GlobalContext = createContext(initialItems);
+
+export const GlobalProvider = ({ children }) => {
+  const [listItems, dispatch] = useReducer(AppReducer, initialItems);
+
+  useEffect(() => {
+    localStorage.setItem("list", JSON.stringify(listItems));
+  }, [listItems]);
+
+  // Actions
+  const addItem = (uid, itemType, itemContent) => {
+    dispatch({
+      type: "ADD",
+      payload: { id: uid, type: itemType, content: itemContent },
+    });
+  };
+
+  const moveItem = (uid) => {
+    dispatch({
+      type: "MODIFY",
+      payload: {
+        id: uid,
+      },
+    });
+  };
+
+  const deleteItem = (uid) => {
+    dispatch({
+      type: "DELETE",
+      payload: {
+        id: uid,
+      },
+    });
+  };
+
+  return (
+    <GlobalContext.Provider
+      value={{
+        listItems: listItems,
+        addItem,
+        moveItem,
+        deleteItem,
+      }}
+    >
+      {children}
+    </GlobalContext.Provider>
+  );
+};