ok

src/pages/CafePage.js

@@ -10,7 +10,7 @@ import {
 
 import "../App.css";
 
-import { getImageUrl, createItem, updateItem } from "../helpers/itemHelper.js";
+import { getImageUrl, createItem, updateItem, moveItemType } from "../helpers/itemHelper.js";
 import SearchInput from "../components/SearchInput";
 import ItemTypeLister from "../components/ItemTypeLister";
 import { MusicPlayer } from "../components/MusicPlayer";
@@ -30,6 +30,7 @@ function CafePage({
   welcomePageConfig,
   shopName,
   shopOwnerId,
+  setShopItems,
   shopItems,
   shopClerks,
   socket,
@@ -149,6 +150,40 @@ function CafePage({
 
     document.body.style.overflow = "auto";
   };
+
+  const moveItemTypeHandler = async (itemTypeId, direction, index) => {
+    const previousItems = [...shopItems];
+    
+    // Update local state immediately
+    const newItems = [...shopItems];
+  
+    let targetIndex;
+    if (direction === 'up' && index > 0) {
+      targetIndex = index - 1;
+    } else if (direction === 'down' && index < newItems.length - 1) {
+      targetIndex = index + 1;
+    }
+    console.log(index);
+    console.log(targetIndex);
+    if (targetIndex !== undefined) {
+      // Swap items
+      [newItems[index], newItems[targetIndex]] = [newItems[targetIndex], newItems[index]];
+      newItems[index].order = targetIndex;
+      newItems[targetIndex].order = index;
+    
+      setShopItems(newItems);
+  
+      // Call the API to move the item type
+      try {
+        await moveItemType(itemTypeId, previousItems[targetIndex].itemTypeId, index, targetIndex);
+      } catch (error) {
+        console.error('Error moving item type:', error);
+        // Revert the changes if the backend fails
+        setShopItems(previousItems);
+      }
+    }
+  };
+  
   if (loading)
     return (
       <div className="Loader">
@@ -204,6 +239,7 @@ function CafePage({
                   shopOwnerId={shopOwnerId}
                   shopId={shopId}
                   itemTypes={shopItems}
+                  setShopItems={setShopItems}
                   isEditMode={isEditMode}
                   onFilterChange={(e) => setFilterId(e)}
                   filterId={filterId}
@@ -217,8 +253,10 @@ function CafePage({
                     (itemType) =>
                       filterId == 0 || itemType.itemTypeId === filterId
                   )
-                  .map((itemType) => (
+                  .map((itemType, index) => (
                     <ItemLister
+                      index={index}
+                      indexTotal={shopItems.length}
                       shopId={shopId}
                       shopOwnerId={shopOwnerId}
                       user={user}
@@ -226,8 +264,11 @@ function CafePage({
                       itemTypeId={itemType.itemTypeId}
                       typeName={itemType.name}
                       typeImage={itemType.image}
+                      setShopItems={setShopItems}
                       itemList={itemType.itemList}
                       typeVisibility={itemType.visibility}
+                      moveItemTypeUp={(e)=>moveItemTypeHandler(e,'up', index)}
+                      moveItemTypeDown={(e)=>moveItemTypeHandler(e, 'down', index)}
                       isEditMode={isEditMode}
                       beingEditedType={beingEditedType}
                       setBeingEditedType={setBeingEditedType}