fix: AttendanceLog #52

42mogle · Dec 1, 2022 · 10daea1 · 10daea1
1 parent 036dcf5
commit 10daea1
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 45 deletions.
diff --git a/src/Pages/HomePage/AttendanceLog.jsx b/src/Pages/HomePage/AttendanceLog.jsx
@@ -1,13 +1,50 @@
-import React from "react";
+import React, { useEffect } from "react";
+import axios from "axios";
 import TableCell from "@mui/material/TableCell";
 import TableRow from "@mui/material/TableRow";
 import Box from "@mui/material/Box";
 import Collapse from "@mui/material/Collapse";
 import Table from "@mui/material/Table";
 import TableBody from "@mui/material/TableBody";
 import TableHead from "@mui/material/TableHead";
+import { format } from "date-fns";
+import { ko } from "date-fns/locale";
+import useStore from "../../store.js"
 
 const AttendanceLog = ({ open, attendanceLog }) => {
+  const { _intraId, _isAttended, _attendanceLog, setAttendanceLog } = useStore(
+    (state) => state
+  );
+  useEffect(() => {
+    const getAttendanceLog = async () => {
+      try {
+        const config = {
+          headers: {
+            authorization: `Bearer ${localStorage.getItem("accessToken")}`,
+          },
+        };
+        const response = await axios.get(
+          `https://${process.env.REACT_APP_AWS_BACKEND_SERVER}/statistic/${_intraId}/userAttendanceList`,
+          config
+        );
+
+        const attendanceList = response.data.map(({ timelog }) => {
+          const attendanceDate = new Date(timelog);
+          const _date = format(attendanceDate, "PPP EEEE", { locale: ko });
+          const _time = format(attendanceDate, "HH:mm:ss");
+          return { date: _date, time: _time };
+        });
+
+        console.log(attendanceList);
+
+        setAttendanceLog(attendanceList);
+      } catch (error) {
+        console.log(error);
+      }
+    };
+    getAttendanceLog();
+  }, [_isAttended]);
+
   if (!attendanceLog && attendanceLog.length === 0) {
     return;
   } else {
@@ -24,7 +61,7 @@ const AttendanceLog = ({ open, attendanceLog }) => {
                   </TableRow>
                 </TableHead>
                 <TableBody>
-                  {attendanceLog.map((log) => (
+                  {_attendanceLog.map((log) => (
                     <TableRow key={log.date}>
                       <TableCell component="th" scope="row">
                         {log.date}

diff --git a/src/Pages/HomePage/AttendanceSummary.jsx b/src/Pages/HomePage/AttendanceSummary.jsx
@@ -8,9 +8,10 @@ import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
 import useStore from "../../store.js";
 
-function AttendanceSummary(props) {
-  const { attendanceLog } = props;
-  const { _intraId, _summary, setSummary } = useStore((state) => state);
+function AttendanceSummary() {
+  const { _intraId, _summary, setSummary } = useStore(
+    (state) => state
+  );
   const [open, setOpen] = useState(false);
 
   const getSummary = async () => {
@@ -54,7 +55,7 @@ function AttendanceSummary(props) {
         </TableCell>
         <TableCell align="center">{_summary.isPerfect ? "✅" : "❌"}</TableCell>
       </TableRow>
-      <AttendanceLog open={open} attendanceLog={attendanceLog} />
+      <AttendanceLog open={open} />
     </React.Fragment>
   );
 }

diff --git a/src/Pages/HomePage/AttendanceTable.jsx b/src/Pages/HomePage/AttendanceTable.jsx
@@ -8,44 +8,8 @@ import TableContainer from "@mui/material/TableContainer";
 import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
 import Paper from "@mui/material/Paper";
-import useStore from "../../store.js";
-import { format } from "date-fns";
-import { ko } from "date-fns/locale";
-
-const AttendanceTable = ({ summary }) => {
-  const { _intraId, _attendanceLog, _isAttended, setAttendanceLog } = useStore(
-    (state) => state
-  );
-
-  useEffect(() => {
-    const getAttendanceLog = async () => {
-      try {
-        const config = {
-          headers: {
-            authorization: `Bearer ${localStorage.getItem("accessToken")}`,
-          },
-        };
-        const response = await axios.get(
-          `https://${process.env.REACT_APP_AWS_BACKEND_SERVER}/statistic/${_intraId}/userAttendanceList`
-        , config);
-
-        const attendanceList = response.data.map(({ timelog }) => {
-          const attendanceDate = new Date(timelog);
-          const _date = format(attendanceDate, "PPP EEEE", { locale: ko });
-          const _time = format(attendanceDate, "HH:mm:ss");
-          return { date: _date, time: _time };
-        });
-
-        console.log(attendanceList);
-
-        setAttendanceLog(attendanceList);
-      } catch (error) {
-        console.log(error);
-      }
-    };
-    getAttendanceLog();
-  }, [_isAttended]);
 
+const AttendanceTable = () => {
   return (
     <TableContainer component={Paper} sx={{ mt: 3 }}>
       <Table aria-label="collapsible table">
@@ -60,8 +24,9 @@ const AttendanceTable = ({ summary }) => {
             </TableCell>
           </TableRow>
         </TableHead>
+
         <TableBody>
-          <AttendanceSummary summary={summary} attendanceLog={_attendanceLog} />
+          <AttendanceSummary />
         </TableBody>
       </Table>
     </TableContainer>

diff --git a/src/Pages/HomePage/index.jsx b/src/Pages/HomePage/index.jsx
@@ -43,7 +43,7 @@ function Home() {
     <>
       <UserProfile intraId={_intraId} photoUrl={_photoUrl} />
       <TodayDate />
-      <AttendanceSummary />
+      {/* <AttendanceSummary /> */}
       <AttendanceTable />
       <AttendanceButton />
       {isOperator && <SetTodayWordButton />}