ok

src/components/ItemLister.js

@@ -224,7 +224,7 @@ const ItemLister = ({
     );
     setisEditItem(0);
   };
-  const onUpdateItem = (itemId, name, price, image, description, promoPrice) => {
+  const onUpdateItem = async (itemId, name, price, image, description, promoPrice) => {
     if (isEdit)
       setItemsToUpdate((prev) => [...prev, { itemId, name, price,promoPrice, image, description }]);
     else {
@@ -237,24 +237,44 @@ const ItemLister = ({
       // Create a copy of the current items array
       const updatedItems = [...items];
       const item = updatedItems[itemIndex];
-      console.log(items)
+      console.log(item)
+      console.log(image)
       // Toggle the availability locally
-      if(image){
-        const reader = new FileReader();
-        reader.onloadend = () => {
-          updatedItems[itemIndex].selectedImage = reader.result;
-          console.log(reader.result)
-        };
-        reader.readAsDataURL(image);
-
-  
+      const readImage = (image) => {
+        return new Promise((resolve, reject) => {
+          // Check if image is a valid File or Blob object
+          if (!(image instanceof Blob)) {
+            return;
+          }
+      
+          const reader = new FileReader();
+          reader.onloadend = () => resolve(reader.result);
+          reader.onerror = (error) => reject(error);
+          reader.readAsDataURL(image);  // read the image as a data URL
+        });
+      };
+      
+      
+      let newImage = null;
+      if (image) {
+        try {
+          newImage = await readImage(image);
+          console.log(newImage);
+        } catch (error) {
+          console.error("Error reading image:", error);
+        }
       }
+      
       updatedItems[itemIndex] = {
         itemId: item.itemId,
         name,
         price,
-        availability: item.availability
+        description: description,
+        availability: item.availability,
+        image: image ? newImage : item.image,
+        selectedImage: image ? newImage : null
       };
+      
       console.log(updatedItems)
 
       // Update the state with the local change
@@ -800,7 +820,7 @@ const ItemLister = ({
               </>
             )}
             {(isEdit && !isFirstStep || !isEdit) &&
-              <>
+              <div key={randomKey}>
                 {isEdit && <div style={{ display: 'flex', justifyContent: 'flex-start' }}><div style={{ marginTop: '49px', marginRight: '10px', marginLeft: '10px' }} onClick={() => setIsFirstStep(true)}><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 512 512"><path d="M48,256c0,114.87,93.13,208,208,208s208-93.13,208-208S370.87,48,256,48,48,141.13,48,256Zm212.65-91.36a16,16,0,0,1,.09,22.63L208.42,240H342a16,16,0,0,1,0,32H208.42l52.32,52.73A16,16,0,1,1,238,347.27l-79.39-80a16,16,0,0,1,0-22.54l79.39-80A16,16,0,0,1,260.65,164.64Z" /></svg></div>
                   <h2 className={styles["item-list-title"]}>{items && items.length < 1 ? 'Buat item' : 'Daftar item'}</h2></div>}
                 <div className={styles["item-list"]}>
@@ -835,7 +855,7 @@ const ItemLister = ({
 
                   {itemsToCreate.map((item) => {
                     return !forCart || (forCart && item.qty > 0) ? (
-                      <div key={randomKey}>
+                      <div>
                         {isEditItem == item.itemId && (
                           <ItemConfig
                             isBeingEdit={true}
@@ -937,23 +957,25 @@ const ItemLister = ({
                           //   batal
                           // </button>
                           <ItemConfig
-                            isBeingEdit={true}
-                            name={item.name}
-                            price={item.price}
-                            promoPrice={item.promoPrice}
-                            description={item.description}
-                            imageUrl={
-                              itemTypeId ? getImageUrl(item.image) : item.image
-                            }
-                            imageFile={item.selectedImage}
-                            cancelEdit={() => editItem(0)}
-                            handleCreateItem={onCreateItem}
-                            handleUpdateItem={(name, price, image, description, promoPrice) => {
-                              console.log(description)
-                              onUpdateItem(item.itemId, name, price, image, description, promoPrice);
-                            }
-                            }
-                          />
+  isBeingEdit={true}
+  name={item.name}
+  price={item.price}
+  promoPrice={item.promoPrice}
+  description={item.description}
+  imageUrl={itemTypeId ? getImageUrl(item.image) : item.image}
+  imageFile={item.selectedImage}
+  cancelEdit={() => editItem(0)}
+  handleCreateItem={onCreateItem}
+  handleUpdateItem={async (name, price, image, description, promoPrice) => {
+    try {
+      console.log(description);
+      await onUpdateItem(item.itemId, name, price, image, description, promoPrice);
+    } catch (error) {
+      console.error("Error updating item:", error);
+    }
+  }}
+/>
+
                         )}
                         <div className={styles["itemWrapper"]}>
                           {isEditMode && isEditItem != item.itemId && (
@@ -1047,7 +1069,7 @@ const ItemLister = ({
                     )}
 
                 </div>
-              </>
+              </div>
             }
             {isEdit && (
               <div className={styles.PaymentOption}>