From d12f32c3e1a4a97cd3c5db4de864164b1d57de16 Mon Sep 17 00:00:00 2001
From: SABELOMAWELA <Mawelas63@gmail.com>
Date: Wed, 23 Oct 2024 18:19:59 +0200
Subject: [PATCH] "Refactored RecipeDetail component: updated console logs,
 changed recipe data rendering, and removed nutrition tab"

---
 app/recipes/[id]/page.jsx | 59 ++++++++++++---------------------------
 1 file changed, 18 insertions(+), 41 deletions(-)

diff --git a/app/recipes/[id]/page.jsx b/app/recipes/[id]/page.jsx
index 59c2473..8c06f7d 100644
--- a/app/recipes/[id]/page.jsx
+++ b/app/recipes/[id]/page.jsx
@@ -11,13 +11,13 @@ const formatTime = (minutes) => {
 
 const RecipeDetail = ({ params }) => {
   const { id } = params;
-  const router = useRouter();
+  const router = useRouter(); 
 
   const [recipe, setRecipe] = useState(null);
   const [activeTab, setActiveTab] = useState("ingredients");
 
-  
-  console.log("Recipe ID from params:", id); 
+  // Log the ID to make sure it's correctly passed
+  console.log("Recipe ID from params:", id);  // Log ID to verify it's correct
 
   useEffect(() => {
     const getRecipe = async () => {
@@ -31,7 +31,7 @@ const RecipeDetail = ({ params }) => {
           throw new Error("Failed to fetch recipe");
         }
         const data = await response.json();
-        console.log(data.recipe, 'data')
+        console.log(data.recipe,'data')
         setRecipe(data.recipe);
       } catch (error) {
         console.error("Error fetching recipe:", error);
@@ -69,25 +69,26 @@ const RecipeDetail = ({ params }) => {
           <h1 className="text-3xl font-bold mb-2 text-gray-800">{recipe.title}</h1>
 
           <p className="text-lg italic text-gray-600 mb-6">
-            Discover how to make this delicious {recipe.title}.
-            {recipe.description || "any occasion"}.
+            Discover how to make this delicious {recipe.title}. Perfect for{" "}
+            {recipe.mealType || "any occasion"}.
           </p>
 
           <div className="text-lg text-gray-800 space-y-2">
             <p>
-              <strong>Prep Time:</strong> {formatTime(recipe.prep)}
+              <strong>Prep Time:</strong> {formatTime(recipe.prepTimeMinutes)}
             </p>
             <p>
-              <strong>Cook Time:</strong> {formatTime(recipe.cook)}
+              <strong>Cook Time:</strong> {formatTime(recipe.cookTimeMinutes)}
+            </p>
+            <p>
+              <strong>Total Time:</strong> {formatTime(totalTime)}
             </p>
-            <p><strong>Category:</strong> {recipe.category}</p>
             <p>
               <strong>Servings:</strong> {recipe.servings} servings
             </p>
-            <p><strong>Published:</strong> {new Date(recipe.published).toLocaleDateString()}</p>
           </div>
 
-          <ul className="grid grid-cols-3 mt-10 border-b-2">
+          <ul className="grid grid-cols-2 mt-10 border-b-2">
             <li
               className={`text-gray-800 font-semibold text-base text-center py-3 cursor-pointer ${
                 activeTab === "ingredients" ? "border-b-2 border-gray-800" : ""
@@ -104,51 +105,27 @@ const RecipeDetail = ({ params }) => {
             >
               Instructions
             </li>
-            <li
-              className={`text-gray-800 font-semibold text-base text-center py-3 cursor-pointer ${
-                activeTab === "nutrition" ? "border-b-2 border-gray-800" : ""
-              }`}
-              onClick={() => setActiveTab("nutrition")}
-            >
-              Nutrition
-            </li>
           </ul>
 
           <div className="mt-6">
             {activeTab === "ingredients" ? (
               <div>
                 <h2 className="text-2xl font-semibold mb-4">Ingredients</h2>
-                <ul className="list-disc pl-6 text-gray-700">
-                  {Object.entries(recipe.ingredients).map(([ingredient, quantity], index) => (
-                    <li key={index}>
-                    {ingredient}: {quantity}
-                    </li>
-                  ))}
+                <ul className="list-disc pl-6 mt-2 text-gray-700">
+                  {/* {recipe.ingredients.map((ingredient, index) => (
+                    <li key={index}>{ingredient}</li>
+                  ))} */}
                 </ul>
               </div>
-            ) : activeTab === "instructions" ? (
+            ) : (
               <div>
                 <h2 className="text-2xl font-semibold mb-4">Instructions</h2>
-                <ul className="list-disc pl-6 text-gray-700">
+                <ul className="list-disc pl-6 mt-2 text-gray-700">
                   {recipe.instructions.map((instruction, index) => (
                     <li key={index}>{instruction}</li>
                   ))}
                 </ul>
               </div>
-            ) : (
-              <div className="recipe-nutrition">
-                <h3 className="text-2xl font-semibold mb-4">Nutrition Information</h3>
-                <ul className="list-disc pl-6 text-gray-700">
-                  <li>Calories: {recipe.nutrition.calories}</li>
-                  <li>Fat: {recipe.nutrition.fat}g</li>
-                  <li>Saturated Fat: {recipe.nutrition.saturated}g</li>
-                  <li>Sodium: {recipe.nutrition.sodium}mg</li>
-                  <li>Carbohydrates: {recipe.nutrition.carbohydrates}g</li>
-                  <li>Fiber: {recipe.nutrition.fiber}g</li>
-                  <li>Sugar: {recipe.nutrition.sugar}g</li>
-                  <li>Protein: {recipe.nutrition.protein}g</li>
-                </ul>
-              </div>
             )}
           </div>
         </div>