Load and save recipes from backend

frontend/src/components/recipes/RecipeListPage.tsx

@@ -1,17 +1,38 @@
-import { recipes } from "../../mock_data/recipes"
+import { useEffect, useState } from "react"
 import RecipeListItem from "./RecipeListItem"
+import type { Recipe } from "../../types/recipe"
+import { fetchRecipeList } from "../../api/recipePoint"
 
 /**
  * Displays a list of recipes in a sidebar layout.
  * Each recipe link fills the available width.
  */
 export default function RecipeListPage() {
+
+    const [recipeList, setRecipeList] = useState<Recipe[]|null>(null)
+    // load recipes once on render
+      useEffect(() => {
+        const loadRecipeList = async () => { 
+            try {
+              // Fetch recipe data when editing an existing one
+              console.log("loading recipe list")
+              const data = await fetchRecipeList()
+              setRecipeList(data)
+            } catch (err) {
+              console.error(err)
+            }
+        }
+        loadRecipeList()
+      }, [])
+  
+  if(!recipeList) { return <div>Unable to load recipes1</div>}
+  // @todo find a better representation than an oldfashioned sidebar
   return (
     <div className="sidebar">
       <h1 className="sidebar-title">Recipes</h1>
 
       <div className="flex flex-col gap-2">
-        {recipes.map((recipe) => (
+        {recipeList.map((recipe) => (
           <RecipeListItem 
             key={recipe.id}
             title = {recipe.title}