diff --git a/web/app/root.tsx b/web/app/root.tsx
index 89aab9e..0b5a732 100644
--- a/web/app/root.tsx
+++ b/web/app/root.tsx
@@ -17,13 +17,15 @@ import {
} from "@remix-run/react";
import {
- MutationCache,
+ HydrationBoundary,
QueryCache,
QueryClient,
QueryClientProvider,
} from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import { useDehydratedState } from "use-dehydrated-state";
+
import {
Button,
ColorSchemeScript,
@@ -102,7 +104,7 @@ export function ErrorBoundary() {
);
}
-export default function App({ pageProps }) {
+export default function App() {
const navigate = useNavigate();
const [queryClient] = useState(
() =>
@@ -128,6 +130,8 @@ export default function App({ pageProps }) {
})
);
+ const dehydratedState = useDehydratedState();
+
return (
@@ -139,15 +143,17 @@ export default function App({ pageProps }) {
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
diff --git a/web/app/routes/logbook.flights/flights-list.tsx b/web/app/routes/logbook.flights/flights-list.tsx
index 74b7ae3..79834b7 100644
--- a/web/app/routes/logbook.flights/flights-list.tsx
+++ b/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) => (
+ <>
+
+ {date}
+
+
+ {logs.map((flight: FlightConciseSchema) => (
+
+ ))}
+
+ ))
+ ) : flights.isLoading ? (
+
+
+
+ ) : (
+
+ No Flights
+
+ )}
+
+ );
+}
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
- {flights.data ? (
- flights.data.map((flight: FlightConciseSchema, index: number) => (
-
- ))
- ) : flights.isLoading ? (
-
-
-
- ) : (
- No Flights
- )}
+
);
@@ -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 (
- {flights.data ? (
- flights.data.map((flight: FlightConciseSchema, index: number) => (
-
- ))
- ) : flights.isLoading ? (
-
-
-
- ) : (
- No Flights
- )}
+