diff --git a/components/Cards/FavCard.jsx b/components/Cards/FavCard.jsx index c05bb3c..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 ( - <> -
-
- {firstImage ? ( - {recipe.title} +
+
+ {firstImage ? ( + {recipe.title} + ) : ( +
+ No Image +
+ )} +
+
+
+

{recipe.title}

+
+
+ {recipeIsFavorite ? ( + ) : ( -
- No Image -
+ )}
-
-
-

{recipe.title}

-
-
- {recipeIsFavorite ? ( - - ) : ( - - )} -
-
- - View similar recipes - - +
); }; diff --git a/components/RecipesList/RecipeList.jsx b/components/RecipesList/RecipeList.jsx index 3b99939..1bb4da2 100644 --- a/components/RecipesList/RecipeList.jsx +++ b/components/RecipesList/RecipeList.jsx @@ -338,13 +338,14 @@ function RecipeList() { No favorite recipes yet.

) : ( -
+
{favorites.map((recipe) => ( -
+
))} diff --git a/pages/favorites/index.jsx b/pages/favorites/index.jsx index eea442d..a6c7747 100644 --- a/pages/favorites/index.jsx +++ b/pages/favorites/index.jsx @@ -7,22 +7,19 @@ * @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"; +import { useTheme } from "../../components/Context/ThemeContext"; function FavoritesPage() { + const theme = useTheme(); const favoriteCtx = useContext(FavoritesContext); const [filteredRecipes, setFilteredRecipes] = useState([]); const [sortOrderTitle, setSortOrderTitle] = useState("asc"); @@ -40,7 +37,7 @@ function FavoritesPage() { const { data: favoritesData, error: recipesError } = useSWR( "/api/recipes/Favourites", - fetcher, + fetcher ); const favoriteRecipes = favoriteCtx.favorites || []; @@ -102,13 +99,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,9 +210,15 @@ function FavoritesPage() { }; return ( -
+
-

My Favorites

+

+ My Favorites +

{/* Add sorting options here */} @@ -254,7 +264,6 @@ function FavoritesPage() { width={500} height={300} /> - ) : (
{filteredRecipes.map((result) => ( @@ -269,13 +278,27 @@ function FavoritesPage() { href={`/favorites/similar-recipes/${result.recipe.title}`} > {" "} - View similar recipes +
))}
)} +
+
+
+ + + {" "} + Explore Recipes + + ); }