Merge pull request #178 from 202306-NEA-DZ-FEW/174-fix-typeerror-t-is…

…-not-a-function Fix typeerror t is not a function
202306-NEA-DZ-FEW · Nov 27, 2023 · 9cdfdfb · 9cdfdfb
2 parents 5cbb994 + d7b555e
commit 9cdfdfb
Show file tree

Hide file tree

Showing 13 changed files with 168 additions and 67 deletions.
diff --git a/next.config.js b/next.config.js
@@ -16,6 +16,7 @@ module.exports = {
             "graph.facebook.com",
             "images.unsplash.com",
             "avatars.githubusercontent.com",
+            "via.placeholder.com",
         ],
     },
 };
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/locales/ar/myListings.json b/public/locales/ar/myListings.json
@@ -4,5 +4,19 @@
     "My Listings": "قوائمي",
     "My Orders": "طلباتي",
     "Logout": "تسجيل الخروج",
-    "Are you sure you want to delete this product?": "هل أنت متأكد أنك تريد حذف هذا المنتج؟"
+    "Are you sure you want to delete this product?": "هل أنت متأكد أنك تريد حذف هذا المنتج؟",
+    "name": "الاسم",
+    "surname": "اللقب",
+    "email": "البريد الإلكتروني",
+    "phone number": "رقم الهاتف",
+    "password": "كلمة المرور",
+    "confirm password": "تأكيد كلمة المرور",
+    "city": "المدينة",
+    "country": "البلد",
+    "zip": "الرمز البريدي",
+    "save changes": "حفظ التغييرات",
+    "address": "العنوان",
+    "your information has been updated successfully": "تم تحديث معلوماتك بنجاح",
+    "password and confirm password do not match": "كلمة المرور وتأكيد كلمة المرور غير متطابقين",
+    "error updating user information:": "حدث خطأ أثناء تحديث معلومات المستخدم:"
 }
diff --git a/public/locales/ar/sign.json b/public/locales/ar/sign.json
@@ -11,7 +11,7 @@
     "sign-up with": "التسجيل باستخدام",
     "google": "جوجل",
     "facebook": "فيسبوك",
-    "github": "جيت هاب",
+    "github": "جيتهاب",
     "twitter": "تويتر",
     "already have an account?": "هل لديك حساب بالفعل؟",
     "sign-in": "تسجيل الدخول",

diff --git a/public/locales/en/myListings.json b/public/locales/en/myListings.json
@@ -4,5 +4,19 @@
     "My Listings": "My Listings",
     "My Orders": "My Orders",
     "Logout": "Logout",
-    "Are you sure you want to delete this product?": "Are you sure you want to delete this product?"
+    "Are you sure you want to delete this product?": "Are you sure you want to delete this product?",
+    "name": "Name",
+    "surname": "Surname",
+    "email": "Email",
+    "phone number": "Phone Number",
+    "password": "Password",
+    "confirm password": "Confirm Password",
+    "city": "city",
+    "country": "Country",
+    "zip": "Zip",
+    "save changes": "Save Changes",
+    "address": "Address",
+    "your information has been updated successfully": "Your information has been updated successfully",
+    "password and confirm password do not match": "Password and confirm password do not match",
+    "error updating user information:": "Error updating user information:"
 }
diff --git a/public/locales/fr/myListings.json b/public/locales/fr/myListings.json
@@ -4,5 +4,19 @@
     "My Listings": "Mes annonces",
     "My Orders": "Mes commandes",
     "Logout": "Déconnexion",
-    "Are you sure you want to delete this product?": "Êtes-vous sûr de vouloir supprimer ce produit ?"
+    "Are you sure you want to delete this product?": "Êtes-vous sûr de vouloir supprimer ce produit ?",
+    "name": "Nom",
+    "surname": "Prénom",
+    "email": "E-mail",
+    "phone number": "Numéro de téléphone",
+    "password": "Mot de passe",
+    "confirm password": "Confirmer le mot de passe",
+    "city": "Ville",
+    "country": "Pays",
+    "zip": "Code postal",
+    "save changes": "Enregistrer les modifications",
+    "address": "Adresse",
+    "your information has been updated successfully": "Vos informations ont été mises à jour avec succès",
+    "password and confirm password do not match": "Le mot de passe et la confirmation du mot de passe ne correspondent pas",
+    "error updating user information:": "Erreur lors de la mise à jour des informations utilisateur :"
 }
diff --git a/src/components/EditForm/EditForm.jsx b/src/components/EditForm/EditForm.jsx
@@ -4,9 +4,10 @@ import { db } from "@/util/firebase";
 import { doc, updateDoc } from "firebase/firestore";
 import { getAuth, updateProfile } from "firebase/auth";
 import Notification from "@/components/Notification/Notitification";
