space fit

2026-06-15 15:08:55 +03:30
parent c3afcda135
commit 6f729938c0
3 changed files with 41 additions and 172 deletions
@@ -18,22 +18,13 @@ import { useTranslation } from "react-i18next";
 import { useGetCategories, useGetFoods } from "../hooks/useMenuData";
 import type { Category, Food } from "../types/Types";

-const sortings = [
-  "PopularityDescending",
-  "RateDescending",
-  "PriceAscending",
-  "PriceDescending",
-] as const;
+const sortings = ["PopularityDescending", "RateDescending", "PriceAscending", "PriceDescending"] as const;

 const MenuIndex = () => {
  const { data: foodsData, isLoading: foodsLoading } = useGetFoods();
-  const { data: categoriesData, isLoading: categoriesLoading } =
-    useGetCategories();
+  const { data: categoriesData, isLoading: categoriesLoading } = useGetCategories();
  const foods = useMemo<Food[]>(() => foodsData?.data || [], [foodsData?.data]);
-  const categories = useMemo<Category[]>(
-    () => categoriesData?.data || [],
-    [categoriesData?.data],
-  );
+  const categories = useMemo<Category[]>(() => categoriesData?.data || [], [categoriesData?.data]);

  const isLoading = foodsLoading || categoriesLoading;
  const { t: tCommon } = useTranslation("common");
@@ -45,19 +36,11 @@ const MenuIndex = () => {
  const [selectedCategory, setSelectedCategory] = useQueryState("category", {
    defaultValue: "0",
  });
-  const [selectedIngredients, setSelectedIngredients] = useQueryState(
-    "ingredients",
-    { defaultValue: "" },
-  );
-  const [selectedDeliveryId, setSelectedDeliveryId] = useQueryState(
-    "delivery",
-    { defaultValue: "0" },
-  );
-  const smallCategoriesRef: React.RefObject<HTMLDivElement | null> =
-    useRef(null);
+  const [selectedIngredients, setSelectedIngredients] = useQueryState("ingredients", { defaultValue: "" });
+  const [selectedDeliveryId, setSelectedDeliveryId] = useQueryState("delivery", { defaultValue: "0" });
+  const smallCategoriesRef: React.RefObject<HTMLDivElement | null> = useRef(null);
  const wrapperRef: React.RefObject<HTMLDivElement | null> = useRef(null);
-  const [smallCategoriesVisible, setSmallCategoriesVisibility] =
-    useState(false);
+  const [smallCategoriesVisible, setSmallCategoriesVisibility] = useState(false);
  const [isInitialMount, setIsInitialMount] = useState(true);

  useEffect(() => {
@@ -68,13 +51,7 @@ const MenuIndex = () => {
      setSorting(null);
      setIsInitialMount(false);
    }
-  }, [
-    isInitialMount,
-    setSearch,
-    setSelectedIngredients,
-    setSelectedDeliveryId,
-    setSorting,
-  ]);
+  }, [isInitialMount, setSearch, setSelectedIngredients, setSelectedDeliveryId, setSorting]);

  useEffect(() => {
    if (categoriesData?.data && selectedCategory === "0") {
@@ -92,9 +69,7 @@ const MenuIndex = () => {

    const handleScroll = () => {
      if (!smallCategoriesRef.current) return;
-      setSmallCategoriesVisibility(
-        scrollContainer.scrollTop >= smallCategoriesRef.current.offsetTop,
-      );
+      setSmallCategoriesVisibility(scrollContainer.scrollTop >= smallCategoriesRef.current.offsetTop);
    };

    scrollContainer.addEventListener("scroll", handleScroll, { passive: true });
@@ -122,9 +97,7 @@ const MenuIndex = () => {
  const sortingIndex = Number(sorting);
  const activeSortingIndex = Number.isNaN(sortingIndex) ? 0 : sortingIndex;
  const activeSortingKey = sortings[activeSortingIndex] ?? sortings[0];
-  const activeSortingLabel = tMenu(
-    `MenuSortingDrawer.Options.${activeSortingKey}`,
-  );
+  const activeSortingLabel = tMenu(`MenuSortingDrawer.Options.${activeSortingKey}`);

  const changeSorting = (index: number) => {
    setSorting(() => String(index));
@@ -148,43 +121,26 @@ const MenuIndex = () => {
  const filteredReceiptItems = useMemo(() => {
    if (!foods.length) return [];
    const lowerSearch = search.toLowerCase();
-    const lowerIngredients = selectedIngredients
-      ? selectedIngredients.toLowerCase()
-      : "";
+    const lowerIngredients = selectedIngredients ? selectedIngredients.toLowerCase() : "";
    const selectedCatId = selectedCategory === "0" ? null : selectedCategory;

    const filtered = foods.filter((item) => {
      const matchesCategory = !selectedCatId || item.category === selectedCatId;
      const itemName = item.title;
-      const matchesSearch =
-        !search || itemName.toLowerCase().includes(lowerSearch);
+      const matchesSearch = !search || itemName.toLowerCase().includes(lowerSearch);

      const matchesIngredients =
        !selectedIngredients ||
        (() => {
-          if (
-            item.content &&
-            Array.isArray(item.content) &&
-            item.content.length > 0
-          ) {
-            return item.content.some((content: string) =>
-              content.toLowerCase().includes(lowerIngredients),
-            );
+          if (item.content && Array.isArray(item.content) && item.content.length > 0) {
+            return item.content.some((content: string) => content.toLowerCase().includes(lowerIngredients));
          }
          return item.desc.toLowerCase().includes(lowerIngredients);
        })();

-      const matchesDelivery =
-        selectedDeliveryId === "0" ||
-        (selectedDeliveryId === "pickup" && item.pickupServe) ||
-        (selectedDeliveryId === "inPlace" && item.inPlaceServe);
+      const matchesDelivery = selectedDeliveryId === "0" || (selectedDeliveryId === "pickup" && item.pickupServe) || (selectedDeliveryId === "inPlace" && item.inPlaceServe);

-      return (
-        matchesCategory &&
-        matchesSearch &&
-        matchesIngredients &&
-        matchesDelivery
-      );
+      return matchesCategory && matchesSearch && matchesIngredients && matchesDelivery;
    });

    const sortingKey = sortings[Number(sorting)] || sortings[0];
@@ -202,65 +158,30 @@ const MenuIndex = () => {
          return 0;
      }
    });
-  }, [
-    selectedCategory,
-    search,
-    selectedIngredients,
-    selectedDeliveryId,
-    foods,
-    sorting,
-  ]);
+  }, [selectedCategory, search, selectedIngredients, selectedDeliveryId, foods, sorting]);

  if (isLoading) {
    return <MenuSkeleton />;
  }

  return (
-    <div
-      className="flex flex-col gap-4 items-center pt-8 mb-8"
-      ref={wrapperRef}
-    >
+    <div className="flex flex-col gap-4 items-center pt-5 mb-8" ref={wrapperRef}>
      <div className="w-full">
-        <SearchBox
-          value={search}
-          placeholder={tCommon("SearchPlaceholder")}
-          onChange={updateSearch}
-        />
-        <CategoryScroll
-          categories={categories}
-          selectedCategory={selectedCategory}
-          onSelect={updateCategory}
-        />
+        <SearchBox value={search} placeholder={tCommon("SearchPlaceholder")} onChange={updateSearch} />
+        <CategoryScroll categories={categories} selectedCategory={selectedCategory} onSelect={updateCategory} />
      </div>

      <section className="w-full">
-        <div
-          className="flex flex-wrap gap-2 items-center relative"
-          ref={smallCategoriesRef}
-        >
-          <span className="sm:text-base text-sm font-medium max-w-[113px] sm:max-w-auto">
-            {selectedCategory === "0"
-              ? ""
-              : categories.find((c) => c.id === selectedCategory)?.title || ""}
-          </span>
+        <div className="flex flex-wrap gap-2 items-center relative" ref={smallCategoriesRef}>
+          <span className="sm:text-base text-sm font-medium max-w-[113px] sm:max-w-auto">{selectedCategory === "0" ? "" : categories.find((c) => c.id === selectedCategory)?.title || ""}</span>
          <div className="flex min-w-[247px] flex-1 gap-2 justify-end 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]"
-            >
+            <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]">
              <Candle2 className="stroke-foreground" size={16} />
-              <span className="text-xs leading-5 font-medium whitespace-nowrap">
-                {tMenu("MenuFilterDrawer.Label")}
-              </span>
+              <span className="text-xs leading-5 font-medium whitespace-nowrap">{tMenu("MenuFilterDrawer.Label")}</span>
            </button>
-            <button
-              onClick={toggleSortingModal}
-              className="rounded-xl h-8 bg-container ps-4 pe-2 py-1.5 inline-flex items-center gap-2"
-            >
+            <button onClick={toggleSortingModal} className="rounded-xl h-8 bg-container ps-4 pe-2 py-1.5 inline-flex items-center gap-2">
              <TextAlignIcon className="text-foreground" />
-              <span className="text-xs leading-5 font-medium whitespace-nowrap">
-                {activeSortingLabel}
-              </span>
+              <span className="text-xs leading-5 font-medium whitespace-nowrap">{activeSortingLabel}</span>
            </button>
          </div>
        </div>
@@ -275,24 +196,14 @@ const MenuIndex = () => {
            opacity: smallCategoriesVisible ? 1 : 0,
          }}
          transition={{ duration: 0.1 }}
-          className={clsx(
-            "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",
-            !smallCategoriesVisible && "pointer-events-none",
-          )}
+          className={clsx("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", !smallCategoriesVisible && "pointer-events-none")}
        >
-          <CategoryScroll
-            categories={categories}
-            selectedCategory={selectedCategory}
-            onSelect={updateCategory}
-            variant="small"
-          />
+          <CategoryScroll categories={categories} selectedCategory={selectedCategory} onSelect={updateCategory} variant="small" />
        </motion.div>

        <VerticalScrollView className="mt-5! overflow-y-auto h-full">
          {filteredReceiptItems.length === 0 ? (
-            <div className="text-center text-foreground/60 py-8">
-              {foodsData ? "غذایی یافت نشد" : "در حال بارگذاری..."}
-            </div>
+            <div className="text-center text-foreground/60 py-8">{foodsData ? "غذایی یافت نشد" : "در حال بارگذاری..."}</div>
          ) : (
            filteredReceiptItems.map((food) => (
              <MenuItemRenderer key={food.id}>
@@ -314,14 +225,7 @@ const MenuIndex = () => {
        tMenu={tMenu}
      />

-      <MenuSortingDrawer
-        visible={sortingModal}
-        onClose={toggleSortingModal}
-        sortings={sortings}
-        activeIndex={activeSortingIndex}
-        onSelect={changeSorting}
-        tMenu={tMenu}
-      />
+      <MenuSortingDrawer visible={sortingModal} onClose={toggleSortingModal} sortings={sortings} activeIndex={activeSortingIndex} onSelect={changeSorting} tMenu={tMenu} />
    </div>
  );
 };