remove ssr
This commit is contained in:
hamid zarghami
@@ -0,0 +1,250 @@
|
||||
'use client';
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import SearchBox from "@/components/input/SearchBox";
|
||||
import TextAlignIcon from "@/components/icons/TextAlignIcon";
|
||||
import VerticalScrollView from "@/components/listview/VerticalScrollView";
|
||||
import MenuItemRenderer from "@/components/listview/MenuItemRenderer";
|
||||
import MenuItem from "@/components/listview/MenuItem";
|
||||
import { Candle2 } from "iconsax-react";
|
||||
import { useQueryState } from "next-usequerystate";
|
||||
import clsx from "clsx";
|
||||
import { motion } from "framer-motion";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import useToggle from "@/hooks/helpers/useToggle";
|
||||
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 MenuSkeleton from "@/app/[name]/(Main)/components/MenuSkeleton";
|
||||
import { useGetCategories, useGetFoods } from "../hooks/useMenuData";
|
||||
import type { Food, Category } from "../types/Types";
|
||||
|
||||
const sortings = ["PopularityDescending", "RateDescending", "PriceAscending", "PriceDescending"] as const;
|
||||
|
||||
const MenuIndex = () => {
|
||||
const { data: foodsData, isLoading: foodsLoading } = useGetFoods();
|
||||
const { data: categoriesData, isLoading: categoriesLoading } = useGetCategories();
|
||||
const foods = useMemo<Food[]>(() => foodsData?.data || [], [foodsData?.data]);
|
||||
const categories = useMemo<Category[]>(() => categoriesData?.data || [], [categoriesData?.data]);
|
||||
|
||||
const isLoading = foodsLoading || categoriesLoading;
|
||||
const { t: tCommon } = useTranslation('common');
|
||||
const { t: tMenu } = useTranslation('menu', { keyPrefix: "Menu" });
|
||||
const { state: filterModal, toggle: toggleFilterModal } = useToggle();
|
||||
const { state: sortingModal, toggle: toggleSortingModal } = useToggle();
|
||||
const [sorting, setSorting] = useQueryState('sortBy', { defaultValue: '0' });
|
||||
const [search, setSearch] = useQueryState("q", { defaultValue: '' });
|
||||
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 wrapperRef: React.RefObject<HTMLDivElement | null> = useRef(null);
|
||||
const [smallCategoriesVisible, setSmallCategoriesVisibility] = useState(false);
|
||||
const [isInitialMount, setIsInitialMount] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
if (isInitialMount) {
|
||||
setSearch(null);
|
||||
setSelectedIngredients(null);
|
||||
setSelectedDeliveryId(null);
|
||||
setSorting(null);
|
||||
setIsInitialMount(false);
|
||||
}
|
||||
}, [isInitialMount, setSearch, setSelectedIngredients, setSelectedDeliveryId, setSorting]);
|
||||
|
||||
useEffect(() => {
|
||||
console.log('selectedCategory', selectedCategory);
|
||||
|
||||
if (categoriesData?.data && selectedCategory === '0') {
|
||||
setSelectedCategory(categoriesData?.data?.[0]?.id)
|
||||
}
|
||||
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [selectedCategory, categoriesData])
|
||||
|
||||
|
||||
const onScroll = useCallback(() => {
|
||||
if (!wrapperRef?.current?.parentElement?.parentElement?.scrollTop || !smallCategoriesRef.current?.offsetTop) return;
|
||||
|
||||
if (wrapperRef.current.parentElement?.parentElement.scrollTop >= smallCategoriesRef.current.offsetTop) {
|
||||
setSmallCategoriesVisibility(true);
|
||||
} else {
|
||||
setSmallCategoriesVisibility(false);
|
||||
}
|
||||
}, [wrapperRef, smallCategoriesRef]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!wrapperRef.current) return;
|
||||
|
||||
const parent = wrapperRef.current.parentElement?.parentElement;
|
||||
if (!parent) return;
|
||||
|
||||
parent.addEventListener('scroll', onScroll);
|
||||
|
||||
return () => {
|
||||
parent.removeEventListener('scroll', onScroll);
|
||||
}
|
||||
}, [onScroll]);
|
||||
|
||||
|
||||
const updateSearch = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setSearch(e.target.value);
|
||||
}, [setSearch]);
|
||||
|
||||
const updateCategory = useCallback((categoryId: string) => {
|
||||
setSelectedCategory(categoryId);
|
||||
}, [setSelectedCategory]);
|
||||
|
||||
const sortingIndex = Number(sorting);
|
||||
const activeSortingIndex = Number.isNaN(sortingIndex) ? 0 : sortingIndex;
|
||||
const activeSortingKey = sortings[activeSortingIndex] ?? sortings[0];
|
||||
const activeSortingLabel = tMenu(`MenuSortingDrawer.Options.${activeSortingKey}`);
|
||||
|
||||
const changeSorting = (index: number) => {
|
||||
setSorting(() => String(index));
|
||||
toggleSortingModal();
|
||||
};
|
||||
|
||||
const changeSelectedIngredients = useCallback((value: string) => {
|
||||
setSelectedIngredients(value);
|
||||
}, [setSelectedIngredients]);
|
||||
|
||||
const changeSelectedDelivery = useCallback((value: string) => {
|
||||
setSelectedDeliveryId(() => value);
|
||||
}, [setSelectedDeliveryId]);
|
||||
|
||||
const filteredReceiptItems = useMemo(() => {
|
||||
if (!foods.length) return [];
|
||||
const lowerSearch = search.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 matchesIngredients = !selectedIngredients ||
|
||||
(() => {
|
||||
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);
|
||||
|
||||
return matchesCategory && matchesSearch && matchesIngredients && matchesDelivery;
|
||||
});
|
||||
|
||||
const sortingKey = sortings[Number(sorting)] || sortings[0];
|
||||
|
||||
return [...filtered].sort((a, b) => {
|
||||
switch (sortingKey) {
|
||||
case "PopularityDescending":
|
||||
case "RateDescending":
|
||||
return 0;
|
||||
case "PriceAscending":
|
||||
return (a.price ?? 0) - (b.price ?? 0);
|
||||
case "PriceDescending":
|
||||
return (b.price ?? 0) - (a.price ?? 0);
|
||||
default:
|
||||
return 0;
|
||||
}
|
||||
});
|
||||
}, [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="w-full">
|
||||
<SearchBox value={search} placeholder={tCommon('SearchPlaceholder')} onChange={updateSearch} />
|
||||
<CategoryScroll
|
||||
categories={categories}
|
||||
selectedCategory={selectedCategory}
|
||||
onSelect={updateCategory}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<section className="w-full">
|
||||
<div className="flex gap-2 justify-between items-center relative" ref={smallCategoriesRef} >
|
||||
<span className="sm:text-base text-sm font-medium">
|
||||
{selectedCategory === '0' ? '' : categories.find(c => c.id === selectedCategory)?.title || ''}
|
||||
</span>
|
||||
<div className="inline-flex min-w-[247px] 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]">
|
||||
<Candle2 className="stroke-foreground" size={16} />
|
||||
<span className="text-xs leading-5 font-medium">{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"
|
||||
>
|
||||
<TextAlignIcon className="text-foreground" />
|
||||
<span className="text-xs leading-5 font-medium">{activeSortingLabel}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={{ y: smallCategoriesVisible ? 0 : -50, opacity: smallCategoriesVisible ? 1 : 0 }}
|
||||
animate={{ y: smallCategoriesVisible ? 0 : -50, opacity: smallCategoriesVisible ? 1 : 0 }}
|
||||
transition={{ duration: .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',
|
||||
``
|
||||
)}>
|
||||
<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>
|
||||
) : (
|
||||
filteredReceiptItems.map((food) => (
|
||||
<MenuItemRenderer key={food.id}>
|
||||
<MenuItem food={food} />
|
||||
</MenuItemRenderer>
|
||||
))
|
||||
)}
|
||||
</VerticalScrollView>
|
||||
</section>
|
||||
|
||||
<MenuFilterDrawer
|
||||
visible={filterModal}
|
||||
onClose={toggleFilterModal}
|
||||
selectedIngredients={selectedIngredients}
|
||||
selectedDeliveryId={selectedDeliveryId}
|
||||
onIngredientsChange={changeSelectedIngredients}
|
||||
onDeliveryChange={changeSelectedDelivery}
|
||||
onApply={() => { }}
|
||||
tMenu={tMenu}
|
||||
/>
|
||||
|
||||
<MenuSortingDrawer
|
||||
visible={sortingModal}
|
||||
onClose={toggleSortingModal}
|
||||
sortings={sortings}
|
||||
activeIndex={activeSortingIndex}
|
||||
onSelect={changeSorting}
|
||||
tMenu={tMenu}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MenuIndex;
|
||||
Reference in New Issue
Block a user