Implement password updating and show login errors

web/app/routes/logbook/route.tsx

@@ -2,7 +2,14 @@ import { TailfinAppShell } from "@/ui/nav/app-shell";
 import { useAuth } from "@/util/auth";
 import type { MetaFunction } from "@remix-run/node";
 import { Outlet, useNavigate } from "@remix-run/react";
-import { useEffect } from "react";
+import {
+  QueryCache,
+  QueryClient,
+  QueryClientProvider,
+} from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import { AxiosError } from "axios";
+import { useEffect, useState } from "react";
 
 export const meta: MetaFunction = () => {
   return [
@@ -21,9 +28,36 @@ export default function Index() {
     }
   }, [user, loading, navigate]);
 
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        queryCache: new QueryCache({
+          onError: (error: Error) => {
+            if (error instanceof AxiosError && error.response?.status === 401) {
+              navigate("/login");
+            }
+          },
+        }),
+        defaultOptions: {
+          queries: {
+            staleTime: 1000,
+            retry: (failureCount, error: Error) => {
+              return (
+                !error ||
+                (error instanceof AxiosError && error.response?.status !== 401)
+              );
+            },
+          },
+        },
+      })
+  );
+
   return (
-    <TailfinAppShell>
-      <Outlet />
-    </TailfinAppShell>
+    <QueryClientProvider client={queryClient}>
+      <TailfinAppShell>
+        <Outlet />
+      </TailfinAppShell>
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
   );
 }