ok

src/components/ItemLister.js

@@ -1,4 +1,4 @@
-import React, { useState, useRef } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import styles from "./ItemLister.module.css";
 import Item from "./Item";
 import Switch from "react-switch";
@@ -10,6 +10,7 @@ import {
 import {
   getImageUrl,
   createItem,
+  updateItemAvalilability,
   updateItemType,
   deleteItemType,
 } from "../helpers/itemHelper.js";
@@ -25,6 +26,7 @@ const ItemLister = ({
   forCart,
   forInvoice,
   isEditMode,
+  raw,
 }) => {
   const [items, setItems] = useState(
     itemList.map((item) => ({
@@ -32,6 +34,16 @@ const ItemLister = ({
       qty: getItemQtyFromCart(shopId, item.itemId),
     }))
   );
+
+  useEffect(() => {
+    setItems(
+      itemList.map((item) => ({
+        ...item,
+        qty: getItemQtyFromCart(shopId, item.itemId),
+      }))
+    );
+  }, [itemList]);
+
   const [isEdit, setIsEditing] = useState(false);
   const [isAddingNewItem, setIsAddingNewItem] = useState(false);
   const [editedTypeName, setEditedTypeName] = useState(typeName);
@@ -111,69 +123,135 @@ const ItemLister = ({
   const toggleAddNewItem = () => {
     setIsAddingNewItem((prev) => !prev);
   };
+  const handleChange = async (itemId) => {
+    // Find the item in the current items array
+    console.log(itemId);
+    const itemIndex = items.findIndex((item) => item.itemId === itemId);
+    if (itemIndex === -1) return; // Item not found
+
+    // Create a copy of the current items array
+    const updatedItems = [...items];
+    const item = updatedItems[itemIndex];
+
+    // Toggle the availability locally
+    const newAvailability = !item.availability;
+    updatedItems[itemIndex] = {
+      ...item,
+      availability: newAvailability,
+    };
+
+    // Update the state with the local change
+    setItems(updatedItems);
+
+    try {
+      // Wait for the updateItemAvailability response
+      const response = await updateItemAvalilability(itemId, newAvailability);
+
+      // Assuming response contains the updated item data
+      const updatedItem = response;
+      console.log(updatedItem);
+      // Update only the specified item in the state
+      setItems((prevItems) =>
+        prevItems.map((prevItem) =>
+          prevItem.itemId === itemId ? updatedItem : prevItem
+        )
+      );
+    } catch (error) {
+      // Handle error (e.g., revert the change or show an error message)
+      console.error("Error updating item availability:", error);
+
+      // Optionally revert to the previous availability if needed
+      updatedItems[itemIndex].availability = item.availability; // revert back
+      setItems(updatedItems);
+    }
+  };
 
   return (
     <>
       {(items.length > 0 ||
         (user && user.roleId == 1 && user.userId == shopOwnerId)) && (
         <div className={styles["item-lister"]}>
-          <div className={styles["title-container"]}>
-            <input
-              ref={typeNameInputRef}
-              className={`${styles.title} ${
-                user && user.roleId == 1 && user.userId == shopOwnerId && isEdit
-                  ? styles.border
-                  : styles.noborder
-              }`}
-              value={editedTypeName}
-              onChange={(e) => setEditedTypeName(e.target.value)}
-              disabled={!isEdit}
-            />
-            {user && user.roleId == 1 && user.userId == shopOwnerId && (
-              <>
-                <button
-                  className={styles["edit-typeItem-button"]}
-                  onClick={toggleEditTypeItem}
-                >
-                  {isEdit ? "Cancel" : "Edit"}
-                </button>
-                {isEdit && (
-                  <button
-                    className={styles["edit-typeItem-button"]}
-                    onClick={handleSaveType}
-                  >
-                    &nbsp;&nbsp;Save&nbsp;&nbsp;
-                  </button>
+          {!raw && (
+            <div className={styles["title-container"]}>
+              <input
+                ref={typeNameInputRef}
+                className={`${styles.title} ${
+                  user &&
+                  user.roleId == 1 &&
+                  user.userId == shopOwnerId &&
+                  isEdit
+                    ? styles.border
+                    : styles.noborder
+                }`}
+                value={editedTypeName}
+                onChange={(e) => setEditedTypeName(e.target.value)}
+                disabled={!isEdit}
+              />
+              {isEditMode &&
+                user &&
+                user.roleId == 1 &&
+                user.userId == shopOwnerId && (
+                  <>
+                    <button
+                      className={styles["edit-typeItem-button"]}
+                      onClick={toggleEditTypeItem}
+                    >
+                      {isEdit ? "Cancel" : "Edit"}
+                    </button>
+                    {isEdit && (
+                      <button
+                        className={styles["edit-typeItem-button"]}
+                        onClick={handleSaveType}
+                      >
+                        &nbsp;&nbsp;Save&nbsp;&nbsp;
+                      </button>
+                    )}
+                  </>
                 )}
-              </>
-            )}
-          </div>
+            </div>
+          )}
           <div className={styles["item-list"]}>
             {user &&
               user.roleId == 1 &&
               user.userId == shopOwnerId &&
-              isEdit && (
+              isEditMode && (
                 <>
-                  <button
-                    className={styles["add-item-button"]}
-                    onClick={toggleAddNewItem}
-                  >
-                    {isAddingNewItem ? "Cancel" : "Add new Item"}
-                  </button>
+                  {!isAddingNewItem && (
+                    <button
+                      className={styles["add-item-button"]}
+                      onClick={toggleAddNewItem}
+                      style={{
+                        display: "inline-block",
+                        height: "159px",
+                        fontSize: "50px",
+                      }}
+                    >
+                      +
+                    </button>
+                  )}
                   {isAddingNewItem && (
-                    <Item
-                      blank={true}
-                      handleCreateItem={(name, price, qty, selectedImage) =>
-                        createItem(
-                          shopId,
-                          name,
-                          price,
-                          qty,
-                          selectedImage,
-                          itemTypeId
-                        )
-                      }
-                    />
+                    <>
+                      <button
+                        className={styles["add-item-button"]}
+                        onClick={toggleAddNewItem}
+                        style={{ display: "inline-block" }}
+                      >
+                        ↩
+                      </button>
+                      <Item
+                        blank={true}
+                        handleCreateItem={(name, price, qty, selectedImage) =>
+                          createItem(
+                            shopId,
+                            name,
+                            price,
+                            qty,
+                            selectedImage,
+                            itemTypeId
+                          )
+                        }
+                      />
+                    </>
                   )}
                 </>
               )}
@@ -182,8 +260,13 @@ const ItemLister = ({
                 <div className={styles["itemWrapper"]}>
                   {isEditMode && (
                     <div className={styles["editModeLayout"]}>
-                      <Switch checked={true} />
-                      <h3>available</h3>
+                      {isEditMode && (
+                        <Switch
+                          onChange={() => handleChange(item.itemId)}
+                          checked={item.availability}
+                        />
+                      )}
+                      <h3>{item.availability ? "available" : "unavailable"}</h3>
                     </div>
                   )}
                   <Item
@@ -198,6 +281,7 @@ const ItemLister = ({
                     onNegativeClick={() => handleNegativeClick(item.itemId)}
                     onRemoveClick={() => handleRemoveClick(item.itemId)}
                     isEditMode={isEditMode}
+                    isAvailable={item.availability}
                   />
                 </div>
               ) : null;