Merge pull request #16 from PreOnBoarding-Team17/feature/logic

[황상섭] feat: 커스텀훅 생성
PreOnBoarding-Team17 · Feb 8, 2022 · 816e083 · 816e083
2 parents 6900079 + b3954fb
commit 816e083
Show file tree

Hide file tree

Showing 8 changed files with 106 additions and 103 deletions.
diff --git a/src/API/index.tsx b/src/API/index.tsx
@@ -1,13 +1,9 @@
-import axios, { AxiosInstance } from 'axios';
-import { DataInterface } from 'Utils/Interface';
+import axios from 'axios';
 
 const BASE_URL = 'http://localhost:4000/requests';
 
-export const callAPI: AxiosInstance = axios.create({
-  baseURL: `${BASE_URL}`,
-});
-
 export const getAPI = async () => {
-  const response = await axios.get<DataInterface>(BASE_URL);
-  return response.data;
+  const response = await axios.get(BASE_URL);
+  const data = await response.data;
+  return data;
 };
diff --git a/src/Components/Common/Filter/index.tsx b/src/Components/Common/Filter/index.tsx
@@ -15,11 +15,9 @@ const Filter: React.FC<IFilter> = ({
   const onChangeCheckbox = useCallback(
     (option: string) => {
       if (selected.find((item: string) => item === option) === undefined) {
-        console.log([...selected, option]);
         buttonRef.current?.classList.add('focused');
         setSelected([...selected, option]);
       } else {
-        console.log(selected.filter((item: string) => item !== option));
         if (selected.filter((item: string) => item !== option).length === 0)
           buttonRef.current?.classList.remove('focused');
 

diff --git a/src/Components/Dashboard/FilterMenu.tsx b/src/Components/Dashboard/FilterMenu.tsx
@@ -3,22 +3,24 @@ import { METHOD, METHOD_NAME, MATERIAL, MATERIAL_NAME } from 'Utils/Constants';
 import Filter from 'Components/Common/Filter';
 import Toggle from 'Components/Common/Toggle';
 import 'Components/Dashboard/scss/FilterMenu.scss';
-import { IFilterMenu } from 'Utils/Interface';
 import RefreshIcon from 'Assets/RefreshIcon.png';
+import useFilter from 'Utils/Hooks/useFilter';
 
-const FilterMenu: React.FC<IFilterMenu> = ({
-  toggle,
-  handleReset,
-  handleToggle,
-  selectedMethod,
-  setSelectedMethod,
-  selectedMaterial,
-  setSelectedMaterial,
-}) => {
+export default function FilterMenu() {
   const [isToggleSelect, setIsToggleSelect] = useState<string>('');
   const methodRef = useRef<HTMLButtonElement>(null);
   const materialRef = useRef<HTMLButtonElement>(null);
 
+  const {
+    toggle,
+    handleToggle,
+    handleReset,
+    method,
+    material,
+    setMethod,
+    setMaterial,
+  } = useFilter();
+
   const onClickSelect = (
     e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
     name: string
@@ -38,7 +40,6 @@ const FilterMenu: React.FC<IFilterMenu> = ({
     materialRef.current?.classList.remove('focused');
   };
 
-  // console.log(toggle);
   return (
     <div className="filter">
       <div className="filter__select-item">
@@ -49,8 +50,8 @@ const FilterMenu: React.FC<IFilterMenu> = ({
           isToggleSelect={isToggleSelect === 'method'}
           buttonRef={methodRef}
           onClickSelect={onClickSelect}
-          selected={selectedMethod}
-          setSelected={setSelectedMethod}
+          selected={method}
+          setSelected={setMethod}
         />
         <Filter
           title={MATERIAL_NAME}
@@ -59,10 +60,10 @@ const FilterMenu: React.FC<IFilterMenu> = ({
           isToggleSelect={isToggleSelect === 'material'}
           buttonRef={materialRef}
           onClickSelect={onClickSelect}
-          selected={selectedMaterial}
-          setSelected={setSelectedMaterial}
+          selected={material}
+          setSelected={setMaterial}
         />
-        {(selectedMethod.length + selectedMaterial.length > 0 || toggle) && (
+        {(method.length + material.length > 0 || toggle) && (
           <button className="filter__select-reset" onClick={handleFilterReset}>
             <img src={RefreshIcon} alt="필터링 리셋" />
             필터링 리셋
@@ -74,6 +75,4 @@ const FilterMenu: React.FC<IFilterMenu> = ({
       </div>
     </div>
   );
-};
-
-export default FilterMenu;
+}
diff --git a/src/Components/Dashboard/index.tsx b/src/Components/Dashboard/index.tsx
@@ -1,64 +1,13 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import Card from 'Components/Common/Card';
 import FilterMenu from 'Components/Dashboard/FilterMenu';
-import { callAPI } from 'API';
 import { DataInterface } from 'Utils/Interface';
+import useApi from 'Utils/Hooks/useApi';
 
 import 'Components/Dashboard/scss/Dashboard.scss';
 
 const Dashboard: React.FC = () => {
-  const [toggle, setToggle] = useState<boolean>(false);
-  const [datas, setDatas] = useState<DataInterface[]>([]);
-  const [cardDatas, setCardDatas] = useState<DataInterface[]>([]);
-  const [selectedMethod, setSelectedMethod] = useState<string[]>([]);
-  const [selectedMaterial, setSelectedMaterial] = useState<string[]>([]);
-
-  useEffect(() => {
-    const requestGET = async (): Promise<void> => {
-      await callAPI.get('/').then((res) => {
-        setDatas(res.data);
-        setCardDatas(res.data);
-      });
-    };
-    requestGET();
-  }, []);
-
-  const handleToggle = () => {
-    setToggle(!toggle);
-  };
-
-  const handleReset = () => {
-    setSelectedMethod([]);
-    setSelectedMaterial([]);
-
-    if (toggle) setToggle(false);
-  };
-
-  useEffect(() => {
-    const filterToggle = toggle
-      ? datas.filter((element) => element.status === '상담중')
-      : datas;
-
-    const filterMethod =
-      selectedMethod.length > 0
-        ? filterToggle.filter((element) => {
-            return selectedMethod.every((selectedMethod) =>
-              element.method.find((method) => method === selectedMethod)
-            );
-          })
-        : filterToggle;
-
-    const filterMaterial =
-      selectedMaterial.length > 0
-        ? filterMethod.filter((element) => {
-            return selectedMaterial.every((selectedMaterial) =>
-              element.material.find((material) => material === selectedMaterial)
-            );
-          })
-        : filterMethod;
-
-    setCardDatas(filterMaterial);
-  }, [toggle, selectedMethod, selectedMaterial]);
+  const { cardDatas } = useApi();
 
   return (
     <div className="body-container">
@@ -68,15 +17,7 @@ const Dashboard: React.FC = () => {
           파트너님에게 딱 맞는 요청서를 찾아보세요.
         </h3>
       </div>
-      <FilterMenu
-        toggle={toggle}
-        handleReset={handleReset}
-        handleToggle={handleToggle}
-        selectedMethod={selectedMethod}
-        setSelectedMethod={setSelectedMethod}
-        selectedMaterial={selectedMaterial}
-        setSelectedMaterial={setSelectedMaterial}
-      />
+      <FilterMenu />
       <div className="dash-board">
         {cardDatas.map((data: DataInterface) => {
           return <Card key={data['id']} data={data} />;

diff --git a/src/Utils/Hooks/index.tsx b/src/Utils/Hooks/index.tsx
diff --git a/src/Utils/Hooks/useApi.tsx b/src/Utils/Hooks/useApi.tsx
@@ -0,0 +1,23 @@
+import { useState, useEffect } from 'react';
+import { getAPI } from 'API';
+import { DataInterface } from 'Utils/Interface';
+
+export default function useApi() {
+  const [datas, setDatas] = useState<DataInterface[]>([]);
+  const [cardDatas, setCardDatas] = useState<DataInterface[]>([]);
+
+  useEffect(() => {
+    const fetchAPI = async () => {
+      try {
+        const data = await getAPI();
+        setDatas(data);
+        setCardDatas(data);
+      } catch (error) {
+        console.log(error);
+      }
+    };
+    fetchAPI();
+  }, []);
+
+  return { datas, cardDatas, setCardDatas };
+}
diff --git a/src/Utils/Hooks/useFilter.tsx b/src/Utils/Hooks/useFilter.tsx
@@ -0,0 +1,56 @@
+import { useState, useEffect } from 'react';
+import useApi from './useApi';
+
+export default function useFilter() {
+  const [toggle, setToggle] = useState<boolean>(false);
+  const [method, setMethod] = useState<string[]>([]);
+  const [material, setMaterial] = useState<string[]>([]);
+
+  const { datas, setCardDatas } = useApi();
+
+  const handleToggle = () => {
+    setToggle(!toggle);
+  };
+
+  const handleReset = () => {
+    setMethod([]);
+    setMaterial([]);
+    if (toggle) setToggle(false);
+  };
+
+  useEffect(() => {
+    const filterToggle = toggle
+      ? datas.filter((element) => element.status === '상담중')
+      : datas;
+
+    const filterMethod =
+      method.length > 0
+        ? filterToggle.filter((element) => {
+            return method.every((selectedMethod) =>
+              element.method.find((method) => method === selectedMethod)
+            );
+          })
+        : filterToggle;
+
+    const filterMaterial =
+      material.length > 0
+        ? filterMethod.filter((element) => {
+            return material.every((selectedMaterial) =>
+              element.material.find((material) => material === selectedMaterial)
+            );
+          })
+        : filterMethod;
+
+    setCardDatas(filterMaterial);
+  }, [toggle, method, material]);
+
+  return {
+    toggle,
+    handleToggle,
+    handleReset,
+    method,
+    material,
+    setMethod,
+    setMaterial,
+  };
+}
diff --git a/src/Utils/Interface/index.tsx b/src/Utils/Interface/index.tsx
@@ -15,6 +15,7 @@ export interface DataInterface {
 export interface CardProps {
   data: DataInterface;
 }
+
 export interface IFilter {
   title: string;
   name: string;
@@ -29,16 +30,6 @@ export interface IFilter {
   setSelected: (arr: string[]) => void;
 }
 
-export interface IFilterMenu {
-  toggle: boolean;
-  handleReset: () => void;
-  handleToggle: () => void;
-  selectedMethod: string[];
-  setSelectedMethod: (arr: string[]) => void;
-  selectedMaterial: string[];
-  setSelectedMaterial: (arr: string[]) => void;
-}
-
 export interface IModal {
   data: boolean;
   handler: () => void;