cleaned up grid item code

Author: rydersitcawich

frontend/alert/components/managealert/AlertHeader.tsx

@@ -4,20 +4,6 @@ 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;
@@ -28,18 +14,6 @@ const GridSubtitle = styled.div`
     white-space: nowrap;
 `;
 
-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;
@@ -51,64 +25,17 @@ export const AlertHeader = ({ course, rownum }: AlertHeaderProps) => {
             <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>
+            {Array.from({ length: 7 }, (_, index) => (
+                <GridItem
+                    column={index + 2}
+                    row={rownum}
+                    border
+                    halign
+                    valign
+                    talign
+                />
+            ))}
         </>
     );
 };

frontend/alert/components/managealert/ManageAlertUI.tsx

@@ -91,7 +91,7 @@ export const ManageAlert = ({
     const [searchTimeout, setSearchTimeout] = useState<number>();
     const [numSelected, setNumSelected] = useState(0);
 
-    //Alerts for testing
+    // Alerts for testing
     var alert1: Alert = {
         id: 1,
         originalCreatedAt: "2023-09-11T12:00:00Z",
@@ -201,7 +201,7 @@ export const ManageAlert = ({
      * Returns alerts grouped by course
      * @return grouped alerts
      */
-    const groupedAlerts = alerts
+    const groupedAlerts = testAlerts
         .sort((a, b) => a.section.localeCompare(b.section))
         .reduce((res, obj) => {
             const [courseName, midNum, endNum] = obj.section.split("-");