Move api client to a hook and allow .env api url config

web/app/routes/logbook.flights.$id/route.tsx

@@ -1,6 +1,6 @@
 import { VerticalLogItem } from "@/ui/display/log-item";
 import ErrorDisplay from "@/ui/error-display";
-import { client } from "@/util/api";
+import { useApi } from "@/util/api";
 import {
   Center,
   Container,
@@ -16,6 +16,8 @@ import { useQuery } from "@tanstack/react-query";
 export default function Flight() {
   const params = useParams();
 
+  const client = useApi();
+
   const flight = useQuery({
     queryKey: [params.id],
     queryFn: async () =>

web/app/routes/logbook.flights.new/route.tsx

@@ -21,7 +21,7 @@ import { HourInput, ZeroHourInput } from "@/ui/form/hour-input";
 import { ZeroIntInput } from "@/ui/form/int-input";
 import ListInput from "@/ui/form/list-input";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { client } from "@/util/api";
+import { useApi } from "@/util/api";
 import { useNavigate } from "@remix-run/react";
 import { useAuth } from "@/util/auth";
 import { AxiosError } from "axios";
@@ -80,6 +80,8 @@ export default function NewFlight() {
   const navigate = useNavigate();
   const queryClient = useQueryClient();
 
+  const client = useApi();
+
   const { clearUser } = useAuth();
 
   const createFlight = useMutation({

web/app/routes/logbook.flights/flights-list.tsx

@@ -1,4 +1,4 @@
-import { client } from "@/util/api";
+import { useApi } from "@/util/api";
 import { FlightConciseSchema } from "@/util/types";
 import {
   NavLink,
@@ -22,6 +22,8 @@ import {
 import { UseQueryResult, useQuery } from "@tanstack/react-query";
 
 function useFlights() {
+  const client = useApi();
+
   const flights = useQuery({
     queryKey: ["flights-list"],
     queryFn: async () =>

web/app/routes/logbook.me/route.tsx

@@ -1,9 +1,11 @@
 import ErrorDisplay from "@/ui/error-display";
-import { client } from "@/util/api";
+import { useApi } from "@/util/api";
 import { Center, Container, Loader, Text, Title } from "@mantine/core";
 import { useQuery } from "@tanstack/react-query";
 
 export default function Me() {
+  const client = useApi();
+
   const user = useQuery({
     queryKey: ["user"],
     queryFn: async () => await client.get(`users/me`).then((res) => res.data),