From 953568f829a5e03a4a49120d8d90e2bf750e5295 Mon Sep 17 00:00:00 2001 From: aimedivin Date: Mon, 7 Oct 2024 23:26:11 +0200 Subject: [PATCH] fix(attendance): fixes recording attendance bug --- src/Mutations/Attendance.tsx | 5 + src/Mutations/teamMutation.tsx | 20 + src/components/ModalAttendance.tsx | 53 +- src/pages/TraineeAttendanceTracker.tsx | 122 ++-- tests/components/ModalAttendance.test.tsx | 12 +- .../AdminTraineeDashboard.test.tsx.snap | 61 +- .../__snapshots__/Footer.test.tsx.snap | 337 ++++----- .../__snapshots__/MainRoutes.test.tsx.snap | 674 +++++++++--------- .../__snapshots__/App.test.tsx.snap | 337 ++++----- .../__snapshots__/Siderbar.test.tsx.snap | 337 ++++----- .../AdminTraineeDashboard.test.tsx.snap | 61 +- tests/pages/__snapshots__/Home.test.tsx.snap | 337 ++++----- .../TraineeAttendanceTracker.test.tsx.snap | 7 +- .../__snapshots__/userRegister.test.tsx.snap | 2 +- 14 files changed, 1309 insertions(+), 1056 deletions(-) diff --git a/src/Mutations/Attendance.tsx b/src/Mutations/Attendance.tsx index 52bb1d996..a86d2b28e 100644 --- a/src/Mutations/Attendance.tsx +++ b/src/Mutations/Attendance.tsx @@ -84,7 +84,12 @@ export const RECORD_ATTENDANCE = gql` id name cohort { + id name + phase { + name + id + } } } trainees { diff --git a/src/Mutations/teamMutation.tsx b/src/Mutations/teamMutation.tsx index 9e23b11db..ef9bca027 100644 --- a/src/Mutations/teamMutation.tsx +++ b/src/Mutations/teamMutation.tsx @@ -25,6 +25,26 @@ export const GET_ALL_TEAMS = gql` id } } + members { + id + email + status { + date + reason + status + } + profile { + firstName + lastName + city + country + phoneNumber + biography + avatar + id + name + } + } } } `; diff --git a/src/components/ModalAttendance.tsx b/src/components/ModalAttendance.tsx index aa09ecb88..921c64deb 100644 --- a/src/components/ModalAttendance.tsx +++ b/src/components/ModalAttendance.tsx @@ -71,7 +71,41 @@ function ModalAttendance({ if (data) { toast.success('Attendance recorded successfully.'); } - setAttendanceData((prev) => [...prev, data.recordAttendance]); + + 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.id, + }, + teams: [data.recordAttendance], + }); + } + return result; + }); setTraineesAttendance([]); setRecordTrainees([]); onClose(); @@ -90,10 +124,12 @@ function ModalAttendance({ }, [recordTrainees]); useEffect(() => { - const sanitizedTrainees = trainees.getTeamTrainees.filter( - (trainee: any) => trainee.status.status !== 'drop', - ); - setAllTrainees(sanitizedTrainees); + if (trainees) { + const sanitizedTrainees = trainees.filter( + (trainee: any) => trainee.status.status !== 'drop', + ); + setAllTrainees(sanitizedTrainees); + } }, [trainees]); useEffect(() => { setFilteredTrainees( @@ -113,11 +149,11 @@ function ModalAttendance({ ) => { let updatedAttendance; const updateAttendance = traineesAttendance.find( - (attendance) => attendance.name.toLowerCase() === name.toLowerCase(), + (attendance) => attendance.id === id, ); if (updateAttendance) { updatedAttendance = traineesAttendance.map((attendance) => { - if (attendance.name.toLowerCase() === name.toLowerCase()) { + if (attendance.id === id) { return { ...attendance, score }; } return attendance; @@ -255,6 +291,7 @@ function ModalAttendance({ day, ); }} + className="cursor-pointer hover:brightness-75" data-testid="test-score-2" > @@ -269,6 +306,7 @@ function ModalAttendance({ day, ); }} + className="cursor-pointer hover:brightness-75" data-testid="test-score-1" > @@ -283,6 +321,7 @@ function ModalAttendance({ day, ); }} + className="cursor-pointer hover:brightness-75" data-testid="test-score-0" > diff --git a/src/pages/TraineeAttendanceTracker.tsx b/src/pages/TraineeAttendanceTracker.tsx index ce463ce1e..449820fcd 100644 --- a/src/pages/TraineeAttendanceTracker.tsx +++ b/src/pages/TraineeAttendanceTracker.tsx @@ -17,7 +17,6 @@ import { import 'react-circular-progressbar/dist/styles.css'; import { GET_ALL_TEAMS } from '../Mutations/teamMutation'; import { GET_TEAMS_CARDS } from '../components/CoordinatorCard'; -import { GET_TEAM_TRAINEE_QUERY } from '../Mutations/manageStudentMutations'; import AttendanceSymbols from '../components/AttendanceSymbols'; import { getDateForDays, Weekdays } from '../utils/getDateForDays'; import Modal, { recordTraineeProps } from '../components/ModalAttendance'; @@ -34,6 +33,28 @@ interface TeamData { name: 'string'; }; }; + members: [ + { + id: string; + email: string; + status: { + date: string; + reason: string; + status: string; + }; + profile: { + firstName: string; + lastName: string; + city: string; + country: string; + phoneNumber: string; + biography: string; + avatar: string; + id: string; + name: string; + }; + }, + ]; } export interface TraineeAttendanceDataInterface { @@ -84,7 +105,7 @@ function TraineeAttendanceTracker() { >(); const [phases, setPhases] = useState([]); const [teamsData, setTeamsData] = useState(); - const [getAllTeams] = useLazyQuery(GET_ALL_TEAMS); + const [getAllTeams, { loading: teamLoading }] = useLazyQuery(GET_ALL_TEAMS); const [initialTraineeAttendanceData, setInitialTraineeAttendanceData] = useState([]); const [traineeAttendanceData, setTraineeAttendanceData] = useState< @@ -161,10 +182,13 @@ function TraineeAttendanceTracker() { }); }); } + if (!traineeData.status.length && !hasData) { + setSelectedDayHasData(false); + date = Date.now().toString(); + } }); if (date) result.dates = getDateForDays(date); - // setTraineeAttendanceData((prevData) => [...prevData, result]); - hasData && updatedTraineeData.push(result); + updatedTraineeData.push(result); }); setTraineeAttendanceData(updatedTraineeData); @@ -254,7 +278,6 @@ function TraineeAttendanceTracker() { setUpdate(false); setIsUpdatedMode(false); setAttendanceData(data.updateAttendance); - formatAttendanceData(attendanceData); }, onError: (error) => { const errorMessage = @@ -263,6 +286,11 @@ function TraineeAttendanceTracker() { }, }, ); + useEffect(() => { + if (attendanceData) { + formatAttendanceData(attendanceData); + } + }, [attendanceData]); useEffect(() => { if (updateTrainees.length > 0) { updateAttendance(); @@ -277,13 +305,6 @@ function TraineeAttendanceTracker() { variables: { orgToken }, }); - const [ - getTeamMembers, - { data: teamMembersData, loading: loadingTeamMembers, refetch }, - ] = useLazyQuery(GET_TEAM_TRAINEE_QUERY, { - variables: { orgToken, team: selectedTeam }, - }); - useEffect(() => { if (!loading && data && data.getAllTeams.length > 0) { setSelectedTeam(data.getAllTeams[0].name); @@ -319,7 +340,13 @@ function TraineeAttendanceTracker() { useEffect(() => { setTraineeAttendanceData([]); - selectedTeam && + setAttendanceData([]); + teamsData?.forEach((team) => { + if (team.id === selectedTeamId) { + setSelectedTeam(team.name); + } + }); + selectedTeamId && getTeamAttendance({ fetchPolicy: 'network-only', variables: { @@ -328,20 +355,11 @@ function TraineeAttendanceTracker() { }, onCompleted: (data) => { setAttendanceData(data.getTeamAttendance); - formatAttendanceData(attendanceData); }, onError: (error) => { toast.error(error.message); }, }); - }, [selectedTeam, attendanceData]); - - useEffect(() => { - teamsData?.forEach((team) => { - if (team.id === selectedTeamId) { - setSelectedTeam(team.name); - } - }); }, [selectedTeamId]); // New week for team attendance @@ -375,6 +393,7 @@ function TraineeAttendanceTracker() { const dates = getDateForDays(baseDate.toString()); + // setAttendanceData(prevData => [...prevData, {}]) setTraineeAttendanceData((prevData) => [ ...prevData, { @@ -397,8 +416,8 @@ function TraineeAttendanceTracker() { setWeeks((prevData) => tempWeeks); } } - }, [selectedPhase, selectedTeamId]); - + }, [selectedPhase, initialTraineeAttendanceData]); + // Change Date for selected Day useEffect(() => { const result = traineeAttendanceData.find((attendanceData) => { @@ -423,20 +442,12 @@ function TraineeAttendanceTracker() { setIsModalOpen(false); }; - useEffect(() => { - if (teamMembersData) { - openModal(); - setRefetchTrainee(true); - } - }, [teamMembersData, refetchTrainee]); - const submitAttendance = async () => { if ( isValidAttendanceDay && selectedTeamData?.cohort.phase.id === selectedPhase?.id ) { - await getTeamMembers({ variables: { orgToken, team: selectedTeam } }); - setRefetchTrainee(false); + openModal(); return; } toast.error('Something went wrong, Please Try again'); @@ -498,7 +509,6 @@ function TraineeAttendanceTracker() { onCompleted: (data) => { toast.success('Attendance has been deleted successfully'); setAttendanceData(data.deleteAttendance); - formatAttendanceData(attendanceData); }, onError: (error) => { toast.error(error.message); @@ -546,19 +556,17 @@ function TraineeAttendanceTracker() { return (
- {teamMembersData && ( - - )} +
@@ -571,6 +579,7 @@ function TraineeAttendanceTracker() { { if ( isUpdatedMode && @@ -662,6 +675,7 @@ function TraineeAttendanceTracker() { }); return; } + setIsUpdatedMode(false); setSelectedWeek(event.target.value); }} > @@ -867,7 +881,7 @@ function TraineeAttendanceTracker() { !attendanceData.days[selectedDay].length ) { return ( - + There is no attendance for the selected day @@ -886,7 +900,7 @@ function TraineeAttendanceTracker() { {!teamAttendanceLoading && !traineeAttendanceData.length && ( - There is no attendance for the selected day + There is no attendance for the selected dayjkbhk )} @@ -970,7 +984,7 @@ function TraineeAttendanceTracker() { {loadingDeleteAttendance - ? 'Loading Data...' + ? 'Deleting Attendance ...' : `Delete Attendance (${selectedDay})`}
@@ -982,11 +996,13 @@ function TraineeAttendanceTracker() {
- [1] Attended and communicated + [1] Didn‘t attend and communicated
- [0] Attended and communicated + + [0] Didn‘t attend and didn‘t communicate +
diff --git a/tests/components/ModalAttendance.test.tsx b/tests/components/ModalAttendance.test.tsx index 608615af8..63c6daf25 100644 --- a/tests/components/ModalAttendance.test.tsx +++ b/tests/components/ModalAttendance.test.tsx @@ -150,7 +150,7 @@ describe('Record attendance modal', () => { team="Team-I-id-123" date="11-11-2024" teamName="Team I" - trainees={sampleTrainees} + trainees={sampleTrainees.getTeamTrainees} setAttendanceData={() => true} /> , @@ -169,7 +169,7 @@ describe('Record attendance modal', () => { team="Team-I-id-123" date="11-11-2024" teamName="Team I" - trainees={sampleTrainees} + trainees={sampleTrainees.getTeamTrainees} setAttendanceData={() => true} /> , @@ -191,7 +191,7 @@ describe('Record attendance modal', () => { team="Team-I-id-123" date="11-11-2024" teamName="Team I" - trainees={sampleTrainees} + trainees={sampleTrainees.getTeamTrainees} setAttendanceData={() => true} /> , @@ -248,7 +248,7 @@ describe('Record attendance modal', () => { team="Team-I-id-123" date='11-11-2024' teamName="Team I" - trainees={{ getTeamTrainees: [sampleTrainees.getTeamTrainees[0]] }} + trainees={[sampleTrainees.getTeamTrainees[0]]} setAttendanceData={() => true} /> , @@ -287,7 +287,7 @@ describe('Record attendance modal', () => { team="Team-I-id-123" date='11-11-2024' teamName="Team I" - trainees={{ getTeamTrainees: [sampleTrainees.getTeamTrainees[0]] }} + trainees={ [sampleTrainees.getTeamTrainees[0]]} setAttendanceData={() => true} /> , @@ -307,7 +307,7 @@ describe('Record attendance modal', () => { team="Team-I-id-123" date="11-11-2024" teamName="Team I" - trainees={{ getTeamTrainees: [sampleTrainees.getTeamTrainees[0]] }} + trainees={[sampleTrainees.getTeamTrainees[0]]} setAttendanceData={() => true} /> , diff --git a/tests/components/__snapshots__/AdminTraineeDashboard.test.tsx.snap b/tests/components/__snapshots__/AdminTraineeDashboard.test.tsx.snap index 09654d8a0..1ee47cdac 100644 --- a/tests/components/__snapshots__/AdminTraineeDashboard.test.tsx.snap +++ b/tests/components/__snapshots__/AdminTraineeDashboard.test.tsx.snap @@ -463,7 +463,7 @@ Array [ name="date" readOnly={true} type="text" - value="2024-10-04" + value="2024-10-07" />
, +
+
+
+

+ Restore Trainee +

+
+
+
+
+
+

+ Are you sure you want to undrop this trainee? +

+
+
+ + +
+
+
+
+
,
diff --git a/tests/components/__snapshots__/Footer.test.tsx.snap b/tests/components/__snapshots__/Footer.test.tsx.snap index 7078496e1..afcaa31d8 100644 --- a/tests/components/__snapshots__/Footer.test.tsx.snap +++ b/tests/components/__snapshots__/Footer.test.tsx.snap @@ -2,22 +2,22 @@ exports[`