fix: move client-side attendance logic to server

Author: aimedivin

src/Mutations/Attendance.tsx

@@ -17,7 +17,7 @@ function AttendanceSymbols({ status }: Props) {
   const property: Property = {
     color: 'bg-[#0E8E0B]',
     // icon: <i className="fa-solid fa-check font-semibold" />,
-    icon: <FaCheck className="text-[.8rem]" />,
+    icon: <FaCheck className="mt-[.1rem] md:mt-0 text-[.75rem] md:text-[.8rem]" />,
   };
 
   if (score === '1') {
@@ -26,11 +26,13 @@ function AttendanceSymbols({ status }: Props) {
   }
   if (score === '0') {
     property.color = 'bg-[#C30909]';
-    property.icon = <FaXmark className="text-base" />;
+    property.icon = (
+      <FaXmark className="-ml-[.1rem] md:ml-0 text-[.93rem] md:text-base" />
+    );
   }
   return (
     <div
-      className={`${property.color} flex items-center justify-center w-[1.5rem] h-[1.5rem] rounded-full text-white`}
+      className={`${property.color} flex items-center justify-center w-[1.3rem] h-[1.3rem] md:w-[1.5rem] md:h-[1.5rem] rounded-full text-white`}
     >
       {property.icon}
     </div>

src/components/AttendanceSymbols.tsx

@@ -1,11 +1,12 @@
 import React, { useEffect, useState } from 'react';
+import { number } from 'zod';
 import AttendanceSymbols from './AttendanceSymbols';
 import { TraineeAttendanceDataInterface } from '../pages/TraineeAttendanceTracker';
 
 interface EditAttendanceProps {
   setTraineeAttendanceData: React.Dispatch<React.SetStateAction<any[]>>;
   setUpdated: React.Dispatch<React.SetStateAction<boolean>>;
-  week: string;
+  week: number;
   day: string;
   phase: string;
   traineeId: string;
@@ -25,21 +26,22 @@ function EditAttendanceButton({
     setOpenEdit(false);
   }, [week, phase, day]);
 
-  const handleUpdateAttendance = (score: string) => {
+  const handleUpdateAttendance = (score: number) => {
+    
     setTraineeAttendanceData((prev) =>
       prev.map((attendanceData) => {
-        if (attendanceData.week === week && attendanceData.phase === phase) {
+        if (attendanceData.week === week && attendanceData.phase.id === phase) {
           const updatedDay = attendanceData.days[
             day as keyof typeof attendanceData.days
           ].map((traineeData: TraineeAttendanceDataInterface) => {
             if (
               traineeData.trainee.id === traineeId &&
-              traineeData.status.toString() !== score.toString()
+              traineeData.score !== score
             ) {
               setUpdated(true);
               return {
                 trainee: traineeData.trainee,
-                status: score,
+                score,
               };
             }
             return traineeData;
@@ -61,30 +63,21 @@ function EditAttendanceButton({
       {!openEdit && (
         <span
           onClick={() => setOpenEdit(true)}
-          className="px-2 py-[2px] border dark:border-white border-black rounded-md text-[.85rem]"
+          className="px-3 py-[3px] border dark:border-white border-black rounded-md font-medium text-[.85rem]"
           data-testid="edit-button"
         >
           Edit
         </span>
       )}
       {openEdit && (
         <div className="flex items-center gap-1 xmd:gap-2">
-          <div
-            onClick={() => handleUpdateAttendance('2')}
-            data-testid="score-2"
-          >
+          <div onClick={() => handleUpdateAttendance(2)} data-testid="score-2">
             <AttendanceSymbols status={2} />
           </div>
-          <div
-            onClick={() => handleUpdateAttendance('1')}
-            data-testid="score-1"
-          >
+          <div onClick={() => handleUpdateAttendance(1)} data-testid="score-1">
             <AttendanceSymbols status={1} />
           </div>
-          <div
-            onClick={() => handleUpdateAttendance('0')}
-            data-testid="score-0"
-          >
+          <div onClick={() => handleUpdateAttendance(0)} data-testid="score-0">
             <AttendanceSymbols status={0} />
           </div>
         </div>

src/components/EditAttendenceButton.tsx

@@ -4,33 +4,30 @@ import { useMutation } from '@apollo/client';
 import { format } from 'date-fns';
 import { RECORD_ATTENDANCE } from '../Mutations/Attendance';
 import AttendanceSymbols from './AttendanceSymbols';
+import { AttendanceDataInterface } from '../pages/TraineeAttendanceTracker';
 
 interface ModalProps {
   isVisible: boolean;
   onClose: () => void;
-  setAttendanceData: React.Dispatch<React.SetStateAction<any[]>>;
+  setAttendanceData: React.Dispatch<
+    React.SetStateAction<AttendanceDataInterface | undefined>
+  >;
   trainees: any;
   week: number;
   date: string;
-  day: string;
+  dayType: 'today' | 'yesterday' | 'others';
   team: string;
   teamName: string;
 }
 interface attendanceProps {
   name: string;
   score: number;
   id: string;
-  day: string;
-}
-
-interface StatusInput {
-  day: string;
-  score: string;
 }
 
 export interface recordTraineeProps {
   trainee: string;
-  status: StatusInput;
+  score: number;
 }
 
 function ModalAttendance({
@@ -39,7 +36,7 @@ function ModalAttendance({
   trainees,
   week,
   date,
-  day,
+  dayType,
   setAttendanceData,
   team,
   teamName,
@@ -60,52 +57,18 @@ function ModalAttendance({
     { data: recordAttendanceData, loading: loadingRecordAttendance, error },
   ] = useMutation(RECORD_ATTENDANCE, {
     variables: {
+      today: dayType === 'today',
+      yesterday: dayType === 'yesterday',
       week,
       team,
-      date,
       trainees: recordTrainees,
       orgToken: localStorage.getItem('orgToken'),
     },
     fetchPolicy: 'no-cache',
     onCompleted: (data) => {
-      if (data) {
-        toast.success('Attendance recorded successfully.');
-      }
+      toast.success('Attendance recorded successfully.');
 
-      setAttendanceData((prev) => {
-        let isSet = false;
-        const result = prev.map((attendance) => {
-          if (
-            attendance.week.toString() === week.toString() &&
-            attendance.cohort.id === data.recordAttendance.team.cohort.id &&
-            attendance.phase.id === data.recordAttendance.team.cohort.phase.id
-          ) {
-            isSet = true;
-            return {
-              ...attendance,
-              teams: [data.recordAttendance],
-            };
-          }
-          return attendance;
-        });
-
-        if (!isSet && team === data.recordAttendance.team.id) {
-          result.push({
-            week: week.toString(),
-            id: Math.random().toString(),
-            cohort: {
-              id: data.recordAttendance.team.cohort.id,
-              name: data.recordAttendance.team.cohort.name,
-            },
-            phase: {
-              id: data.recordAttendance.team.cohort.phase.id,
-              name: data.recordAttendance.team.cohort.phase.name,
-            },
-            teams: [data.recordAttendance],
-          });
-        }
-        return result;
-      });
+      setAttendanceData(data.recordAttendance);
       setTraineesAttendance([]);
       setRecordTrainees([]);
       onClose();
@@ -141,12 +104,7 @@ function ModalAttendance({
 
   if (!isVisible) return null;
 
-  const handleGiveAttendance = (
-    name: string,
-    score: number,
-    id: string,
-    day: string,
-  ) => {
+  const handleGiveAttendance = (name: string, score: number, id: string) => {
     let updatedAttendance;
     const updateAttendance = traineesAttendance.find(
       (attendance) => attendance.id === id,
@@ -159,7 +117,7 @@ function ModalAttendance({
         return attendance;
       });
     } else {
-      updatedAttendance = [...traineesAttendance, { name, score, id, day }];
+      updatedAttendance = [...traineesAttendance, { name, score, id }];
     }
 
     setTraineesAttendance(updatedAttendance);
@@ -175,10 +133,7 @@ function ModalAttendance({
 
     const updatedRecords = traineesAttendance.map((attendance) => ({
       trainee: attendance.id,
-      status: {
-        day: attendance.day,
-        score: attendance.score.toString(),
-      },
+      score: attendance.score,
     }));
 
     setRecordTrainees(updatedRecords);
@@ -288,7 +243,6 @@ function ModalAttendance({
                                       trainee.profile.name,
                                       2,
                                       trainee.id,
-                                      day,
                                     );
                                   }}
                                   className="cursor-pointer hover:brightness-75"
@@ -303,7 +257,6 @@ function ModalAttendance({
                                       trainee.profile.name,
                                       1,
                                       trainee.id,
-                                      day,
                                     );
                                   }}
                                   className="cursor-pointer hover:brightness-75"
@@ -318,7 +271,6 @@ function ModalAttendance({
                                       trainee.profile.name,
                                       0,
                                       trainee.id,
-                                      day,
                                     );
                                   }}
                                   className="cursor-pointer hover:brightness-75"

src/components/ModalAttendance.tsx

@@ -140,27 +140,32 @@ function Sidebar({ style, toggle }: { style: string; toggle: () => void }) {
             <SideNavLink onClick={toggle} to="/sessions" name="Sessions">
               <BookOpenIcon className="w-5" />
             </SideNavLink>
-            <SideNavLink onClick={toggle} name="Attendance" to="/attendance">
-              <ClipboardCheckIcon className="w-5 " />
-            </SideNavLink>
 
             <SideNavLink onClick={toggle} name="Docs" to="/coordinatorDocs">
               <FolderIcon className="w-5" />
             </SideNavLink>
           </CheckRole>
 
-          {/* manger role */}
-          <CheckRole roles={['manager']}>
-            <SideNavLink onClick={toggle} name="Teams" to="/team-cards">
-              <UserGroupIcon className="w-5" />
-            </SideNavLink>
-          </CheckRole>
           {/* TTL role */}
           <CheckRole roles={['ttl']}>
             <SideNavLink onClick={toggle} to="/ttl-trainees" name="Trainees">
               <UserGroupIcon className="w-5" />
             </SideNavLink>
           </CheckRole>
+          
+          {/* FOR COORDINATORS AND A TTL */}
+          <CheckRole roles={['coordinator', 'ttl']}>
+            <SideNavLink onClick={toggle} name="Attendance" to="/attendance">
+              <ClipboardCheckIcon className="w-5 " />
+            </SideNavLink>
+          </CheckRole>
+
+          {/* manger role */}
+          <CheckRole roles={['manager']}>
+            <SideNavLink onClick={toggle} name="Teams" to="/team-cards">
+              <UserGroupIcon className="w-5" />
+            </SideNavLink>
+          </CheckRole>
 
           <CheckRole roles={['ttl']}>
             <SideNavLink onClick={toggle} to="/docs/ttl" name="Docs">
@@ -186,7 +191,7 @@ function Sidebar({ style, toggle }: { style: string; toggle: () => void }) {
           </SideNavLink>
 
           <SideNavLink onClick={toggle} name="Help" to="/support">
-            <SupportIcon className="w-5 text-red-700 dark:text-red-600 hover:text-red-900" />
+            <SupportIcon className="w-5" />
           </SideNavLink>
           <SideNavLink onClick={logout} to="#link">
             <LogoutIcon className="w-5 text-red-700 dark:text-red-600 hover:text-red-900" />

src/components/Sidebar.tsx

@@ -10,7 +10,7 @@ const TraineeAttendance = React.lazy(
 function Attendance() {
   return (
     <>
-      <CheckRole roles={['coordinator']}>
+      <CheckRole roles={['coordinator', 'ttl']}>
         <TraineeAttendanceTracker />
       </CheckRole>
       <CheckRole roles={['trainee']}>

src/pages/Attendance.tsx

@@ -104,6 +104,7 @@ function AdminLogin() {
           }
         },
         onError: (err) => {
+          console.log(err)
           if (err.networkError)
             toast.error('There was a problem contacting the server');
           else if (err.message.toLowerCase() !== 'invalid credential') {