Allowing Users to Add Favorites

Learn how to update user details with Strapi and how to allow users to add recipes to their favorites.

We'll cover the following

Overview

We’ve successfully authenticated users, and now we can allow them to save recipes as their favorites.

Back-end permissions

There will be two places where we have to configure the permissions to be able to grant permissions for authentication to our front-end application. The first is the “Public” role, and the second is the “Authenticated” role in the “Roles” section of the “USERS & PERMISSIONS PLUGIN” tab.

Let’s discuss the permissions that are required for our application and why we need each of these permission updates.

The “Public” role

Here’s what we need to do for the “Public” role:

  1. Navigate to the “Settings” of the Strapi application.

  2. Under the subnavigation, find “Roles” in the “USERS & PERMISSIONS PLUGIN” tab.

  3. Open the “Public” role in the list of roles.

    1. Open the “Recipe” drop-down menu.

    2. Enable the “create,” “find,” and “findOne” endpoints of the recipes under the “Recipe” drop-down menu so that we can create, find all, and find one recipe separately by idMeal.

The “Authenticated” role

Here’s what we need to do for the “Authenticated” role:

  • Navigate to the “Settings” tab of the Strapi application.

  • Under the subnavigation, find “Roles” under the “USERS & PERMISSIONS PLUGIN” tab.

  • Open the “Authenticated” role in the list of roles.

  • Enable the “find” endpoint of the recipes under the “Recipe” drop-down menu so that we can only display the favorited recipes of the currently authenticated user.

  • Open the “Users-permissions” drop-down menu.

  • Enable the “findOne” and “update” permissions for the user under the “Users-permission” drop-down menu so that we can get the currently authenticated user’s details.

  • Click the “Save” button to save the permissions.

Frontend

Here’s what we’ll do to add and display favorites:

  1. Add a button to the meal page with the following behavior:

    1. The button is only visible if the user is logged in.

    2. On clicking the button, we first check if the meal is present in the Strapi database. If not, then the meal is added to the database.

    3. We then need to check if the meal is already present in the user’s favorites. If it is, it displays a message saying that the meal is already present. Otherwise, the meal is added to the user’s favorites.

  2. Create a page to display the user’s favorites. For this, we use the MealCard component that we already created to display favorited recipes.

Now that we’ve set the requirements, let’s get started.

Adding to the favorites

Take a look at the /frontend/pages/meals/[meal].js file in the code below:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  images:{
    domains: ['www.themealdb.com', 'recipe52.com/']
  }
}

module.exports = nextConfig
Application for adding to favorites

The important details of the code above are highlighted. Let’s discuss how it works.

  • Lines 24–38: Here, we’ve defined the React useEffect hook that runs whenever the page is loading. We use the hook to fetch the user’s details, including their favorited recipes, so we can check if the meal is present in the user’s favorites. We can see the ?populate=* argument added to the URL, which adds attributes that aren’t shown by default. In our case, this is the favorites list.

  • Lines 40–100: This is the addToFavorites function that is the main logic of our requirements. We first check if the meal is present in the Strapi database. If the API call returns null, we send a request to add the recipe to the database. Further, we check if that meal is present in the user’s favorites and return from the function if it is. We then create a new array that holds the old favorites and the new meal. Finally, we send an API call to update the user details with the new favorites.

  • Line 152–163: Here, we used the loggedin hook to check if the current user is logged in. If they are, we display the “Add to Favorites” button. We also added a div to give the user feedback on whether the meal was added to their favorites or if it already existed in the list.

Displaying favorites

You can launch the application by pressing the “Run” button in the widget below. The Strapi backend will be started automatically. It’s accessible on the 3000 port of the Educative URL. To view the back-end admin panel, append :3000 to the end of the URL after opening it in a new tab.

To start the Next.js frontend, open a new terminal and use the command cd usercode/frontend && npm run build && npm start to run in a production environment, or cd usercode/frontend && npm run dev to open in the development environment.

Note: A Strapi administrator user has already been created for this course. The details of the user are as follows:

  • Email: jane.doe@email.com

  • Password: Password123

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  images:{
    domains: ['www.themealdb.com', 'recipe52.com/']
  }
}

module.exports = nextConfig
Complete application that displays the favorites

Note: Please ensure that the permissions are set correctly. If they are not, the frontend may crash in pages where the application tries unauthorized access.

In the code above, we add the favorites.js file to the pages folder. Similar to the useEffect of the [meal].js page, we use the hook here to get the user’s favorites from the Strapi database. To show the favorite meals for each category, we utilize the MealCard component that we had previously developed to display the list of meals.

We have made a few tweaks here, though. First, if the user is not logged in, a message saying “Please login to view favorites” is shown. Second, if the user is logged in but has no items in their favorites, the message shows “Favorites will appear here.”

Finally, we show the meal card if both the conditions mentioned above aren’t met.