filter

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

@@ -31,11 +31,23 @@ const MenuIndex = () => {
   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: '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);
+      setSelectedCategory(null);
+      setSelectedIngredients(null);
+      setSelectedDeliveryId(null);
+      setSorting(null);
+      setIsInitialMount(false);
+    }
+  }, [isInitialMount, setSearch, setSelectedCategory, setSelectedIngredients, setSelectedDeliveryId, setSorting]);
 
   const onScroll = useCallback(() => {
     if (!wrapperRef?.current?.parentElement?.parentElement?.scrollTop || !smallCategoriesRef.current?.offsetTop) return;
@@ -80,7 +92,7 @@ const MenuIndex = () => {
   };
 
   const changeSelectedIngredients = useCallback((value: string) => {
-    setSelectedIngredients(() => value);
+    setSelectedIngredients(value);
   }, [setSelectedIngredients]);
 
   const changeSelectedDelivery = useCallback((value: string) => {
@@ -90,6 +102,7 @@ const MenuIndex = () => {
   const filteredReceiptItems = useMemo(() => {
     if (!foods.length) return [];
     const lowerSearch = search.toLowerCase();
+    const lowerIngredients = selectedIngredients ? selectedIngredients.toLowerCase() : "";
     const selectedCatId =
       selectedCategory === "0" ? null : categories[+selectedCategory - 1]?.id;
 
@@ -99,7 +112,18 @@ const MenuIndex = () => {
       const itemName = item.name || item.title || item.foodName || "";
       const matchesSearch =
         !search || itemName.toLowerCase().includes(lowerSearch);
-      return matchesCategory && matchesSearch;
+
+      const matchesIngredients = !selectedIngredients ||
+        (item.content && Array.isArray(item.content) &&
+          item.content.some((content: string) =>
+            content.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];
@@ -118,7 +142,7 @@ const MenuIndex = () => {
           return 0;
       }
     });
-  }, [selectedCategory, search, foods, categories, sorting]);
+  }, [selectedCategory, search, selectedIngredients, selectedDeliveryId, foods, categories, sorting]);
   return (
     <div className="flex flex-col gap-4 items-center pt-8 mb-8" ref={wrapperRef}>
       <div className="w-full">
@@ -188,6 +212,7 @@ const MenuIndex = () => {
         selectedDeliveryId={selectedDeliveryId}
         onIngredientsChange={changeSelectedIngredients}
         onDeliveryChange={changeSelectedDelivery}
+        onApply={() => { }}
         tMenu={tMenu}
       />