list of foods and categories

src/app/[name]/(Main)/page.tsx

@@ -2,129 +2,20 @@
 
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import SearchBox from "@/components/input/SearchBox";
-import CategoryItemRenderer from "@/components/listview/CategoryItemRenderer";
-import HorizontalScrollView from "@/components/listview/HorizontalScrollView";
-import Image from "next/image";
 import TextAlignIcon from "@/components/icons/TextAlignIcon";
 import VerticalScrollView from "@/components/listview/VerticalScrollView";
 import MenuItemRenderer from "@/components/listview/MenuItemRenderer";
-import React from "react";
 import MenuItem from "@/components/listview/MenuItem";
-import Button from "@/components/button/PrimaryButton";
-import AnimatedBottomSheet from "@/components/bottomsheet/AnimatedBottomSheet";
-import { Switch } from "@/components/ui/switch";
-import { TicketPercentIcon } from "lucide-react";
-import { Candle2, MedalStar } from 'iconsax-react'
-import { useQueryState } from 'next-usequerystate'
+import { Candle2 } from "iconsax-react";
+import { useQueryState } from "next-usequerystate";
 import clsx from "clsx";
-import CategorySmallItemRenderer from "@/components/listview/CategorySmallItemRenderer";
 import { motion } from "framer-motion";
 import { useTranslation } from "react-i18next";
-import ComboBox, { ComboboxOption } from "@/components/combobox/Combobox";
 import useToggle from "@/hooks/helpers/useToggle";
