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();
+    },
+  });
+}