Last branch to local

wannameal/src/components/FoodIngreientSlider/FoodIngreientSlider.jsx

@@ -45,8 +45,6 @@ function FoodIngreientSlider() {
   const ingredientsStatus = useSelector(getIngredientsStatus);
   const ingredientError = useSelector(getIngredientsError);
   const language = useSelector(getLanguage);
-  console.log("🚀 ~ FoodIngreientSlider ~ language:", language);
-  console.log("🚀 ~ FoodIngreientSlider ~ language:", language);
 
   const handleCheckboxChange = (ingredient) => {
     setCheckedIngredients((prevIngredients) => {
@@ -90,7 +88,7 @@ function FoodIngreientSlider() {
   useEffect(() => {
     const fetchMeals = async () => {
       try {
-        let ingredientNames = "موز"; // Default value if no checked ingredients
+        let ingredientNames = ""; // Default value if no checked ingredients
         console.log("🚀 ~ fetchMeals ~ ingredientNames:", ingredientNames);
         if (checkedIngredients.length > 0) {
           ingredientNames = checkedIngredients
@@ -102,37 +100,19 @@ function FoodIngreientSlider() {
           "🚀 ~ fetchMeals ~ checkedIngredients:",
           checkedIngredients
         );
-        console.log(
-          "🚀🚀🚀🚀🚀 ~ fetchMeals ~ ingredientNames:",
-          ingredientNames
-        );
-
-        await dispatch(
-          recommendMeals({
-            ingredients: ingredientNames,
-            lang: language,
-            token: availableUser?.token,
-          })
-        );
-
-        // axios
-        //   .get("https://tesst11.azurewebsites.net/meals/recommendMeal", {
-        //     params: {
-        //       lang: language,
-        //       ingredients: ingredientNames,
-        //     },
-        //     headers: {
-        //       token: availableUser?.token,
-        //     },
-        //   })
-        //   .then((response) => {
-        //     console.log(response.data);
-        //   })
-        //   .catch((error) => {
-        //     console.error(error);
-        //   });
+        console.log(ingredientNames);
+        console.log(typeof ingredientNames);
 
-        // console.log("Recommendation response:", response); // Log the response or handle it as needed
+        if (ingredientNames !== "") {
+          const response = await dispatch(
+            recommendMeals({
+              ingredients: ingredientNames,
+              lang: language,
+              token: availableUser?.token,
+            })
+          );
+          console.log("Recommendation response:", response); // Log the response or handle it as needed
+        }
       } catch (error) {
         console.error("Error fetching meals:", error);
       }

wannameal/src/components/mealsSlider/mealsSlider.jsx

@@ -24,6 +24,7 @@ import {
   getRecommendMeals,
 } from "../../redux/slices/recomendedMealsSlice";
 import Loading from "../loading/loading";
+import CommonMeals from "../commonMeals/commonMeals";
 
 function MealsSlider() {
   const recomendedMeals = useSelector(getRecommendMeals);
@@ -33,6 +34,9 @@ function MealsSlider() {
   const error = useSelector(getMealsError);
   console.log("🚀 ~ MealsSlider ~ error:", error);
 
+  if (recomendedMeals && recomendedMeals.length == 0) {
+    return <CommonMeals />;
+  }
   if (mealsStatus == "loading")
     return (
       <div className="w-100 d-flex justify-content-center align-items-center">
@@ -74,12 +78,13 @@ function MealsSlider() {
             spaceBetween: 40,
           },
         }}
+        style={{ direction: "ltr" }}
       >
-        {/* {recomendedMeals?.map((meal, index) => (
+        {recomendedMeals?.map((meal, index) => (
           <SwiperSlide key={index}>
             <MealCard meal={meal} />
           </SwiperSlide>
-        ))} */}
+        ))}
       </Swiper>
     </div>
   );

wannameal/src/components/postContent/postContent.module.css

@@ -16,21 +16,22 @@
   object-fit: cover;
 }
 
-.userInfo {
+.userInfo .text {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
   letter-spacing: -1px;
+  margin-left: 8px;
 }
 .userInfo .name {
   font-weight: 600;
   color: var(--text_black);
 }
 .userInfo .email {
   color: var(--grayWritingColor);
-  font-size: 14px;
-  transform: scale(0.8) translate(-5px, -8px);
+  font-size: 12px;
+  /* transform: scale(0.8); */
 }
 
 .postText {

wannameal/src/components/savedMeals/SavedMeals.jsx

@@ -51,27 +51,33 @@ export default function SavedMeals() {
     );
 
   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} `}
-      >
-        {savedMeals && savedMeals.length > 0 ? (
-          savedMeals.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}`}
+        >
+          {savedMeals && savedMeals.length > 0 ? (
+            savedMeals.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}>
+                There are no recipes saved yet.
+              </h3>
+              <p className={style.secondaryTitle}>
+                Save the recipes you like to try later and you will find them
+                saved here.{" "}
+              </p>
             </div>
-            <h3 className={style.mainTitle}>There are no recipes saved yet.</h3>
-            <p className={style.secondaryTitle}>
-              Save the recipes you like to try later and you will find them
-              saved here.{" "}
-            </p>
-          </div>
-        )}
+          )}
+        </div>
       </div>
-    </>
+    </div>
   );
 }

