Handle totals with no flights

This commit is contained in:
april 2024-01-09 13:17:58 -06:00
parent f0d8af101b
commit 9e4520b218
2 changed files with 131 additions and 115 deletions

View File

@ -1,3 +1,4 @@
import ErrorDisplay from "@/ui/error-display";
import { useApi } from "@/util/api"; import { useApi } from "@/util/api";
import { FlightConciseSchema } from "@/util/types"; import { FlightConciseSchema } from "@/util/types";
import { import {
@ -18,6 +19,7 @@ import {
IconArrowRightTail, IconArrowRightTail,
IconPlaneTilt, IconPlaneTilt,
IconPlus, IconPlus,
IconX,
} from "@tabler/icons-react"; } from "@tabler/icons-react";
import { UseQueryResult, useQuery } from "@tanstack/react-query"; import { UseQueryResult, useQuery } from "@tanstack/react-query";
@ -62,124 +64,135 @@ function FlightsListDisplay({
return ( return (
<> <>
{flights.data ? ( {flights.data ? (
Object.entries(flights.data) Object.entries(flights.data)?.length === 0 ? (
.reverse() <Center h="calc(100vh - 95px - 50px)">
.map(([year, months]) => ( <Stack align="center">
<> <IconX size="3rem" />
<NavLink <Center>No flights</Center>
key={randomId()} </Stack>
label={`-- ${year} --`} </Center>
fw={700} ) : (
style={{ textAlign: "center" }} Object.entries(flights.data)
defaultOpened .reverse()
childrenOffset={0} .map(([year, months]) => (
> <>
<> <NavLink
<Divider /> key={randomId()}
{Object.entries(months) label={`-- ${year} --`}
.reverse() fw={700}
.map(([month, days]) => ( style={{ textAlign: "center" }}
<NavLink defaultOpened
key={randomId()} childrenOffset={0}
label={monthNames[Number(month) - 1]} >
fw={500} <>
style={{ textAlign: "center" }} <Divider />
defaultOpened {Object.entries(months)
> .reverse()
<Divider /> .map(([month, days]) => (
{Object.entries(days) <NavLink
.reverse() key={randomId()}
.map(([, logs]) => ( label={monthNames[Number(month) - 1]}
<> fw={500}
{logs style={{ textAlign: "center" }}
.reverse() defaultOpened
.map((flight: FlightConciseSchema) => ( >
<> <Divider />
<NavLink {Object.entries(days)
key={randomId()} .reverse()
component={Link} .map(([, logs]) => (
to={`/logbook/flights/${flight.id}`} <>
label={ {logs
<Group> .reverse()
<Badge .map((flight: FlightConciseSchema) => (
color="gray" <>
size="lg" <NavLink
radius="sm" key={randomId()}
px="xs" component={Link}
> to={`/logbook/flights/${flight.id}`}
{flight.date} label={
</Badge> <Group>
<Text fw={500}> <Badge
{`${Number( color="gray"
flight.time_total size="lg"
).toFixed(1)} hr`} radius="sm"
px="xs"
>
{flight.date}
</Badge>
<Text fw={500}>
{`${Number(
flight.time_total
).toFixed(1)} hr`}
</Text>
{flight.waypoint_from ||
flight.waypoint_to ? (
<>
<Text>/</Text>
<Group gap="xs">
{flight.waypoint_from ? (
<Text>
{flight.waypoint_from}
</Text>
) : (
""
)}
{flight.waypoint_from &&
flight.waypoint_to ? (
<IconArrowRightTail />
) : null}
{flight.waypoint_to ? (
<Text>
{flight.waypoint_to}
</Text>
) : (
""
)}
</Group>
</>
) : null}
</Group>
}
description={
<Text lineClamp={1}>
{flight.comments
? flight.comments
: "(No Comment)"}
</Text> </Text>
{flight.waypoint_from || }
flight.waypoint_to ? ( rightSection={
<> flight.aircraft ? (
<Text>/</Text> <Badge
<Group gap="xs"> key={randomId()}
{flight.waypoint_from ? ( leftSection={
<Text> <IconPlaneTilt size="1rem" />
{flight.waypoint_from} }
</Text> color="gray"
) : ( size="lg"
"" >
)} {flight.aircraft}
{flight.waypoint_from && </Badge>
flight.waypoint_to ? ( ) : null
<IconArrowRightTail /> }
) : null} active={page === flight.id}
{flight.waypoint_to ? ( />
<Text> <Divider />
{flight.waypoint_to} </>
</Text> ))}
) : ( </>
"" ))}
)} </NavLink>
</Group> ))}
</> </>
) : null} </NavLink>
</Group> </>
} ))
description={ )
<Text lineClamp={1}>
{flight.comments
? flight.comments
: "(No Comment)"}
</Text>
}
rightSection={
flight.aircraft ? (
<Badge
key={randomId()}
leftSection={
<IconPlaneTilt size="1rem" />
}
color="gray"
size="lg"
>
{flight.aircraft}
</Badge>
) : null
}
active={page === flight.id}
/>
<Divider />
</>
))}
</>
))}
</NavLink>
))}
</>
</NavLink>
</>
))
) : flights.isLoading ? ( ) : flights.isLoading ? (
<Center h="calc(100vh - 95px - 50px)"> <Center h="calc(100vh - 95px - 50px)">
<Loader /> <Loader />
</Center> </Center>
) : flights.isError ? (
<ErrorDisplay error={flights.error?.message} />
) : ( ) : (
<Center h="calc(100vh - 95px - 50px)"> <Center h="calc(100vh - 95px - 50px)">
<Text p="sm">No Flights</Text> <Text p="sm">No Flights</Text>

View File

@ -45,8 +45,11 @@ export default function Index() {
staleTime: 1000, staleTime: 1000,
retry: (failureCount, error: Error) => { retry: (failureCount, error: Error) => {
return ( return (
!error || failureCount < 5 &&
(error instanceof AxiosError && error.response?.status !== 401) (!error ||
(error instanceof AxiosError &&
error.response?.status !== 401 &&
error.response?.status !== 404))
); );
}, },
}, },