refactored grouped logic into util file

rydersitcawich · rydersitcawich · commit d4d2f23cc722 · 2024-01-21T13:11:37.000-05:00
diff --git a/frontend/alert/components/AutoComplete.tsx b/frontend/alert/components/AutoComplete.tsx
@@ -9,6 +9,7 @@ import { useOnClickOutside } from "pcx-shared-components/src/useOnClickOutside";
 import { Input } from "./Input";
 import { Section } from "../types";
 import GroupSuggestion from "./GroupSuggestion";
+import { groupByProperty } from "../util";
 
 /* A function that takes in a search term and returns a promise with both the search term and
 the search results.
@@ -137,18 +138,17 @@ interface TSuggestion {
 }
 
 interface AutoCompleteProps {
-    defaultValue: string,
-    setTimeline: React.Dispatch<React.SetStateAction<string | null>>,
-    selectedCourses: Set<Section>,
-    setSelectedCourses: React.Dispatch<React.SetStateAction<Set<Section>>>,
-    value: string,
-    setValue: React.Dispatch<React.SetStateAction<string>>,
-    inputRef: React.RefObject<HTMLInputElement>,
-    clearSelections: () => void,
-    clearInputValue: () => void,
+    defaultValue: string;
+    setTimeline: React.Dispatch<React.SetStateAction<string | null>>;
+    selectedCourses: Set<Section>;
+    setSelectedCourses: React.Dispatch<React.SetStateAction<Set<Section>>>;
+    value: string;
+    setValue: React.Dispatch<React.SetStateAction<string>>;
+    inputRef: React.RefObject<HTMLInputElement>;
+    clearSelections: () => void;
+    clearInputValue: () => void;
 }
 
-
 const AutoComplete = ({
     defaultValue = "",
     setTimeline,
@@ -187,13 +187,11 @@ const AutoComplete = ({
                 inputRef.current.value = generateCoursesValue();
             } else if (selectedCourses.size === 1) {
                 // display the one selected section
-                setValue(
-                    selectedCourses.values().next().value.section_id
-                );
+                setValue(selectedCourses.values().next().value.section_id);
                 inputRef.current.value = selectedCourses
                     .values()
                     .next().value.section_id;
-            } 
+            }
         }
     }, [selectedCourses]);
 
@@ -247,24 +245,13 @@ const AutoComplete = ({
      * Returns suggested suggestion grouped by course
      * @return suggestions
      */
