azpsen/tailfin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Group flights by date in list view

Browse Source
This commit is contained in:
april
2024-01-04 15:13:45 -06:00
parent a600cff6e6
commit 8c0a0955b3
5 changed files with 101 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
web/app/root.tsx
View File

@@ -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 (
<html lang="en">
<head>
@@ -139,15 +143,17 @@ export default function App({ pageProps }) {
</head>
<body>
<QueryClientProvider client={queryClient}>
<MantineProvider theme={{ primaryColor: "violet" }}>
<AuthProvider>
<Outlet />
<ScrollRestoration />
<Scripts />
<LiveReload />
</AuthProvider>
</MantineProvider>
<ReactQueryDevtools initialIsOpen={false} />
<HydrationBoundary state={dehydratedState}>
<MantineProvider theme={{ primaryColor: "violet" }}>
<AuthProvider>
<Outlet />
<ScrollRestoration />
<Scripts />
<LiveReload />
</AuthProvider>
</MantineProvider>
<ReactQueryDevtools initialIsOpen={false} />
</HydrationBoundary>
</QueryClientProvider>
</body>
</html>

114
web/app/routes/logbook.flights/flights-list.tsx
View File

@@ -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"

2
web/app/util/types.ts
View File

@@ -68,7 +68,7 @@ type FlightConciseSchema = {
user: string;
id: string;
date: dayjs.Dayjs;
date: string;
aircraft: string;
waypoint_from: string;
waypoint_to: string;