add search

frontend/src/api/recipePoint.ts

@@ -24,10 +24,17 @@ export async function fetchRecipe(id: string): Promise<Recipe> {
 
 /**
  * Load list of all recipes
+ * @param searchString Search string for filtering recipeList
  * @returns Array of recipe
  */
-export async function fetchRecipeList(): Promise<Recipe[]> {
-  const res = await fetch(`${RECIPE_URL}/`)
+export async function fetchRecipeList(searchString : string): Promise<Recipe[]> {
+  let url : string = RECIPE_URL;
+  // if there's a search string add it as query parameter
+  if(searchString && searchString !== ""){
+    url +="?search=" + searchString;
+  }
+  console.log("calling url", url)
+  const res = await fetch(url)
   if (!res.ok) {
     throw new Error(`Failed to fetch recipe list`)
   }

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}