Merge pull request #128 from 202306-NEA-DZ-FEW/develop

v1.0.1

public/locales/ar/common.json

@@ -59,7 +59,7 @@
         "desc": "في إيد بـ إيد يجتمع فريقنا المتنوع من الأفراد المتحمسين معًا لإحداث تأثير هادف. مع الابتكار في جوهرنا، فإننا نتعاون لتحويل الأفكار إلى أفعال، مما يضمن أن كل مشروع هو قصة نجاح تنتظر كتابتها."
     },
 
-    "Khalil Noui": "خليل نوي",
+    "Khalil Noui": "خليل النوي",
     "Oualid Elhouari": "وليد الهواري",
     "Hachem Bouhadede": "هاشم بوحداد",
     "Imane Omari": "ايمان عماري",
@@ -92,7 +92,8 @@
         "recentEvents": "اخر فاعليات:",
         "seeMore": "شاهد المزيد من فعاليات ",
         "orCheck": "او تفقد ",
-        "noEvent": "لم ينضم إلى أي  فعاليات"
+        "noEvent": "لم ينضم إلى أي  فعاليات",
+        "saved events": "النشاطات المحفوظة"
     },
     "editProfile": {
         "DisplayName": "الاسم :",
@@ -347,7 +348,9 @@
         "email": "بريد إلكتروني",
         "reset": "إعادة تعيين كلمة المرور",
         "remember": "هل تتذكر كلمة المرور الخاصة بك؟ تسجيل الدخول!",
-        "create": "إنشاء حساب!"
+        "create": "إنشاء حساب!",
+        "popupMessage": "من اجل تفاصيل اكثر حول كيفية اعادة ضبط كلمة المرور رجاءا تفقد بريدك الالكتروني",
+        "close": "غلق"
     },
     "EventsComments": {
         "add comment": "أضف تعليق"
@@ -370,5 +373,24 @@
         "HIDE COMMENTS": "إخفاء التعليقات",
         "SEE COMMENTS": "إظهار التعليقات",
         "RELATED EVENTS": "نشاطات مشابهة"
+    },
+    "mockUser": {
+        "one": {
+            "name": "إيما تومبسون",
+            "occupation": "عالمة بيئة ",
+            "comment": " “ كانت لدي تجربة رائعة مع 'إيد ب إيد'. كان الشعور بالمجتمع والغرض المشترك ملهمًا حقًا. إنني أتطلع إلى أن أكون جزءًا من المبادرات المستقبلية! ” "
+        },
+
+        "two": {
+            "name": "لينا عباس",
+            "occupation": "مصمم غرافيكي",
+            "comment": " “ لم يكن التطوع معك مجزيًا فحسب ، بل كان ممتعًا أيضًا بشكل لا يصدق. إنني أقدر حقًا التفاني الذي يعرضه فريقك لهذا السبب. إنه أمر يستحق الثناء حقًا! نتطلع إلى فرص المستقبل! ” "
+        },
+
+        "three": {
+            "name": "اليكس رودريغز",
+            "occupation": "مهندس برمجاتي",
+            "comment": " “تجربة مرضية. أحدثت المهام المنظمة بشكل جيد والطاقة الإيجابية بين المتطوعين تأثيرًا حقيقيًا. شكرا لكم على إتاحة الفرصة! ” "
+        }
     }
 }

public/locales/en/common.json

@@ -85,7 +85,8 @@
         "recentEvents": "recent events:",
         "seeMore": "See more Events with",
         "orCheck": "or check availble",
-        "noEvent": "has not joined any events"
+        "noEvent": "has not joined any events",
+        "saved events": "saved events"
     },
     "editProfile": {
         "DisplayName": "Display Name:",
@@ -192,7 +193,7 @@
         "Welcome": "Welcome,",
         "Change interest": "Change interest",
         "change location": "change location",
-        "change date": "change the date",
+        "change date": "change date",
         "sorry no event matches your filters": "sorry, no event matches your filters"
     },
     "Sun": "Sun",
@@ -346,7 +347,9 @@
         "email": "Email",
         "reset": "Reset Password",
         "remember": "Remember you Password? Login!",
