From 23f383dd63f03588e3965c59af35e2d0d1b559a7 Mon Sep 17 00:00:00 2001
From: Donkie <daniel.cf.hultgren@gmail.com>
Date: Tue, 30 Jan 2024 20:02:54 +0100
Subject: [PATCH] Fixed edit forms refreshing after you start editing

---
 client/src/pages/filaments/edit.tsx | 20 ++++++++++----------
 client/src/pages/spools/edit.tsx    | 29 +++++++++++++++--------------
 client/src/pages/vendors/edit.tsx   | 22 ++++++++++++----------
 3 files changed, 37 insertions(+), 34 deletions(-)

diff --git a/client/src/pages/filaments/edit.tsx b/client/src/pages/filaments/edit.tsx
index 6acd816..1af01ee 100644
--- a/client/src/pages/filaments/edit.tsx
+++ b/client/src/pages/filaments/edit.tsx
@@ -24,20 +24,13 @@ export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
   const [hasChanged, setHasChanged] = useState(false);
   const extraFields = useGetFields(EntityType.filament);
 
-  const { formProps, saveButtonProps } = useForm<IFilament, HttpError, IFilamentParsedExtras, IFilamentParsedExtras>({
+  const { formProps, saveButtonProps } = useForm<IFilament, HttpError, IFilament, IFilament>({
     liveMode: "manual",
     onLiveEvent() {
       // Warn the user if the filament has been updated since the form was opened
       messageApi.warning(t("filament.form.filament_updated"));
       setHasChanged(true);
     },
-    queryOptions: {
-      select(data) {
-        return {
-          data: ParsedExtras(data.data),
-        };
-      },
-    },
   });
 
   // Get vendor selection options
@@ -49,15 +42,22 @@ export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
   // Add the vendor_id field to the form
   if (formProps.initialValues) {
     formProps.initialValues["vendor_id"] = formProps.initialValues["vendor"]?.id;
+
+    // Parse the extra fields from string values into real types
+    formProps.initialValues = ParsedExtras(formProps.initialValues);
   }
 
   // Override the form's onFinish method to stringify the extra fields
   const originalOnFinish = formProps.onFinish;
   formProps.onFinish = (allValues: IFilamentParsedExtras) => {
     if (allValues !== undefined && allValues !== null) {
-      allValues = StringifiedExtras(allValues);
+      // Lot of stupidity here to make types work
+      const stringifiedAllValues = StringifiedExtras<IFilamentParsedExtras>(allValues);
+      originalOnFinish?.({
+        extra: {},
+        ...stringifiedAllValues,
+      });
     }
-    originalOnFinish?.(allValues);
   };
 
   return (
diff --git a/client/src/pages/spools/edit.tsx b/client/src/pages/spools/edit.tsx
index 36f52fe..b634bc8 100644
--- a/client/src/pages/spools/edit.tsx
+++ b/client/src/pages/spools/edit.tsx
@@ -32,20 +32,13 @@ export const SpoolEdit: React.FC<IResourceComponentsProps> = () => {
   const [hasChanged, setHasChanged] = useState(false);
   const extraFields = useGetFields(EntityType.spool);
 
-  const { form, formProps, saveButtonProps } = useForm<ISpool, HttpError, ISpoolParsedExtras, ISpoolParsedExtras>({
+  const { form, formProps, saveButtonProps } = useForm<ISpool, HttpError, ISpool, ISpool>({
     liveMode: "manual",
     onLiveEvent() {
       // Warn the user if the spool has been updated since the form was opened
       messageApi.warning(t("spool.form.spool_updated"));
       setHasChanged(true);
     },
-    queryOptions: {
-      select(data) {
-        return {
-          data: ParsedExtras(data.data),
-        };
-      },
-    },
   });
 
   // Get filament selection options
@@ -53,13 +46,25 @@ export const SpoolEdit: React.FC<IResourceComponentsProps> = () => {
     resource: "filament",
   });
 
+  // Add the filament_id field to the form
+  if (formProps.initialValues) {
+    formProps.initialValues["filament_id"] = formProps.initialValues["filament"].id;
+
+    // Parse the extra fields from string values into real types
+    formProps.initialValues = ParsedExtras(formProps.initialValues);
+  }
+
   // Override the form's onFinish method to stringify the extra fields
   const originalOnFinish = formProps.onFinish;
   formProps.onFinish = (allValues: ISpoolParsedExtras) => {
     if (allValues !== undefined && allValues !== null) {
-      allValues = StringifiedExtras(allValues);
+      // Lot of stupidity here to make types work
+      const stringifiedAllValues = StringifiedExtras<ISpoolParsedExtras>(allValues);
+      originalOnFinish?.({
+        extra: {},
+        ...stringifiedAllValues,
+      });
     }
-    originalOnFinish?.(allValues);
   };
 
   const filamentOptions = queryResult.data?.data.map((item) => {
@@ -128,10 +133,6 @@ export const SpoolEdit: React.FC<IResourceComponentsProps> = () => {
     allLocations.push(newLocation.trim());
   }
 
-  if (formProps.initialValues) {
-    formProps.initialValues["filament_id"] = formProps.initialValues["filament"].id;
-  }
-
   const initialUsedWeight = formProps.initialValues?.used_weight || 0;
   useEffect(() => {
     if (initialUsedWeight) {
diff --git a/client/src/pages/vendors/edit.tsx b/client/src/pages/vendors/edit.tsx
index b6f3d78..330a251 100644
--- a/client/src/pages/vendors/edit.tsx
+++ b/client/src/pages/vendors/edit.tsx
@@ -22,29 +22,31 @@ export const VendorEdit: React.FC<IResourceComponentsProps> = () => {
   const [hasChanged, setHasChanged] = useState(false);
   const extraFields = useGetFields(EntityType.vendor);
 
-  const { formProps, saveButtonProps } = useForm<IVendor, HttpError, IVendorParsedExtras, IVendorParsedExtras>({
+  const { formProps, saveButtonProps } = useForm<IVendor, HttpError, IVendor, IVendor>({
     liveMode: "manual",
     onLiveEvent() {
       // Warn the user if the vendor has been updated since the form was opened
       messageApi.warning(t("vendor.form.vendor_updated"));
       setHasChanged(true);
     },
-    queryOptions: {
-      select(data) {
-        return {
-          data: ParsedExtras(data.data),
-        };
-      },
-    },
   });
 
+  // Parse the extra fields from string values into real types
+  if (formProps.initialValues) {
+    formProps.initialValues = ParsedExtras(formProps.initialValues);
+  }
+
   // Override the form's onFinish method to stringify the extra fields
   const originalOnFinish = formProps.onFinish;
   formProps.onFinish = (allValues: IVendorParsedExtras) => {
     if (allValues !== undefined && allValues !== null) {
-      allValues = StringifiedExtras(allValues);
+      // Lot of stupidity here to make types work
+      const stringifiedAllValues = StringifiedExtras<IVendorParsedExtras>(allValues);
+      originalOnFinish?.({
+        extra: {},
+        ...stringifiedAllValues,
+      });
     }
-    originalOnFinish?.(allValues);
   };
 
   return (