-    const groupedSuggestions = suggestions
-        .sort((a, b) => a.section_id.localeCompare(b.section_id))
-        .reduce((res, obj) => {
-            const [courseName, midNum, endNum] = obj.section_id.split("-");
-            const { activity } = obj;
-
-            if (res[`${courseName}-${midNum}`]) {
-                if (res[`${courseName}-${midNum}`][activity]) {
-                    res[`${courseName}-${midNum}`][activity].push(obj);
-                } else {
-                    res[`${courseName}-${midNum}`][activity] = [obj];
-                }
-            } else {
-                res[`${courseName}-${midNum}`] = { [activity]: [obj] };
-            }
-
-            return res;
-        }, {});
+    const groupedSuggestions = groupByProperty(
+        suggestions,
+        (a, b) => a.section_id.localeCompare(b.section_id),
+        "-",
+        (obj) => obj.section_id,
+        (obj) => obj.activity
+    );
 
     return (
         <Container
diff --git a/frontend/alert/components/managealert/AlertHeader.tsx b/frontend/alert/components/managealert/AlertHeader.tsx
@@ -16,20 +16,20 @@ const GridSubtitle = styled.div`
 
 // Component for an alert entry (renders as a row in CSS grid)
 interface AlertHeaderProps {
-    course: string;
-    rownum: number;
+    courseCode: string;
+    rowNum: number;
 }
-export const AlertHeader = ({ course, rownum }: AlertHeaderProps) => {
+export const AlertHeader = ({ courseCode, rowNum }: AlertHeaderProps) => {
     return (
         <>
             <GridCourseTitle column={1} valign border>
-                <GridSubtitle>{course.toUpperCase()}</GridSubtitle>
+                <GridSubtitle>{courseCode.toUpperCase()}</GridSubtitle>
             </GridCourseTitle>
             {/* used to make sure grid line goes to end */}
             {Array.from({ length: 7 }, (_, index) => (
                 <GridItem
                     column={index + 2}
-                    row={rownum}
+                    row={rowNum}
                     border
                     halign
                     valign
diff --git a/frontend/alert/components/managealert/AlertItem.tsx b/frontend/alert/components/managealert/AlertItem.tsx
@@ -39,7 +39,7 @@ interface AlertItemProps {
     status: SectionStatus;
     actions: AlertAction;
     closed: AlertAction;
-    rownum: number;
+    rowNum: number;
     checked: boolean;
     toggleAlert: () => void;
     alertHandler: () => void;
@@ -52,7 +52,7 @@ export const AlertItem = ({
     status,
     actions,
     closed,
-    rownum,
+    rowNum,
     checked,
     toggleAlert,
     alertHandler,
@@ -76,14 +76,14 @@ export const AlertItem = ({
 
     return (
         <>
-            <GridItem column={1} row={rownum} border halign valign>
+            <GridItem column={1} row={rowNum} border halign valign>
                 <input
                     type="checkbox"
                     checked={checked}
                     onChange={toggleAlert}
                 />
             </GridItem>
-            <GridItem column={2} row={rownum} border halign valign talign>
+            <GridItem column={2} row={rowNum} border halign valign talign>
                 {alertLastSent ? (
                     <P size="0.7rem">{alertLastSent}</P>
                 ) : (
@@ -92,21 +92,21 @@ export const AlertItem = ({
                     </P>
                 )}
             </GridItem>
-            <GridItem column={3} row={rownum} border halign valign talign>
+            <GridItem column={3} row={rowNum} border halign valign talign>
                 <P size="0.7rem">{course}</P>
             </GridItem>
-            <StatusGridItem column={4} row={rownum} border halign valign>
+            <StatusGridItem column={4} row={rowNum} border halign valign>
                 <StatusInd background={statuscolor} />
                 <P size="0.7rem">{statustext}</P>
             </StatusGridItem>
-            <GridItem border column={5} row={rownum} halign valign></GridItem>
-            <GridItem border column={6} row={rownum} halign valign>
+            <GridItem border column={5} row={rowNum} halign valign></GridItem>
+            <GridItem border column={6} row={rowNum} halign valign>
                 <ToggleSwitch type={actions} handleChange={alertHandler} />
             </GridItem>
-            <GridItem border column={7} row={rownum} halign valign>
+            <GridItem border column={7} row={rowNum} halign valign>
                 <ToggleSwitch type={closed} handleChange={closedHandler} />
             </GridItem>
-            <GridItem border column={8} row={rownum} halign valign>
+            <GridItem border column={8} row={rowNum} halign valign>
                 <TrashImg
                     src="/svg/trash.svg"
                     width="1.15rem"
diff --git a/frontend/alert/components/managealert/ManageAlertUI.tsx b/frontend/alert/components/managealert/ManageAlertUI.tsx
@@ -7,6 +7,7 @@ import { AlertItem } from "./AlertItem";
 import { maxWidth, PHONE } from "../../constants";
 import { Alert, AlertAction, SectionStatus, TAlertSel } from "../../types";
 import { AlertHeader } from "./AlertHeader";
+import { groupByProperty } from "../../util";
 
 const Container = styled.div`
     background: #ffffff;
@@ -91,90 +92,7 @@ export const ManageAlert = ({
     const [searchTimeout, setSearchTimeout] = useState<number>();
     const [numSelected, setNumSelected] = useState(0);
 
-    // Alerts for testing
-    var alert1: Alert = {
-        id: 1,
-        originalCreatedAt: "2023-09-11T12:00:00Z",
-        section: "cis-1100-001",
-        alertLastSent: "2023-09-11T12:00:00Z",
-        status: SectionStatus.OPEN,
-        actions: AlertAction.ONALERT,
-        closedNotif: AlertAction.ONCLOSED,
-    };
-    var alert2: Alert = {
-        id: 2,
-        originalCreatedAt: "2023-09-11T12:00:00Z",
-        section: "cis-1100-002",
-        alertLastSent: "2023-09-11T12:00:00Z",
-        status: SectionStatus.OPEN,
-        actions: AlertAction.ONALERT,
-        closedNotif: AlertAction.ONCLOSED,
-    };
-    var alert3: Alert = {
-        id: 3,
-        originalCreatedAt: "2023-09-11T12:00:00Z",
-        section: "cis-1200-001",
-        alertLastSent: "2023-09-11T12:00:00Z",
-        status: SectionStatus.OPEN,
-        actions: AlertAction.ONALERT,
-        closedNotif: AlertAction.ONCLOSED,
-    };
-    var alert4: Alert = {
-        id: 4,
-        originalCreatedAt: "2023-09-11T12:00:00Z",
-        section: "stat-4300-002",
-        alertLastSent: "2023-09-11T12:00:00Z",
-        status: SectionStatus.OPEN,
-        actions: AlertAction.ONALERT,
-        closedNotif: AlertAction.ONCLOSED,
-    };
-    var alert5: Alert = {
-        id: 5,
-        originalCreatedAt: "2023-09-11T12:00:00Z",
-        section: "stat-4300-001",
-        alertLastSent: "2023-09-11T12:00:00Z",
-        status: SectionStatus.OPEN,
-        actions: AlertAction.ONALERT,
-        closedNotif: AlertAction.ONCLOSED,
-    };
-    var alert6: Alert = {
-        id: 6,
-        originalCreatedAt: "2023-09-11T12:00:00Z",
-        section: "math-1400-001",
-        alertLastSent: "2023-09-11T12:00:00Z",
-        status: SectionStatus.OPEN,
-        actions: AlertAction.ONALERT,
-        closedNotif: AlertAction.ONCLOSED,
-    };
-    var alert7: Alert = {
-        id: 7,
-        originalCreatedAt: "2023-09-11T12:00:00Z",
-        section: "math-1410-002",
-        alertLastSent: "2023-09-11T12:00:00Z",
-        status: SectionStatus.OPEN,
-        actions: AlertAction.ONALERT,
-        closedNotif: AlertAction.ONCLOSED,
-    };
-    var alert8: Alert = {
-        id: 8,
-        originalCreatedAt: "2023-09-11T12:00:00Z",
-        section: "stat-4100-001",
-        alertLastSent: "2023-09-11T12:00:00Z",
-        status: SectionStatus.OPEN,
-        actions: AlertAction.ONALERT,
-        closedNotif: AlertAction.ONCLOSED,
-    };
-    var testAlerts: Alert[];
-    testAlerts = [
-        alert1,
-        alert2,
-        alert3,
-        alert4,
-        alert5,
-        alert6,
-        alert7,
-        alert8,
-    ];
+    let rowNum = 0;
 
     useEffect(() => {
         setNumSelected(
@@ -195,24 +113,16 @@ export const ManageAlert = ({
         );
     };
 
-    let rowNum = 0;
-
     /**
      * Returns alerts grouped by course
      * @return grouped alerts
      */
-    const groupedAlerts = testAlerts
-        .sort((a, b) => a.section.localeCompare(b.section))
-        .reduce((res, obj) => {
-            const [courseName, midNum, endNum] = obj.section.split("-");
-            if (res[`${courseName}-${midNum}`]) {
-                res[`${courseName}-${midNum}`].push(obj);
-            } else {
-                res[`${courseName}-${midNum}`] = [obj];
-            }
-
-            return res;
-        }, {});
+    const groupedAlerts = groupByProperty(
+        alerts,
+        (a, b) => a.section.localeCompare(b.section),
+        "-",
+        (obj) => obj.section
+    );
 
     return (
         <Container>
@@ -229,18 +139,15 @@ export const ManageAlert = ({
             />
             <AlertGrid>
                 {Object.keys(groupedAlerts).map((key) => {
-                    rowNum++;
                     return (
                         <>
-                            <AlertHeader course={key} rownum={rowNum} />
+                            <AlertHeader courseCode={key} rowNum={++rowNum} />
                             {groupedAlerts[key]?.map?.((alert) => {
-                                console.log(alert);
-                                rowNum++;
                                 return (
                                     <AlertItem
                                         key={alert.id}
                                         checked={alertSel[alert.id]}
-                                        rownum={rowNum}
+                                        rowNum={++rowNum}
                                         alertLastSent={alert.alertLastSent}
                                         course={alert.section}
                                         status={alert.status}
diff --git a/frontend/alert/util.ts b/frontend/alert/util.ts
@@ -15,3 +15,35 @@ export const mapActivityToString = (activity) => {
 
     return activity in activityStringMap ? activityStringMap[activity] : "";
 };
+
+export function groupByProperty(
+    array,
+    sortingFn,
+    splitPattern,
+    keyExtractor,
+    activityExtractor = (obj) => undefined
+) {
+    return array.sort(sortingFn).reduce((res, obj) => {
+        const key = keyExtractor(obj);
+        const activity = activityExtractor(obj);
+        const [courseName, midNum, endNum] = key.split(splitPattern);
+        if (activity) {
+            if (res[`${courseName}-${midNum}`]) {
+                if (res[`${courseName}-${midNum}`][activity]) {
+                    res[`${courseName}-${midNum}`][activity].push(obj);
+                } else {
+                    res[`${courseName}-${midNum}`][activity] = [obj];
+                }
+            } else {
+                res[`${courseName}-${midNum}`] = { [activity]: [obj] };
+            }
+        } else {
+            if (res[`${courseName}-${midNum}`]) {
+                res[`${courseName}-${midNum}`].push(obj);
+            } else {
+                res[`${courseName}-${midNum}`] = [obj];
+            }
+        }
+        return res;
+    }, {});
+}
