diff --git a/app/dashboard/user/page.tsx b/app/dashboard/user/page.tsx index 6667c57..db46fa9 100644 --- a/app/dashboard/user/page.tsx +++ b/app/dashboard/user/page.tsx @@ -4,7 +4,7 @@ import RecipeCard from '@/components/RecipeCard' import { Book, LogOut, Refrigerator, Search } from 'lucide-react' import SignOut from '@/components/sign-out' import { Prisma } from '@prisma/client' -import { useState, useEffect } from 'react' +import { useState, useEffect, ChangeEvent } from 'react' import axios from 'axios' import { signOut } from 'next-auth/react' @@ -57,6 +57,14 @@ export default function UserDashboard() { const [showPantry, setShowPantry] = useState(true) const [userIngArr, setUserIngArr] = useState([0]) + const [ingredientSearch, setIngredientSearch] = useState('') + const [recipeSearch, setRecipeSearch] = useState('') + const [filteredCategories, setFilteredCategories] = useState< + Category[] | null + >(null) + + const [filteredRecipes, setFilteredRecipes] = useState(null) + const handlePantryClick = () => { setShowPantry(true) } @@ -99,6 +107,52 @@ export default function UserDashboard() { fetchData() }, []) + useEffect(() => { + if (ingredients && ingredientSearch) { + const filteredCategories = categories?.filter((category) => { + const categoryMatch = category.name + .toLowerCase() + .includes(ingredientSearch.toLowerCase()) + const filteredIngredients = category.ingredients.filter((ingredient) => + ingredient.name + .toLowerCase() + .includes(ingredientSearch.toLowerCase()), + ) + return categoryMatch || filteredIngredients.length > 0 + }) + setFilteredCategories(filteredCategories || null) + } else { + setFilteredCategories(categories) + } + }, [ingredients, categories, ingredientSearch]) + + useEffect(() => { + const filterRecipes = () => { + if (!recipeSearch) { + setFilteredRecipes(recipes) + } else { + const filtered = recipes?.filter((recipe) => + recipe.name.toLowerCase().includes(recipeSearch.toLowerCase()), + ) + setFilteredRecipes(filtered || null) // Handle undefined case + } + } + + filterRecipes() + }, [recipeSearch, recipes]) + + const handleIngredientSearchQueryChange = ( + event: ChangeEvent, + ) => { + setIngredientSearch(event.target.value) + } + + const handleRecipeSearchQueryChange = ( + event: ChangeEvent, + ) => { + setRecipeSearch(event.target.value) + } + const matchingRecipes = recipes?.filter((e) => { const matchingIngredients = e.ingredients.filter((ce) => userIngArr.includes(ce.ingredientId), @@ -154,10 +208,13 @@ export default function UserDashboard() {
+ @@ -166,7 +223,16 @@ export default function UserDashboard() { {/* */}
{/* IngredientCard */} - {categories.map((e, i) => ( + {/* {categories.map((e, i) => ( + + ))} */} + {filteredCategories?.map((e, i) => (