Merge pull request #90 from 202306-NEA-DZ-FEW/88-add-missing-translat…

…ion-editEvent-createEvent feat(editevent, createevent): implement Translation
202306-NEA-DZ-FEW · Nov 18, 2023 · c86cd1c · c86cd1c
2 parents b109374 + b7305ba
commit c86cd1c
Show file tree

Hide file tree

Showing 10 changed files with 121 additions and 41 deletions.
diff --git a/public/locales/ar/common.json b/public/locales/ar/common.json
@@ -215,6 +215,30 @@
         "Mo": "شهر",
         "Y": "سنة"
     },
+    "editEvent": {
+        "title": "تعديل الحدث",
+        "intro": "مرحبًا مرة أخرى في صفحة تحرير الحدث الخاصة بك! قم بتحسين وتعزيز تأثير تجمعك بسهولة. قوِّي مجتمعك وواصل نشر الفرح واللطف. دعونا نجعل حدثك أكثر استثنائية معًا",
+        "subTitle": "عدل الحدث الخاص بك",
+        "titleInput": "العنوان",
+        "interests": "الإهتمام",
+        "location": "الموقع",
+        "images": "الصور",
+        "date": "التاريخ",
+        "about": "تفاصيل",
+        "save": "حفظ"
+    },
+    "createEvent": {
+        "title": "إنشاء الحدث",
+        "intro": "تمكين التغيير من خلال استضافة حدثك الخاص معنا! يتيح لك نموذجنا السهل والقابل للتنفيذ أن تصبح قائدًا في المجتمع بكل سهولة. ابدأ في إحداث تأثير إيجابي اليوم - أنشئ حدثًا ذا أهمية. انضم إلينا في نشر الفرح واللطف!",
+        "subTitle": "أنشئ الحدث الخاص بك",
+        "titleInput": "العنوان",
+        "interests": "الإهتمام",
+        "location": "الموقع",
+        "images": "الصور",
+        "date": "التاريخ",
+        "about": "تفاصيل",
+        "save": "حفظ"
+    },
     "VideoSection": {
         "title": "تمكين، مشاركة، تطوع",
         "intro": "الهام التغيير الإيجابي وإحداث تأثير ذو مغزى من خلال الأفعال الطيبة والعطاء. انضم إلينا في تحقيق الفارق",

diff --git a/public/locales/en/common.json b/public/locales/en/common.json
@@ -239,6 +239,30 @@
         "Mo": "MON",
         "Y": "YEAR"
     },
