From 9419ddfd9e7366fff038d54e624c48c2fe17596d Mon Sep 17 00:00:00 2001
From: Oitash <oitashg@gmail.com>
Date: Mon, 4 Nov 2024 02:02:38 +0530
Subject: [PATCH] :hammer:Working....

---
 server/controllers/Profile.js                 |  4 +-
 server/routes/Profile.js                      |  2 +-
 src/App.js                                    |  2 +-
 src/components/core/Dashboard/MyProfile.jsx   |  9 ++--
 .../Settings/ChangeProfilePicture.jsx         | 33 ++++++------
 .../core/Dashboard/Settings/EditProfile.jsx   | 54 +++++++++++++------
 .../Dashboard/Settings/UpdatePassword.jsx     | 34 ++++++++----
 src/components/core/Dashboard/Sidebar.jsx     |  2 +-
 src/components/core/Dashboard/SidebarLink.jsx |  5 +-
 src/pages/ForgotPassword.jsx                  |  5 +-
 src/pages/UpdatePassword.jsx                  | 18 ++++---
 src/services/operations/SettingsAPI.js        | 24 ++++++---
 12 files changed, 124 insertions(+), 68 deletions(-)

diff --git a/server/controllers/Profile.js b/server/controllers/Profile.js
index 05e43c4..edc8b63 100644
--- a/server/controllers/Profile.js
+++ b/server/controllers/Profile.js
@@ -11,7 +11,7 @@ exports.updateProfile = async(req, res) => {
 
     try{
         //get the data
-        const {dateofBirth = "", about = "", contactNumber, gender} = req.body
+        const {dateOfBirth = "", about = "", contactNumber, gender} = req.body
 
         //get the userID
         const id = req.user.id
@@ -39,7 +39,7 @@ exports.updateProfile = async(req, res) => {
         //Another way to update the values in database..i.e..by save
         //When object already present(here profileDetails) then use save
         //First one was by create...here no object was created
-        profileDetails.dateOfBirth = dateofBirth
+        profileDetails.dateOfBirth = dateOfBirth
         profileDetails.about = about
         profileDetails.gender = gender
         profileDetails.contactNumber = contactNumber
diff --git a/server/routes/Profile.js b/server/routes/Profile.js
index a677436..55952fd 100644
--- a/server/routes/Profile.js
+++ b/server/routes/Profile.js
@@ -13,7 +13,7 @@ const {
 // ********************************************************************************************************
 //                                      Profile routes
 // ********************************************************************************************************
-// Delet User Account
+// Delete User Account
 router.delete("/deleteProfile", auth, deleteAccount)
 router.put("/updateProfile", auth, updateProfile)
 router.get("/getUserDetails", auth, getAllUserDetails)
diff --git a/src/App.js b/src/App.js
index 509045e..e915a87 100644
--- a/src/App.js
+++ b/src/App.js
@@ -113,7 +113,7 @@ function App() {
           <Route path='dashboard/settings' element={<Settings/>}/>
           
           {
-            //If this validation is not added, then instructor can also open ebrolled-courses and cart page which is logically wrong
+            //If this validation is not added, then instructor can also open enrolled-courses and cart page which is logically wrong
             //That's why this validation is added
             //Always add ? to ensure whether accountType is present or not
             user?.accountType === ACCOUNT_TYPE.STUDENT && (
diff --git a/src/components/core/Dashboard/MyProfile.jsx b/src/components/core/Dashboard/MyProfile.jsx
index 638397c..673feed 100644
--- a/src/components/core/Dashboard/MyProfile.jsx
+++ b/src/components/core/Dashboard/MyProfile.jsx
@@ -10,7 +10,8 @@ const MyProfile = () => {
     const {user} = useSelector((state) => state.profile)
     const navigate = useNavigate()
 
-
+    console.log("User -> ", user)
+    
   return (
     <div>
         <h1 className='mb-14 text-3xl font-medium text-richblack-5'>
@@ -51,8 +52,8 @@ const MyProfile = () => {
             <p className="text-lg font-semibold text-richblack-5">About</p>
             <IconBtn
                 text="Edit"
-                onclick={() => {
-                navigate("/dashboard/settings")
+                onClick={() => {
+                  navigate("/dashboard/settings")
                 }}
             >
                 <RiEditBoxLine />
@@ -76,7 +77,7 @@ const MyProfile = () => {
           </p>
           <IconBtn
             text="Edit"
-            onclick={() => {
+            onClick={() => {
               navigate("/dashboard/settings")
             }}
           >
diff --git a/src/components/core/Dashboard/Settings/ChangeProfilePicture.jsx b/src/components/core/Dashboard/Settings/ChangeProfilePicture.jsx
index af3f80d..c8c0609 100644
--- a/src/components/core/Dashboard/Settings/ChangeProfilePicture.jsx
+++ b/src/components/core/Dashboard/Settings/ChangeProfilePicture.jsx
@@ -17,15 +17,15 @@ const ChangeProfilePicture = () => {
     const fileInputRef = useRef(null)
 
     const handleClick = () => {
-        fileInputRef.current.click()
+      fileInputRef.current.click()
     }
 
     const handleFileChange = (e) => {
         const file = e.target.files[0]
         // console.log(file)
         if (file) {
-        setImageFile(file)
-        previewFile(file)
+          setImageFile(file)
+          previewFile(file)
         }
     }
 
@@ -34,27 +34,29 @@ const ChangeProfilePicture = () => {
         reader.readAsDataURL(file)
         reader.onloadend = () => {
         setPreviewSource(reader.result)
-        }
+      }
     }
 
     const handleFileUpload = () => {
         try {
-        console.log("uploading...")
-        setLoading(true)
-        const formData = new FormData()
-        formData.append("displayPicture", imageFile)
-        // console.log("formdata", formData)
-        dispatch(updateDisplayPicture(token, formData)).then(() => {
+          console.log("uploading...")
+          setLoading(true)
+          const formData = new FormData()
+          formData.append("displayPicture", imageFile)
+          console.log("formdata", formData)
+          
+          dispatch(updateDisplayPicture(token, formData)).then(() => {
             setLoading(false)
-        })
-        } catch (error) {
-        console.log("ERROR MESSAGE - ", error.message)
+          })
+        } 
+        catch (error) {
+          console.log("ERROR MESSAGE - ", error.message)
         }
     }
 
     useEffect(() => {
         if (imageFile) {
-        previewFile(imageFile)
+          previewFile(imageFile)
         }
     }, [imageFile])
 
@@ -83,9 +85,10 @@ const ChangeProfilePicture = () => {
               >
                 Select
               </button>
+
               <IconBtn
                 text={loading ? "Uploading..." : "Upload"}
-                onclick={handleFileUpload}
+                onClick={handleFileUpload}
               >
                 {!loading && (
                   <FiUpload className="text-lg text-richblack-900" />
diff --git a/src/components/core/Dashboard/Settings/EditProfile.jsx b/src/components/core/Dashboard/Settings/EditProfile.jsx
index 5255265..cec1200 100644
--- a/src/components/core/Dashboard/Settings/EditProfile.jsx
+++ b/src/components/core/Dashboard/Settings/EditProfile.jsx
@@ -21,11 +21,12 @@ const EditProfile = () => {
     } = useForm()
 
     const submitProfileForm = async (data) => {
-        // console.log("Form Data - ", data)
+        console.log("Form Data while submitting the form-> ", data)
         try {
-        dispatch(updateProfile(token, data))
-        } catch (error) {
-        console.log("ERROR MESSAGE - ", error.message)
+          dispatch(updateProfile(token, data))
+        } 
+        catch (error) {
+          console.log("ERROR MESSAGE - ", error.message)
         }
     }
 
@@ -38,7 +39,7 @@ const EditProfile = () => {
           </h2>
           <div className="flex flex-col gap-5 lg:flex-row">
             <div className="flex flex-col gap-2 lg:w-[48%]">
-              <label htmlFor="firstName" className="lable-style">
+              <label htmlFor="firstName" className="mb-1 text-[0.875rem] leading-[1.375rem] text-richblack-5">
                 First Name
               </label>
               <input
@@ -46,7 +47,10 @@ const EditProfile = () => {
                 name="firstName"
                 id="firstName"
                 placeholder="Enter first name"
-                className="form-style"
+                style={{
+                  boxShadow: "inset 0px -1px 0px rgba(255, 255, 255, 0.18)",
+                }}
+                className="w-full rounded-[0.5rem] bg-richblack-800 p-[12px] text-richblack-5"
                 {...register("firstName", { required: true })}
                 defaultValue={user?.firstName}
               />
@@ -56,8 +60,9 @@ const EditProfile = () => {
                 </span>
               )}
             </div>
+            
             <div className="flex flex-col gap-2 lg:w-[48%]">
-              <label htmlFor="lastName" className="lable-style">
+              <label htmlFor="lastName" className="mb-1 text-[0.875rem] leading-[1.375rem] text-richblack-5">
                 Last Name
               </label>
               <input
@@ -65,7 +70,10 @@ const EditProfile = () => {
                 name="lastName"
                 id="lastName"
                 placeholder="Enter first name"
-                className="form-style"
+                style={{
+                  boxShadow: "inset 0px -1px 0px rgba(255, 255, 255, 0.18)",
+                }}
+                className="w-full rounded-[0.5rem] bg-richblack-800 p-[12px] text-richblack-5"
                 {...register("lastName", { required: true })}
                 defaultValue={user?.lastName}
               />
@@ -79,14 +87,17 @@ const EditProfile = () => {
 
           <div className="flex flex-col gap-5 lg:flex-row">
             <div className="flex flex-col gap-2 lg:w-[48%]">
-              <label htmlFor="dateOfBirth" className="lable-style">
+              <label htmlFor="dateOfBirth" className="mb-1 text-[0.875rem] leading-[1.375rem] text-richblack-5">
                 Date of Birth
               </label>
               <input
                 type="date"
                 name="dateOfBirth"
                 id="dateOfBirth"
-                className="form-style"
+                style={{
+                  boxShadow: "inset 0px -1px 0px rgba(255, 255, 255, 0.18)",
+                }}
+                className="w-full rounded-[0.5rem] bg-richblack-800 p-[12px] text-richblack-5"
                 {...register("dateOfBirth", {
                   required: {
                     value: true,
@@ -105,15 +116,19 @@ const EditProfile = () => {
                 </span>
               )}
             </div>
+
             <div className="flex flex-col gap-2 lg:w-[48%]">
-              <label htmlFor="gender" className="lable-style">
+              <label htmlFor="gender" className="mb-1 text-[0.875rem] leading-[1.375rem] text-richblack-5">
                 Gender
               </label>
               <select
                 type="text"
                 name="gender"
                 id="gender"
-                className="form-style"
+                style={{
+                  boxShadow: "inset 0px -1px 0px rgba(255, 255, 255, 0.18)",
+                }}
+                className="w-full rounded-[0.5rem] bg-richblack-800 p-[12px] text-richblack-5"
                 {...register("gender", { required: true })}
                 defaultValue={user?.additionalDetails?.gender}
               >
@@ -135,7 +150,7 @@ const EditProfile = () => {
 
           <div className="flex flex-col gap-5 lg:flex-row">
             <div className="flex flex-col gap-2 lg:w-[48%]">
-              <label htmlFor="contactNumber" className="lable-style">
+              <label htmlFor="contactNumber" className="mb-1 text-[0.875rem] leading-[1.375rem] text-richblack-5">
                 Contact Number
               </label>
               <input
@@ -143,7 +158,10 @@ const EditProfile = () => {
                 name="contactNumber"
                 id="contactNumber"
                 placeholder="Enter Contact Number"
-                className="form-style"
+                style={{
+                  boxShadow: "inset 0px -1px 0px rgba(255, 255, 255, 0.18)",
+                }}
+                className="w-full rounded-[0.5rem] bg-richblack-800 p-[12px] text-richblack-5"
                 {...register("contactNumber", {
                   required: {
                     value: true,
@@ -160,8 +178,9 @@ const EditProfile = () => {
                 </span>
               )}
             </div>
+
             <div className="flex flex-col gap-2 lg:w-[48%]">
-              <label htmlFor="about" className="lable-style">
+              <label htmlFor="about" className="mb-1 text-[0.875rem] leading-[1.375rem] text-richblack-5">
                 About
               </label>
               <input
@@ -169,7 +188,10 @@ const EditProfile = () => {
                 name="about"
                 id="about"
                 placeholder="Enter Bio Details"
-                className="form-style"
+                style={{
+                  boxShadow: "inset 0px -1px 0px rgba(255, 255, 255, 0.18)",
+                }}
+                className="w-full rounded-[0.5rem] bg-richblack-800 p-[12px] text-richblack-5"
                 {...register("about", { required: true })}
                 defaultValue={user?.additionalDetails?.about}
               />
diff --git a/src/components/core/Dashboard/Settings/UpdatePassword.jsx b/src/components/core/Dashboard/Settings/UpdatePassword.jsx
index bf5269a..20f0b5e 100644
--- a/src/components/core/Dashboard/Settings/UpdatePassword.jsx
+++ b/src/components/core/Dashboard/Settings/UpdatePassword.jsx
@@ -23,9 +23,10 @@ const UpdatePassword = () => {
     const submitPasswordForm = async (data) => {
         // console.log("password Data - ", data)
         try {
-        await changePassword(token, data)
-        } catch (error) {
-        console.log("ERROR MESSAGE - ", error.message)
+          await changePassword(token, data)
+        } 
+        catch (error) {
+          console.log("ERROR MESSAGE - ", error.message)
         }
     }
 
@@ -35,35 +36,43 @@ const UpdatePassword = () => {
           <h2 className="text-lg font-semibold text-richblack-5">Password</h2>
           <div className="flex flex-col gap-5 lg:flex-row">
             <div className="relative flex flex-col gap-2 lg:w-[48%]">
-              <label htmlFor="oldPassword" className="lable-style">
+
+              <label htmlFor="oldPassword" className="mb-1 text-[0.875rem] leading-[1.375rem] text-richblack-5">
                 Current Password
               </label>
+
               <input
                 type={showOldPassword ? "text" : "password"}
                 name="oldPassword"
                 id="oldPassword"
                 placeholder="Enter Current Password"
-                className="form-style"
+                style={{
+                  boxShadow: "inset 0px -1px 0px rgba(255, 255, 255, 0.18)",
+                }}
+                className="w-full rounded-[0.5rem] bg-richblack-800 p-[12px] text-richblack-5"
                 {...register("oldPassword", { required: true })}
               />
+
               <span
                 onClick={() => setShowOldPassword((prev) => !prev)}
                 className="absolute right-3 top-[38px] z-[10] cursor-pointer"
               >
                 {showOldPassword ? (
-                  <AiOutlineEyeInvisible fontSize={24} fill="#AFB2BF" />
-                ) : (
                   <AiOutlineEye fontSize={24} fill="#AFB2BF" />
+                ) : (
+                  <AiOutlineEyeInvisible fontSize={24} fill="#AFB2BF" />
                 )}
               </span>
+
               {errors.oldPassword && (
                 <span className="-mt-1 text-[12px] text-yellow-100">
                   Please enter your Current Password.
                 </span>
               )}
             </div>
+
             <div className="relative flex flex-col gap-2 lg:w-[48%]">
-              <label htmlFor="newPassword" className="lable-style">
+              <label htmlFor="newPassword" className="mb-1 text-[0.875rem] leading-[1.375rem] text-richblack-5">
                 New Password
               </label>
               <input
@@ -71,7 +80,10 @@ const UpdatePassword = () => {
                 name="newPassword"
                 id="newPassword"
                 placeholder="Enter New Password"
-                className="form-style"
+                style={{
+                  boxShadow: "inset 0px -1px 0px rgba(255, 255, 255, 0.18)",
+                }}
+                className="w-full rounded-[0.5rem] bg-richblack-800 p-[12px] text-richblack-5"
                 {...register("newPassword", { required: true })}
               />
               <span
@@ -79,9 +91,9 @@ const UpdatePassword = () => {
                 className="absolute right-3 top-[38px] z-[10] cursor-pointer"
               >
                 {showNewPassword ? (
-                  <AiOutlineEyeInvisible fontSize={24} fill="#AFB2BF" />
-                ) : (
                   <AiOutlineEye fontSize={24} fill="#AFB2BF" />
+                ) : (
+                  <AiOutlineEyeInvisible fontSize={24} fill="#AFB2BF" />
                 )}
               </span>
               {errors.newPassword && (
diff --git a/src/components/core/Dashboard/Sidebar.jsx b/src/components/core/Dashboard/Sidebar.jsx
index b87cbed..70d480d 100644
--- a/src/components/core/Dashboard/Sidebar.jsx
+++ b/src/components/core/Dashboard/Sidebar.jsx
@@ -56,7 +56,7 @@ const Sidebar = () => {
                 <button
                     onClick={() => setConfirmationalModal({
                         text1: "Are you sure?",
-                        text2: "You will be logged out of youtr account",
+                        text2: "You will be logged out of your account",
                         btn1Text: "Logout",
                         btn2Text: "Cancel",
                         btn1Handler: () => dispatch(logout(navigate)),
diff --git a/src/components/core/Dashboard/SidebarLink.jsx b/src/components/core/Dashboard/SidebarLink.jsx
index c9b7e3b..2eff3f4 100644
--- a/src/components/core/Dashboard/SidebarLink.jsx
+++ b/src/components/core/Dashboard/SidebarLink.jsx
@@ -2,6 +2,7 @@ import React from 'react'
 import * as Icons from "react-icons/vsc"
 import { useDispatch } from 'react-redux'
 import { matchPath, NavLink, useLocation } from 'react-router-dom'
+import { resetCourseState } from '../../../slices/courseSlice'
 
 //It represent each sidebar link i.e each tab of sidebar
 const SidebarLink = ({link, iconName}) => {
@@ -12,13 +13,13 @@ const SidebarLink = ({link, iconName}) => {
 
     //function to match the sidebar link on which we clicked and the current path from the window
     const matchRoute = (route) => {
-        return matchPath({path: route}, location.pathname)
+      return matchPath({path: route}, location.pathname)
     }
 
   return (
     <NavLink
       to={link.path}
-      // onClick={() => dispatch(resetCourseState())}
+      onClick={() => dispatch(resetCourseState())}
       className={`relative px-8 py-2 text-sm font-medium ${
         matchRoute(link.path)
           ? "bg-yellow-800 text-yellow-50"
diff --git a/src/pages/ForgotPassword.jsx b/src/pages/ForgotPassword.jsx
index 664d750..875615b 100644
--- a/src/pages/ForgotPassword.jsx
+++ b/src/pages/ForgotPassword.jsx
@@ -59,7 +59,10 @@ const ForgotPassword = () => {
                                         onChange={(e) => setEmail(e.target.value)}
                                         autoComplete='on'
                                         placeholder="Enter email address"
-                                        className="form-style w-full"
+                                        style={{
+                                            boxShadow: "inset 0px -1px 0px rgba(255, 255, 255, 0.18)",
+                                        }}
+                                        className="w-full rounded-[0.5rem] bg-richblack-800 p-[12px] text-richblack-5"
                                     />
                                 </label>
                             )
diff --git a/src/pages/UpdatePassword.jsx b/src/pages/UpdatePassword.jsx
index 0b7a09c..573a6eb 100644
--- a/src/pages/UpdatePassword.jsx
+++ b/src/pages/UpdatePassword.jsx
@@ -60,16 +60,19 @@ const UpdatePassword = () => {
                 value={password}
                 onChange={handleOnChange}
                 placeholder="Enter Password"
-                className="form-style w-full !pr-10"
+                style={{
+                  boxShadow: "inset 0px -1px 0px rgba(255, 255, 255, 0.18)",
+                }}
+                className="w-full rounded-[0.5rem] bg-richblack-800 p-[12px] text-richblack-5"
               />
               <span
                 onClick={() => setShowPassword((prev) => !prev)}
                 className="absolute right-3 top-[38px] z-[10] cursor-pointer"
               >
                 {showPassword ? (
-                  <AiOutlineEyeInvisible fontSize={24} fill="#AFB2BF" />
-                ) : (
                   <AiOutlineEye fontSize={24} fill="#AFB2BF" />
+                ) : (
+                  <AiOutlineEyeInvisible fontSize={24} fill="#AFB2BF" />
                 )}
               </span>
             </label>
@@ -84,16 +87,19 @@ const UpdatePassword = () => {
                 value={confirmPassword}
                 onChange={handleOnChange}
                 placeholder="Confirm Password"
-                className="form-style w-full !pr-10"
+                style={{
+                  boxShadow: "inset 0px -1px 0px rgba(255, 255, 255, 0.18)",
+                }}
+                className="w-full rounded-[0.5rem] bg-richblack-800 p-[12px] text-richblack-5"
               />
               <span
                 onClick={() => setShowConfirmPassword((prev) => !prev)}
                 className="absolute right-3 top-[38px] z-[10] cursor-pointer"
               >
                 {showConfirmPassword ? (
-                  <AiOutlineEyeInvisible fontSize={24} fill="#AFB2BF" />
-                ) : (
                   <AiOutlineEye fontSize={24} fill="#AFB2BF" />
+                ) : (
+                  <AiOutlineEyeInvisible fontSize={24} fill="#AFB2BF" />
                 )}
               </span>
             </label>
diff --git a/src/services/operations/SettingsAPI.js b/src/services/operations/SettingsAPI.js
index 68cc064..4bd6c81 100644
--- a/src/services/operations/SettingsAPI.js
+++ b/src/services/operations/SettingsAPI.js
@@ -3,6 +3,7 @@ import { apiConnector } from "../apiconnector"
 import { logout } from "./authAPI"
 import { setUser } from "../../slices/profileSlice"
 import { settingsEndpoints } from "../apis"
+import { useSelector } from "react-redux"
 
 const {
     UPDATE_DISPLAY_PICTURE_API,
@@ -15,6 +16,7 @@ const {
     return async (dispatch) => {
       const toastId = toast.loading("Loading...")
       try {
+        console.log("Oitash")
         const response = await apiConnector(
           "PUT",
           UPDATE_DISPLAY_PICTURE_API,
@@ -34,7 +36,8 @@ const {
         }
         toast.success("Display Picture Updated Successfully")
         dispatch(setUser(response.data.data))
-      } catch (error) {
+      } 
+      catch (error) {
         console.log("UPDATE_DISPLAY_PICTURE_API API ERROR............", error)
         toast.error("Could Not Update Display Picture")
       }
@@ -45,23 +48,27 @@ const {
   export function updateProfile(token, formData) {
     return async (dispatch) => {
       const toastId = toast.loading("Loading...")
+      
       try {
         const response = await apiConnector("PUT", UPDATE_PROFILE_API, formData, {
           Authorization: `Bearer ${token}`,
         })
+        console.log("Formdata -> ", formData)
         console.log("UPDATE_PROFILE_API API RESPONSE............", response)
-  
+
         if (!response.data.success) {
           throw new Error(response.data.message)
         }
-        const userImage = response.data.updatedUserDetails.image
-          ? response.data.updatedUserDetails.image
-          : `https://api.dicebear.com/5.x/initials/svg?seed=${response.data.updatedUserDetails.firstName} ${response.data.updatedUserDetails.lastName}`
+        const userImage = response.data.profileDetails?.image
+          ? response.data.profileDetails?.image
+          : `https://api.dicebear.com/5.x/initials/svg?seed=${formData?.firstName} ${formData?.lastName}`
         dispatch(
-          setUser({ ...response.data.updatedUserDetails, image: userImage })
+          setUser({ ...response.data.profileDetails, image: userImage })
         )
+        console.log("User image ->", userImage)
         toast.success("Profile Updated Successfully")
-      } catch (error) {
+      } 
+      catch (error) {
         console.log("UPDATE_PROFILE_API API ERROR............", error)
         toast.error("Could Not Update Profile")
       }
@@ -102,7 +109,8 @@ const {
         }
         toast.success("Profile Deleted Successfully")
         dispatch(logout(navigate))
-      } catch (error) {
+      } 
+      catch (error) {
         console.log("DELETE_PROFILE_API API ERROR............", error)
         toast.error("Could Not Delete Profile")
       }