From 2cd1e818f959a367d5c58dfe23fd8469c301d6b0 Mon Sep 17 00:00:00 2001
From: Otshepeng Setuke <shaniquah.setuke@gmail.com>
Date: Wed, 6 Dec 2023 16:40:43 +0200
Subject: [PATCH 1/2] fix: carousel display and favorites

---
 components/Cards/FavCard.jsx          | 133 +++++++++++++-------------
 components/RecipesList/RecipeList.jsx |   5 +-
 pages/favorites/index.jsx             |  61 +++++++-----
 3 files changed, 105 insertions(+), 94 deletions(-)

diff --git a/components/Cards/FavCard.jsx b/components/Cards/FavCard.jsx
index 2dc8b5c..6364985 100644
--- a/components/Cards/FavCard.jsx
+++ b/components/Cards/FavCard.jsx
@@ -1,16 +1,16 @@
 /* eslint-disable consistent-return */
-import React, { useContext } from 'react';
+import React, { useContext } from "react";
 
-import Image from 'next/legacy/image';
-import { toast } from 'react-toastify';
+import Image from "next/legacy/image";
+import { toast } from "react-toastify";
 
 import {
   StarIcon as StarEmpty,
   StarIcon as StarFilled,
-} from '@heroicons/react/24/solid';
-import Link from 'next/link';
-import FavoritesContext from '../Context/Favorites-context';
-import { useTheme } from '../Context/ThemeContext';
+} from "@heroicons/react/24/solid";
+import Link from "next/link";
+import FavoritesContext from "../Context/Favorites-context";
+import { useTheme } from "../Context/ThemeContext";
 
 const FavCard = ({ recipe, favorites }) => {
   const favoriteCtx = useContext(FavoritesContext);
@@ -18,89 +18,88 @@ const FavCard = ({ recipe, favorites }) => {
   const recipeIsFavorite = favoriteCtx.recipeIsFavorite(recipe._id, favorites);
 
   const removeFavoriteHandler = async () => {
-    const userConfirmed = window.confirm('Are you sure you want to remove this recipe from your favorites?');
+    const userConfirmed = window.confirm(
+      "Are you sure you want to remove this recipe from your favorites?"
+    );
     if (userConfirmed) {
       try {
         const response = await fetch(`api/recipes/Favourites`, {
-          method: 'DELETE',
+          method: "DELETE",
           headers: {
-            'Content-Type': 'application/json',
+            "Content-Type": "application/json",
           },
           body: JSON.stringify({ recipeId: recipe._id }),
         });
 
         if (response.ok) {
           favoriteCtx.removeFavorite(recipe._id);
-          toast.success('Recipe removed from favorites!');
+          toast.success("Recipe removed from favorites!");
         }
       } catch (error) {
-        toast.error('Error removing recipe from favorites.');
+        toast.error("Error removing recipe from favorites.");
         return error("Error removing favorite:", error);
       }
     }
   };
 
-  const firstImage = recipe.images && recipe.images.length > 0 ? recipe.images[0] : null;
+  const firstImage =
+    recipe.images && recipe.images.length > 0 ? recipe.images[0] : null;
 
   return (
-    <>
-      <div
-        className={`${
-          theme === "dark" ? "text-custom-color-mixed-20" : "text-blue-black-10"
-        } bg-blue-400 rounded-lg shadow-lg overflow-hidden`}
-      >
-        <div className="relative h-40 overflow-hidden">
-          {firstImage ? (
-            <Image
-              src={firstImage}
-              alt={recipe.title}
-              layout="fill"
-              objectFit="cover"
-              className="rounded-t-lg"
-            />
+    <div
+      className={`${
+        theme === "dark"
+          ? "text-custom-color-mixed-20 bg-gray-700"
+          : "text-blue-black-10 bg-blue-300"
+      } rounded-lg shadow-lg overflow-hidden pb-3`}
+    >
+      <div className="relative h-40 overflow-hidden">
+        {firstImage ? (
+          <Image
+            src={firstImage}
+            alt={recipe.title}
+            layout="fill"
+            objectFit="cover"
+            className="rounded-t-lg"
+          />
+        ) : (
+          <div className="flex items-center justify-center h-full bg-gray-300 text-gray-600">
+            No Image
+          </div>
+        )}
+      </div>
+      <div className="flex flex-col justify-between h-16 p-4">
+        <div className="text-center">
+          <h3 className="text-lg font-semibold">{recipe.title}</h3>
+        </div>
+        <div className="flex items-center justify-end">
+          {recipeIsFavorite ? (
+            <button
+              type="button"
+              onClick={removeFavoriteHandler}
+              className={` 
+                ${
+                  theme === "light" ? "text-blue-900" : "text-blue-500"
+                } hover:text-red-500 transition`}
+            >
+              <span aria-label="Remove from favorites">
+                <StarFilled className="w-6 h-6" />
+              </span>
+            </button>
           ) : (
-            <div className="flex items-center justify-center h-full bg-gray-300 text-gray-600">
-              No Image
-            </div>
+            <button
+              type="button"
+              onClick={removeFavoriteHandler}
+              className="text-custom-blue-10 hover:text-blue-500 transition"
+            >
+              <span aria-label="Add to favorites">
+                <StarEmpty className="w-6 h-6" />
+              </span>
+            </button>
           )}
         </div>
-        <div className="flex flex-col justify-between h-16 p-4">
-          <div className="text-center">
-            <h3 className="text-lg font-semibold">{recipe.title}</h3>
-          </div>
-          <div className="flex items-center justify-end">
-            {recipeIsFavorite ? (
-              <button
-                type="button"
-                onClick={removeFavoriteHandler}
-                className={` 
-                text-blue-900 hover:text-red-500 transition`}
-              >
-                <span aria-label="Remove from favorites">
-                  <StarFilled className="w-6 h-6" />
-                </span>
-              </button>
-            ) : (
-              <button
-                type="button"
-                onClick={removeFavoriteHandler}
-                className="text-custom-blue-10 hover:text-blue-500 transition"
-              >
-                <span aria-label="Add to favorites">
-                  <StarEmpty className="w-6 h-6" />
-                </span>
-              </button>
-            )}
-          </div>
-        </div>
       </div>
-      <Link
-        legacyBehavior
-        href={`/favorites/similar-recipes/${recipe.title}`}
-      >
-        View similar recipes
-      </Link>
-    </>
+    </div>
   );
 };
 
diff --git a/components/RecipesList/RecipeList.jsx b/components/RecipesList/RecipeList.jsx
index 9f71714..d374925 100644
--- a/components/RecipesList/RecipeList.jsx
+++ b/components/RecipesList/RecipeList.jsx
@@ -326,13 +326,14 @@ function RecipeList() {
                 No favorite recipes yet.
               </p>
             ) : (
-              <div className="mt-4">
+              <div className="mt-6 ">
                 <Carousel
                   responsive={responsive}
                   containerClass="carousel-container"
+                  className="gap-2 m-3 bg-[linear-gradient(180deg,transparent,#38487875,transparent)]"
                 >
                   {favorites.map((recipe) => (
-                    <div key={recipe.recipe._id}>
+                    <div key={recipe.recipe._id} className="gap-12 m-3">
                       <FavCard recipe={recipe.recipe} favorites={favorites} />
                     </div>
                   ))}
diff --git a/pages/favorites/index.jsx b/pages/favorites/index.jsx
index 1d11af9..fc46a18 100644
--- a/pages/favorites/index.jsx
+++ b/pages/favorites/index.jsx
@@ -7,20 +7,15 @@
  * @component
  * @returns {JSX.Element} - Rendered FavoritesPage component.
  */
-import React, {
-  useContext,
-  useEffect,
-  useState,
-  useMemo,
-} from 'react';
-import Image from 'next/image';
-import Link from 'next/link';
-import useSWR from 'swr';
+import React, { useContext, useEffect, useState, useMemo } from "react";
+import Image from "next/image";
+import Link from "next/link";
+import useSWR from "swr";
 import Fuse from "fuse.js";
 import { v4 as KeyUUID } from "uuid";
-import RecipeCard from '../../components/Cards/RecipeCard';
-import FavoritesContext from '../../components/Context/Favorites-context';
-import Loading from '../../components/Loading/Loading';
+import RecipeCard from "../../components/Cards/RecipeCard";
+import FavoritesContext from "../../components/Context/Favorites-context";
+import Loading from "../../components/Loading/Loading";
 
 function FavoritesPage() {
   const favoriteCtx = useContext(FavoritesContext);
@@ -40,7 +35,7 @@ function FavoritesPage() {
 
   const { data: favoritesData, error: recipesError } = useSWR(
     "/api/recipes/Favourites",
-    fetcher,
+    fetcher
   );
 
   const favoriteRecipes = favoriteCtx.favorites || [];
@@ -102,13 +97,20 @@ function FavoritesPage() {
     const sortedRecipes = [...filteredRecipes].sort((a, b) => {
       if (sortType === "title") {
         return sortOrder1 * a.recipe.title.localeCompare(b.recipe.title);
-      } if (sortType === "prepTime") {
+      }
+      if (sortType === "prepTime") {
         return sortOrder1 * (a.recipe.prep - b.recipe.prep);
-      } if (sortType === "cookTime") {
+      }
+      if (sortType === "cookTime") {
         return sortOrder1 * (a.recipe.cook - b.recipe.cook);
-      } if (sortType === "steps") {
-        return sortOrder1 * (a.recipe.instructions.length - b.recipe.instructions.length);
-      } if (sortType === "totalTime") {
+      }
+      if (sortType === "steps") {
+        return (
+          sortOrder1 *
+          (a.recipe.instructions.length - b.recipe.instructions.length)
+        );
+      }
+      if (sortType === "totalTime") {
         const aTotalTime = a.recipe.prep + a.recipe.cook;
         const bTotalTime = b.recipe.prep + b.recipe.cook;
         return sortOrder1 * (aTotalTime - bTotalTime);
@@ -206,7 +208,7 @@ function FavoritesPage() {
   };
 
   return (
-    <section>
+    <section className="mt-0 pt-6 pb-10">
       <strong>
         <h1 className="py-10 px-5 mx-20 my-10">My Favorites</h1>
       </strong>
@@ -250,7 +252,6 @@ function FavoritesPage() {
             width={500}
             height={300}
           />
-
         ) : (
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
             {filteredRecipes.map((result) => (
@@ -265,17 +266,27 @@ function FavoritesPage() {
                   href={`/favorites/similar-recipes/${result.recipe.title}`}
                 >
                   {" "}
-                  View similar recipes
+                  <button
+                    type="button"
+                    className="text-lg font-semibold bg-slate-400 rounded-xl p-2 mt-5 hover:bg-slate-50"
+                  >
+                    View similar recipes ⇨
+                  </button>
                 </Link>
               </div>
             ))}
           </div>
         )}
-
-        <Link href="/" className="py-10 px-5 mx-12">
-          <strong> Explore Recipes</strong>
-        </Link>
       </section>
+      <br />
+      <br />
+      <br />
+      <Link href="/" className="py-10 px-5 mt-12">
+        <strong className="text-lg bg-sky-600 rounded-xl p-1 hover:bg-sky-400">
+          {" "}
+          Explore Recipes
+        </strong>
+      </Link>
     </section>
   );
 }

From 7370600cd4c1a4d79cc0ec3f786ee1f062294258 Mon Sep 17 00:00:00 2001
From: Otshepeng Setuke <shaniquah.setuke@gmail.com>
Date: Wed, 6 Dec 2023 17:07:27 +0200
Subject: [PATCH 2/2] docs: remove redundant code

---
 components/RecipesList/RecipeList.jsx |  4 ++--
 pages/favorites/index.jsx             | 10 +++++++++-
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/components/RecipesList/RecipeList.jsx b/components/RecipesList/RecipeList.jsx
index 2a6a916..8cc3d9f 100644
--- a/components/RecipesList/RecipeList.jsx
+++ b/components/RecipesList/RecipeList.jsx
@@ -332,10 +332,10 @@ function RecipeList() {
                 <Carousel
                   responsive={responsive}
                   containerClass="carousel-container"
-                  className="gap-2 m-3 bg-[linear-gradient(180deg,transparent,#38487875,transparent)]"
+                  className="m-3 bg-[linear-gradient(180deg,transparent,#38487875,transparent)]"
                 >
                   {favorites.map((recipe) => (
-                    <div key={recipe.recipe._id} className="gap-12 m-3">
+                    <div key={recipe.recipe._id} className="m-3">
                       <FavCard recipe={recipe.recipe} favorites={favorites} />
                     </div>
                   ))}
diff --git a/pages/favorites/index.jsx b/pages/favorites/index.jsx
index fc46a18..a979056 100644
--- a/pages/favorites/index.jsx
+++ b/pages/favorites/index.jsx
@@ -16,8 +16,10 @@ import { v4 as KeyUUID } from "uuid";
 import RecipeCard from "../../components/Cards/RecipeCard";
 import FavoritesContext from "../../components/Context/Favorites-context";
 import Loading from "../../components/Loading/Loading";
+import { useTheme } from "../../components/Context/ThemeContext";
 
 function FavoritesPage() {
+  const theme = useTheme();
   const favoriteCtx = useContext(FavoritesContext);
   const [filteredRecipes, setFilteredRecipes] = useState([]);
   const [sortOrderTitle, setSortOrderTitle] = useState("asc");
@@ -210,7 +212,13 @@ function FavoritesPage() {
   return (
     <section className="mt-0 pt-6 pb-10">
       <strong>
-        <h1 className="py-10 px-5 mx-20 my-10">My Favorites</h1>
+        <h1
+          className={`py-10 px-5 mx-20 my-10 ${
+            theme === "light" ? "text-black" : "text-white"
+          }`}
+        >
+          My Favorites
+        </h1>
       </strong>
       <section className="mx-5">
         {/* Add sorting options here */}