initial commit

frontend/src/pages/AddRecipe.tsx

@@ -0,0 +1,39 @@
+import { addRecipe } from "../services/backend.js";
+
+function AddRecipe() {
+  const addRecipeForm = async (event: React.FormEvent) => {
+    event.preventDefault();
+    const nameElement = document.getElementById('ar-name') as HTMLInputElement | null;
+    const cuisineElement = document.getElementById('ar-cuisine') as HTMLInputElement | null;
+
+    if (nameElement && cuisineElement) {
+
+      const name = nameElement.value;
+      const cuisine = cuisineElement.value;
+      await addRecipe(name, cuisine);
+    }
+
+  }
+  return (
+    <div className="add-recipe-outer">
+      <form onSubmit={addRecipeForm} className="add-recipe-form">
+        <input
+          type="text"
+          placeholder="name"
+          className="ar-name"
+          id="ar-name"
+        />
+        <input
+          type="text"
+          placeholder="cuisine"
+          className="ar-cusine"
+          id="ar-cuisine"
+        />
+        <button type="submit" className="ar-button">
+          submit
+        </button>
+      </form>
+    </div>
+  )
+}
+export default AddRecipe

frontend/src/pages/Cookbook.tsx

@@ -0,0 +1,60 @@
+import CookbookRecipeTile from "../components/CookbookRecipeTile.tsx"
+import { useState, useEffect } from "react";
+import { getRecipes, deleteRecipe } from "../services/backend.js";
+import { type Recipe } from "../types/Recipe"
+
+function Cookbook() {
+  const [recipes, setRecipes] = useState([]);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [shouldFetchRecipes, setShouldFetchRecipes] = useState(true);
+
+  useEffect(() => {
+    const loadRecipes = async () => {
+      try {
+        const recipes = await getRecipes();
+        console.log(recipes)
+        console.log("here")
+        setRecipes(recipes);
+      } catch (error) {
+        console.log(error);
+        setError("Failed to load recipes...");
+      } finally {
+        setLoading(false);
+      }
+    };
+    if (shouldFetchRecipes) {
+      loadRecipes().then(() => setShouldFetchRecipes(false));
+    }
+  }, [shouldFetchRecipes]);
+
+  const handleDelete = async (id) => {
+    try {
+      await deleteRecipe(id);
+      // Trigger a re-fetch by setting the state variable to true
+      setShouldFetchRecipes(true);
+    } catch (error) {
+      console.error("Error deleting recipe:", error);
+    }
+  };
+
+
+  return (
+    <div className="home">
+
+      {error && <div className="error-message">{error}</div>}
+
+      {loading ? (
+        <div className="loading">Loading...</div>
+      ) : (
+        <div className="recipes-grid">
+          {recipes.map((recipe: Recipe) => (
+            <CookbookRecipeTile recipe={recipe} key={recipe.id} handleDelete={handleDelete} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default Cookbook;

frontend/src/pages/RecipePage.tsx

@@ -0,0 +1,45 @@
+import RecipeCard from "../components/RecipeCard.tsx"
+import { useParams } from "react-router-dom";
+import { useState, useEffect } from "react";
+import { getRecipeById } from "../services/backend.js";
+import { type Recipe } from "../types/Recipe"
+
+function RecipePage() {
+  const [recipe, setRecipe] = useState<Recipe>({});
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const { id } = useParams();
+
+  useEffect(() => {
+    const loadRecipe = async () => {
+      try {
+        const recipe = await getRecipeById(id);
+        setRecipe(recipe);
+        console.log(recipe)
+      } catch (error) {
+        console.log(error);
+        setError("Failed to load recipes...");
+      } finally {
+        setLoading(false);
+      }
+    };
+    loadRecipe();
+  }, []);
+
+  return (
+    <div className="recipe">
+
+      {error && <div className="error-message">{error}</div>}
+
+      {loading ? (
+        <div className="loading">Loading...</div>
+      ) : (
+        <div className="recipe-card">
+          <RecipeCard recipe={recipe} key={recipe.id} />
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default RecipePage;