fix attendance records

sandboxnu · Nov 6, 2024 · 2356063 · 2356063
1 parent 5b3c7d3
commit 2356063
Show file tree

Hide file tree

Showing 9 changed files with 139 additions and 151 deletions.
diff --git a/src/components/AttendanceRecord/AttendanceRecordRow.tsx b/src/components/AttendanceRecord/AttendanceRecordRow.tsx
@@ -3,15 +3,15 @@ import { createDateString } from "../../util/Date";
 import { AttendanceRecord, Event } from "../../util/Types";
 import { AttendanceList } from "./AttendanceStatusString";
 
-interface AttendanceRecodRowProps {
-  attendanceRecord: AttendanceRecord[];
+interface AttendanceRecordRowProps {
+  attendanceRecord: AttendanceRecord;
   event: Event;
 }
 
 export const AttendanceRecordRow = ({
   event,
   attendanceRecord,
-}: AttendanceRecodRowProps) => {
+}: AttendanceRecordRowProps) => {
   const eventStartDate = new Date(event.startTime);
   const eventEndDate = new Date(event.endTime);
   const { month, fulldate, year } = createDateString(eventStartDate);
@@ -28,10 +28,7 @@ export const AttendanceRecordRow = ({
     hour12: true,
   });
 
-  const correspRecord = attendanceRecord.find(
-    (attendance) => attendance.eventID === event.id
-  );
-  const attendanceStatus = correspRecord!.attendance_status;
+  const attendanceStatus = attendanceRecord!.attendanceStatus;
 
   return (
     <tr className="border-b border-gray-600">

diff --git a/src/hooks/useAttendanceRecords.ts b/src/hooks/useAttendanceRecords.ts
@@ -0,0 +1,22 @@
+import { useQuery } from "@tanstack/react-query";
+import axios from "axios";
+import { AttendanceRecord } from "../util/Types";
+import { getStatus } from "../util/converters";
+
+export default function useAttendanceRecords(id: string | undefined) {
+  return useQuery({
+    queryKey: ["records", id],
+    queryFn: async (): Promise<AttendanceRecord[]> => {
+      const response = await axios.get<AttendanceRecord[]>(
+        `/api/record/getAttendanceRecordForMember/?id=${id}`
+      );
+
+      return response.data.map((r): AttendanceRecord => {
+        r.event.startTime = new Date(r.event.startTime);
+        r.event.endTime = new Date(r.event.endTime);
+        r.event.status = getStatus(r.event);
+        return r;
+      });
+    },
+  });
+}
diff --git a/src/hooks/useEvent.ts b/src/hooks/useEvent.ts
@@ -1,19 +1,9 @@
 import { useQuery } from "@tanstack/react-query";
 import axios from "axios";
-import { Event, EventStatus } from "../util/Types";
+import { Event } from "../util/Types";
+import { getStatus } from "../util/converters";
 
 export default function useEvent(id: string | undefined) {
-  const getStatus = (event: Event): EventStatus => {
-    const now = new Date();
-    if (
-      event.startTime.getTime() < now.getTime() &&
-      now.getTime() < event.endTime.getTime()
-    ) {
-      return EventStatus.Live;
-    }
-    return EventStatus.Rest;
-  };
-
   return useQuery({
     queryKey: ["event", id],
     queryFn: async (): Promise<Event> => {

diff --git a/src/hooks/useEvents.ts b/src/hooks/useEvents.ts
@@ -1,19 +1,9 @@
 import { useQuery } from "@tanstack/react-query";
 import axios from "axios";
-import { Event, EventStatus } from "../util/Types";
+import { Event } from "../util/Types";
+import { getStatus } from "../util/converters";
 
 export default function useEvents() {
-  const getStatus = (event: Event): EventStatus => {
-    const now = new Date();
-    if (
-      event.startTime.getTime() < now.getTime() &&
-      now.getTime() < event.endTime.getTime()
-    ) {
-      return EventStatus.Live;
-    }
-    return EventStatus.Rest;
-  };
-
   return useQuery({
     queryKey: ["events"],
     queryFn: async (): Promise<Event[]> => {

diff --git a/src/pages/AttendanceRecordPage.tsx b/src/pages/AttendanceRecordPage.tsx
@@ -1,145 +1,123 @@
-import { useContext, useState } from "react";
-import { getAttendanceRecordForMember } from "../client/client";
 import { AttendanceRecordPercentages } from "../components/AttendanceRecord/AttendanceRecordPercent";
 import { AttendanceRecordRow } from "../components/AttendanceRecord/AttendanceRecordRow";
 import { AttendanceStanding } from "../components/AttendanceRecord/AttendanceStanding";
 import Loading from "../components/Loading";
-import { AuthContext } from "../hooks/useAuth";
+import useAttendanceRecords from "../hooks/useAttendanceRecords";
+import { useAuth } from "../hooks/useAuth";
 import { createDateString } from "../util/Date";
-import { AttendanceRecord, Event } from "../util/Types";
 
 /**
  *
  *
  * @returns The page which displays the attendance for each event during the semester.
  */
 const AttendanceRecordPage = () => {
-  // --- STATE ------------------------------------------------------
-  const [attendanceRecord, setAttendanceRecord] = useState<
-    AttendanceRecord[] | []
-  >([]);
-  const [attendanceEvents, setAttendanceEvents] = useState<Event[] | []>();
-
-  // --- CONTEXT ----------------------------------------------------
-  const { member } = useContext(AuthContext);
+  const { member } = useAuth();
+  const {
+    status,
+    data: records,
+    error,
+    isFetching,
+  } = useAttendanceRecords(member?.id);
 
   // --- VARIABLES --------------------------------------------------
   const { month, dayOfWeek, fulldate, year } = createDateString(new Date());
-  let totalHours = 0;
-
-  const fetchMemberRecord = async (): Promise<Event[]> => {
-    // Get the attendance records for the selected member
-    if (!member) return [];
-    const attendanceRecords = await getAttendanceRecordForMember(member?.id);
-    setAttendanceRecord(attendanceRecords);
-
-    // Fetch the event data for each event
-    const events: Event[] = [];
-    // for (const record of attendanceRecords) {
-    //   const event = await fetchEvent(record.eventID);
-    //   events.push(event);
-    // }
+  let totalHours = records
+    ?.map((r) => {
+      const timeDifInSeconds =
+        (r.event.endTime.getTime() - r.event.startTime.getTime()) / 1000;
+      const timeDiffInHours = Math.round(timeDifInSeconds / 3600);
+      return timeDiffInHours;
+    })
+    .reduce((a, b) => a + b, 0);
 
-    return events;
-  };
-
-  if (!attendanceEvents) {
-    fetchMemberRecord().then((e) => {
-      setAttendanceEvents(e);
-    });
+  if (isFetching) {
     return <Loading />;
-  }
-
-  for (const event of attendanceEvents) {
-    const endTime = new Date(event.endTime).getTime();
-    const startTime = new Date(event.startTime).getTime();
-    const timeDifInSeconds = (endTime - startTime) / 1000;
-    const timeDiffInHours = Math.round(timeDifInSeconds / 3600);
-    totalHours += timeDiffInHours;
-  }
-
-  return (
-    <div className="flex flex-col p-10 flex-1 h-fit">
-      <div className="flex flex-col md:flex-row md:justify-between w-[70vw] md:w-full">
-        <div className="flex flex-col justify-between">
-          <span className="text-2xl font-bold">ATTENDANCE HISTORY</span>
-          <div className="text-xl text-gray-600">
-            <div className="hidden md:flex">
-              <span className="border-b pb-2 border-gray-600">
-                {dayOfWeek + ", " + month + " " + fulldate + ", " + year}{" "}
-              </span>
+  } else if (status === "error") {
+    return <div>Error: {error.message}</div>;
+  } else if (records) {
+    return (
+      <div className="flex flex-col p-10 flex-1 h-fit">
+        <div className="flex flex-col md:flex-row md:justify-between w-[70vw] md:w-full">
+          <div className="flex flex-col justify-between">
+            <span className="text-2xl font-bold">ATTENDANCE HISTORY</span>
+            <div className="text-xl text-gray-600">
+              <div className="hidden md:flex">
+                <span className="border-b pb-2 border-gray-600">
+                  {dayOfWeek + ", " + month + " " + fulldate + ", " + year}{" "}
+                </span>
+              </div>
+              <div className="flex-col md:hidden">
+                <span>{member?.firstName + " " + member?.lastName}</span>
+                <div className="w-full border border-t-0 border-gray-600 my-2"></div>
+              </div>
             </div>
-            <div className="flex-col md:hidden">
-              <span>{member?.firstName + " " + member?.lastName}</span>
-              <div className="w-full border border-t-0 border-gray-600 my-2"></div>
+            <div className="hidden md:block">
+              <AttendanceRecordPercentages attendanceRecord={records} />
             </div>
           </div>
-          <div className="hidden md:block">
-            <AttendanceRecordPercentages attendanceRecord={attendanceRecord} />
-          </div>
-        </div>
 
-        <div className="flex flex-col">
-          <span className="hidden md:block text-2xl font-bold">
-            {" "}
-            {member?.firstName + " " + member?.lastName}
-          </span>
-          <div className="py-2 my-3 md:my-1">
-            <AttendanceStanding
-              member={member}
-              attendanceRecord={attendanceRecord}
-              className={"py-[0.5em] md:py-1 text-lg md:text-base"}
-            />
-          </div>
-          <div className="flex gap-x-12">
-            <div className="flex flex-col">
-              <span className="font-montserrat font-medium">
-                Total attendance
-              </span>
-              <span className="text-xl font-bold">
-                {attendanceRecord.length + " Meetings"}
-              </span>
+          <div className="flex flex-col">
+            <span className="hidden md:block text-2xl font-bold">
+              {" "}
+              {member?.firstName + " " + member?.lastName}
+            </span>
+            <div className="py-2 my-3 md:my-1">
+              <AttendanceStanding
+                member={member}
+                attendanceRecord={records}
+                className={"py-[0.5em] md:py-1 text-lg md:text-base"}
+              />
             </div>
-            <div className="flex flex-col">
-              <span className="font-montserrat font-medium">Total Hours</span>
-              <span className="text-xl font-bold">{totalHours}</span>
+            <div className="flex gap-x-12">
+              <div className="flex flex-col">
+                <span className="font-montserrat font-medium">
+                  Total attendance
+                </span>
+                <span className="text-xl font-bold">
+                  {records.length + " Meetings"}
+                </span>
+              </div>
+              <div className="flex flex-col">
+                <span className="font-montserrat font-medium">Total Hours</span>
+                <span className="text-xl font-bold">{totalHours}</span>
+              </div>
             </div>
           </div>
-        </div>
 
-        <div className="block md:hidden">
-          <AttendanceRecordPercentages
-            attendanceRecord={attendanceRecord}
-            mobile={true}
-          />
+          <div className="block md:hidden">
+            <AttendanceRecordPercentages
+              attendanceRecord={records}
+              mobile={true}
+            />
+          </div>
+        </div>
+        <div className="overflow-x-auto max-w-full">
+          <table className="text-left w-full mt-12 border-collapse">
+            <thead>
+              <tr className="text-xl text-gray-600 border-t border-b border-gray-600">
+                <th className="font-normal py-2 w-3/12">Event Name</th>
+                <th className="font-normal border-l border-gray-600 px-4 py-2 w-2/12">
+                  Date
+                </th>
+                <th className="font-normal border-l border-r border-gray-600 px-4 py-2 w-4/12">
+                  Time
+                </th>
+                <th className="font-normal pl-4 w-3/12">Your Status</th>
+              </tr>
+            </thead>
+            <tbody>
+              {records.map((r) => (
+                <AttendanceRecordRow attendanceRecord={r} event={r.event} />
+              ))}
+            </tbody>
+          </table>
         </div>
       </div>
-      <div className="overflow-x-auto max-w-full">
-        <table className="text-left w-full mt-12 border-collapse">
-          <thead>
-            <tr className="text-xl text-gray-600 border-t border-b border-gray-600">
-              <th className="font-normal py-2 w-3/12">Event Name</th>
-              <th className="font-normal border-l border-gray-600 px-4 py-2 w-2/12">
-                Date
-              </th>
-              <th className="font-normal border-l border-r border-gray-600 px-4 py-2 w-4/12">
-                Time
-              </th>
-              <th className="font-normal pl-4 w-3/12">Your Status</th>
-            </tr>
-          </thead>
-          <tbody>
-            {attendanceEvents.map((event) => (
-              <AttendanceRecordRow
-                attendanceRecord={attendanceRecord}
-                event={event}
-              />
-            ))}
-          </tbody>
-        </table>
-      </div>
-    </div>
-  );
+    );
+  } else {
+    return <></>;
+  }
 };
 
 export default AttendanceRecordPage;
diff --git a/src/pages/EventDetailsPage.tsx b/src/pages/EventDetailsPage.tsx
@@ -5,7 +5,6 @@ import LinkSVG from ".././assets/Link.svg";
 import MeatballMenuSVG from ".././assets/MeatballMenu.svg";
 import PinSVG from ".././assets/Pin.svg";
 import TextIconSVG from ".././assets/TextIcon.svg";
-// import { fetchEvent } from "../client/client";
 import Loading from "../components/Loading";
 import useEvent from "../hooks/useEvent";
 import { createDateString } from "../util/Date";

diff --git a/src/pages/UserPreference.tsx b/src/pages/UserPreference.tsx
@@ -43,7 +43,7 @@ const UserPreference = (): ReactElement => {
             </div>
             <br />
             <span className="bg-yellow-400 rounded-lg px-4 py-1">
-              Diverstiy, Equity, and Inclusion
+              Diversity, Equity, and Inclusion
             </span>
           </div>
         </div>

diff --git a/src/util/Types.tsx b/src/util/Types.tsx
@@ -87,9 +87,9 @@ export type AttendanceData = {
 };
 
 export type AttendanceRecord = {
-  memberID: number;
-  eventID: number;
-  attendance_status: string;
+  memberId: number;
+  attendanceStatus: string;
+  event: Event;
 };
 
 export type AttendanceTag = "K" | "A" | "L" | "D" | "O" | "N" | "E";

diff --git a/src/util/converters.ts b/src/util/converters.ts
@@ -0,0 +1,12 @@
+import { Event, EventStatus } from "./Types";
+
+export const getStatus = (event: Event): EventStatus => {
+  const now = new Date();
+  if (
+    event.startTime.getTime() < now.getTime() &&
+    now.getTime() < event.endTime.getTime()
+  ) {
+    return EventStatus.Live;
+  }
+  return EventStatus.Rest;
+};
-Original file line number
+Diff line change
@@ Expand Up / @@ -43,7 +43,7 @@ const UserPreference = (): ReactElement => { @@
                 </div>
                 <br />
                 <span className="bg-yellow-400 rounded-lg px-4 py-1">
-                  Diverstiy, Equity, and Inclusion
+                  Diversity, Equity, and Inclusion
                 </span>
               </div>
             </div>
@@ Expand Down @@