recipe author and stars and a bit of cleanup

frontend/src/pages/RecipePage.tsx

@@ -2,22 +2,31 @@ import { useParams } from "react-router-dom";
 import { useState, useEffect } from "react";
 import { getRecipeById } from "../services/frontendApi.js";
 import { type Recipe, type Ingredient } from "../types/Recipe"
+import StarRating from "../components/StarRating.tsx"
+import { setDBStars } from "../services/frontendApi.js";
 
 function RecipePage() {
   const [recipe, setRecipe] = useState<Recipe>({
     details: {},
     ingredients: [],
-    steps: {}
+    steps: []
   });
   const [error, setError] = useState<string | null>(null);
   const [loading, setLoading] = useState(true);
   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);
 
   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)
       } catch (error) {
         console.log(error);
@@ -28,7 +37,21 @@ function RecipePage() {
     };
     loadRecipe();
   }, [id]);
+
+  useEffect(() => {
+    if (initialStars === null || initialStars === stars) {
+      return;
+    }
+
+    const updateStarsInDB = async () => {
+      await setDBStars(id, stars);
+    };
+
+    updateStarsInDB();
+  }, [stars]);
   console.log(recipe)
+  console.log(stars)
+  console.log(initialStars)
   return (
     <div className="recipe page-outer">
 
@@ -40,11 +63,11 @@ function RecipePage() {
 
         <div className="recipe-card">
           <div className="border-b-2 border-amber-300 pb-4 mb-6">
-            <h3 className="text-2xl md:text-3xl font-bold text-amber-900 mb-2">{recipe.details.name}</h3>
+            <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>
           </div>
 
-          <div className="grid md:grid-cols-2 gap-6 mb-6">
+          <div className="grid lg:grid-cols-2 gap-6 mb-6">
             <div className="bg-white rounded-lg p-4 shadow-sm border border-amber-100">
               <h4 className="text-xl font-semibold text-amber-800 mb-3 flex items-center">
                 <span className="w-2 h-2 bg-amber-500 rounded-full mr-2"></span>
@@ -54,7 +77,7 @@ function RecipePage() {
                 {recipe.ingredients.map((ingredient: Ingredient, index) => (
                   <li key={index} className="text-gray-700 flex items-start">
                     <span className="w-1.5 h-1.5 bg-amber-400 rounded-full mt-2 mr-3 flex-shrink-0"></span>
-                    <span className="font-medium">{ingredient.quantity} {ingredient.unit} {ingredient.name}</span>
+                    <span className="font-medium">{ingredient.raw}</span>
                   </li>
                 ))}
               </ul>
@@ -69,9 +92,9 @@ function RecipePage() {
                 {recipe.steps && Object.keys(recipe.steps || {}).map((stepNumber) => (
                   <li key={stepNumber} className="text-gray-700 flex items-start">
                     <span className="bg-amber-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm font-bold mr-3 mt-0.5 flex-shrink-0">
-                      {stepNumber}
+                      {recipe.steps[parseInt(stepNumber)].step_number}
                     </span>
-                    <span className="leading-relaxed">{recipe.steps[parseInt(stepNumber)]}</span>
+                    <span className="leading-relaxed">{recipe.steps[parseInt(stepNumber)].instruction}</span>
                   </li>
                 ))}
               </ol>
@@ -80,8 +103,14 @@ function RecipePage() {
 
           <div className="border-t-2 border-amber-300 pt-4">
             <div className="flex justify-between items-center text-sm text-amber-600">
-              <span>From the Kitchen of</span>
-              <span>★ ★ ★</span>
+              {isWebSource ? (
+                <span>Source: {recipe.details.author}</span>
+              ) : (
+                <span>From the kitchen of {recipe.details.author}</span>
+              )}
+              <span>
+                <StarRating rating={stars} onRatingChange={(newRating: number) => setStars(newRating)} />
+              </span>
             </div>
           </div>
         </div>