Implement inline editing and image upload/delete/edit

web/app/util/hooks.ts

@@ -1,4 +1,4 @@
-import { useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useApi } from "./api";
 
 export function useAircraft() {
@@ -31,3 +31,24 @@ export function useFlights(filter: string = "", value: string = "") {
 
   return flights;
 }
+
+export function usePatchFlight(
+  id: string,
+  field: string,
+  onSuccess: () => void
+) {
+  const client = useApi();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (value: string | string[] | number | Date | null) =>
+      await client
+        .patch(`/flights/${id}`, { [field]: value })
+        .then((res) => res.data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: [id] });
+      queryClient.invalidateQueries({ queryKey: ["flights-list"] });
+      onSuccess();
+    },
+  });
+}

web/app/util/types.ts

@@ -51,7 +51,8 @@ type FlightFormSchema = FlightBaseSchema & {
   time_down: number | null;
   time_stop: number | null;
 
-  images: File[];
+  existing_images?: string[] | null;
+  images: File[] | string[];
 };
 
 type FlightCreateSchema = FlightBaseSchema & {
@@ -136,7 +137,7 @@ const flightCreateHelper = (
 };
 
 const flightEditHelper = (
-  values: FlightCreateSchema
+  values: FlightDisplaySchema
 ): FlightFormSchema | void => {
   try {
     const flight = {
@@ -154,6 +155,8 @@ const flightEditHelper = (
       time_stop: Number(
         `${dayjs(values.time_stop).hour()}${dayjs(values.time_stop).minute()}`
       ),
+      existing_images: values.images as string[],
+      images: [],
     };
     return flight;
   } catch (err) {