add: receipt store functionality to menu items

src/app/menu/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Fragment, useCallback, useState } from "react";
+import { Fragment, useCallback, useMemo, useState } from "react";
 import SearchBox from "@/components/input/SearchBox";
 import CategoryItemRenderer from "@/components/listview/CategoryItemRenderer";
 import HorizontalScrollView from "@/components/listview/HorizontalScrollView";
@@ -11,6 +11,7 @@ import PlusIcon from "@/components/icons/PlusIcon";
 import MinusIcon from "@/components/icons/MinusIcon";
 import VerticalScrollView from "@/components/listview/VerticalScrollView";
 import MenuItemRenderer from "@/components/listview/MenuItemRenderer";
+import { useReceiptStore } from "@/zustand/receiptStore";
 
 const categories = [
   {
@@ -140,9 +141,8 @@ const foods = [
     contains: 'مرغ / کاهو / گوجه / خیار'
   },
 ];
-
+const MenuIndex = () => {
-export default function MenuIndex() {
+  const [search, setSearch] = useState("");
-  const [search, setSearch] = useState('');
   const [selectedCategory, setSelectedCategory] = useState(0);
 
   const updateSearch = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
@@ -153,32 +153,52 @@ export default function MenuIndex() {
     setSelectedCategory(id);
   }, []);
 
+  const incrementItem = useReceiptStore((state) => state.increment);
+  const decrementItem = useReceiptStore((state) => state.decrement);
+  const receiptItems = useReceiptStore((state) => state.items);
+
+  const filteredReceiptItems = useMemo(() => {
+    return foods.filter((item) => item.category === selectedCategory);
+  }, [selectedCategory]);
 
   return (
     <div className="flex flex-col gap-4 pt-4 items-center">
       <SearchBox value={search} onChange={updateSearch} />
-      <HorizontalScrollView className="w-full noscrollbar py-4!" itemRenderer={(child, index) => {
+      <HorizontalScrollView
-        return <CategoryItemRenderer className={`${index === selectedCategory && 'bg-white!'}`} onClick={() => updateCategory(index)} key={index}>{child}</CategoryItemRenderer>
+        className="w-full noscrollbar py-4!"
-      }}>
+        itemRenderer={(child, index) => {
+          return (
+            <CategoryItemRenderer
+              className={`${index === selectedCategory && "bg-white!"}`}
+              onClick={() => updateCategory(index)}
+              key={index}
+            >
+              {child}
+            </CategoryItemRenderer>
+          );
+        }}
+      >
         {categories.map((item, index) => {
           return (
             <div key={index}>
               <Image
                 priority
-                src={'/assets/images/food-image.png'}
+                src={"/assets/images/food-image.png"}
                 width={32}
                 height={32}
                 alt="category image"
               />
               <span className="text-xs text-black">{item.title}</span>
             </div>
-          )
+          );
         })}
       </HorizontalScrollView>
 
       <section className="w-full">
         <div className="flex justify-between items-center">
-          <span className="text-base font-semibold">{categories[selectedCategory].title}</span>
+          <span className="text-base font-semibold">
+            {categories[selectedCategory].title}
+          </span>
           <div className="inline-flex gap-2 justify-around items-center">
             <button className="rounded-xl h-8 bg-white ps-4 pe-2 py-1.5 inline-flex items-center justify-between gap-[7px]">
               <EqualizerIcon />
@@ -195,44 +215,78 @@ export default function MenuIndex() {
           itemRenderer={(child, index) => {
             return (
               <MenuItemRenderer key={index}>{child}</MenuItemRenderer>
-            )
+            );
           }}
         >
-          {foods.map((food, index) => {
+          {filteredReceiptItems
-            return (
+            .filter((food) => food.category === selectedCategory)
-              <Fragment key={index}>
+            .map((food, index) => {
-                <Image
+              const receiptItem = receiptItems.find(
-                  className="rounded-xl w-28 h-28"
+                (item) => item.id === index
-                  src={'/assets/images/food-preview.png'}
+              );
-                  height={100}
-                  width={100}
-                  alt="Food image"
-                />
-                <div className="w-full h-full inline-flex flex-col justify-between">
-                  <div>
-                    <div className="text-sm2 font-semibold">{food.name}</div>
-                    <div className="text-[#7F7F7F] text-xs leading-5 font-normal mt-2">{food.contains}</div>
-                  </div>
-                  <div className="inline-flex justify-between w-full items-end">
-                    <span className="w-full" dir="ltr">{food.price} T</span>
-                    <div className="bg-background max-w-[115px] rounded-lg w-full h-8 inline-flex py-1 px-[5px] justify-between items-center gap-2">
-                      {/* <PlusIcon />
-                  <div className="text-sm2 pt-0.5 font-semibold" style={{verticalAlign: 'end'}}>افزودن</div> */}
 
-                      <PlusIcon className="bg-white rounded-sm p-2" size={26} />
+              return (
-                      <div className="text-sm2 pt-0.5 font-semibold" style={{ verticalAlign: 'end' }}>2</div>
+                <Fragment key={index}>
-                      <MinusIcon className="bg-white rounded-sm p-2" size={26} />
+                  <Image
+                    className="rounded-xl w-28 h-28"
+                    src={"/assets/images/food-preview.png"}
+                    height={100}
+                    width={100}
+                    alt="Food image"
+                  />
+                  <div className="w-full h-full inline-flex flex-col justify-between">
+                    <div>
+                      <div className="text-sm2 font-semibold">
+                        {food.name}
+                      </div>
+                      <div className="text-[#7F7F7F] text-xs leading-5 font-normal mt-2">
+                        {food.contains}
+                      </div>
+                    </div>
+                    <div className="inline-flex justify-between w-full items-end">
+                      <span className="w-full" dir="ltr">
+                        {food.price} T
+                      </span>
+                      <div className="bg-background max-w-[115px] rounded-lg w-full h-8 inline-flex py-1 px-[5px] justify-between items-center gap-2">
+                        {(receiptItem?.quantity || 0) <= 0 ? (
+                          <button
+                            onClick={() => incrementItem(index)}
+                            className="inline-flex w-full justify-center items-center gap-2"
+                          >
+                            <PlusIcon />
+                            <div className="text-sm2 pt-0.5 font-semibold" style={{ verticalAlign: "end" }}>
+                              افزودن
+                            </div>
+                          </button>
+                        ) : (
+                          <>
+                            <button
+                              onClick={() => incrementItem(index)}
+                              className="bg-white rounded-sm p-2"
+                            >
+                              <PlusIcon />
+                            </button>
+                            <div className="text-sm2 pt-0.5 font-semibold" style={{ verticalAlign: "end" }}>
+                              {(receiptItem?.quantity || 0)}
+                            </div>
+                            <button
+                              onClick={() => decrementItem(index)}
+                              className="bg-white rounded-sm p-2"
+                            >
+                              <MinusIcon />
+                            </button>
+                          </>
+                        )}
+                      </div>
                     </div>
                   </div>
-                </div>
+                </Fragment>
-              </Fragment>
+              );
-            )
+            })}
-          })}
-
         </VerticalScrollView>
-
-
       </section>
     </div>
   );
-}
+};
+
+export default MenuIndex;

