Group flights by date in list view

web/app/routes/logbook.flights/flights-list.tsx

@@ -8,19 +8,82 @@ import {
   Stack,
   Loader,
   Center,
+  Divider,
 } from "@mantine/core";
 import { Link, useLocation, useNavigate } from "@remix-run/react";
 import { IconPlus } from "@tabler/icons-react";
-import { useQuery } from "@tanstack/react-query";
+import { UseQueryResult, useQuery } from "@tanstack/react-query";
+
+function useFlights() {
+  const flights = useQuery({
+    queryKey: ["flights-list"],
+    queryFn: async () => {
+      const res = await client.get(`/flights`);
+      const groupedFlights: { [date: string]: FlightConciseSchema[] } = {};
+      res.data.map((log: FlightConciseSchema) => {
+        const dateStr = log.date;
+
+        if (!groupedFlights[dateStr]) {
+          groupedFlights[dateStr] = [];
+        }
+
+        groupedFlights[dateStr].push(log);
+      });
+      return groupedFlights;
+    },
+  });
+
+  return flights;
+}
+
+function FlightsListDisplay({
+  flights,
+  page,
+}: {
+  flights: UseQueryResult<{ [date: string]: FlightConciseSchema[] }>;
+  page: string;
+}) {
+  return (
+    <>
+      {flights.data ? (
+        Object.entries(flights.data).map(([date, logs], index: number) => (
+          <>
+            <Text key={date} mt="md" mb="xs" fw={700}>
+              {date}
+            </Text>
+            <Divider key={date + index} />
+            {logs.map((flight: FlightConciseSchema) => (
+              <NavLink
+                key={flight.id}
+                component={Link}
+                to={`/logbook/flights/${flight.id}`}
+                label={`${flight.waypoint_from ? flight.waypoint_from : ""} ${
+                  flight.waypoint_to ? flight.waypoint_to : ""
+                }`}
+                description={`${flight.date}`}
+                active={page === flight.id}
+              />
+            ))}
+          </>
+        ))
+      ) : flights.isLoading ? (
+        <Center h="calc(100vh - 95px - 50px)">
+          <Loader />
+        </Center>
+      ) : (
+        <Center h="calc(100vh - 95px - 50px)">
+          <Text p="sm">No Flights</Text>
+        </Center>
+      )}
+    </>
+  );
+}
 
 export function FlightsList() {
   const location = useLocation();
   const page = location.pathname.split("/")[3];
 
-  const flights = useQuery({
-    queryKey: ["flights-list"],
-    queryFn: async () => await client.get(`/flights`).then((res) => res.data),
-  });
+  const flights = useFlights();
 
   const navigate = useNavigate();
 
@@ -35,23 +98,7 @@ export function FlightsList() {
         Add
       </Button>
       <ScrollArea h="calc(100vh - 95px - 50px)">
-        {flights.data ? (
-          flights.data.map((flight: FlightConciseSchema, index: number) => (
-            <NavLink
-              key={index}
-              component={Link}
-              to={`/logbook/flights/${flight.id}`}
-              label={`${flight.date}`}
-              active={page === flight.id}
-            />
-          ))
-        ) : flights.isLoading ? (
-          <Center h="calc(100vh - 95px - 50px)">
-            <Loader />
-          </Center>
-        ) : (
-          <Text p="sm">No Flights</Text>
-        )}
+        <FlightsListDisplay flights={flights} page={page} />
       </ScrollArea>
     </Stack>
   );
@@ -61,33 +108,14 @@ export function MobileFlightsList() {
   const location = useLocation();
   const page = location.pathname.split("/")[3];
 
-  const flights = useQuery({
-    queryKey: ["flights-list"],
-    queryFn: async () => await client.get(`/flights`).then((res) => res.data),
-  });
+  const flights = useFlights();
 
   const navigate = useNavigate();
 
   return (
     <Stack p="0" m="0" justify="space-between" h="calc(100vh - 95px)">
       <ScrollArea h="calc(100vh - 95px - 50px">
-        {flights.data ? (
-          flights.data.map((flight: FlightConciseSchema, index: number) => (
-            <NavLink
-              key={index}
-              component={Link}
-              to={`/logbook/flights/${flight.id}`}
-              label={`${flight.date}`}
-              active={page === flight.id}
-            />
-          ))
-        ) : flights.isLoading ? (
-          <Center h="calc(100vh - 95px - 70px)">
-            <Loader />
-          </Center>
-        ) : (
-          <Text p="sm">No Flights</Text>
-        )}
+        <FlightsListDisplay flights={flights} page={page} />
       </ScrollArea>
       <Button
         variant="outline"