add search

frontend/src/components/recipes/RecipeListPage.tsx

@@ -3,7 +3,7 @@ import RecipeListItem from "./RecipeListItem"
 import type { Recipe } from "../../types/recipe"
 import { fetchRecipeList } from "../../api/recipePoint"
 import { useNavigate } from "react-router-dom"
-import { getRecipeAddUrl, getRecipeAddUrlDefinition, getRecipeDetailUrl } from "../../routes"
+import { getRecipeAddUrl, getRecipeDetailUrl } from "../../routes"
 
 /**
  * Displays a list of recipes in a sidebar layout.
@@ -13,24 +13,27 @@ export default function RecipeListPage() {
 
   const navigate = useNavigate()
   const [recipeList, setRecipeList] = useState<Recipe[]|null>(null)
-  // load recipes once on render
+  const [searchString, setSearchString] = useState<string>("")
+  // load recipes once on render and whenever search string changes
+  // @todo add delay. Only reload list if the search string hasn't changed for ~200 ms
     useEffect(() => {
+      console.log("loading recipe list with searchString", searchString)
       const loadRecipeList = async () => { 
           try {
             // Fetch recipe list
-            console.log("loading recipe list")
-            const data = await fetchRecipeList()
+            const data = await fetchRecipeList(searchString)
             setRecipeList(data)
           } catch (err) {
             console.error(err)
           }
       }
       loadRecipeList()
-    }, [])
+    }, [,searchString])
   
   const handleAdd = () => {
     navigate(getRecipeAddUrl())
   }
+
   if(!recipeList) { return <div>Unable to load recipes!</div>}
   return (
     /*Contaier spanning entire screen used to center content horizontally */
@@ -44,6 +47,9 @@ export default function RecipeListPage() {
             <label className="text-gray-500 w-2/3">{recipeList.length} Recipes</label>
             <input className="input-field"
               placeholder="Search"
+              onChange={e => {
+                setSearchString(e.target.value)
+              }}
             ></input>
             <button className="primary-button"
               onClick={handleAdd}