more detail on index; move delete to recipe page

frontend/src/pages/RecipePage.tsx

@@ -1,9 +1,11 @@
-import { useParams } from "react-router-dom";
+import { useParams, useNavigate, Link } from "react-router-dom";
 import { useState, useEffect } from "react";
-import { getRecipeById } from "../services/frontendApi.js";
+import { getRecipeById, deleteRecipe } from "../services/frontendApi.js";
 import { type Recipe, type Ingredient } from "../types/Recipe"
 import StarRating from "../components/StarRating.tsx"
 import { setDBStars } from "../services/frontendApi.js";
+import Modal from '../components/Modal.tsx'
+import DemoModal from '../components/DemoModal.tsx'
 
 function RecipePage() {
   const [recipe, setRecipe] = useState<Recipe>({
@@ -13,21 +15,43 @@ function RecipePage() {
   });
   const [error, setError] = useState<string | null>(null);
   const [loading, setLoading] = useState(true);
+  const [stars, setStars] = useState<number>(0);
+  const [initialStars, setInitialStars] = useState<number | null>(null);
+  const [showConfirmModal, setShowConfirmModal] = useState(false);
+  const [showDemoModal, setShowDemoModal] = useState(false);
   const { id } = useParams();
   const isWebSource = recipe && recipe.details && recipe.details.author
     ? /http|com/.test(recipe.details.author) //etc
     : false;
-  const [stars, setStars] = useState<number>(0);
-  const [initialStars, setInitialStars] = useState<number | null>(null);
+  const navigate = useNavigate();
+
+  const openModal = () => { setShowConfirmModal(true) };
+  const closeModal = () => { setShowConfirmModal(false) };
+
+  const confirmDelete = () => {
+    if (process.env.NODE_ENV === 'demo') {
+      closeModal();
+      setShowDemoModal(true);
+    } else {
+      handleDelete(recipe.details.id);
+      closeModal();
+    }
+  };
 
   useEffect(() => {
     const loadRecipe = async () => {
       try {
         const recipe = await getRecipeById(id);
-        setRecipe(recipe);
-        setStars(recipe.details?.stars ?? 0)
-        setInitialStars(recipe.details?.stars ?? 0);
-        console.log(recipe)
+        if (!recipe.details) {
+          setError("Sorry, this recipe no longer exists")
+        } else {
+          setRecipe(recipe);
+          setStars(recipe.details?.stars ?? 0)
+          setInitialStars(recipe.details?.stars ?? 0);
+          if (process.env.NODE_ENV === 'dev') {
+            console.log(recipe)
+          }
+        }
       } catch (error) {
         console.log(error);
         setError("Failed to load recipes...");
@@ -49,16 +73,36 @@ function RecipePage() {
 
     updateStarsInDB();
   }, [stars]);
+
+  const handleDelete = async (id: number | void) => {
+    try {
+      await deleteRecipe(id);
+      navigate('/')
+    } catch (error) {
+      console.error("Error deleting recipe:", error);
+    }
+  };
   return (
     <div className="recipe page-outer">
 
-      {error && <div className="error-message">{error}</div>}
 
       {loading ? (
         <div className="loading">Loading...</div>
+      ) : error ? (
+        <div>
+          <div className="error-message text-lg">{error}</div>
+          <div className="m-2">
+            <Link to="/" className="ar-button bg-amber-600 text-white py-2 px-4 rounded hover:bg-amber-700">
+              Return to Cookbook
+            </Link>
+          </div>
+        </div>
       ) : (
 
-        <div className="recipe-card">
+        <div className="recipe-card relative">
+          <button onClick={openModal} className="ar-button bg-gray-200 text-white py-1 px-2 rounded hover:bg-gray-300 m-2 absolute top-0 right-0">
+            🗑️
+          </button>
           <div className="border-b-2 border-amber-300 pb-4 mb-6">
             <h3 className="text-2xl lg:text-3xl font-bold text-amber-900 mb-2">{recipe.details.name}</h3>
             <p className="text-amber-700 italic text-lg">{recipe.details.cuisine}</p>
@@ -110,8 +154,23 @@ function RecipePage() {
             </div>
           </div>
         </div>
+      )
+      }
+      <Modal
+        isOpen={showConfirmModal}
+        onClose={closeModal}
+        message="Are you sure you want to delete this recipe?"
+        confirmAction={confirmDelete}
+        cancelAction={closeModal}
+      />
+      {showDemoModal && (
+        <DemoModal
+          isOpen={showDemoModal}
+          onClose={() => setShowDemoModal(false)}
+          closeModal={() => setShowDemoModal(false)}
+        />
       )}
-    </div>
+    </div >
   );
 }