+    "editEvent": {
+        "title": "Edit Event",
+        "intro": "Welcome back to your Edit Event page! Refine, enhance, and amplify the impact of your gathering effortlessly. Empower your community and continue spreading joy and kindness. Let's make your event even more extraordinary together!",
+        "subTitle": "Edit Your own Event",
+        "titleInput": "Title",
+        "interests": "Interests",
+        "location": "Location",
+        "images": "Images",
+        "date": "date",
+        "about": "About",
+        "save": "Save all"
+    },
+    "createEvent": {
+        "title": "Create Event",
+        "intro": "Empower change by hosting your own event with us! Our easy setup and do-it-yourself model let you become a community leader effortlessly. Start making a positive impact today—create an event that matters. Join us in spreading joy and kindness!",
+        "subTitle": "Create Your own Event",
+        "titleInput": "Title",
+        "interests": "Interests",
+        "location": "Location",
+        "images": "Images",
+        "date": "date",
+        "about": "About",
+        "save": "Save all"
+    },
     "VideoSection": {
         "title": "Empower, Engage, Volunteer",
         "intro": "Inspire positive change and create meaningful impact through acts of kindness and giving. Join us in making a difference.",

diff --git a/src/components/createEventPageComponents/CreateEvent.jsx b/src/components/createEventPageComponents/CreateEvent.jsx
@@ -2,6 +2,7 @@ import { addDoc, arrayUnion } from "firebase/firestore";
 import { getDownloadURL, ref, uploadBytes } from "firebase/storage";
 import Image from "next/image";
 import { useRouter } from "next/router";
+import { useTranslation } from "next-i18next";
 import React, { useEffect, useState } from "react";
 import DatePicker from "react-datepicker";
 import { MultiSelect } from "react-multi-select-component";
@@ -25,6 +26,7 @@ function CreateEvent() {
     const [loca, setLoca] = useState(null);
     const { user, setUser } = useUser();
     const router = useRouter();
+    const { t } = useTranslation("common");
     const [urlsBunch, setUrlsBunch] = useState(null);
 
     const options = interestList.map((obj) => {
@@ -103,22 +105,18 @@ function CreateEvent() {
                             height={60}
                         ></Image>
                         <h1 className='text-4xl font-bold text-center mb-2 font-Montserrat text-white'>
-                            Host an Event!
+                            {t("createEvent.title")}
                         </h1>
                         <p className='text-lg font-Lora text-center text-white'>
-                            Empower change by hosting your own event with us!
-                            Our easy setup and do-it-yourself model let you
-                            become a community leader effortlessly. Start making
-                            a positive impact today—create an event that
-                            matters. Join us in spreading joy and kindness!
+                            {t("createEvent.intro")}
                         </p>
                     </div>
                 </div>
             </div>
             <div className='w-full border border-x-bgc-Charcoal bg-bgc-silver mx-auto'>
                 <div className='flex items-start justify-between p-5 border-b rounded-t'>
                     <h3 className='font-Montserrat text-txtc-DarkCharcoal text-2xl text-center font-semibold'>
-                        Create Your Own Event
+                        {t("createEvent.subTitle")}
                     </h3>
                 </div>
                 <div className='p-6 space-y-6'>
@@ -129,7 +127,7 @@ function CreateEvent() {
                         <div className='grid grid-cols-6 gap-6'>
                             <div className='col-span-6 sm:col-span-3'>
                                 <label htmlFor='title' className='form-input'>
-                                    Title
+                                    {t("createEvent.titleInput")}
                                 </label>
                                 <input
                                     type='text'
@@ -145,7 +143,7 @@ function CreateEvent() {
                                     htmlFor='Interests'
                                     className='form-input'
                                 >
-                                    Interests
+                                    {t("createEvent.interests")}
                                 </label>
                                 <MultiSelect
                                     options={options}
@@ -160,7 +158,7 @@ function CreateEvent() {
                                     htmlFor='location'
                                     className='form-input'
                                 >
-                                    Location
+                                    {t("createEvent.location")}
                                 </label>
                                 <LocaInput
                                     name='location'
@@ -173,7 +171,7 @@ function CreateEvent() {
                             </div>
                             <div className='col-span-6 sm:col-span-3'>
                                 <label htmlFor='image' className='form-input'>
-                                    Images
+                                    {t("createEvent.images")}
                                 </label>
                                 <input
                                     type='file'
@@ -185,7 +183,7 @@ function CreateEvent() {
                             </div>
                             <div className='col-span-6 sm:col-span-3'>
                                 <label htmlFor='date' className='form-input'>
-                                    date
+                                    {t("createEvent.date")}
                                 </label>
                                 <DatePicker
                                     type='text'
@@ -203,7 +201,7 @@ function CreateEvent() {
                             </div>
                             <div className='col-span-full'>
                                 <label htmlFor='about' className='form-input'>
-                                    About
+                                    {t("createEvent.about")}
                                 </label>
                                 <textarea
                                     id='about'
@@ -217,7 +215,7 @@ function CreateEvent() {
                             className='text-txtc-DarkCharcoal text-l font-Roboto bg-bgc-sunflower hover:bg-bgc-sunflower focus:ring-4 focus:ring-bgc-Charcoal font-medium rounded-lg text-sm px-5 py-2.5 text-center'
                             type='submit'
                         >
-                            Save all
+                            {t("createEvent.save")}
                         </button>
                     </form>
                 </div>

diff --git a/src/components/eventsPageComponents/EventCard.jsx b/src/components/eventsPageComponents/EventCard.jsx
@@ -140,7 +140,7 @@ function EventCard({ TheEvent }) {
                     <div className='flex md:flex-row flex-col gap-2 min-h-[20%] justify-between mt-2 items-end'>
                         <Link
                             className='flex justify-center bg-amber-400 cursor-pointer font-medium text-sm hover:bg-amber-400 items-center w-28 h-7 self-center  rounded-md shadow-md'
-                            href={`/events/${TheEvent.id}`}
+                            href={`/events/${TheEvent}`}
                         >
                             {" "}
                             <button className=' text-white'>

diff --git a/src/components/homepage/HowitWorks.jsx b/src/components/homepage/HowitWorks.jsx
@@ -3,11 +3,13 @@ import { useTranslation } from "next-i18next";
 import React from "react";
 import { AiOutlineRight } from "react-icons/ai";
 
+import { useUser } from "@/context/UserContext";
+
 import SocialShare from "../reusableComponents/SocialShare";
 
 const HowitWorks = () => {
     const { t } = useTranslation();
-
+    const { user } = useUser();
     const howitworks = [
         {
             image: "/images/ManTop.png",
@@ -37,7 +39,7 @@ const HowitWorks = () => {
                 "Host your own charity event and bring positive change to the world."
             ),
             logo: t("Get started"),
-            link: "/createTheEvent",
+            link: user ? "/createTheEvent" : "/authentication/signUp",
         },
         {
             image: "/images/Girl.png",

diff --git a/src/components/singlEventPageComponents/EditEvent.jsx b/src/components/singlEventPageComponents/EditEvent.jsx
@@ -8,6 +8,7 @@ import {
 } from "firebase/storage";
 import Image from "next/image";
 import { useRouter } from "next/router";
+import { useTranslation } from "next-i18next";
 import React, { useEffect, useState } from "react";
 import DatePicker from "react-datepicker";
 import { MultiSelect } from "react-multi-select-component";
@@ -25,6 +26,7 @@ function EditEvent() {
     const { user, setUser } = useUser();
     const [imageInput, setImageInput] = useState(null);
     const [urlsBunch, setUrlsBunch] = useState(null);
+    const { t } = useTranslation("common");
 
     const [startDate, setStartDate] = useState(new Date());
     const [selectedInterets, setSelectedInterets] = useState([]);
@@ -173,22 +175,18 @@ function EditEvent() {
                             height={60}
                         ></Image>
                         <h1 className='text-4xl font-bold text-center mb-2 font-Montserrat text-txtc-Ivory'>
-                            Host an Event!
+                            {t("editEvent.title")}
                         </h1>
                         <p className='text-lg font-Lora text-center text-txtc-Ivory'>
-                            Empower change by hosting your own event with us!
-                            Our easy setup and do-it-yourself model let you
-                            become a community leader effortlessly. Start making
-                            a positive impact today—create an event that
-                            matters. Join us in spreading joy and kindness!
+                            {t("editEvent.intro")}
                         </p>
                     </div>
                 </div>
             </div>
             <div className='w-full border border-x-bgc-Charcoal bg-bgc-silver mx-auto'>
                 <div className='flex items-start justify-between p-5 border-b rounded-t'>
                     <h3 className='font-Montserrat text-txtc-DarkCharcoal text-2xl text-center font-semibold'>
-                        Edit Your Event
+                        {t("editEvent.subTitle")}
                     </h3>
                 </div>
                 <div className='p-6 space-y-6'>
@@ -199,7 +197,7 @@ function EditEvent() {
                         <div className='grid grid-cols-6 gap-6'>
                             <div className='col-span-6 sm:col-span-3'>
                                 <label htmlFor='title' className='form-input'>
-                                    Title
+                                    {t("editEvent.titleInput")}
                                 </label>
                                 <input
                                     type='text'
@@ -214,7 +212,7 @@ function EditEvent() {
                                     htmlFor='Interests'
                                     className='form-input'
                                 >
-                                    Interests
+                                    {t("editEvent.interests")}
                                 </label>
                                 <MultiSelect
                                     options={options}
@@ -229,7 +227,7 @@ function EditEvent() {
                                     htmlFor='location'
                                     className='form-input'
                                 >
-                                    Location
+                                    {t("editEvent.location")}
                                 </label>
                                 <LocaInput
                                     name='location'
@@ -242,7 +240,7 @@ function EditEvent() {
                             </div>
                             <div className='col-span-6 sm:col-span-3'>
                                 <label htmlFor='image' className='form-input'>
-                                    Images
+                                    {t("editEvent.images")}
                                 </label>
                                 <input
                                     type='file'
@@ -257,7 +255,7 @@ function EditEvent() {
                             </div>
                             <div className='col-span-6 sm:col-span-3'>
                                 <label htmlFor='date' className='form-input'>
-                                    date
+                                    {t("editEvent.date")}
                                 </label>
                                 <DatePicker
                                     type='text'
@@ -275,7 +273,7 @@ function EditEvent() {
                             </div>
                             <div className='col-span-full'>
                                 <label htmlFor='about' className='form-input'>
-                                    About
+                                    {t("editEvent.about")}
                                 </label>
                                 <textarea
                                     id='about'
@@ -289,7 +287,7 @@ function EditEvent() {
                             className='text-txtc-DarkCharcoal text-l font-Roboto bg-bgc-sunflower hover:bg-bgc-sunflower focus:ring-4 focus:ring-bgc-Charcoal font-medium rounded-lg text-sm px-5 py-2.5 text-center'
                             type='submit'
                         >
-                            Save all
+                            {t("editEvent.save")}
                         </button>
                     </form>
                 </div>

diff --git a/src/components/singlEventPageComponents/EventDetails.jsx b/src/components/singlEventPageComponents/EventDetails.jsx
@@ -169,7 +169,7 @@ function EventDetails() {
                             <div className='mt-6'>
                                 <Link
                                     className='inline-flex rounded-lg bg-bgc-ForestGreen px-4 py-1.5 text-base font-semibold leading-7 text-txtc-Ivory shadow-sm ring-1 ring-bgc-silver hover:bg-bgc-sunflower hover:ring-bgc-Charcoal'
-                                    href={`/events/editEvent/${eventDisplay.id}`}
+                                    href={`/events/editTheEvent/${eventDisplay.id}`}
                                 >
                                     Edit Event
                                 </Link>

diff --git a/src/pages/createTheEvent/index.jsx b/src/pages/createTheEvent/index.jsx
@@ -1,3 +1,4 @@
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import React from "react";
 
 import CreateEvent from "@/components/createEventPageComponents/CreateEvent";
@@ -13,3 +14,12 @@ function createTheEvent() {
 }
 
 export default createTheEvent;
+
+export async function getStaticProps({ locale }) {
+    return {
+        props: {
+            ...(await serverSideTranslations(locale, ["common"])),
+            // Will be passed to the page component as props
+        },
+    };
+}
diff --git a/src/pages/events/editEvent/[id].jsx → src/pages/events/editTheEvent/[id].jsx b/src/pages/events/editEvent/[id].jsx → src/pages/events/editTheEvent/[id].jsx
@@ -1,3 +1,4 @@
+import { useTranslation } from "next-i18next";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import React from "react";
 
@@ -7,15 +8,16 @@ import EventEdit from "@/components/singlEventPageComponents/EditEvent";
 
 import Layout from "../../../layout/Layout";
 
-function editEvent() {
+function EditTheEvent() {
+    const { t } = useTranslation("common");
     return (
         <Layout>
             <EventEdit />
         </Layout>
     );
 }
 
-export default editEvent;
+export default EditTheEvent;
 
 export async function getStaticPaths() {
     const paths = await getAllEventIds();