Merge pull request #122 from 202306-NEA-DZ-FEW/119-user-profile-page-…

…data-saving-issue Fix the bug of saving data and add some improvements
202306-NEA-DZ-FEW · Nov 25, 2023 · adb2a26 · adb2a26 · vercel · Nov 25, 2023
2 parents 569af0e + ccfd345
commit adb2a26
Show file tree

Hide file tree

Showing 10 changed files with 77 additions and 52 deletions.
diff --git a/public/locales/ar/users.json b/public/locales/ar/users.json
@@ -34,6 +34,8 @@
         "choose": "اختر ...",
         "yes": "نعم",
         "no": "لا",
+        "cards": "بطاقات مضافة",
+        "tickets": "تذاكر متبقية",
         "deleteError": "حدث خطأ أثناء حذف الحساب. يرجى المحاولة مرة أخرى لاحقًا أو الاتصال بالدعم للحصول على مساعدة",
         "deleteConfirmation": "سيتم حذف حسابك بشكل دائم. هل تؤكد هذا الإجراء؟",
         "notifications": {

diff --git a/public/locales/en/users.json b/public/locales/en/users.json
@@ -34,6 +34,8 @@
         "choose": "Choose...",
         "yes": "Yes",
         "no": "No",
+        "cards": "Cards Added",
+        "tickets": "Tickets Remaining",
         "deleteConfirmation": "Your account will be permanently deleted. Do you confirm this action?",
         "notifications": {
             "updateSuccess": "Profile information updated successfully ",

diff --git a/src/components/Home/TicketsSection.jsx b/src/components/Home/TicketsSection.jsx
@@ -27,7 +27,7 @@ const TicketsSection = () => {
     };
 
     return (
-        <div className='lg:mx-20 md:mx-auto mx-auto p-16'>
+        <div id='tickets' className='lg:mx-20 md:mx-auto mx-auto p-16'>
             <Reveal>
                 <h2 className='font-atkinson font-bold block text-DarkTeal text-center text-xl md:text-2xl lg:text-2xl rtl:md:text-3xl  rtl:lg:text-4xl uppercase break-words'>
                     {t("tickets.heading1")}

diff --git a/src/components/Home/__test__/__snapshots__/HomePageWrapper.test.js.snap b/src/components/Home/__test__/__snapshots__/HomePageWrapper.test.js.snap
@@ -2273,6 +2273,7 @@ Array [
   </div>,
   <div
     className="lg:mx-20 md:mx-auto mx-auto p-16"
+    id="tickets"
   >
     <div
       style={

diff --git a/src/components/Home/__test__/__snapshots__/RecentBlogsSection.test.js.snap b/src/components/Home/__test__/__snapshots__/RecentBlogsSection.test.js.snap
@@ -3,6 +3,7 @@
 exports[`renders correctly 1`] = `
 <div
   className="lg:mx-20 md:mx-auto mx-auto p-16"
+  id="tickets"
 >
   <div
     style={

diff --git a/src/components/Home/__test__/__snapshots__/TicketsSection.test.js.snap b/src/components/Home/__test__/__snapshots__/TicketsSection.test.js.snap
@@ -3,6 +3,7 @@
 exports[`renders correctly 1`] = `
 <div
   className="lg:mx-20 md:mx-auto mx-auto p-16"
+  id="tickets"
 >
   <div
     style={

diff --git a/src/components/Navbar/dropdowns/UserDropdown.jsx b/src/components/Navbar/dropdowns/UserDropdown.jsx
@@ -1,11 +1,12 @@
-import React from "react";
-import { UserAuth } from "@/context/AuthContext";
 import Link from "next/link";
-import { IoSettingsOutline } from "react-icons/io5";
-import { IoIosLogOut } from "react-icons/io";
-import { FaRegUser } from "react-icons/fa";
-import { useTranslation } from "next-i18next";
 import { useRouter } from "next/router";
+import { useTranslation } from "next-i18next";
+import React from "react";
+import { FaRegUser } from "react-icons/fa";
+import { IoIosLogOut } from "react-icons/io";
+import { IoSettingsOutline } from "react-icons/io5";
+
+import { UserAuth } from "@/context/AuthContext";
 
 export default function UserDropdown() {
     const { t } = useTranslation("common");

diff --git a/src/pages/login/index.jsx b/src/pages/login/index.jsx
@@ -1,10 +1,10 @@
 import { yupResolver } from "@hookform/resolvers/yup";
 import { signInWithEmailAndPassword } from "firebase/auth";
-
 import Image from "next/image";
 import Link from "next/link";
-
 import { useRouter } from "next/router";
+import { useTranslation } from "next-i18next";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 import * as yup from "yup";
@@ -15,8 +15,6 @@ import Input from "@/components/elements/Input";
 import { UserAuth } from "@/context/AuthContext";
 import Layout from "@/layout/Layout";
 import { auth } from "@/util/firebase";
-import { serverSideTranslations } from "next-i18next/serverSideTranslations";
-import { useTranslation } from "next-i18next";
 
 const Login = () => {
     const router = useRouter();
@@ -38,7 +36,7 @@ const Login = () => {
         signInWithEmailAndPassword(auth, email, password)
             .then((userCredential) => {
                 // Signed in
-                router.push("/userProfile");
+                router.push("/profile");
                 const user = userCredential.user;
                 console.log("User logged in:", user);
                 // ...

diff --git a/src/pages/userProfile/index.jsx → src/pages/profile/index.jsx b/src/pages/userProfile/index.jsx → src/pages/profile/index.jsx
@@ -1,30 +1,32 @@
+// Importez les modules nécessaires
 import { deleteDoc, doc, getDoc, updateDoc } from "firebase/firestore";
 import Link from "next/link";
 import { useSearchParams } from "next/navigation";
 import { useRouter } from "next/router";
 import { withTranslation } from "next-i18next";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
-import { useState } from "react";
-import { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "react-toastify";
 
+// Importez les composants nécessaires
 import Button from "@/components/elements/Button";
 import Input from "@/components/Profile/Input";
 import ProfileImage from "@/components/ProfileImage";
 
-import { useAuth } from "@/context/AuthContext";
+// Importez le contexte Auth
+import { useAuth, UserAuth } from "@/context/AuthContext";
 import Layout from "@/layout/Layout";
 import { db } from "@/util/firebase";
 
 const User = ({ t }) => {
     const router = useRouter();
     const searchParams = useSearchParams();
+    const { totalTickets, cards } = UserAuth;
 
     const [edit, setEdit] = useState(
         searchParams.get("edit") == "true" ? true : false
     );
-
     const { user } = useAuth();
     const [photo] = useState(
         localStorage?.getItem(`therapist_image_${user.uid}`)
@@ -62,7 +64,6 @@ const User = ({ t }) => {
             const userRef = doc(db, "users", user.uid);
             await updateDoc(userRef, { ...formData, photoURL: photo });
             toast.success(t("users:userProfile.notifications.updateSuccess"));
-            // Afficher le composant Thankyou après la mise à jour du profil
         } catch (err) {
             toast.error(`Error ${err} `, {
                 position: toast.POSITION.BOTTOM_LEFT,
@@ -84,10 +85,12 @@ const User = ({ t }) => {
                     // Rediriger vers la page de connexion
                     router.push("/login");
                 } else {
+                    // eslint-disable-next-line no-console
                     console.error("Document does not exist.");
                     toast.error(t("users:userProfile.deleteError"));
                 }
             } catch (error) {
+                // eslint-disable-next-line no-console
                 console.error("Error deleting account", error);
                 toast.error(t("users:userProfile.deleteError"));
             }
@@ -106,12 +109,15 @@ const User = ({ t }) => {
                 if (docSnap.exists()) {
                     setFormData({ ...docSnap.data() });
                 } else {
+                    // eslint-disable-next-line no-console
                     console.error("Document does not exist");
                 }
             } else {
+                // eslint-disable-next-line no-console
                 console.error("User is null");
             }
         } catch (error) {
+            // eslint-disable-next-line no-console
             console.error("Error fetching user data", error);
         }
     }
@@ -148,6 +154,7 @@ const User = ({ t }) => {
                                         "users:userProfile.firstname"
                                     )}
                                     errorMessage={errors.firstname?.message}
+                                    è
                                     register={{ ...register("firstname") }}
                                     value={formData.firstname}
                                     onChange={onChange}
@@ -363,21 +370,17 @@ const User = ({ t }) => {
                                 />
                             </div>
                             <div className='flex flex-row  gap-5 my-14 lg:ml-3 lg:rtl:mr-4'>
-                                <Link href='/edit'>
-                                    {" "}
-                                    <button type='submit'>
-                                        <Button
-                                            buttonSize='lg'
-                                            buttonText={t(
-                                                "users:userProfile.save"
-                                            )}
-                                            disabled={!edit}
-                                            transition={false}
-                                            color='teal'
-                                            type='submit'
-                                        />
-                                    </button>
-                                </Link>
+                                <button type='submit'>
+                                    <Button
+                                        buttonSize='lg'
+                                        buttonText={t("users:userProfile.save")}
+                                        disabled={!edit}
+                                        transition={false}
+                                        color='teal'
+                                        type='submit'
+                                    />
+                                </button>
+
                                 <Button
                                     buttonSize='lg'
                                     buttonText={t("users:userProfile.edit")}
@@ -402,22 +405,38 @@ const User = ({ t }) => {
                                 {t("users:userProfile.payment")}
                             </h1>
                             <div className='flex flex-row  gap-5 my-14 lg:ml-3 lg:rtl:mr-4'>
-                                <Link href={`/buyTicket/${user.uid}`}>
-                                    <Button
-                                        buttonSize='lg'
-                                        buttonText={t("users:userProfile.show")}
-                                        transition={false}
-                                        color='teal'
-                                    />
-                                </Link>
-                                <Link href={`/buyTicket/${user.uid}`}>
-                                    <Button
-                                        buttonSize='lg'
-                                        buttonText={t("users:userProfile.buy")}
-                                        transition={false}
-                                        color='teal'
-                                    />
-                                </Link>
+                                <div>
+                                    <p>
+                                        {totalTickets}{" "}
+                                        {t("users:userProfile.tickets")}
+                                    </p>
+                                    <Link href='/paymentMethods'>
+                                        <Button
+                                            buttonSize='lg'
+                                            buttonText={t(
+                                                "users:userProfile.show"
+                                            )}
+                                            transition={false}
+                                            color='teal'
+                                        />
+                                    </Link>
+                                </div>
+                                <div>
+                                    <p>
+                                        {cards.length}{" "}
+                                        {t("users:userProfile.cards")}
+                                    </p>
+                                    <Link href='/#tickets'>
+                                        <Button
+                                            buttonSize='lg'
+                                            buttonText={t(
+                                                "users:userProfile.buy"
+                                            )}
+                                            transition={false}
+                                            color='teal'
+                                        />
+                                    </Link>
+                                </div>
                             </div>
                         </form>
                     </div>
@@ -426,7 +445,6 @@ const User = ({ t }) => {
         </Layout>
     );
 };
-
 export default withTranslation("users")(User);
 
 export async function getStaticProps({ locale }) {

diff --git a/src/pages/tickets/index.jsx b/src/pages/tickets/index.jsx
@@ -1,14 +1,15 @@
 import { UserAuth } from "@/context/AuthContext";
 
-const patientProfile = () => {
-    const { totalTickets } = UserAuth();
+const PatientProfile = () => {
+    const { totalTickets, cards } = UserAuth();
 
     return (
         <div>
             <h2>total Ticket Quantity</h2>
             <p>{totalTickets}</p>
+            <p>{cards.length}</p>
         </div>
     );
 };
 
-export default patientProfile;
+export default PatientProfile;
-Original file line number
+Diff line change
@@ Expand Up / @@ -2273,6 +2273,7 @@ Array [ @@
       </div>,
       <div
         className="lg:mx-20 md:mx-auto mx-auto p-16"
+        id="tickets"
       >
         <div
           style={
@@ Expand Down @@