Graduation-Project-MRS · ehabyousef · Jul 6, 2024 · Jul 6, 2024 · Jul 6, 2024 · Jul 6, 2024
diff --git a/wannameal/package-lock.json b/wannameal/package-lock.json
diff --git a/wannameal/package.json b/wannameal/package.json
@@ -17,6 +17,7 @@
     "jwt-decode": "^4.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-helmet": "^6.1.0",
     "react-i18next": "^14.1.2",
     "react-icons": "^5.1.0",
     "react-input-emoji": "^5.9.0",

diff --git a/wannameal/public/index.html b/wannameal/public/index.html
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>WannaMeal</title>
   </head>
   <body >
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/wannameal/public/locales/ar/translation.json b/wannameal/public/locales/ar/translation.json
@@ -60,7 +60,8 @@
     "addingredient": "أضف مكون",
     "addStep": "أضف خطوة",
     "saveRecipe": "احفظ الوصفة",
-    "cancelRecipe": "ألغِ الوصفة"
+    "cancelRecipe": "ألغِ الوصفة",
+    "caloriess": "السعرات"
   },
   "contact": {
     "head": "تواصل معنا",
@@ -160,7 +161,7 @@
     "Profile": "الملف الشخصى",
     "Contact": "تواصل معنا",
     "logoutt": "تسجيل الخروج",
-        "dashboard":"لوحة التحكم",
-"makeMeal":" اضافة وجبه"
+    "dashboard": "لوحة التحكم",
+    "makeMeal": " اضافة وجبه"
   }
 }
diff --git a/wannameal/public/locales/en/translation.json b/wannameal/public/locales/en/translation.json
@@ -60,7 +60,8 @@
     "addingredient": "add ingredient",
     "addStep": "add Step",
     "saveRecipe": "save Recipe",
-    "cancelRecipe": "cancel Recipe"
+    "cancelRecipe": "cancel Recipe",
+    "caloriess": "calories"
   },
   "contact": {
     "head": "get in touch",
@@ -160,7 +161,7 @@
     "Profile": "My Profile",
     "Contact": "Contact Us",
     "logoutt": "logout",
-    "dashboard":"dashboard",
-"makeMeal":"Add Recipe"
+    "dashboard": "dashboard",
+    "makeMeal": "Add Recipe"
   }
 }
diff --git a/wannameal/src/components/FoodIngreientSlider/FoodIngreientSlider.jsx b/wannameal/src/components/FoodIngreientSlider/FoodIngreientSlider.jsx
@@ -36,6 +36,7 @@ import { useTranslation } from "react-i18next";
 function FoodIngreientSlider() {
   // const ingredients = useSelector(getIngredients);
   const ingredients = useSelector(getIngredients);
+  console.log("🚀 ~ FoodIngreientSlider ~ ingredients:", ingredients);
   const [checkedIngredients, setCheckedIngredients] = useState([]);
   const [searchQuery, setSearchQuery] = useState("");
   const [filteredIngredients, setFilteredIngredients] = useState(ingredients);
@@ -121,10 +122,7 @@ function FoodIngreientSlider() {
     fetchMeals();
   }, [checkedIngredients, dispatch, language]);
   const { t } = useTranslation();
