From 6f729938c07112f3f7fb5fe2ce269f7839911c5e Mon Sep 17 00:00:00 2001 From: hamid zarghami Date: Mon, 15 Jun 2026 15:08:55 +0330 Subject: [PATCH] space fit --- .../(Main)/components/CategoryScroll.tsx | 49 +----- .../[name]/(Main)/components/MenuIndex.tsx | 156 ++++-------------- .../[name]/(Main)/components/MenuSkeleton.tsx | 8 +- 3 files changed, 41 insertions(+), 172 deletions(-) diff --git a/src/app/[name]/(Main)/components/CategoryScroll.tsx b/src/app/[name]/(Main)/components/CategoryScroll.tsx index ed8652b..c3ed708 100644 --- a/src/app/[name]/(Main)/components/CategoryScroll.tsx +++ b/src/app/[name]/(Main)/components/CategoryScroll.tsx @@ -19,17 +19,7 @@ const SVG_MASK_STYLE = { WebkitMaskPosition: "center", } as const; -function CategoryImage({ - src, - size, - alt, - tintWithPrimary = true, -}: { - src: string; - size: number; - alt: string; - tintWithPrimary?: boolean; -}) { +function CategoryImage({ src, size, alt, tintWithPrimary = true }: { src: string; size: number; alt: string; tintWithPrimary?: boolean }) { const isSvg = src.endsWith(".svg"); const shouldUseSvgMask = isSvg && tintWithPrimary; @@ -93,29 +83,15 @@ type Props = { className?: string; }; -const CategoryScroll = ({ - categories, - selectedCategory, - onSelect, - variant = "large", - className, -}: Props) => { +const CategoryScroll = ({ categories, selectedCategory, onSelect, variant = "large", className }: Props) => { const segment = usePathname()?.split("/").filter(Boolean)[0]; - const usesColoredSvg = - segment != null && - COLORED_SVG_RESTAURANT_SLUGS.has(segment.toLowerCase()); + const usesColoredSvg = segment != null && COLORED_SVG_RESTAURANT_SLUGS.has(segment.toLowerCase()); const { renderer: Renderer, imageSize } = variantConfig[variant]; const handleSelect = (categoryId: string) => () => onSelect(categoryId); return ( - + {/* - - - {item.title} - + + + {item.title} ); })} diff --git a/src/app/[name]/(Main)/components/MenuIndex.tsx b/src/app/[name]/(Main)/components/MenuIndex.tsx index 1f5efbf..013ec15 100644 --- a/src/app/[name]/(Main)/components/MenuIndex.tsx +++ b/src/app/[name]/(Main)/components/MenuIndex.tsx @@ -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(() => foodsData?.data || [], [foodsData?.data]); - const categories = useMemo( - () => categoriesData?.data || [], - [categoriesData?.data], - ); + const categories = useMemo(() => 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 = - useRef(null); + const [selectedIngredients, setSelectedIngredients] = useQueryState("ingredients", { defaultValue: "" }); + const [selectedDeliveryId, setSelectedDeliveryId] = useQueryState("delivery", { defaultValue: "0" }); + const smallCategoriesRef: React.RefObject = useRef(null); const wrapperRef: React.RefObject = 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 ; } return ( -
+
- - + +
-
- - {selectedCategory === "0" - ? "" - : categories.find((c) => c.id === selectedCategory)?.title || ""} - +
+ {selectedCategory === "0" ? "" : categories.find((c) => c.id === selectedCategory)?.title || ""}
- -
@@ -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")} > - + {filteredReceiptItems.length === 0 ? ( -
- {foodsData ? "غذایی یافت نشد" : "در حال بارگذاری..."} -
+
{foodsData ? "غذایی یافت نشد" : "در حال بارگذاری..."}
) : ( filteredReceiptItems.map((food) => ( @@ -314,14 +225,7 @@ const MenuIndex = () => { tMenu={tMenu} /> - +
); }; diff --git a/src/app/[name]/(Main)/components/MenuSkeleton.tsx b/src/app/[name]/(Main)/components/MenuSkeleton.tsx index 1c81441..7323da7 100644 --- a/src/app/[name]/(Main)/components/MenuSkeleton.tsx +++ b/src/app/[name]/(Main)/components/MenuSkeleton.tsx @@ -1,12 +1,12 @@ -'use client'; +"use client"; -import { Skeleton } from "@/components/ui/skeleton"; -import VerticalScrollView from "@/components/listview/VerticalScrollView"; import MenuItemRenderer from "@/components/listview/MenuItemRenderer"; +import VerticalScrollView from "@/components/listview/VerticalScrollView"; +import { Skeleton } from "@/components/ui/skeleton"; const MenuSkeleton = () => { return ( -
+