sorting functionality works and updated UI elements

frontend/alert/components/managealert/AlertHeader.tsx

@@ -0,0 +1,113 @@
+import React from "react";
+import styled from "styled-components";
+import {
+    GridItem,
+    GridCourseTitle,
+} from "pcx-shared-components/src/common/layout";
+import { P } from "../common/common";
+import ToggleSwitch from "../common/ToggleSwitch";
+import { AlertAction, SectionStatus } from "../../types";
+import { Img } from "../common/common";
+import { configureScope } from "@sentry/browser";
+import { Flex } from "pcx-shared-components/src/common/layout";
+
+const GridTitle = styled.div`
+    color: #282828;
+    font-size: 1rem;
+    font-family: "Inter", sans-serif;
+    font-weight: bold;
+    padding-top: 0.5rem;
+`;
+
+const GridSubtitle = styled.div`
+    color: #282828;
+    font-size: 0.9rem;
+    padding-top: 0.4rem;
+    font-family: "Inter", sans-serif;
+    font-weight: bold;
+`;
+
+const TrashImg = styled(Img)`
+    cursor: pointer;
+    opacity: 75%;
+
+    &:hover {
+        opacity: 100%;
+    }
+    &:active {
+        transform: translateY(0.1rem);
+    }
+`;
+
+// Component for an alert entry (renders as a row in CSS grid)
+interface AlertHeaderProps {
+    course: string;
+    rownum: number;
+}
+export const AlertHeader = ({ course, rownum }: AlertHeaderProps) => {
+    return (
+        <>
+            <GridCourseTitle column={1} valign border>
+                <GridSubtitle>{course.toUpperCase()}</GridSubtitle>
+            </GridCourseTitle>
+
+            {/* used to make sure grid line goes to end */}
+            <GridItem
+                column={2}
+                row={rownum}
+                border
+                halign
+                valign
+                talign
+            ></GridItem>
+            <GridItem
+                column={3}
+                row={rownum}
+                border
+                halign
+                valign
+                talign
+            ></GridItem>
+            <GridItem
+                column={4}
+                row={rownum}
+                border
+                halign
+                valign
+                talign
+            ></GridItem>
+            <GridItem
+                column={5}
+                row={rownum}
+                border
+                halign
+                valign
+                talign
+            ></GridItem>
+            <GridItem
+                column={6}
+                row={rownum}
+                border
+                halign
+                valign
+                talign
+            ></GridItem>
+            <GridItem
+                column={7}
+                row={rownum}
+                border
+                halign
+                valign
+                talign
+            ></GridItem>
+            <GridItem
+                column={8}
+                row={rownum}
+                border
+                halign
+                valign
+                talign
+            ></GridItem>
+        </>
+    );
+};

frontend/alert/components/managealert/AlertItem.tsx

@@ -23,15 +23,14 @@ const StatusGridItem = styled(GridItem)`
 const TrashImg = styled(Img)`
     cursor: pointer;
     opacity: 75%;
-    
+
     &:hover {
         opacity: 100%;
     }
     &:active {
         transform: translateY(0.1rem);
     }
