FEATURE: Recipe For The Day Suggestion section (#444)

* FEATURE: Recipe For The Day Suggestion section
Fixes #328

* Update Landing.jsx

* Update Landing.jsx

* Update Landing.jsx

* Update Landing.jsx

* Update RecipeController.js

* Update RecipeController.js

---------

Co-authored-by: Alfiya Siddique <[email protected]>

backend/Controllers/RecipeController.js

@@ -1,10 +1,29 @@
-
 import Recipe from "../models/Recipe.js";
 import Comment from "../models/Comment.js";
 import axios from "axios";
 import User from "../models/User.js";
 import mongoose from "mongoose";
 
+/**
+ * @GET /api/recipes/random
+ * @description Get a random recipe
+ * @access public
+ */
+const getRandomRecipe = async (req, res) => {
+  try {
+    const count = await Recipe.countDocuments();
+    if (count === 0) {
+      return res.status(404).json({ success: false, message: "No recipes found" });
+    }
+    const random = Math.floor(Math.random() * count);
+    const recipe = await Recipe.findOne().skip(random); // Get a random recipe
+    return res.status(200).json({ success: true, recipe });
+  } catch (error) {
+    console.error(error);
+    return res.status(500).json({ success: false, message: "Internal server error" });
+  }
+};
+
 /**
  * @route {POST} /api/recipe/add
  * @description Add a REcipe to database
@@ -486,6 +505,7 @@ const RecipeController = {
   updateShareCount,
   getRecipeById,
   deleteComment,
+  getRandomRecipe,
 };
 
 export default RecipeController;

backend/routes/web.js

@@ -13,6 +13,8 @@ router.get("/token", authenticateToken, UserController.verifyUserByToken);
 router.get("/recipes", RecipeController.allRecipe);
 // added route to get previous comments
 router.get("/recipe/getcomments/:recipeId", RecipeController.getComments);
+// Route to get a random recipe
+router.get('/random', RecipeController.getRandomRecipe);
 // Post Requests
 
     //  Signup ROUTES

frontend/src/Components/RecipeOfTheDay.jsx

@@ -0,0 +1,45 @@
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+import Cards from './Cards'; // Import the Cards component to display the recipe
+
+const RecipeOfTheDay = () => {
+  const [recipe, setRecipe] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const backendURL = import.meta.env.VITE_BACKEND_URL;
+
+  useEffect(() => {
+    const fetchRecipeOfTheDay = async () => {
+      try {
+        const response = await axios.get(`${backendURL}/api/recipes/random`);
+        setRecipe(response.data.recipe); // Assuming the API returns a recipe object
+      } catch (error) {
+        console.error('Error fetching recipe of the day:', error);
+        setError('Failed to fetch recipe. Please try again later.');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchRecipeOfTheDay();
+  }, []); // No dependencies needed
+
+  return (
+    <section id="RecipeOfTheDay" className="py-4 my-20 mx-8">
+      <h1 className="text-center font-semibold text-4xl text-red-700 my-4 font-[Merriweather]">
+        Recipe For The Day
+      </h1>
+      {loading ? (
+        <div className="flex justify-center items-center py-10">
+          <div className="animate-spin rounded-full h-16 w-16 border-t-2 border-red-700"></div>
+        </div>
+      ) : error ? (
+        <p className="text-center text-red-500">{error}</p>
+      ) : (
+        <Cards dish={recipe} />
+      )}
+    </section>
+  );
+};
+
+export default RecipeOfTheDay;

frontend/src/Pages/Landing.jsx

@@ -1,4 +1,3 @@
-
 import { useEffect, useState } from "react";
 import Foods from "../assets/Images/ArrayOfFoods.png";
 import Search from "../assets/Images/Seach Recipe.png";
@@ -9,6 +8,7 @@ import { useNavigate } from "react-router-dom";
 import axios from "axios";
 import RecipeCardSkeleton from "./RecipeSkeleton.jsx";
 import Testimonial from "../Components/Testimonial.jsx";
+import RecipeOfTheDay from '../Components/RecipeOfTheDay';
 
 const Landing = () => {
   const navigator = useNavigate();
@@ -165,6 +165,13 @@ const Landing = () => {
         </div>
       </section>
 
+{/* -------------------------- Recipe For The Day Section ----------------------  */}
+      <section id="RecipeOfTheDay" className="py-10 mx-8">
+        <h2 className="text-center font-semibold text-4xl text-red-700 mb-4 font-[Merriweather]">
+        </h2>
+        <RecipeOfTheDay /> {/* Add the RecipeOfTheDay component here */}
+      </section>
+
       {/* -------------------------- Best Dishes Section ----------------------  */}
       <section id="Trending" className="py-4 my-20 mx-8">
         <h1 className="text-center font-semibold text-4xl text-red-700 my-4 font-[Merriweather]">