wannameal/src/components/savedMeals/savedMeals.module.css

@@ -1,7 +1,8 @@
 .recipsContainer {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
-  gap: 30px;
+  grid-template-columns: repeat(auto-fill, minmax(370px, 1fr));
+  justify-content: space-between;
+  gap: 10px;
 }
 
 .noMealscontainer {
@@ -11,7 +12,7 @@
   flex-direction: column;
   gap: 10px;
   align-items: center;
-  justify-content: center;
+  justify-content: space-around;
 }
 
 .noMealscontainer .imageContainer {

wannameal/src/pages/community/comunity.jsx

@@ -222,8 +222,8 @@ export default function Community() {
     try {
       dispatch(
         getProfileById({
-          userId: decodedToken.id,
-          token: availableUser.token,
+          userId: decodedToken?.id,
+          token: availableUser?.token,
           lang: language,
         })
       );

wannameal/src/pages/contact/contact.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import styles from "./contactUS.module.css";
 import { MdOutlineLocationOn } from "react-icons/md";
 import { FiPhone } from "react-icons/fi";
@@ -8,9 +8,65 @@ import { FaXTwitter } from "react-icons/fa6";
 import { TiSocialLinkedin } from "react-icons/ti";
 import "animate.css";
 import { useTranslation } from "react-i18next";
+import axios from "axios";
+import Swal from "sweetalert2";
+
 function ContactUs() {
-  const { t } = useTranslation()
-  const { head, fname, Email, msg, send, location, phone, mail } = t('contact')
+  const { t } = useTranslation();
+  const { head, fname, Email, msg, send, location, phone, mail } = t("contact");
+
+  const [formData, setFormData] = useState({
+    name: "",
+    email: "",
+    message: "",
+  });
+
+  console.log("🚀 ~ ContactUs ~ formData:", formData);
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData({
+      ...formData,
+      [name]: value,
+    });
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    try {
+      const response = await axios.post(
+        "https://fast-plat1.vercel.app/contactus",
+        formData
+      );
+      console.log("🚀 ~ handleSubmit ~ response:", response);
+      Swal.fire({
+        icon: "success",
+        title: response?.data?.message,
+        toast: true,
+        position: "top-end",
+        showConfirmButton: false,
+        timer: 3000,
+        timerProgressBar: true,
+      });
+
+      setFormData({
+        name: "",
+        email: "",
+        message: "",
+      });
+    } catch (error) {
+      console.error("Failed to send contact: ", error);
+      Swal.fire({
+        icon: "error",
+        title: "Failed to send",
+        toast: true,
+        position: "top-end",
+        showConfirmButton: false,
+        timer: 2000,
+        timerProgressBar: true,
+      });
+    }
+  };
+
   return (
     <div className={` ${styles.contactContainer} `}>
       <div
@@ -21,7 +77,7 @@ function ContactUs() {
           className={`${styles.box} row justify-content-between align-items-center px-5`}
         >
           <div className={`${styles.form} col-7`}>
-            <form>
+            <form onSubmit={handleSubmit}>
               <div className={`py-5 px-4 ${styles.inputs}`}>
                 <div>
                   <input
@@ -30,6 +86,9 @@ function ContactUs() {
                     className={`form-control ${styles.input}`}
                     id="exampleFormControlInput1"
                     placeholder={fname}
+                    value={formData.name}
+                    onChange={handleChange}
+                    required
                   />
                 </div>
                 <div>
@@ -39,6 +98,9 @@ function ContactUs() {
                     className={`form-control  ${styles.input}`}
                     id="exampleFormControlInput1"
                     placeholder={Email}
+                    value={formData.email}
+                    onChange={handleChange}
+                    required
                   />
                 </div>
                 <div>
@@ -48,33 +110,14 @@ function ContactUs() {
                     placeholder={msg}
                     id="exampleFormControlTextarea1"
                     rows={3}
-                    defaultValue={""}
+                    value={formData.message}
+                    onChange={handleChange}
+                    required
                   />
                 </div>
-
-                <div className={`${styles.submit}  w-100  py-3`}>{send}</div>
-                {/* {message && <div className={`${style.message}`}>{message}</div>} */}
-                {/* {!isLoading ? (
-                  <div
-                    style={{ background: "#912b22" }}
-                    className="btn w-25 text-white align-self-end py-3"
-                    onClick={submitSend}
-                  >
-                    send message
-                  </div>
-                ) : (
-                  <div
-                    style={{ background: "#912b22" }}
-                    className=" w-25 justify-content-center rounded-3 align-self-end py-2"
-                  >
-                    <div
-                      class="spinner-border text-white mx-auto d-block"
-                      role="status"
-                    >
-                      <span class="sr-only">Loading...</span>
-                    </div>
-                  </div>
-                )} */}
+                <button type="submit" className={`${styles.submit} w-100 py-3`}>
+                  {send}
+                </button>
               </div>
             </form>
           </div>