-  const {
-    Choose,
-    searchh,
-  } = t('make');
+  const { Choose, searchh } = t("make");
   return (
     <>
       <div className="container my-4">
@@ -144,7 +142,7 @@ function FoodIngreientSlider() {
               placeholder={`${searchh}`}
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
-            // autocomplete="off"
+              // autocomplete="off"
             />
           </form>
         </div>

diff --git a/wannameal/src/components/MyRecips/MyRecips.jsx b/wannameal/src/components/MyRecips/MyRecips.jsx
@@ -1,79 +1,86 @@
-import React from "react";
+import React, { useEffect } from "react";
 import style from "./MyRecips.module.css";
 import MealCard from "../mealCard/mealCard";
+import { MdSmsFailed } from "react-icons/md";
+
 import noMeals from "../../assets/nomeals.gif";
-export default function MyRecips() {
-  const meals = [
-    // {
-    //   index: 488,
-    //   name: "النجريسكو",
-    //   time: "غداء",
-    //   ingredients:
-    //     "400 صدور دجاج، مخلية ومقطعة إلى قطع صغيرة الحجم.  ,   الملح والفلفل حسب الذوق.  ,   2 فص الثوم مفروم.  ,  80 جم زيت زيتون.  ,   70 جم دقيق.  ,   400 مل لبن كامل الدسم.  ,   400 جم مكرونة بينا.  ,   100 جم جبنة شيدر مبشورة.  ,   50 جم جبنة بارميزان مبشورة.      ",
-    //   prep: "      اطهى المكرونة وفقا للتعليمات على الكيس، ثم صفيها وضعيها جانباً.  ,   فى هذه الأثناء فى حلة صلصة كبيرة، اضيفى زيت الزيتون، والدجاج، الثوم، والملح والفلفل، ثم حمريها على نار متوسطة إلى منخفضة، واطهى الدجاج مع التحريك المستمر، حتى لم يعد لونه وردى اضيفى الدقيق وقلبيه حتى يمتص كل السائل ويصبح كالمعجون الذى يغطى الدجاج.  ,   ببطء اضيفى اللبن مع التحريك المستمر، حتى يكون لديكِ صلصة كريمية خفيفة من البشاميل.  ,   ارفعى الحلة من على النار، اضيفى الجبن الشيدر وقلبيه حتى يتم توزيعه بشكل جيد.  ,   اضيفي المكرونة المطبوخة وقلبيها حتى يتم توزيعها جيداً، صبى الخليط كله فى صينية فرن عميقة، ثم رشى على السطح الجبن البارميزان.  ,   اخبزيها فى الفرن على 210درجة مئوية، حتى يصبح الوجه لونه بنياً ذهبياً، ثم تقدم ساخنة.      ",
-    //   img_link: {
-    //     url: "https://res.cloudinary.com/dz5dpvxg7/image/upload/v1718750274/WannaMeal/recommend/ocrxycya2j0ieo9suqg7.jpg",
-    //     id: "WannaMeal/recommend/ocrxycya2j0ieo9suqg7",
-    //   },
-    //   calories: 1061,
-    //   prep_time: 30,
-    //   no_of_ppl: 4,
-    // },
-    // {
-    //   index: 152,
-    //   name: "الأرز بالزعفران",
-    //   time: "غداء",
-    //   ingredients:
-    //     "  400 جم  أرز بسمتي مغسول.  ,   810 مل  مرق دجاج أو مرق خضار.  ,    150 جم  بصل أصفر مفروم ناعمًا.  ,   1 ملعقة صغيرة  زعفران.  ,  60 مل  ماء مغلي.  ,   2 ملعقة كبيرة زيت زيتون.  ,   1 ملعقة صغيرة  ملح.      ",
-    //   prep: "      ضعي الزعفران في وعاء صغير، ثم أضيفي الماء المغلي، وقلبي جيدًا، ثم اتركيه جانبًا لمدة خمس دقائق.  ,   سخني الزيت في قدر كبير على نار متوسطة، ثم أضيفي البصل وقلبيه لمدة ثماني إلى عشر دقائق حتى يتكرمل.  ,   أضيفي الأرز وقلبي لمدة دقيقة، ثم أضيفي خليط الزعفران والمرق والملح، وقلبي جيدًا، واتركيه حتى يغلي.  ,   غطي القدر، واتركيه على نار هادئة مدة 30 دقيقة حتى ينضج.  ,   ضعي الأرز في أطباق التقديم، وقدميه ساخنًا مع الدجاج والسلطات.      ",
-    //   img_link: {
-    //     url: "https://res.cloudinary.com/dz5dpvxg7/image/upload/v1718750275/WannaMeal/recommend/rqyhl3iqkk5fndudnjmu.jpg",
-    //     id: "WannaMeal/recommend/rqyhl3iqkk5fndudnjmu",
-    //   },
-    //   calories: 454.99,
-    //   prep_time: 50,
-    //   no_of_ppl: 4,
-    // },
-    // {
-    //   index: 154,
-    //   name: "الكوارع",
-    //   time: "غداء",
-    //   ingredients:
-    //     " 1500 مل  من الماء المغلي  ,   1000 جم  كوارع مقطعة  ,   بصلة كبيرة مفرومة ناعمًا  ,   بصلة صغيرة مقطعة مكعبات صغيرة  ,  200 جم  فلفل أخضر حار مفروم  ,   4 ثمرات طماطم مقشرة، ومفرومة ناعمًا  ,   6 فصوص ثوم مهروس  ,   2 ملعقة كبيرة  خل أبيض  ,   4 معلقة  كبيرة  زيت  , 1  ملعقة كبيرة  زبدة في درجة حرارة الغرفة  ,  1 ملعقة كبيرة  صلصة طماطم  ,   3 ورقات لورا  ,   عود قرفة  ,   5 حبات حبهان  ,   4 حبات قرنفل  ,  1 ملعقة صغيرة  فلفل أسود حصى  ,   ملح وفلفل أسود      ",
-    //   prep: "      انقعي الكوارع في ماء وخل وملح وعصير ليمون لمدة ساعة.  ,   صفي الكوارع من الماء، واغسليها جيدًا تحت الماء الجاري مرتين.  ,   على نار متوسطة، ضعي الكوارع والملح والفلفل الأسود، ثم غطيها بالماء، واتركيها حتى تغلي.  ,   صفي الكوارع من الماء، واتركيها جانبًا.  ,   على نار متوسطة، ضعي الزبدة ونصف كمية الزيت، واتركيهما حتى تذوب الزبدة.  ,   أضيفي الكوارع، وقلبيها لمدة 5 دقائق، ثم أضيفي ورق اللورا والقرفة والحبهان والقرنفل والفلفل الحصى، وقلبي لمدة دقيقة.  ,   أضيفي البصل المفروم، وقلبي لمدة دقيقتين، ثم أضيفي الماء، واتركيه حتى تغلي.  ,   غطي القدر، واتركي الكوارع على نار هادئة جدًّا لمدة ساعة حتى تنضج.  ,   على نار متوسطة، سخني الزيت، ثم أضيفي مكعبات البصل الصغيرة، وقلبيها حتى تذبل ويصفر لونها.  ,   أضيفي الثوم والفلفل الحار، وقلبي لمدة دقيقة، ثم أضيفي الطماطم المفرومة وصلصة الطماطم والملح والفلفل الأسود، وقلبي لمدة دقيقة.  ,   اتركي الصلصة على النار حتى تغلي، ثم غطي القرد واتركيها على نار هادئة جدًّا لمدة 10 دقائق.  ,   أضيفي الخل واتركيها لمدة دقيقة، ثم أضيفي الكوارع، وكوبًا من شوربة الكوارع، واتركيها على نار هادئة لمدة 15 دقيقة، ثم قدميها ساخنة.      ",
-    //   img_link: {
-    //     url: "https://res.cloudinary.com/dz5dpvxg7/image/upload/v1718750275/WannaMeal/recommend/urvgyfbjd3aak0njsl6u.jpg",
-    //     id: "WannaMeal/recommend/urvgyfbjd3aak0njsl6u",
-    //   },
-    //   calories: 150,
-    //   prep_time: 105,
-    //   no_of_ppl: 6,
-    // },
-  ];
+import { useDispatch, useSelector } from "react-redux";
+import {
+  fetchMyRecipes,
+  fetchSavedMeals,
+  getMealsError,
+  getMealsStatus,
+  getMyRecipes,
+  getSavedMeals,
+} from "../../redux/slices/recomendedMealsSlice";
+import { getDecodedToken } from "../../redux/slices/authSlice";
+import Loading from "../loading/loading";
+import { getLanguage } from "../../redux/slices/language";
+export default function SavedMeals() {
+  const decodedToken = useSelector(getDecodedToken);
+  console.log("🚀 ~ SavedMeals ~ decodedToken:", decodedToken);
+  const mealsError = useSelector(getMealsError);
+  const mealsStatus = useSelector(getMealsStatus);
+  const dispatch = useDispatch();
+  const language = useSelector(getLanguage);
+  const myRecips = useSelector(getMyRecipes);
+  console.log("🚀 ~ SavedMeals ~ myRecips:", myRecips);
+
+  useEffect(() => {
+    if (decodedToken?.id) {
+      const fetchMeals = async () => {
+        await dispatch(
+          fetchMyRecipes({ userId: decodedToken?.id, lang: language })
+        );
+      };
+      fetchMeals();
+    }
+  }, []);
+
+  if (mealsStatus === "loading")
+    return (
+      <div className="w-100 d-flex flex-column justify-content-center align-items-center">
+        <Loading />
+      </div>
+    );
+
+  if (mealsError)
+    return (
+      <div className="w-100 text-center fs-2 mt-5">
+        <p className="mt-5">
+          {mealsError}
+          <MdSmsFailed size={25} className="text-danger ms-2 " />
+        </p>
+      </div>
+    );
 
   return (
-    <>
-      <div
-        className={` my-3 d-flex flex-wrap w-100 justify-content-center justify-content-md-between g-2 align-items-center ${style.recipsContainer} `}
-      >
-        {meals && meals.length > 0 ? (
-          meals.map((meal) => {
-            return <MealCard meal={meal} className=" col-12 col-lg-3" />;
-          })
-        ) : (
-          <div className={style.noMealscontainer}>
-            <div className={style.imageContainer}>
-              <img src={noMeals} alt="" srcset="" />
+    <div className="d-flex flex-column align-items-center justify-content-center">
+      <div className="container-lg">
+        <div
+          className={`row p-0 my-3 d-flex align-items-center  ${style.recipsContainer}`}
+        >
+          {myRecips && myRecips.length > 0 ? (
+            myRecips.map((meal) => (
+              <div key={meal._id} className="col-sm-12 col-md-5 col-lg p-0">
+                <MealCard meal={meal} />
+              </div>
+            ))
+          ) : (
+            <div className={style.noMealscontainer}>
+              <div className={style.imageContainer}>
+                <img src={noMeals} alt="" srcset="" />
+              </div>
+              <h3 className={style.mainTitle}>
+                You haven't published any recipe yet.
+              </h3>
+              <p className={style.secondaryTitle}>
+                Post your first recipe and you'll find it here.
+              </p>
             </div>
-            <h3 className={style.mainTitle}>
-              You haven't published any recipe yet.
-            </h3>
-            <p className={style.secondaryTitle}>
-              Post your first recipe and you'll find it here.
-            </p>
-          </div>
-        )}
+          )}
+        </div>
       </div>
-    </>
+    </div>
   );
 }
diff --git a/wannameal/src/components/mealCard/dashCard.jsx b/wannameal/src/components/mealCard/dashCard.jsx
@@ -8,7 +8,7 @@ import { Link } from "react-router-dom";
 function DashCard({ meal }) {
     return (
         <>
-            <Link to={`/recipeDetails/${meal?.id}`}>
+            <Link to={`/recipeDetails/${meal?._id}`}>
                 <div className={`${styles.mealCard}`}>
                     <div className={`${styles.imageContainer}`}>
                         <img

diff --git a/wannameal/src/components/mealCard/mealcard.module.css b/wannameal/src/components/mealCard/mealcard.module.css
@@ -3,7 +3,7 @@
   width: 340px;
   height: 300px;
   border-radius: 15px;
-  background-image: url("../../assets/Rectangle\ 9.png");
+  /* background-image: url("../../assets/Rectangle\ 9.png"); */
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;

diff --git a/wannameal/src/components/navbar/navbar.jsx b/wannameal/src/components/navbar/navbar.jsx
@@ -219,8 +219,9 @@ function Navbar() {
 
       {/*left aside  offcanvas */}
       <div
-        className={`offcanvas ${isAr === "ltr" ? "offcanvas-start" : "offcanvas-end"
-          } ${style.Aside}`}
+        className={`offcanvas ${
+          isAr === "ltr" ? "offcanvas-start" : "offcanvas-end"
+        } ${style.Aside}`}
         tabIndex={-1}
         id="offcanvasRouting"
         aria-labelledby="offcanvasExampleLabel"
@@ -262,7 +263,7 @@ function Navbar() {
               <li>
                 <Link to={"/contact"}>{Contact}</Link>
               </li>
-              {loggedUser && loggedUser?.role === "user" && (
+              {loggedUser && loggedUser?.role === "admin" && (
                 <>
                   <li>
                     <Link to={"/dashboard"}>{dashboard}</Link>

diff --git a/wannameal/src/pages/Home/Home.jsx b/wannameal/src/pages/Home/Home.jsx
@@ -1,10 +1,15 @@
 import AboutUs from "../../components/aboutUs/aboutus";
 import CommonMeals from "../../components/commonMeals/commonMeals";
 import LandingPage from "../../components/landingPage/LandingPage";
+import { Helmet } from "react-helmet";
 
 export default function Home() {
   return (
     <>
+      <Helmet>
+        <title>WannaMeal</title>
+        <meta name="description" content="WannaMeal" />
+      </Helmet>
       <LandingPage />
       <AboutUs />
       <CommonMeals />