cleaning up errors and adding in new attendance status usages

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 (
     <div className="flex flex-col md:flex-row pt-5">

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];
   });

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);

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)",