diff --git a/web/app/root.tsx b/web/app/root.tsx index 12280d9..89aab9e 100644 --- a/web/app/root.tsx +++ b/web/app/root.tsx @@ -12,10 +12,16 @@ import { Scripts, ScrollRestoration, isRouteErrorResponse, + useNavigate, useRouteError, } from "@remix-run/react"; -import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; +import { + MutationCache, + QueryCache, + QueryClient, + QueryClientProvider, +} from "@tanstack/react-query"; import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; import { @@ -30,6 +36,8 @@ import { import { IconRocket } from "@tabler/icons-react"; import { AuthProvider } from "./util/auth"; +import { useState } from "react"; +import { AxiosError } from "axios"; export const links: LinksFunction = () => [ { @@ -94,9 +102,32 @@ export function ErrorBoundary() { ); } -const queryClient = new QueryClient(); +export default function App({ pageProps }) { + const navigate = useNavigate(); + 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) + ); + }, + }, + }, + }) + ); -export default function App() { return ( diff --git a/web/app/routes/logbook.flights.$id/route.tsx b/web/app/routes/logbook.flights.$id/route.tsx index ec9ea1c..a0d8563 100644 --- a/web/app/routes/logbook.flights.$id/route.tsx +++ b/web/app/routes/logbook.flights.$id/route.tsx @@ -1,11 +1,8 @@ import { client } from "@/util/api"; -import { useAuth } from "@/util/auth"; import { Center, Container, List, Loader, Stack, Text } from "@mantine/core"; -import { useNavigate, useParams } from "@remix-run/react"; +import { useParams } from "@remix-run/react"; import { IconAlertTriangle } from "@tabler/icons-react"; import { useQuery } from "@tanstack/react-query"; -import { AxiosError } from "axios"; -import { useEffect } from "react"; export default function Flight() { const params = useParams(); @@ -14,25 +11,8 @@ export default function Flight() { queryKey: [params.id], queryFn: async () => await client.get(`/flights/${params.id}`).then((res) => res.data), - retry: (failureCount, error: AxiosError) => { - return !error || error.response?.status !== 401; - }, }); - const navigate = useNavigate(); - const { clearUser } = useAuth(); - - useEffect(() => { - if ( - flight.isError && - flight.error instanceof AxiosError && - flight.error.response?.status === 401 - ) { - clearUser(); - navigate("/login"); - } - }, [flight]); - return ( diff --git a/web/app/routes/logbook.flights/flights-list.tsx b/web/app/routes/logbook.flights/flights-list.tsx index f7793c3..74b7ae3 100644 --- a/web/app/routes/logbook.flights/flights-list.tsx +++ b/web/app/routes/logbook.flights/flights-list.tsx @@ -1,5 +1,4 @@ import { client } from "@/util/api"; -import { useAuth } from "@/util/auth"; import { FlightConciseSchema } from "@/util/types"; import { NavLink, @@ -13,8 +12,6 @@ import { import { Link, useLocation, useNavigate } from "@remix-run/react"; import { IconPlus } from "@tabler/icons-react"; import { useQuery } from "@tanstack/react-query"; -import { AxiosError } from "axios"; -import { useEffect } from "react"; export function FlightsList() { const location = useLocation(); @@ -23,24 +20,9 @@ export function FlightsList() { const flights = useQuery({ queryKey: ["flights-list"], queryFn: async () => await client.get(`/flights`).then((res) => res.data), - retry: (failureCount, error: AxiosError) => { - return !error || error.response?.status !== 401; - }, }); const navigate = useNavigate(); - const { clearUser } = useAuth(); - - useEffect(() => { - if ( - flights.isError && - flights.error instanceof AxiosError && - flights.error.response?.status === 401 - ) { - clearUser(); - navigate("/login"); - } - }, [flights]); return ( @@ -82,24 +64,9 @@ export function MobileFlightsList() { const flights = useQuery({ queryKey: ["flights-list"], queryFn: async () => await client.get(`/flights`).then((res) => res.data), - retry: (failureCount, error: AxiosError) => { - return !error || error.response?.status !== 401; - }, }); const navigate = useNavigate(); - const { clearUser } = useAuth(); - - useEffect(() => { - if ( - flights.isError && - flights.error instanceof AxiosError && - flights.error.response?.status === 401 - ) { - clearUser(); - navigate("/login"); - } - }, [flights]); return ( diff --git a/web/app/routes/logbook.me/route.tsx b/web/app/routes/logbook.me/route.tsx index 0e96c15..579d08f 100644 --- a/web/app/routes/logbook.me/route.tsx +++ b/web/app/routes/logbook.me/route.tsx @@ -1,34 +1,13 @@ import { client } from "@/util/api"; -import { useAuth } from "@/util/auth"; import { Container, Text, Title } from "@mantine/core"; -import { useNavigate } from "@remix-run/react"; import { useQuery } from "@tanstack/react-query"; -import { AxiosError } from "axios"; -import { useEffect } from "react"; export default function Me() { const user = useQuery({ queryKey: ["user"], queryFn: async () => await client.get(`users/me`).then((res) => res.data), - retry: (failureCount, error: AxiosError) => { - return !error || error.response?.status !== 401; - }, }); - const { clearUser } = useAuth(); - const navigate = useNavigate(); - - useEffect(() => { - if ( - user.isError && - user.error instanceof AxiosError && - user.error.response?.status === 401 - ) { - clearUser(); - navigate("/login"); - } - }, [user]); - return ( {user.data.username}