-        "create": "Create an Account!"
+        "create": "Create an Account!",
+        "popupMessage": "Please check your email, for further instructions on how to reset your password. Thank You !",
+        "close": "close"
     },
     "EventsComments": {
         "add comment": "add comment"
@@ -369,5 +372,24 @@
         "HIDE COMMENTS": "HIDE COMMENTS",
         "SEE COMMENTS": "SEE COMMENTS",
         "RELATED EVENTS": "RELATED EVENTS"
+    },
+    "mockUser": {
+        "one": {
+            "name": "Emma Thompson",
+            "occupation": "Environmental Scientist",
+            "comment": " “ I had a fantastic experience with 'Aide be Aide'. The sense of community and shared purpose was truly inspiring. I look forward to being part of future initiatives! ” "
+        },
+
+        "two": {
+            "name": "Lina Abbas",
+            "occupation": "Graphic Designer",
+            "comment": " “ Volunteering with you was not only rewarding but also incredibly fun. I genuinely appreciate the dedication your team shows to the cause. it's truly commendable! Looking forward to futur opportunities! ” "
+        },
+
+        "three": {
+            "name": "Alex Rodriguez",
+            "occupation": "Software Engineer",
+            "comment": " “ A fulfilling experience. The well-organized tasks and the positive energy among volunteers made a real impact. Thank you for the opportunity! ” "
+        }
     }
 }

src/components/eventsPageComponents/EventCard.jsx

@@ -3,16 +3,37 @@ import { useTranslation } from "next-i18next";
 import React, { useEffect, useState } from "react";
 import { FaPeopleGroup } from "react-icons/fa6";
 
-import { getEventDocument } from "@/lib/firebase/controller";
+import { getEventDocument, getUserDocument } from "@/lib/firebase/controller";
 import { interestList } from "@/lib/interestsList";
 