src/zustand/receiptStore.ts

@@ -0,0 +1,52 @@
+// zustand/userStore.ts
+import { create } from 'zustand'
+import { createJSONStorage, persist } from 'zustand/middleware'
+
+type ReceiptItem = {
+  id: number
+  quantity: number
+}
+
+type AuthStore = {
+  items: Array<ReceiptItem>
+  increment: (id: number) => void
+  decrement: (id: number) => void
+  clear: () => void
+}
+
+export const useReceiptStore = create<AuthStore>()(
+  persist(
+    (set) => ({
+      items: [],
+      clear: () =>
+        set(() => ({
+          items: []
+        })),
+      increment: (id) =>
+        set((state) => {
+          if (state.items.find(x => x.id === id) === undefined) {
+            return ({
+              items: [...state.items, {id, quantity: 1}]
+            })
+          }
+          return ({
+            items: state.items.map((item) =>
+              item.id === id ? { ...item, quantity: item.quantity + 1 } : item
+            ),
+          })
+        }),
+      decrement: (id) =>
+        set((state) => ({
+          items: state.items.map((item) =>
+            item.id === id && item.quantity > 0
+              ? { ...item, quantity: item.quantity - 1 }
+              : item
+          ),
+        })),
+    }),
+    {
+      name: 'receipt-storage', // Key in localStorage
+      storage: createJSONStorage(() => sessionStorage),
+    }
+  )
+)