Implement flight updating

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

@@ -91,7 +91,12 @@ export default function Flight() {
                   Flight Log
                 </Title>
                 <Group>
-                  <Tooltip label="Edit Flight">
+                  <Tooltip
+                    label="Edit Flight"
+                    onClick={() =>
+                      navigate(`/logbook/flights/edit/${params.id}`)
+                    }
+                  >
                     <ActionIcon variant="subtle" size="lg">
                       <IconPencil />
                     </ActionIcon>

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

@@ -0,0 +1,63 @@
+import { Container, Stack, Title } from "@mantine/core";
+import {
+  FlightFormSchema,
+  flightCreateHelper,
+  flightEditHelper,
+} from "@/util/types";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useApi } from "@/util/api";
+import { useNavigate, useParams } from "@remix-run/react";
+import { AxiosError } from "axios";
+import FlightForm from "@/ui/form/flight-form";
+
+export default function EditFlight() {
+  const params = useParams();
+
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+
+  const client = useApi();
+
+  const flight = useQuery({
+    queryKey: [params.id],
+    queryFn: async () =>
+      await client.get(`/flights/${params.id}`).then((res) => res.data),
+  });
+
+  const editFlight = useMutation({
+    mutationFn: async (values: FlightFormSchema) => {
+      const newFlight = flightCreateHelper(values);
+      if (newFlight) {
+        const res = await client.put(`/flights/${params.id}`, newFlight);
+        return res.data;
+      }
+      throw new Error("Flight updating failed");
+    },
+    retry: (failureCount, error: AxiosError) => {
+      return !error || error.response?.status !== 401;
+    },
+    onSuccess: async (data: { id: string }) => {
+      await queryClient.invalidateQueries({ queryKey: ["flights-list"] });
+      navigate(`/logbook/flights/${data.id}`);
+    },
+  });
+
+  return (
+    <Container>
+      <Stack>
+        <Title order={2}>Edit Flight</Title>
+
+        <FlightForm
+          initialValues={flightEditHelper(flight.data) ?? null}
+          onSubmit={editFlight.mutate}
+          isError={editFlight.isError}
+          error={editFlight.error}
+          submitButtonLabel="Update"
+          withCancelButton
+          cancelFunc={() => navigate(`/logbook/flights/${params.id}`)}
+          mah="calc(100vh - 95px - 110px)"
+        />
+      </Stack>
+    </Container>
+  );
+}

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

@@ -39,6 +39,7 @@ export default function NewFlight() {
           onSubmit={createFlight.mutate}
           isError={createFlight.isError}
           error={createFlight.error}
+          mah="calc(100vh - 95px - 110px)"
         />
       </Stack>
     </Container>

web/app/ui/form/flight-form.tsx

@@ -26,11 +26,19 @@ export default function FlightForm({
   isError,
   error,
   initialValues,
+  mah,
+  submitButtonLabel,
+  withCancelButton,
+  cancelFunc,
 }: {
   onSubmit: (values: FlightFormSchema) => void;
   isError: boolean;
   error: AxiosError | null;
-  initialValues?: FlightFormSchema;
+  initialValues?: FlightFormSchema | null;
+  mah?: string;
+  submitButtonLabel?: string;
+  withCancelButton?: boolean;
+  cancelFunc?: () => void;
 }) {
   const form = useForm<FlightFormSchema>({
     initialValues: initialValues ?? {
@@ -84,7 +92,7 @@ export default function FlightForm({
 
   return (
     <form onSubmit={form.onSubmit((values) => onSubmit(values))}>
-      <ScrollArea.Autosize mah="calc(100vh - 95px - 110px)">
+      <ScrollArea.Autosize mah={mah}>
         <Container>
           {/* Date and Aircraft */}
 
@@ -289,8 +297,13 @@ export default function FlightForm({
             {error?.message}
           </Text>
         ) : null}
+        {withCancelButton ? (
+          <Button onClick={cancelFunc} color="gray">
+            Cancel
+          </Button>
+        ) : null}
         <Button type="submit" leftSection={<IconPencil />}>
-          Create
+          {submitButtonLabel ?? "Create"}
         </Button>
       </Group>
     </form>

web/app/util/types.ts

@@ -135,7 +135,34 @@ const flightCreateHelper = (
   }
 };
 
+const flightEditHelper = (
+  values: FlightCreateSchema
+): FlightFormSchema | void => {
+  try {
+    const flight = {
+      ...values,
+      date: dayjs(values.date),
+      time_start: Number(
+        `${dayjs(values.time_start).hour()}${dayjs(values.time_start).minute()}`
+      ),
+      time_off: Number(
+        `${dayjs(values.time_off).hour()}${dayjs(values.time_off).minute()}`
+      ),
+      time_down: Number(
+        `${dayjs(values.time_down).hour()}${dayjs(values.time_down).minute()}`
+      ),
+      time_stop: Number(
+        `${dayjs(values.time_stop).hour()}${dayjs(values.time_stop).minute()}`
+      ),
+    };
+    return flight;
+  } catch (err) {
+    console.log(err);
+  }
+};
+
 export {
+  flightEditHelper,
   flightCreateHelper,
   type FlightFormSchema,
   type FlightCreateSchema,