-function EditForm() {
+import { useRouter } from "next/router";
+function EditForm({ t }) {
     const auth = useAuth();
-
+    const route = useRouter();
     const [userData, setUserData] = useState({
         name: "",
         surname: "",
@@ -36,7 +37,7 @@ function EditForm() {
         e.preventDefault();
 
         if (userData.password !== userData.confirmPassword) {
-            setError("Password and confirm password do not match");
+            setError(`${t("password and confirm password do not match")} `);
             return;
         }
 
@@ -50,36 +51,49 @@ function EditForm() {
                 });
             }
 
-            // Update user data in Firestore
-            const userDocRef = doc(db, "userinfo", user.uid);
-            await updateDoc(userDocRef, {
-                name: userData.name,
-                surname: userData.surname,
-                email: userData.email,
-                phoneNumber: userData.phoneNumber,
-                password: userData.password,
-                city: userData.city,
-                country: userData.country,
-                zip: userData.zip,
-            });
-
-            setSuccess(true);
+            const updateObject = {
+                ...(userData.name && { name: userData.name }),
+                ...(userData.surname && { surname: userData.surname }),
+                ...(userData.email && { email: userData.email }),
+                ...(userData.phoneNumber && {
+                    phoneNumber: userData.phoneNumber,
+                }),
+                ...(userData.password && { password: userData.password }),
+                ...(userData.city && { city: userData.city }),
+                ...(userData.country && { country: userData.country }),
+                ...(userData.zip && { zip: userData.zip }),
+            };
+
+            // Update user data in Firestore if there are changes
+            if (Object.keys(updateObject).length > 0) {
+                const userDocRef = doc(db, "userinfo", user.uid);
+                await updateDoc(userDocRef, updateObject);
+                setSuccess(true);
+            } else {
+                setSuccess(false);
+                setError("You didn't make any changes.");
+            }
         } catch (error) {
-            setError("Error updating user information: " + error.message);
+            setError(
+                `${t("error updating user information:")} ` + error.message
+            );
         } finally {
             setLoading(false);
         }
     };
 
     return (
         // component
-        <div className='flex justify-center items-center h-screen'>
+        <div
+            className='flex justify-center items-center h-screen'
+            dir={route.locale === "ar" ? "rtl" : "ltr"}
+        >
             <form className='w-full max-w-lg' onSubmit={handleSubmit}>
                 <div className='w-full px-3 mb-4'>
                     <input
                         className='appearance-none block w-full bg-fff text-[#21567E] placeholder-[#21567E] border border-[#21567E] rounded-md py-2 px-4 mb-2 leading-tight focus:outline-none focus:bg-[#F1F6FA] focus:border-[#21567E] focus:border-2'
                         type='text'
-                        placeholder='Name'
+                        placeholder={t("name")}
                         name='name'
                         value={userData.name}
                         onChange={handleChange}
@@ -90,7 +104,7 @@ function EditForm() {
                     <input
                         className='appearance-none block w-full bg-fff text-[#21567E] placeholder-[#21567E] border border-[#21567E] rounded-md py-2 px-4 mb-2 leading-tight focus:outline-none focus:bg-[#F1F6FA] focus:border-[#21567E] focus:border-2'
                         type='text'
-                        placeholder='Surname'
+                        placeholder={t("surname")}
                         name='surname'
                         value={userData.surname}
                         onChange={handleChange}
@@ -101,7 +115,7 @@ function EditForm() {
                     <input
                         className='appearance-none block w-full bg-fff text-[#21567E] placeholder-[#21567E] border border-[#21567E] rounded-md py-2 px-4 mb-2 leading-tight focus:outline-none focus:bg-[#F1F6FA] focus:border-[#21567E] focus:border-2'
                         type='text'
-                        placeholder='Email'
+                        placeholder={t("email")}
                         name='email'
                         value={userData.email}
                         onChange={handleChange}
@@ -112,7 +126,7 @@ function EditForm() {
                     <input
                         className='appearance-none block w-full bg-fff text-[#21567E] placeholder-[#21567E] border border-[#21567E] rounded-md py-2 px-4 mb-2 leading-tight focus:outline-none focus:bg-[#F1F6FA] focus:border-[#21567E] focus:border-2'
                         type='text'
-                        placeholder='Phone number'
+                        placeholder={t("phone number")}
                         name='phoneNumber'
                         value={userData.phoneNumber}
                         onChange={handleChange}
@@ -122,8 +136,8 @@ function EditForm() {
                 <div className='w-full px-3 mb-4'>
                     <input
                         className='appearance-none block w-full bg-fff text-[#21567E] placeholder-[#21567E] border border-[#21567E] rounded-md py-2 px-4 mb-2 leading-tight focus:outline-none focus:bg-[#F1F6FA] focus:border-[#21567E] focus:border-2'
-                        type='text'
-                        placeholder='Password'
+                        type='password'
+                        placeholder={t("password")}
                         name='password'
                         value={userData.password}
                         onChange={handleChange}
@@ -133,8 +147,8 @@ function EditForm() {
                 <div className='w-full px-3 mb-4'>
                     <input
                         className='appearance-none block w-full bg-fff text-[#21567E] placeholder-[#21567E] border border-[#21567E] rounded-md py-2 px-4 mb-2 leading-tight focus:outline-none focus:bg-[#F1F6FA] focus:border-[#21567E] focus:border-2'
-                        type='text'
-                        placeholder='Confirm Password'
+                        type='password'
+                        placeholder={t("confirm password")}
                         name='confirmPassword'
                         value={userData.confirmPassword}
                         onChange={handleChange}
@@ -147,12 +161,12 @@ function EditForm() {
                             className='block uppercase tracking-wide text-[#21567E] placeholder-[#21567E] text-xs font-bold mb-2'
                             htmlFor='grid-city'
                         >
-                            Address
+                            {t("address")}
                         </label>
                         <input
                             className='appearance-none block w-full bg-fff text-[#21567E] placeholder-[#21567E] border border-[#21567E] rounded-md py-2 px-4 leading-tight focus:outline-none focus:bg-[#F1F6FA] focus:border-[#21567E] focus:border-2'
                             type='text'
-                            placeholder='City'
+                            placeholder={t("city")}
                             name='city'
                             value={userData.city}
                             onChange={handleChange}
@@ -161,15 +175,15 @@ function EditForm() {
 
                     <div className='w-full md:w-1/3 px-3 mb-6 md:mb-0'>
                         <label
-                            className='block uppercase tracking-wide text-transparent placeholder-[#21567E] text-xs font-bold mb-2'
+                            className='block uppercase tracking-wide text-[#21567E] placeholder-[#21567E] text-xs font-bold mb-2'
                             htmlFor='grid-country'
                         >
-                            Country
+                            {t("country")}
                         </label>
                         <input
                             className='appearance-none block w-full bg-fff text-[#21567E] placeholder-[#21567E] border border-[#21567E] rounded-md py-2 px-4 leading-tight focus:outline-none focus:bg-[#F1F6FA] focus:border-[#21567E] focus:border-2'
                             type='text'
-                            placeholder='Country'
+                            placeholder={t("country")}
                             name='country'
                             value={userData.country}
                             onChange={handleChange}
@@ -178,15 +192,15 @@ function EditForm() {
 
                     <div className='w-full md:w-1/3 px-3 mb-6 md:mb-0'>
                         <label
-                            className='block uppercase tracking-wide text-transparent placeholder-[#21567E] text-xs font-bold mb-2'
+                            className='block uppercase tracking-wide text-[#21567E] placeholder-[#21567E] text-xs font-bold mb-2'
                             htmlFor='grid-zip'
                         >
-                            ZIP
+                            {t("zip")}
                         </label>
                         <input
                             className='appearance-none block w-full bg-fff text-[#21567E] placeholder-[#21567E] border border-[#21567E] rounded-md py-2 px-4 leading-tight focus:outline-none focus:bg-[#F1F6FA] focus:border-[#21567E] focus:border-2'
                             type='text'
-                            placeholder='ZIP'
+                            placeholder={t("zip")}
                             name='zip'
                             value={userData.zip}
                             onChange={handleChange}
@@ -211,14 +225,20 @@ function EditForm() {
                 {success && (
                     <Notification
                         type='success'
-                        message='Your information has been updated successfully'
+                        message={t(
+                            "your information has been updated successfully"
+                        )}
                         onClose={handleCloseNotification}
                     />
                 )}
 
                 <div className='flex justify-center items-center'>
-                    <button className='bg-[#FF8A57] hover:bg-transparent hover:text-[#FF8A57] hover:border-[#FF8A57] border hover:border-2 text-white font-bold py-2 px-7 rounded'>
-                        Save Changes
+                    <button
+                        className={`bg-[#FF8A57] hover:bg-transparent hover:text-[#FF8A57] hover:border-[#FF8A57] border hover:border-2 text-white font-bold py-2 rounded ${
+                            route.locale === "fr" ? "px-0 w-64" : "px-7"
+                        }`}
+                    >
+                        {t("save changes")}
                     </button>
                 </div>
             </form>

diff --git a/src/components/EditForm/__test__/EditForm.test.js b/src/components/EditForm/__test__/EditForm.test.js
@@ -8,7 +8,15 @@ jest.mock("../../../util/firebase", () => {
     };
 });
 
+jest.mock("next/router", () => ({
+    useRouter: () => ({
+        pathname: "/",
+        locale: "en",
+    }),
+}));
+const t = (key) => key;
+
 it("renders correctly", () => {
-    const tree = renderer.create(<EditForm />).toJSON();
+    const tree = renderer.create(<EditForm t={t} />).toJSON();
     expect(tree).toMatchSnapshot();
 });