Implement sorting in admin view

frontend/src/routes/AdminPage/index.tsx

@@ -19,6 +19,15 @@ import {
   GroupLogoWrapper,
 } from "./styles";
 import { Application } from "src/types";
+import {
+  AlphabeticalComparatorAsc,
+  AlphabeticalComparatorDesc,
+  ApplicationComparator,
+  CreatedAtComparatorAsc,
+  CreatedAtComparatorDesc,
+  UpdatedAtComparatorAsc,
+  UpdatedAtComparatorDesc,
+} from "src/utils/sortAdmissions";
 
 export interface CsvData {
   name: string;
@@ -57,16 +66,31 @@ const AdminPage = () => {
     error,
   } = useApplications(admissionSlug ?? "");
 
+  const [applicationComparator, setApplicationComparator] =
+    useState<ApplicationComparator>(UpdatedAtComparatorDesc);
+
+  const stringToComparatorMapper = new Map<string, ApplicationComparator>([
+    ["alphabeticaldesc", AlphabeticalComparatorDesc],
+    ["alphabeticalasc", AlphabeticalComparatorAsc],
+    ["createddesc", CreatedAtComparatorDesc],
+    ["createdasc", CreatedAtComparatorAsc],
+    ["updateddesc", UpdatedAtComparatorDesc],
+    ["updatedasc", UpdatedAtComparatorAsc],
+  ]);
+
+  const handleSortChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const selectedValue = event.target.value;
+    const selectedComparator =
+      stringToComparatorMapper.get(selectedValue) ?? AlphabeticalComparatorDesc;
+    setApplicationComparator(selectedComparator);
+  };
+
   useEffect(() => {
     if (!applications) return;
     setSortedApplications(
-      [...applications].sort((a, b) => {
-        if (a.user.full_name < b.user.full_name) return -1;
-        if (a.user.full_name > b.user.full_name) return 1;
-        return 0;
-      })
+      [...applications].sort(applicationComparator.compare)
     );
-  }, [applications]);
+  }, [applications, applicationComparator]);
 
   useEffect(() => {
     // Push all the individual applications into csvData with the right format
@@ -126,6 +150,18 @@ const AdminPage = () => {
               <StatisticsName>Antall søkere</StatisticsName>
               {numApplicants} {numApplicants == 1 ? "søker" : "søkere"}
             </StatisticsWrapper>
+            <StatisticsWrapper>
+              <StatisticsName style={{ marginBottom: "1.25em" }}>
+                Sorter etter
+              </StatisticsName>
+              <select onChange={handleSortChange}>
+                {Array.from(stringToComparatorMapper.keys()).map((key) => (
+                  <option key={key} value={key}>
+                    {stringToComparatorMapper.get(key)?.description}
+                  </option>
+                ))}
+              </select>{" "}
+            </StatisticsWrapper>
           </Statistics>
           <CSVExport
             data={csvData}

frontend/src/utils/sortAdmissions.ts

@@ -0,0 +1,66 @@
+import { Application } from "src/types";
+
+interface ApplicationComparator {
+  compare(app1: Application, app2: Application): number;
+  description: string;
+}
+
+const CreatedAtComparatorDesc: ApplicationComparator = {
+  compare: (app1, app2) => {
+    const date1 = new Date(app1.created_at);
+    const date2 = new Date(app2.created_at);
+    return date1.getTime() - date2.getTime();
+  },
+  description: "Dato opprettet synkende",
+};
+
+const CreatedAtComparatorAsc: ApplicationComparator = {
+  compare: (app1, app2) => {
+    const date1 = new Date(app1.created_at);
+    const date2 = new Date(app2.created_at);
+    return date2.getTime() - date1.getTime();
+  },
+  description: "Dato opprettet stigende",
+};
+
+const UpdatedAtComparatorAsc: ApplicationComparator = {
+  compare: (app1, app2) => {
+    const date1 = new Date(app1.updated_at);
+    const date2 = new Date(app2.updated_at);
+    return date1.getTime() - date2.getTime();
+  },
+  description: "Dato oppdatert stigende",
+};
+
+const UpdatedAtComparatorDesc: ApplicationComparator = {
+  compare: (app1, app2) => {
+    const date1 = new Date(app1.updated_at);
+    const date2 = new Date(app2.updated_at);
+    return date2.getTime() - date1.getTime();
+  },
+  description: "Dato oppdatert synkende",
+};
+
+const AlphabeticalComparatorAsc: ApplicationComparator = {
+  compare: (app1, app2) => {
+    return app2.user.full_name.localeCompare(app1.user.full_name);
+  },
+  description: "Alfabetisk stigende",
+};
+
+const AlphabeticalComparatorDesc: ApplicationComparator = {
+  compare: (app1, app2) => {
+    return app1.user.full_name.localeCompare(app2.user.full_name);
+  },
+  description: "Alfabetisk synkende",
+};
+
+export type { ApplicationComparator };
+export {
+  CreatedAtComparatorDesc,
+  CreatedAtComparatorAsc,
+  UpdatedAtComparatorAsc,
+  UpdatedAtComparatorDesc,
+  AlphabeticalComparatorAsc,
+  AlphabeticalComparatorDesc,
+};