From a9fff86c841e8d692adfe6e0493ea99dc499b43f Mon Sep 17 00:00:00 2001 From: justagoodfriend Date: Thu, 16 Nov 2023 19:33:05 -0500 Subject: [PATCH] cleaning up errors and adding in new attendance status usages --- .../AttendanceRecordPercent.tsx | 23 +++++++------- .../AttendanceStatusString.tsx | 30 ++++++++++++++----- src/pages/AttendanceRecordPage.tsx | 2 ++ tailwind.config.js | 1 + 4 files changed, 38 insertions(+), 18 deletions(-) diff --git a/src/components/AttendanceRecord/AttendanceRecordPercent.tsx b/src/components/AttendanceRecord/AttendanceRecordPercent.tsx index 9a28346..64f1c43 100644 --- a/src/components/AttendanceRecord/AttendanceRecordPercent.tsx +++ b/src/components/AttendanceRecord/AttendanceRecordPercent.tsx @@ -1,5 +1,8 @@ import { AttendanceRecord } from "../../util/Types"; -import { getAllStatuses } from "./AttendanceStatusString"; +import { + getAllStatuses, + getCountOfKeyInStatusList, +} from "./AttendanceStatusString"; interface AttendanceRecordPercentagesProps { attendanceRecord: AttendanceRecord[]; @@ -13,17 +16,15 @@ export const AttendanceRecordPercentages = ({ ({ memberID, eventID, attendance_status }) => attendance_status ); const AttendanceList = getAllStatuses(attendance_statuses); - const attendened = AttendanceList.filter((elem) => elem === "O"); - // TODO: these don't consider Excused Absenses/ what not - const earlyOrLate = AttendanceList.filter( - (elem) => elem === "L" || elem === "D" - ); - const absent = AttendanceList.filter((elem) => elem === "K" || elem === "A"); + const attended = getCountOfKeyInStatusList(AttendanceList, "O"); + const late = getCountOfKeyInStatusList(AttendanceList, "L"); + const early = getCountOfKeyInStatusList(AttendanceList, "D"); + const absentK = getCountOfKeyInStatusList(AttendanceList, "K"); + const absentA = getCountOfKeyInStatusList(AttendanceList, "A"); - // TODO: probably should consider how excused etc reflect here - const attendedPercent = (attendened.length / recordSize) * 100; - const earlyOrLatePercent = (earlyOrLate.length / recordSize) * 100; - const absentPercent = (absent.length / recordSize) * 100; + const attendedPercent = (attended / recordSize) * 100; + const earlyOrLatePercent = ((late + early) / recordSize) * 100; + const absentPercent = ((absentA + absentK) / recordSize) * 100; return (
diff --git a/src/components/AttendanceRecord/AttendanceStatusString.tsx b/src/components/AttendanceRecord/AttendanceStatusString.tsx index f8b909a..872441b 100644 --- a/src/components/AttendanceRecord/AttendanceStatusString.tsx +++ b/src/components/AttendanceRecord/AttendanceStatusString.tsx @@ -7,7 +7,6 @@ export const preProcess = (attendanceStatus: string): AttendanceTag[][] => { const returnArray = []; for (let i = 0; i < splitChars.length; i++) { - // E first then look forward const currChar = splitChars[i] as AttendanceTag; const nextChar = splitChars[i + 1] as AttendanceTag; if (nextChar === "E") { @@ -24,16 +23,31 @@ export const preProcess = (attendanceStatus: string): AttendanceTag[][] => { }; export const getAllStatuses = (attendance_statuses: string[]) => { - const returnArray: AttendanceTag[] = []; + const returnArray: AttendanceTag[][] = []; for (const attendance of attendance_statuses) { const allLetters = preProcess(attendance); - for (const letterArr of allLetters) { - returnArray.push(...letterArr); + for (const arrElem of allLetters) { + returnArray.push(arrElem); } } return returnArray; }; +export const getCountOfKeyInStatusList = ( + attendanceTagList: AttendanceTag[][], + key: string +) => { + let count = 0; + for (const arrElem of attendanceTagList) { + if (arrElem.length === 1) { + if (arrElem[0] === key) { + count++; + } + } + } + return count; +}; + interface AttendanceListProps { attendanceStatus: string; } @@ -54,8 +68,8 @@ export const AttendanceList = ({ attendanceStatus }: AttendanceListProps) => { O: "bg-attendance-green border border-attendance-green bg-opacity-25", A: "bg-attendance-red border border-attendance-red bg-opacity-25", K: "bg-attendance-red border border-attendance-red bg-opacity-25", - E: "bg-gray-400 border border-gray-400 bg-opacity-25", - N: "bg-gray-400 border border-gray-400 bg-opacity-25", + E: "bg-attendance-grey border border-attendance-grey bg-opacity-25", + N: "bg-attendance-grey border border-attendance-grey bg-opacity-25", }; const listOfTags = preProcess(attendanceStatus); @@ -64,7 +78,9 @@ export const AttendanceList = ({ attendanceStatus }: AttendanceListProps) => { let color; for (const arrTag of tag) { combinedString += keyToTextDict[arrTag]; - color = keyToClassName[arrTag]; + if (!color) { + color = keyToClassName[arrTag]; + } } return [combinedString, color]; }); diff --git a/src/pages/AttendanceRecordPage.tsx b/src/pages/AttendanceRecordPage.tsx index ce11837..2689dbf 100644 --- a/src/pages/AttendanceRecordPage.tsx +++ b/src/pages/AttendanceRecordPage.tsx @@ -27,6 +27,8 @@ const AttendanceRecordPage = () => { const attendanceRecords = await getAttendanceRecordForMember(member!.id); setAttendanceRecord(attendanceRecords); const events: Event[] = []; + // TODO: There's a better way to fetch this records with the new client function I created + // but for some reason this breaks, I lowkey think its not very important until we get to implementing the new API for (const record of attendanceRecords) { const event = await fetchEvent(record.eventID); events.push(event); diff --git a/tailwind.config.js b/tailwind.config.js index 8cd99ec..3b2c5ff 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -20,6 +20,7 @@ module.exports = { "attendance-green": "#77DD77", "attendance-yellow": "#FEC12F", "attendance-red": "#D41B2C", + "attendance-grey": "#767676", }, backgroundImage: { "cooper-mobile": "url(../src/assets/cooper-mobile.jpg)",