+import { useUser } from "@/context/UserContext";
+
+import EventsSave from "./EventsSave";
 import JoinButton from "../reusableComponents/JoinButton";
 
 function EventCard({ TheEvent }) {
     const { t } = useTranslation("common");
     const [eventData, setEventData] = useState(null);
     const [joinUpdate, setJoinUpdate] = useState(0);
+    const [userDoc, setUserDoc] = useState(null);
+    const { user } = useUser();
+    console.log("userdocfromeventcard", userDoc);
+    // fetch user docs
+    useEffect(() => {
+        const fetchUserDocument = async () => {
+            if (user) {
+                const doc = await getUserDocument(user.uid);
+                if (doc.exists()) {
+                    setUserDoc({ ...doc.data(), id: doc.id });
+                } else {
+                    // Handle the case where the document doesn't exist
+                    setUserDoc(null);
+                }
+            }
+        };
 
+        fetchUserDocument();
+    }, [user]);
     // fetch event data
     useEffect(() => {
         const fetchEventData = async () => {
@@ -91,6 +112,9 @@ function EventCard({ TheEvent }) {
                 <div className='flex justify-center text-[16px] shadow-md items-center bg-emerald-100 md:w-[30%] w-[50%] rounded-md lg:text-lg font-semibold'>
                     {formattedDate}
                 </div>
+                <div className='text-xl'>
+                    <EventsSave userDoc={userDoc} eventId={TheEvent} />
+                </div>
                 <div className='flex justify-center gap-4 px-2 items-center md:w-auto md:rounded-full md:bg-gray-200 w-[50%] rounded-lg text-lg font-medium'>
                     {eventData.attendees ? (
                         <>

src/components/eventsPageComponents/EventList.jsx

@@ -10,6 +10,8 @@ import { MdClose, MdOutlineKeyboardArrowDown } from "react-icons/md";
 import { eventsCollection } from "@/lib/firebase/controller";
 import { interestList } from "@/lib/interestsList";
 
+import Loader from "@/components/loader/Loader";
+
 import { useUser } from "@/context/UserContext";
 
 import BottomSheet from "./BottomSheets";
@@ -174,7 +176,7 @@ function EventList() {
 
     // Render loading state while data is being fetched
     if (loading) {
-        return <p>Loading...</p>;
+        return <Loader />;
     }
     const handleSearch = (e) => {
         const searchValue = e.target.value.toLowerCase();
@@ -205,19 +207,19 @@ function EventList() {
         <>
             <div className='relative h-full flex flex-col bg-gray-200'>
                 <div className='relative flex md:flex-row py-2 justify-center flex-col md:px-6'>
-                    <div className='hidden bg-gray-50 mt-4 sticky top-24 rounded-xl shadow-lg md:flex flex-col w-1/4 gap-4  h-[60%]'>
+                    <div className=' hidden bg-gray-50 mt-4 sticky group transition top-24 rounded-xl shadow-lg md:flex flex-col w-1/4 gap-4  h-[60%]'>
                         {/* reset filter button */}
                         <div
-                            className='flex flex-row mt-3 h-auto py-1 justify-between px-1 transition-all duration-150 text-lg bg-gray-200 font-medium cursor-pointer hover:text-white items-center w-auto gap-2 self-center hover:bg-red-500 rounded-full shadow-lg'
+                            className='absolute flex flex-row mt-3 -left-28 group-hover:left-2 duration-300 opacity-0 group-hover:opacity-100 h-auto py-1 justify-between px-1 transition-all text-lg bg-gray-200 font-medium cursor-pointer hover:text-white items-center w-auto gap-2 self-center hover:bg-red-500 rounded-full shadow-lg'
                             onClick={() => resetFilter()}
                         >
-                            <div className='w-7 h-7 bg-gray-50 rounded-full text-red-500 flex justify-center items-center'>
+                            <div className='w-7 h-7 bg-gray-50 rounded-full text-black flex justify-center items-center'>
                                 <LuFilterX />
                             </div>
                             <h1 className=''>{t("eventList.Clear Filters")}</h1>{" "}
                         </div>
                         {/* calendar filter component */}
-                        <div>
+                        <div className='mt-10'>
                             <DateFilter
                                 upDatedDate={upDatedDate}
                                 onClick={onClick}

src/components/eventsPageComponents/EventsSave.jsx

@@ -0,0 +1,51 @@
+import { arrayRemove, arrayUnion } from "firebase/firestore";
+import React, { useEffect, useState } from "react";
+import { FaBookmark, FaRegBookmark } from "react-icons/fa";
+
+import { updateUserDocument } from "@/lib/firebase/controller";
+
+const EventsSave = ({ userDoc, eventId }) => {
+    // State to manage eventsSave array
+    const [eventsSave, setEventsSave] = useState([]);
+
+    // Update state when userDoc changes
+    useEffect(() => {
+        if (userDoc && userDoc.eventsSave) {
+            setEventsSave(userDoc.eventsSave);
+        } else {
+            setEventsSave([]);
+        }
+    }, [userDoc]);
+
+    const handleSave = async () => {
+        if (eventsSave.includes(eventId)) {
+            await updateUserDocument(userDoc.id, {
+                eventsSave: arrayRemove(eventId),
+            });
+            setEventsSave((prevEventsSave) =>
+                prevEventsSave.filter((id) => id !== eventId)
+            );
+        } else {
+            await updateUserDocument(userDoc.id, {
+                eventsSave: arrayUnion(eventId),
+            });
+            setEventsSave((prevEventsSave) => [...prevEventsSave, eventId]);
+        }
+    };
+
+    return (
+        <div className='cursor-pointer' onClick={handleSave}>
+            {eventsSave.includes(eventId) ? (
+                <div className='text-amber-400'>
+                    <FaBookmark />
+                </div>
+            ) : (
+                <div className='text-gray-950'>
+                    <FaRegBookmark />
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default EventsSave;

src/components/homepage/HeroSection.jsx

@@ -17,7 +17,7 @@ const Hero = () => {
             <div className='hero-inAll'>
                 <video
                     className='bg-video w-full h-full object-cover'
-                    src='/images/heroVideo.mp4'
+                    src='/images/check.mp4'
                     type='video/mp4'
                     poster='/images/background.png'
                     autoPlay
@@ -28,12 +28,12 @@ const Hero = () => {
 
                 <div className='bg-overlay'></div>
 
-                <div className='home-text sm:w-[70%] h-[60%] sm:h-[50%] flex flex-col justify-center items-center'>
+                <div className='home-text flex flex-col justify-center items-center'>
                     <Image
                         src='/images/HeroLogo.png'
                         alt='Logo'
-                        width={70}
-                        height={70}
+                        width={65}
+                        height={65}
                     ></Image>
                     <h2 className='hero-h1'>{t("VideoSection.title")}</h2>
                     <p className='hero-p'>{t("VideoSection.intro")}</p>

src/components/homepage/HowitWorks.jsx

@@ -52,7 +52,7 @@ const HowitWorks = () => {
     return (
         <>
             <div className='how-inAll1 bg-bgc-silver '>
-                <div className='md:w-2/5 text-center bg-bgc-silver md:text-left pl-10'>
+                <div className='md:w-2/5 text-center bg-bgc-silver md:text-center p-3'>
                     <div className='home-text sm:w-[70%] h-[60%] sm:h-[50%] flex flex-col justify-center mx-auto items-center'>
                         <Image
                             src='/images/HeroLogo.png'

src/components/homepage/SectionTwo.jsx

@@ -93,25 +93,22 @@ const SectionTwo = () => {
     ];
     const userFeeddBack = [
         {
-            Name: "Emma Thompson",
-            Occupation: " Environmental Scientist",
+            Name: t("mockUser.one.name"),
+            Occupation: t("mockUser.one.occupation"),
             Image: "/globalGoalsLogos/feedback3.jpg",
-            FeedBack:
-                " “ I had a fantastic experience with 'Aide be Aide'. The sense of community and shared purpose was truly inspiring. I look forward to being part of future initiatives! ” ",
+            FeedBack: t("mockUser.one.comment"),
         },
         {
-            Name: "Lina Abbas",
-            Occupation: "Graphic Designer",
+            Name: t("mockUser.two.name"),
+            Occupation: t("mockUser.two.occupation"),
             Image: "/globalGoalsLogos/feedback5.jpg",
-            FeedBack:
-                " “ Volunteering with you was not only rewarding but also incredibly fun. I genuinely appreciate the dedication your team shows to the cause. it's truly commendable! Looking forward to futur opportunities! ” ",
+            FeedBack: t("mockUser.two.comment"),
         },
         {
-            Name: "Alex Rodriguez",
-            Occupation: "Software Engineer",
+            Name: t("mockUser.three.name"),
+            Occupation: t("mockUser.three.occupation"),
             Image: "/globalGoalsLogos/feedback6.jpg",
-            FeedBack:
-                " “ A fulfilling experience. The well-organized tasks and the positive energy among volunteers made a real impact. Thank you for the opportunity! ” ",
+            FeedBack: t("mockUser.three.comment"),
         },
     ];
     return (
@@ -193,22 +190,42 @@ const SectionTwo = () => {
                     showArrows={false}
                     infiniteLoop={true}
                     autoPlay={true}
-                    interval={4000}
+                    interval={2000}
                     showStatus={false}
                     showIndicators={false}
                     showThumbs={false}
                 >
                     <div>
-                        <image src='/globalGoalsLogos/refugies.png' alt='' />
+                        <Image
+                            src='/globalGoalsLogos/refugies.png'
+                            alt='refugies'
+                            width={800}
+                            height={800}
+                        />
                     </div>
                     <div>
-                        <image src='/globalGoalsLogos/helpOlds.png' alt='' />
+                        <Image
+                            src='/globalGoalsLogos/helpOlds.png'
+                            alt='helpOlds'
+                            width={800}
+                            height={800}
+                        />
                     </div>
                     <div>
-                        <image src='/globalGoalsLogos/construct.png' alt='' />
+                        <Image
+                            src='/globalGoalsLogos/construct.png'
+                            alt='construct'
+                            width={800}
+                            height={800}
+                        />
                     </div>
                     <div>
-                        <image src='/globalGoalsLogos/donate.png' alt='' />
+                        <Image
+                            src='/globalGoalsLogos/donate.png'
+                            alt='donate'
+                            width={800}
+                            height={800}
+                        />
                     </div>
                 </Carousel>
             </div>

src/components/loader/Loader.jsx

@@ -3,19 +3,9 @@ import React from "react";
 function Loader() {
     return (
         <div className='flex justify-center items-center h-screen'>
-            <div className='relative'>
-                <div className='w-20 h-20 border-bgc-ForestGreen border-2 rounded-full'></div>
-                <div className='w-20 h-20 border-bgc-sunflower border-t-2 animate-spin rounded-full absolute left-0 top-0'></div>
-            </div>
-
-            <div className='relative'>
-                <div className='w-10 h-10 border-bgc-ForestGreen border-2 rounded-full'></div>
-                <div className='w-10 h-10 border-bgc-sunflower border-t-2 animate-spin rounded-full absolute left-0 top-0'></div>
-            </div>
-
-            <div className='relative'>
-                <div className='w-5 h-5 border-bgc-ForestGreen border-2 rounded-full'></div>
-                <div className='w-5 h-5 border-bgc-sunflower border-t-2 animate-spin rounded-full absolute left-0 top-0'></div>
+            <div className='centered'>
+                <div className='blob-1'></div>
+                <div className='blob-2'></div>
             </div>
         </div>
     );