Initial Commit

frontend/src/components/dashboard/MissingAssignmentCard.tsx

@@ -0,0 +1,64 @@
+import {Descending, Section, SortSettings, Term} from "../../interfaces";
+import Card from "react-bootstrap/Card";
+import DashboardCard from "./DashboardCard";
+import AssignmentsTable, {AssignmentsTableColumn} from "../tables/AssignmentsTable";
+import {useMemo, useState} from "react";
+import SortSelect from "../input/SortSelect";
+import OffcanvasDashboardCard from "./OffcanvasDashboardCard";
+
+type MissingAssignmentCardsProps = { sections: Section[], term: Term | null }
+
+const assignmentsTableColumns = [AssignmentsTableColumn.CLASSNAME, AssignmentsTableColumn.NAME, AssignmentsTableColumn.DUEDATE];
+
+export default function MissingAssignmentCard({sections, term}: MissingAssignmentCardsProps) {
+    const [offcanvasSort, setOffcanvasSort] = useState<SortSettings<AssignmentsTableColumn>>({
+        order: Descending,
+        by: AssignmentsTableColumn.DUEDATE
+    });
+
+    const missingAssignments = useMemo(() => sections
+            .map(s => s.assignments) // Get assignments from sections
+            .flat(1) // Turn array of arrays of assignments into an array of assignments
+            .filter(a => a.score?.missing) // Filter for only missing assignments
+            .sort((a, b) => a.dueDate.getTime() - b.dueDate.getTime()) // Sort by due date
+        , [sections]);
+
+    // Get 5 assignments with the most recent due date
+    const assignmentsToDisplay = useMemo(() => missingAssignments
+            .sort((a, b) => b.dueDate.getTime() - a.dueDate.getTime())
+            .slice(0, 5)
+        , [missingAssignments]);
+
+    // Show button that displays list of all missing assignments (in offcanvas element)
+    const includeOffcanvas = missingAssignments.length > 5;
+
+    const cardBody = useMemo(() =>
+        term === null
+            ?
+            <>
+                <Card.Title>No missing assignments</Card.Title>
+                <p>And I bet you're not <i>Missing</i> school either.</p>
+            </>
+            :
+            <>
+                <Card.Title>
+                    {`${missingAssignments.length} missing assignment${missingAssignments.length === 1 ? '' : 's'} in ${term.title}`}
+                </Card.Title>
+                {missingAssignments.length === 0
+                    ? <p>No missing assignments! Nice job try-hard!</p>
+                    : <AssignmentsTable assignments={assignmentsToDisplay} columns={assignmentsTableColumns}
+                                        sort={{order: Descending, by: AssignmentsTableColumn.DUEDATE}}/>
+                }
+            </>, [assignmentsToDisplay, term, missingAssignments]);
+
+    return includeOffcanvas
+        ? <OffcanvasDashboardCard offcanvasTitle="Missing Assignments" offcanvasBody={
+            <>
+                <SortSelect settings={offcanvasSort} setSettings={setOffcanvasSort}
+                            sortByOptions={assignmentsTableColumns}/>
+                <AssignmentsTable assignments={missingAssignments} columns={assignmentsTableColumns}
+                                  sort={offcanvasSort}/>
+            </>
+        }>{cardBody}</OffcanvasDashboardCard>
+        : <DashboardCard>{cardBody}</DashboardCard>
+};