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

Improve error display

Browse Source
This commit is contained in:
april 2024-01-04 15:28:34 -06:00
parent 8c0a0955b3
commit c72523b664
3 changed files with 33 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/app/routes/logbook.flights.$id/route.tsx
View File

@ -1,3 +1,4 @@
import ErrorDisplay from "@/ui/error-display";
import { client } from "@/util/api"; import { client } from "@/util/api";
import { Center, Container, List, Loader, Stack, Text } from "@mantine/core"; import { Center, Container, List, Loader, Stack, Text } from "@mantine/core";
import { useParams } from "@remix-run/react"; import { useParams } from "@remix-run/react";
@ -17,12 +18,7 @@ export default function Flight() {
<Container> <Container>
<Stack h="calc(100vh - 95px)"> <Stack h="calc(100vh - 95px)">
{flight.isError ? ( {flight.isError ? (
<Stack align="center" justify="center" h="100%" m="0" p="0"> <ErrorDisplay error="Error Fetching Flight" />
<Text c="red">
<IconAlertTriangle size="3rem" />
</Text>
<Text c="red">Error fetching flight</Text>
</Stack>
) : flight.isPending ? ( ) : flight.isPending ? (
<Center h="100%"> <Center h="100%">
<Loader /> <Loader />

19
web/app/routes/logbook.me/route.tsx
View File

@ -1,5 +1,6 @@
import ErrorDisplay from "@/ui/error-display";
import { client } from "@/util/api"; import { client } from "@/util/api";
import { Container, Text, Title } from "@mantine/core"; import { Center, Container, Loader, Text, Title } from "@mantine/core";
import { useQuery } from "@tanstack/react-query"; import { useQuery } from "@tanstack/react-query";
export default function Me() { export default function Me() {
@ -10,8 +11,22 @@ export default function Me() {
return ( return (
<Container> <Container>
{user.isLoading ? (
<Center h="calc(100vh - 95px)">
<Loader />
</Center>
) : user.isError ? (
<Center h="calc(100vh - 95px)">
<ErrorDisplay error="Error Loading User" />
</Center>
) : user.data ? (
<>
<Title order={2}>{user.data.username}</Title> <Title order={2}>{user.data.username}</Title>
<Text>Level {user.data.level}</Text> <Text>Level {user.data.level}</Text>{" "}
</>
) : (
<Text c="red">Unknown Error</Text>
)}
</Container> </Container>
); );
} }

13
web/app/ui/error-display.tsx Normal file
View File

@ -0,0 +1,13 @@
import { Stack, Text } from "@mantine/core";
import { IconAlertTriangle } from "@tabler/icons-react";
export default function ErrorDisplay({ error }: { error: string }) {
return (
<Stack align="center" justify="center" h="100%" m="0" p="0">
<Text c="red">
<IconAlertTriangle size="3rem" />
</Text>
<Text c="red">{error}</Text>
</Stack>
);
}