From b9965e54e72d0d1818588a69231b7bf52def8a6d Mon Sep 17 00:00:00 2001
From: Sylvain <sylvain@sleede.com>
Date: Tue, 27 Dec 2022 14:59:24 +0100
Subject: [PATCH] (bug) unable to set product main image

---
 .../components/form/form-image-upload.tsx         |  4 ++--
 .../components/form/form-multi-image-upload.tsx   |  6 +++---
 app/frontend/src/javascript/lib/api.ts            | 15 +++++++++------
 3 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/app/frontend/src/javascript/components/form/form-image-upload.tsx b/app/frontend/src/javascript/components/form/form-image-upload.tsx
index b2f858e39..6adea670b 100644
--- a/app/frontend/src/javascript/components/form/form-image-upload.tsx
+++ b/app/frontend/src/javascript/components/form/form-image-upload.tsx
@@ -22,7 +22,7 @@ interface FormImageUploadProps<TFieldValues, TContext extends object> extends Fo
   mainOption?: boolean,
   onFileChange?: (value: ImageType) => void,
   onFileRemove?: () => void,
-  onFileIsMain?: (setIsMain: () => void) => void,
+  onFileIsMain?: (setIsMain: (isMain: boolean) => void) => void,
 }
 
 /**
@@ -108,7 +108,7 @@ export const FormImageUpload = <TFieldValues extends FieldValues, TContext exten
               render={({ field: { onChange, value } }) =>
                 <input id={`${id}.is_main`}
                   type="radio"
-                  checked={value}
+                  checked={value || false}
                   onChange={() => { onFileIsMain(onChange); }} />
               } />
           </label>
diff --git a/app/frontend/src/javascript/components/form/form-multi-image-upload.tsx b/app/frontend/src/javascript/components/form/form-multi-image-upload.tsx
index 99f221958..4028b26cb 100644
--- a/app/frontend/src/javascript/components/form/form-multi-image-upload.tsx
+++ b/app/frontend/src/javascript/components/form/form-multi-image-upload.tsx
@@ -28,7 +28,7 @@ export const FormMultiImageUpload = <TFieldValues extends FieldValues, TContext
    */
   const addImage = () => {
     append({
-      is_main: output.filter(i => i.is_main).length === 0,
+      is_main: output.filter((i: ImageType) => i.is_main).length === 0,
       _destroy: false
     } as UnpackNestedValue<FieldArray<TFieldValues, ArrayPath<TFieldValues>>>);
   };
@@ -55,8 +55,8 @@ export const FormMultiImageUpload = <TFieldValues extends FieldValues, TContext
    * Set the image at the given index as the new main image, and unset the current main image
    */
   const handleSetMainImage = (index: number) => {
-    return (setNewImageValue) => {
-      const mainImageIndex = output.findIndex(i => i.is_main && i !== index);
+    return (setNewImageValue: (isMain: boolean) => void) => {
+      const mainImageIndex = output.findIndex((i: ImageType, idx) => i.is_main && idx !== index);
       if (mainImageIndex > -1) {
         setValue(
           `${id}.${mainImageIndex}.is_main` as Path<TFieldValues>,
diff --git a/app/frontend/src/javascript/lib/api.ts b/app/frontend/src/javascript/lib/api.ts
index 9c6a7fa34..29c5374d6 100644
--- a/app/frontend/src/javascript/lib/api.ts
+++ b/app/frontend/src/javascript/lib/api.ts
@@ -32,16 +32,19 @@ export default class ApiLib {
           if (file?._destroy) {
             data.set(`${name}[${attr}][${i}][_destroy]`, file._destroy.toString());
           }
+          if (file?.is_main) {
+            data.set(`${name}[${attr}][${i}][is_main]`, file.is_main.toString());
+          }
         });
       } else {
         if (object[attr]?.attachment_files && object[attr]?.attachment_files[0]) {
           data.set(`${name}[${attr}][attachment]`, object[attr]?.attachment_files[0]);
-          if (object[attr].id) {
-            data.set(`${name}[${attr}][id]`, object[attr].id.toString());
-          }
-          if (object[attr]._destroy) {
-            data.set(`${name}[${attr}][_destroy]`, object[attr]._destroy.toString());
-          }
+        }
+        if (object[attr]?.id) {
+          data.set(`${name}[${attr}][id]`, object[attr].id.toString());
+        }
+        if (object[attr]?._destroy) {
+          data.set(`${name}[${attr}][_destroy]`, object[attr]._destroy.toString());
         }
       }
     });