-
-const categories = new Array(13).fill({ title: "خوراک", icon: "" });
-
-const foods = [
-  {
-    id: 1,
-    category: 0,
-    price: "69.000",
-    name: "کباب چوبی ژیوان )سیخ چوبی(",
-    contains: "فیله گوساله / سس سفید / قارچ و سیب زمینی/ پنیر پارمزان"
-  },
-  {
-    id: 2,
-    category: 1,
-    price: "49.000",
-    name: "برگر گوشت گوساله",
-    contains: "گوشت گوساله / پنیر چدار / کاهو / گوجه"
-  },
-  {
-    id: 3,
-    category: 2,
-    price: "29.000",
-    name: "ساندویچ مرغ",
-    contains: "مرغ / کاهو / گوجه / سس مایونز"
-  },
-  {
-    id: 4,
-    category: 0,
-    price: "89.000",
-    name: "کباب ماهی",
-    contains: "ماهی / سس لیمو / قارچ و سیب زمینی"
-  },
-  {
-    id: 5,
-    category: 1,
-    price: "39.000",
-    name: "سالاد فصل",
-    contains: "کاهو / گوجه / خیار / پنیر فتا"
-  },
-  {
-    id: 6,
-    category: 3,
-    price: "59.000",
-    name: "پاستا گوشت",
-    contains: "گوشت گوساله / پاستا / سس گوجه"
-  },
-  {
-    id: 7,
-    category: 2,
-    price: "49.000",
-    name: "ساندویچ تن ماهی",
-    contains: "تن ماهی / کاهو / گوجه / سس مایونز"
-  },
-  {
-    id: 8,
-    category: 0,
-    price: "79.000",
-    name: "کباب گوشت گوسفندی",
-    contains: "گوشت گوسفندی / سس سفید / قارچ و سیب زمینی"
-  },
-  {
-    id: 9,
-    category: 1,
-    price: "29.000",
-    name: "برگر مرغ",
-    contains: "مرغ / پنیر چدار / کاهو / گوجه"
-  },
-  {
-    id: 10,
-    category: 3,
-    price: "69.000",
-    name: "سالاد میگو",
-    contains: "میگو / کاهو / گوجه / خیار"
-  },
-  {
-    id: 11,
-    category: 2,
-    price: "39.000",
-    name: "ساندویچ شاورما",
-    contains: "مرغ / کاهو / گوجه / سس تارتار"
-  },
-  {
-    id: 12,
-    category: 0,
-    price: "99.000",
-    name: "کباب گوشت بوقلمون",
-    contains: "گوشت بوقلمون / سس سفید / قارچ و سیب زمینی"
-  },
-  {
-    id: 13,
-    category: 1,
-    price: "59.000",
-    name: "برگر ماهی",
-    contains: "ماهی / پنیر چدار / کاهو / گوجه"
-  },
-  {
-    id: 14,
-    category: 3,
-    price: "49.000",
-    name: "سالاد مرغ",
-    contains: "مرغ / کاهو / گوجه / خیار"
-  }
-];
+import CategoryScroll from "@/app/[name]/(Main)/components/CategoryScroll";
+import MenuFilterDrawer from "@/app/[name]/(Main)/components/MenuFilterDrawer";
+import MenuSortingDrawer from "@/app/[name]/(Main)/components/MenuSortingDrawer";
+import { useGetCategories, useGetFoods } from "./hooks/useMenuData";
 
 const sortings = [
   "PopularityDescending",
@@ -135,18 +26,18 @@ const sortings = [
 ]
 
 const MenuIndex = () => {
+  const { data: foodsData } = useGetFoods();
+  const { data: categoriesData } = useGetCategories();
+
+  const foods = useMemo(() => {
+    const foodsList = foodsData?.data || [];
+    return foodsList;
+  }, [foodsData?.data]);
+  const categories = useMemo(() => categoriesData?.data || [], [categoriesData?.data]);
   const { t: tCommon } = useTranslation('common');
   const { t: tMenu } = useTranslation('menu', {
     keyPrefix: "Menu"
   });
-  const contents: Array<ComboboxOption> = [
-    { id: '0', title: tMenu('MenuFilterDrawer.SelectContent.Options.Normal'), label: '' },
-    { id: '1', title: tMenu('MenuFilterDrawer.SelectContent.Options.Vegan'), label: '' },
-  ]
-
-  const shippings: Array<ComboboxOption> = [
-    { id: '0', title: tMenu('MenuFilterDrawer.SelectDelivery.Options.Courier'), label: '' },
-  ]
 
   const { state: filterModal, toggle: toggleFilterModal } = useToggle();
   const { state: sortingModal, toggle: toggleSortingModal } = useToggle();
@@ -188,62 +79,54 @@ const MenuIndex = () => {
     setSearch(e.target.value);
   }, [setSearch]);
 
-  const updateCategory = useCallback((id: number) => {
-    setSelectedCategory(String(id));
+  const updateCategory = useCallback((index: number) => {
+    setSelectedCategory(String(index));
   }, [setSelectedCategory]);
 
   const changeSorting = (index: number) => {
     setSorting(() => String(index));
   }
 
-  const changeSelectedIngredients = (e: React.MouseEvent<HTMLDivElement, MouseEvent>, index: number) => {
-    setSelectedIngredients(() => contents[index]?.id || contents[0].id);
-  }
+  const changeSelectedIngredients = useCallback((value: string) => {
+    setSelectedIngredients(() => value);
+  }, [setSelectedIngredients]);
 
-  const changeSelectedDelivery = (e: React.MouseEvent<HTMLDivElement, MouseEvent>, index: number) => {
-    setSelectedDeliveryId(() => contents[index]?.id || contents[0].id);
-  }
+  const changeSelectedDelivery = useCallback((value: string) => {
+    setSelectedDeliveryId(() => value);
+  }, [setSelectedDeliveryId]);
 
   const filteredReceiptItems = useMemo(() => {
+    if (!foods.length) return [];
+
     const lowerSearch = search.toLowerCase();
+    const selectedCatId = selectedCategory === '0' ? null : categories[+selectedCategory - 1]?.id;
+
     return foods.filter(
-      (item) =>
-        item.category === +selectedCategory &&
-        item.name.toLowerCase().includes(lowerSearch)
+      (item) => {
+        const matchesCategory = selectedCategory === '0' || item.category === selectedCatId;
+        const itemName = item.name || item.title || item.foodName || '';
+        const matchesSearch = !search || itemName.toLowerCase().includes(lowerSearch);
+        return matchesCategory && matchesSearch;
+      }
     );
-  }, [selectedCategory, search]);
+  }, [selectedCategory, search, foods, categories]);
 
 
   return (
     <div className="flex flex-col gap-4 items-center pt-8 mb-8" ref={wrapperRef}>
       <div className="w-full">
         <SearchBox value={search} placeholder={tCommon('SearchPlaceholder')} onChange={updateSearch} />
-        <HorizontalScrollView className="w-full noscrollbar mt-4! py-4!">
-          {categories.map((item, index) => (
-            <CategoryItemRenderer
-              key={index}
-              className={clsx(
-                index === +selectedCategory && "bg-container!",
-              )}
-              onClick={() => updateCategory(index)}
-            >
-              <Image
-                priority
-                src="/assets/images/food-image.png"
-                width={32}
-                height={32}
-                alt="category image"
-              />
-              <span className="text-xs text-foreground">{item.title}</span>
-            </CategoryItemRenderer>
-          ))}
-        </HorizontalScrollView>
+        <CategoryScroll
+          categories={categories}
+          selectedCategory={selectedCategory}
+          onSelect={updateCategory}
+        />
       </div>
 
       <section className="w-full">
         <div className="flex justify-between items-center relative" ref={smallCategoriesRef} >
           <span className="text-base font-medium">
-            {categories[+selectedCategory]?.title}
+            {selectedCategory === '0' ? 'همه' : categories[+selectedCategory - 1]?.title || ''}
           </span>
           <div className="inline-flex gap-2 justify-around items-center">
             <button onClick={toggleFilterModal} className="rounded-xl h-8 bg-container ps-4 pe-2 py-1.5 inline-flex items-center justify-between gap-[7px]">
@@ -264,98 +147,46 @@ const MenuIndex = () => {
             'fixed left-0 z-10 top-0 px-4 pt-16 bg-[#F4F5F9CC] dark:bg-background/70 backdrop-blur-[44px] right-0 xl:pr-72 xl:pt-20',
             ``
           )}>
-          <HorizontalScrollView className="w-full noscrollbar py-4!">
-            {categories.map((item, index) => (
-              <CategorySmallItemRenderer
-                key={index}
-                className={clsx(
-                  index === +selectedCategory && "bg-container!",
-                )}
-                onClick={() => updateCategory(index)}
-              >
-                <Image
-                  priority
-                  src="/assets/images/food-image.png"
-                  width={24}
-                  height={24}
-                  alt="category image"
-                />
-                <span className="text-xs text-foreground">{item.title}</span>
-              </CategorySmallItemRenderer>
-            ))}
-          </HorizontalScrollView>
+          <CategoryScroll
+            categories={categories}
+            selectedCategory={selectedCategory}
+            onSelect={updateCategory}
+            variant="small"
+          />
         </motion.div>
 
         <VerticalScrollView className="mt-5! overflow-y-auto h-full">
-          {filteredReceiptItems.map((food) => (
-            <MenuItemRenderer key={food.id}>
-              <MenuItem food={food} />
-            </MenuItemRenderer>
-          ))}
+          {filteredReceiptItems.length === 0 ? (
+            <div className="text-center text-foreground/60 py-8">
+              {foodsData ? 'غذایی یافت نشد' : 'در حال بارگذاری...'}
+            </div>
+          ) : (
+            filteredReceiptItems.map((food) => (
+              <MenuItemRenderer key={food.id}>
+                <MenuItem food={food} />
+              </MenuItemRenderer>
+            ))
+          )}
         </VerticalScrollView>
       </section>
 
-      <AnimatedBottomSheet title={tMenu('MenuFilterDrawer.Heading')} visible={filterModal} outDelay={150} onClick={toggleFilterModal}>
-        <div className="ps-8.5 pe-[31px] mt-[89px]">
-          <ComboBox
-            title={tMenu('MenuFilterDrawer.SelectContent.Label')}
-            options={contents}
-            selectedId={selectedIngredients}
-            onSelectionChange={changeSelectedIngredients} />
-          <ComboBox
-            className="relative mt-9.5"
-            title={tMenu('MenuFilterDrawer.SelectDelivery.Label')}
-            options={shippings}
-            selectedId={selectedDeliveryId}
-            onSelectionChange={changeSelectedDelivery} />
-          <div
-            className="flex w-full mt-[23px] h-11 items-center justify-between gap-2 px-3 py-4 relative bg-container/29 rounded-xl border border-solid border-border cursor-pointer focus:outline-none focus:ring-2 focus:ring-black"
-          >
-            <span className="inline-flex items-center gap-2.5 text-sm2">
-              <MedalStar size="16" className="stroke-foreground" />
-              {tMenu('MenuFilterDrawer.PlusPoint')}
-            </span>
-            <Switch className="w-12 h-6" />
-          </div>
-          <div
-            className="flex w-full mt-[23px] h-11 items-center justify-between gap-2 px-3 py-4 relative bg-container/29 rounded-xl border border-solid border-border cursor-pointer focus:outline-none focus:ring-2 focus:ring-black"
-          >
-            <span className="inline-flex items-center gap-2.5 text-sm2">
-              <TicketPercentIcon size={16} />
-              {tMenu('MenuFilterDrawer.DiscountState')}
-            </span>
-            <Switch />
-          </div>
-        </div>
-        <hr className="text-white/40  mt-12" />
-        <div className="px-9 pt-6 flex justify-between gap-[22px]">
-          <div className="w-full">
-            <Button>
-              {tMenu('MenuFilterDrawer.ButtonOk')}
-            </Button>
-          </div>
-          <div className="w-full">
-            <Button className="bg-disabled! text-disabled-text!">
-              {tMenu('MenuFilterDrawer.ButtonCancel')}
-            </Button>
-          </div>
-        </div>
-      </AnimatedBottomSheet>
+      <MenuFilterDrawer
+        visible={filterModal}
+        onClose={toggleFilterModal}
+        selectedIngredients={selectedIngredients}
+        selectedDeliveryId={selectedDeliveryId}
+        onIngredientsChange={changeSelectedIngredients}
+        onDeliveryChange={changeSelectedDelivery}
+        tMenu={tMenu}
+      />
 
-      <AnimatedBottomSheet title={tMenu('MenuSortingDrawer.Heading')} visible={sortingModal} inDelay={150} onClick={toggleSortingModal}>
-        <div className="px-8.5 py-10 justify-between">
-          {sortings.map((v, i) => {
-            return (
-              <div key={i}>
-                <div onClick={() => changeSorting(i)} className="text-sm2 font-normal cursor-pointer">
-                  {tMenu('MenuSortingDrawer.Options.' + v)}
-                </div>
-                {i < sortings.length - 1 && <hr className="border-white/40 dark:border-border mb-4 mt-4" />}
-              </div>
-            )
-          })}
-        </div>
-      </AnimatedBottomSheet>
+      <MenuSortingDrawer
+        visible={sortingModal}
+        onClose={toggleSortingModal}
+        sortings={sortings}
+        onSelect={changeSorting}
+        tMenu={tMenu}
+      />
     </div>
   );
 };