Consolidate query error handling

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 (
     <Container>
       <Stack h="calc(100vh - 95px)">

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 (
     <Stack p="0" m="0" gap="0">
@@ -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 (
     <Stack p="0" m="0" justify="space-between" h="calc(100vh - 95px)">

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 (
     <Container>
       <Title order={2}>{user.data.username}</Title>