Fix types

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 {

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");
     }

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<FlightFormSchema>({
@@ -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"] });

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

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");
     }