Redirect on token expiry

web/app/routes/logbook.flights.$id/route.tsx

@@ -1,7 +1,10 @@
 import { client } from "@/util/api";
+import { useAuth } from "@/util/auth";
 import { Center, Container, List, Loader, Stack, Text } from "@mantine/core";
-import { useParams } from "@remix-run/react";
+import { useNavigate, useParams } from "@remix-run/react";
+import { IconAlertTriangle } from "@tabler/icons-react";
 import { useQuery } from "@tanstack/react-query";
+import { useEffect } from "react";
 
 export default function Flight() {
   const params = useParams();
@@ -10,8 +13,21 @@ export default function Flight() {
     queryKey: [params.id],
     queryFn: async () =>
       await client.get(`/flights/${params.id}`).then((res) => res.data),
+    retry: (failureCount, error) => {
+      return !error || error.response?.status !== 401;
+    },
   });
 
+  const navigate = useNavigate();
+  const { clearUser } = useAuth();
+
+  useEffect(() => {
+    if (flight.isError && flight.error.response.status === 401) {
+      clearUser();
+      navigate("/login");
+    }
+  }, [flight]);
+
   return (
     <Container>
       <Stack h="calc(100vh - 95px)">

web/app/routes/logbook.flights.new/route.tsx

@@ -5,7 +5,6 @@ import {
   Fieldset,
   Group,
   NumberInput,
-  ScrollArea,
   ScrollAreaAutosize,
   Stack,
   TextInput,
@@ -86,6 +85,9 @@ export default function NewFlight() {
       console.log(res);
       return res.data;
     },
+    retry: (failureCount, error) => {
+      return !error || error.response?.status !== 401;
+    },
     onError: (error) => {
       console.log(error);
     },

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

@@ -1,4 +1,5 @@
 import { client } from "@/util/api";
+import { useAuth } from "@/util/auth";
 import { FlightConciseSchema } from "@/util/types";
 import {
   NavLink,
@@ -8,22 +9,38 @@ import {
   Stack,
   Loader,
   Center,
-  Container,
 } from "@mantine/core";
 import { Link, useLocation, useNavigate } from "@remix-run/react";
 import { IconPlus } from "@tabler/icons-react";
 import { useQuery } from "@tanstack/react-query";
+import { useEffect } from "react";
 
 export function FlightsList() {
-  const flights = useQuery({
-    queryKey: ["flights-list"],
-    queryFn: () => client.get(`/flights`).then((res) => res.data),
-  });
+  // const flights = useQuery({
+  //   queryKey: ["flights-list"],
+  //   queryFn: () => client.get(`/flights`).then((res) => res.data),
+  // });
 
   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),
+    retry: (failureCount, error) => {
+      return !error || error.response?.status !== 401;
+    },
+  });
+
   const navigate = useNavigate();
+  const { clearUser } = useAuth();
+
+  useEffect(() => {
+    if (flights.isError && flights.error.response.status === 401) {
+      clearUser();
+      navigate("/login");
+    }
+  }, [flights]);
 
   return (
     <Stack p="0" m="0" gap="0">

web/app/routes/logbook.me/route.tsx

@@ -1,12 +1,33 @@
+import { client } from "@/util/api";
 import { useAuth } from "@/util/auth";
-import { Container, Title } from "@mantine/core";
+import { Container, Text, Title } from "@mantine/core";
+import { useNavigate } from "@remix-run/react";
+import { useQuery } from "@tanstack/react-query";
+import { useEffect } from "react";
 
 export default function Me() {
-  const { user } = useAuth();
+  const user = useQuery({
+    queryKey: ["user"],
+    queryFn: async () => await client.get(`users/me`).then((res) => res.data),
+    retry: (failureCount, error) => {
+      return !error || error.response?.status !== 401;
+    },
+  });
+
+  const { clearUser } = useAuth();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (user.isError && user.error.response?.status === 401) {
+      clearUser();
+      navigate("/login");
+    }
+  }, [user]);
 
   return (
     <Container>
-      <Title order={2}>{user}</Title>
+      <Title order={2}>{user.data.username}</Title>
+      <Text>Level {user.data.level}</Text>
     </Container>
   );
 }

web/app/routes/login/route.tsx

@@ -12,6 +12,7 @@ import {
   Title,
 } from "@mantine/core";
 import { useForm } from "@mantine/form";
+import { useEffect } from "react";
 
 export default function Login() {
   const form = useForm({
@@ -23,6 +24,10 @@ export default function Login() {
 
   const { signin } = useAuth();
 
+  useEffect(() => {
+    document.title = "Log In - Tailfin";
+  });
+
   return (
     <Container h="75%">
       <Stack gap="md" h="100%" justify="center" align="stretch">
@@ -50,7 +55,9 @@ export default function Login() {
                 mt="md"
               />
               <Group justify="center" mt="xl">
-                <Button type="submit">Log In</Button>
+                <Button type="submit" fullWidth>
+                  Log In
+                </Button>
               </Group>
             </form>
           </Fieldset>