React - Trying to store the name in the favorites

Question

I want to save the names of the recipes I create, so I can check if a recipe with the same name is already created. I tried everything but I couldn't figure it out. I want to store the new recipe in favorites so I can't have the same recipe.

That's the Recipe Model logic, where I am creating the new recipes and navigating to the favourites page:

import './RecipeModel.css';

import { Link, NavLink, useNavigate, useParams } from 'react-router-dom';
import React, { useLayoutEffect, useState, useEffect, useContext } from 'react';

import * as userService from '../../../services/userService';
import { AuthContext } from '../../../contexts/AuthContext';
import * as likeService from '../../../services/likeService';
import useRecipeState from '../../EditRecipe/RecipeState';

const RecipeModel = ({ recipe }) => {
  const history = useNavigate();
  const { user } = useContext(AuthContext);
  const { recipeId } = useParams();
  const [likes, setLikes] = useRecipeState(recipeId);
  const [favourites, setFavourites] = useState([]);
  // const [recipe,setRecipe] = useState({});

  useEffect(() => {
    likeService.getLikes(recipe._id).then((likes) => {
      setLikes((state) => ({ ...state, likes }));
    });
  }, []);

  const HandleFavourite = (e) => {
    e.preventDefault();

    console.log(`Recipe ${recipe._id}`);

    const name = recipe.name;
    const time = recipe.time;
    const imageUrl = recipe.imageUrl;
    const ingredients = recipe.ingredients;
    const instructions = recipe.instructions;

    userService
      .addFavourite(
        {
          name,
          time,
          imageUrl,
          ingredients,
          instructions,
        },
        user.accessToken
      )
      .then((result) => {
        console.log(result);
        console.log(user._id);
        setFavourites((existingItems) => {
          return [...existingItems, name];
        });
        console.log(favourites.length);
        history('/favourites');
      });
  };

  const likeButtonClick = () => {
    if (user._id === recipe._ownerId) {
      return;
    }

    if (likes.likes.includes(user._id)) {
      return;
    }

    likeService.like(user._id, recipeId).then(() => {
      setLikes((state) => ({ ...state, likes: [...state.likes, user._id] }));
      console.log('liked');
    });
  };

  return (
    <article className='articles'>
      <img className='img2' src={recipe.imageUrl} />
      <h1>{recipe.name}</h1>
      <p className='cut-text'>{recipe.instructions}</p>
      <div className='btns1'>
        <Link
          smooth='true'
          className='btnd'
          to={`/recipe-details/recipe-number:${recipe._id}`}
        >
          Details
        </Link>

        {user.email ? (
          <button className='favour' onClick={HandleFavourite}>
            <i className='fas fa-solid fa-heart-circle-plus'></i>
          </button>
        ) : null}
      </div>
    </article>
  );
};

export default RecipeModel;

That's all of the userService logic:

export const addFavourite = async (recipeData, token) => {
  let response = await fetch(`${baseUrl}/favourites`, {
    method: 'POST',
    headers: {
      'content-type': 'application/json',
      'X-Authorization': token,
    },
    body: JSON.stringify(recipeData),
  });

  let result = await response.json();

  return result;
};

export const getAllFavourites = async () => {
  let response = await fetch(`${baseUrl}/favourites`);

  let recipes = await response.json();

  let result = Object.values(recipes);

  return result;
};

export const removeFavourite = (recipeId, token) => {
  return fetch(`${baseUrl}/favourites/${recipeId}`, {
    method: 'DELETE',
    headers: {
      'X-Authorization': token,
    },
  }).then((res) => res.json());
};

export const getOneFav = (recipeId) => {
  return fetch(`${baseUrl}/favourites/${recipeId}`).then((res) => res.json());
};

export const yourFavourites = (ownerId) => {
  let query = encodeURIComponent(`_ownerId="${ownerId}"`);

  return request.get(`${baseUrl}/favourites?where=${query}`);
};

Answer 1

Before adding a recipe to your favorites, check if this recipe is in your list. You can do this for example like this:

if (favourites?.find(el => el.name === recipe.name) === undefined) ...