diff --git a/web/app/root.tsx b/web/app/root.tsx index d8438f7..12280d9 100644 --- a/web/app/root.tsx +++ b/web/app/root.tsx @@ -12,16 +12,10 @@ import { Scripts, ScrollRestoration, isRouteErrorResponse, - redirect, - useNavigate, useRouteError, } from "@remix-run/react"; -import { - QueryCache, - QueryClient, - QueryClientProvider, -} from "@tanstack/react-query"; +import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; import { diff --git a/web/app/routes/logbook.flights.$id/route.tsx b/web/app/routes/logbook.flights.$id/route.tsx index d4de9cf..ec9ea1c 100644 --- a/web/app/routes/logbook.flights.$id/route.tsx +++ b/web/app/routes/logbook.flights.$id/route.tsx @@ -4,6 +4,7 @@ import { Center, Container, List, Loader, Stack, Text } from "@mantine/core"; import { useNavigate, 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() { @@ -13,7 +14,7 @@ export default function Flight() { queryKey: [params.id], queryFn: async () => await client.get(`/flights/${params.id}`).then((res) => res.data), - retry: (failureCount, error) => { + retry: (failureCount, error: AxiosError) => { return !error || error.response?.status !== 401; }, }); @@ -22,7 +23,11 @@ export default function Flight() { const { clearUser } = useAuth(); useEffect(() => { - if (flight.isError && flight.error.response.status === 401) { + if ( + flight.isError && + flight.error instanceof AxiosError && + flight.error.response?.status === 401 + ) { clearUser(); navigate("/login"); } diff --git a/web/app/routes/logbook.flights.new/route.tsx b/web/app/routes/logbook.flights.new/route.tsx index 2754797..95430f3 100644 --- a/web/app/routes/logbook.flights.new/route.tsx +++ b/web/app/routes/logbook.flights.new/route.tsx @@ -23,6 +23,8 @@ import ListInput from "@/ui/form/list-input"; import { useMutation, useQueryClient } from "@tanstack/react-query"; import { client } from "@/util/api"; import { useNavigate } from "@remix-run/react"; +import { useAuth } from "@/util/auth"; +import { AxiosError } from "axios"; export default function NewFlight() { const form = useForm({ @@ -78,6 +80,8 @@ export default function NewFlight() { const navigate = useNavigate(); const queryClient = useQueryClient(); + const { clearUser } = useAuth(); + const createFlight = useMutation({ mutationFn: async (values: FlightFormSchema) => { const newFlight = flightCreateHelper(values); @@ -85,11 +89,15 @@ export default function NewFlight() { console.log(res); return res.data; }, - retry: (failureCount, error) => { + retry: (failureCount, error: AxiosError) => { return !error || error.response?.status !== 401; }, - onError: (error) => { + onError: (error: AxiosError) => { console.log(error); + if (error.response?.status === 401) { + clearUser(); + navigate("/login"); + } }, onSuccess: async (data: { id: string }) => { await queryClient.invalidateQueries({ queryKey: ["flights-list"] }); diff --git a/web/app/routes/logbook.flights/flights-list.tsx b/web/app/routes/logbook.flights/flights-list.tsx index 316a1d0..f7793c3 100644 --- a/web/app/routes/logbook.flights/flights-list.tsx +++ b/web/app/routes/logbook.flights/flights-list.tsx @@ -13,21 +13,17 @@ 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 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) => { + retry: (failureCount, error: AxiosError) => { return !error || error.response?.status !== 401; }, }); @@ -36,7 +32,11 @@ export function FlightsList() { const { clearUser } = useAuth(); useEffect(() => { - if (flights.isError && flights.error.response.status === 401) { + if ( + flights.isError && + flights.error instanceof AxiosError && + flights.error.response?.status === 401 + ) { clearUser(); navigate("/login"); } @@ -76,15 +76,30 @@ export function FlightsList() { } export function MobileFlightsList() { - 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: 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 80f0d3c..0e96c15 100644 --- a/web/app/routes/logbook.me/route.tsx +++ b/web/app/routes/logbook.me/route.tsx @@ -3,13 +3,14 @@ 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) => { + retry: (failureCount, error: AxiosError) => { return !error || error.response?.status !== 401; }, }); @@ -18,7 +19,11 @@ export default function Me() { const navigate = useNavigate(); useEffect(() => { - if (user.isError && user.error.response?.status === 401) { + if ( + user.isError && + user.error instanceof AxiosError && + user.error.response?.status === 401 + ) { clearUser(); navigate("/login"); }