-
-`
+`;
 
 // Component for an alert entry (renders as a row in CSS grid)
 interface AlertItemProps {

frontend/alert/components/managealert/ManageAlertUI.tsx

@@ -5,7 +5,8 @@ import Header from "./Header";
 import { AlertSearch } from "./AlertSearch";
 import { AlertItem } from "./AlertItem";
 import { maxWidth, PHONE } from "../../constants";
-import { Alert, AlertAction, TAlertSel } from "../../types";
+import { Alert, AlertAction, SectionStatus, TAlertSel } from "../../types";
+import { AlertHeader } from "./AlertHeader";
 
 const Container = styled.div`
     background: #ffffff;
@@ -90,6 +91,91 @@ 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,
+    ];
+
     useEffect(() => {
         setNumSelected(
             Object.values(alertSel).reduce((acc, x) => acc + (x ? 1 : 0), 0)
@@ -109,6 +195,25 @@ 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;
+        }, {});
+
     return (
         <Container>
             <Flex margin="0.2rem 2rem 0.1rem 2rem" center valign spaceBetween>
@@ -123,28 +228,49 @@ export const ManageAlert = ({
                 batchSelectHandler={batchSelectHandler}
             />
             <AlertGrid>
-                {alerts?.map?.((alert, i) => (
-                    <AlertItem
-                        key={alert.id}
-                        checked={alertSel[alert.id]}
-                        rownum={i + 1}
-                        alertLastSent={alert.alertLastSent}
-                        course={alert.section}
-                        status={alert.status}
-                        actions={alert.actions}
-                        closed={alert.closedNotif}
-                        toggleAlert={toggleAlert(alert.id)}
-                        alertHandler={() =>
-                            actionHandler(alert.id, alert.actions)
-                        }
-                        closedHandler={() =>
-                            actionHandler(alert.id, alert.closedNotif)
-                        }
-                        deleteHandler={() =>
-                            actionHandler(alert.id, AlertAction.DELETE)
-                        }
-                    />
-                ))}
+                {Object.keys(groupedAlerts).map((key) => {
+                    rowNum++;
+                    return (
+                        <>
+                            <AlertHeader course={key} rownum={rowNum} />
+                            {groupedAlerts[key]?.map?.((alert) => {
+                                console.log(alert);
+                                rowNum++;
+                                return (
+                                    <AlertItem
+                                        key={alert.id}
+                                        checked={alertSel[alert.id]}
+                                        rownum={rowNum}
+                                        alertLastSent={alert.alertLastSent}
+                                        course={alert.section}
+                                        status={alert.status}
+                                        actions={alert.actions}
+                                        closed={alert.closedNotif}
+                                        toggleAlert={toggleAlert(alert.id)}
+                                        alertHandler={() =>
+                                            actionHandler(
+                                                alert.id,
+                                                alert.actions
+                                            )
+                                        }
+                                        closedHandler={() =>
+                                            actionHandler(
+                                                alert.id,
+                                                alert.closedNotif
+                                            )
+                                        }
+                                        deleteHandler={() =>
+                                            actionHandler(
+                                                alert.id,
+                                                AlertAction.DELETE
+                                            )
+                                        }
+                                    />
+                                );
+                            })}
+                        </>
+                    );
+                })}
             </AlertGrid>
         </Container>
     );

frontend/shared-components/src/common/layout.tsx

@@ -1,4 +1,5 @@
 // import React from "react";
+import { string } from "prop-types";
 import styled from "styled-components";
 
 export const Container = styled.div`
@@ -47,6 +48,16 @@ export interface GridItemProps {
     border?: boolean;
 }
 
+export interface GridCourseTitleProps {
+    valign?: boolean;
+    halign?: boolean;
+    talign?: boolean;
+    paddingLeft?: string;
+    color?: string;
+    border?: boolean;
+    column: number | string;
+}
+
 export const GridItem = styled.div<GridItemProps>`
     display: flex;
     align-items: ${(props) => (props.valign ? "center" : null)};
@@ -58,6 +69,18 @@ export const GridItem = styled.div<GridItemProps>`
     border-bottom: ${(props) => (props.border ? "1px solid #ececec" : null)};
 `;
 
+export const GridCourseTitle = styled.div<GridCourseTitleProps>`
+    display: flex;
+    align-items: ${(props) => (props.valign ? "center" : null)};
+    justify-content: ${(props) => (props.halign ? "center" : null)};
+    text-align: ${(props) => (props.talign ? "center" : null)};
+    padding-left: ${(props) =>
+        props.paddingLeft ? props.paddingLeft : "2rem"};
+    background-color: ${(props) => (props.color ? props.color : "white")};
+    border-bottom: ${(props) => (props.border ? "1px solid #ececec" : null)};
+    grid-column: ${(props) => props.column};
+`;
+
 export const RightItem = styled.div`
     height: 100%;
     display: flex;