feat(AAiT.web.1): Implemented personal info edit

RealEskalate · Aug 29, 2023 · da10d4c · da10d4c
1 parent 5bddeec
commit da10d4c
Show file tree

Hide file tree

Showing 4 changed files with 104 additions and 27 deletions.
diff --git a/aait/web/group-1/app/profile/layout.tsx b/aait/web/group-1/app/profile/layout.tsx
@@ -46,20 +46,3 @@ export default function ProfileLayout({
 
 
 
-
-// import React, { ReactNode } from 'react';
-
-// interface PropsInterface {
-//   children: ReactNode;
-// }
-
-// const ProfileLayout: React.FC<PropsInterface> = ({ children }) => {
-//   return (
-//     <div>
-//       <h1>This is Persitent layout accross components.</h1>
-//       { children }
-//     </div>
-//   );
-// }
-
-// export default ProfileLayout;
diff --git a/aait/web/group-1/app/profile/page.tsx b/aait/web/group-1/app/profile/page.tsx
@@ -1,55 +1,118 @@
-import React, { useState } from 'react';
+'use client'
+import React, { useRef, useState } from 'react';
 import Image from 'next/image';
+import { useEditProfileMutation } from '@/store/features/user/userApi';
 
+const userData = localStorage.getItem('user');
+const currUser = userData ? JSON.parse(userData) : null;
 
 export default function Page() {
+  const trimmedName = currUser?.userName.trim()
+  const [fName, lName] = trimmedName.split(/\s+/)
+  const fileInputRef = useRef(null)
+  const [firstName, setFirstName] = useState(fName || '')
+  const [lastName, setLastName] = useState(lName || '')
+  const [email, setEmail] = useState(currUser?.userEmail || '')
+  const [photo, setPhoto] = useState<File | null>(null)
+  const [editProfile, {isError, isLoading, isSuccess}] = useEditProfileMutation()
+
+  const handleDivClick = () => {
+    if (fileInputRef.current) {
+      fileInputRef.current.click();
+    }
+  };
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if(event.target.files) {
+      const file = event.target.files[0];
+      setPhoto(file)
+    }
+  }
+
+  const handleSaveChanges = async (event: React.FormEvent) => {
+    event.preventDefault()
+    const newUserData = new FormData()
+    newUserData.append("name", `${firstName} ${lastName}`)
+    newUserData.append("email", email)
+    if(photo) {
+      newUserData.append("image", photo)
+    }
+
+    editProfile(newUserData)
+
+
+  }
+
   return (
     <div className='flex flex-col space-y-5 font-montserrat'>
       <div className='flex justify-between'>
         <div>
           <h3 className='text-[13px] text-[#5D5D5D] font-semibold'>Manage Personal Information</h3>
           <p className='text-[10px] text-[#868686] font-light'>Add all the required information about yourself</p>
         </div>
-        <button className='text-[10px] font-semibold bg-[#264FAD] rounded-md text-white px-12 py-2'>Save Changes</button>
+        <button 
+          className='text-[10px] font-semibold bg-[#264FAD] active:bg-blue-500 rounded-md text-white px-12 py-2'
+          onClick={handleSaveChanges}
+        >
+          Save Changes
+        </button>
       </div>
       <div className='grid grid-cols-3 lg:pr-[300px] gap-10 text-[10px] md:text-[11px]'>
         <h4 className=' text-[#565656] font-semibold font-poppins col-span-1'>Name <span className='text-[#F64040]'>*</span></h4>
         <input
           type="text"
           className=" text-[#565656] font-semibold font-poppins col-span-1 border border-gray-300 rounded-lg py-2 px-3"
-          value='Yididiya'
+          value={firstName}
+          onChange={(e) => setFirstName(e.target.value)}
           />
         <input
           type="text"
           className=" text-[#565656] font-semibold font-poppins col-span-1 border border-gray-300 rounded-lg py-2 px-3"
-          value='Kebede'
+          value={lastName}
+          onChange={(e) => setLastName(e.target.value)}
           />
         <h4 className=' text-[#565656] font-semibold font-poppins col-span-1'>Email <span className='text-[#F64040]'>*</span></h4>
         <input
           type="email"
           className=" text-[#565656] font-semibold font-poppins col-span-2 border border-gray-300 rounded-lg py-2 px-3"
-          value='[email protected]'
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
           />
         <h4 className=' text-[#565656] font-semibold font-poppins col-span-1'>Your Photo <span className='text-[#F64040]'>*</span></h4>
         <div className='col-span-2 flex items-start justify-center md:justify-start space-x-0 md:space-x-16'>
           <Image
               className='hidden md:block'
-              src='/images/profile-image.png'
+              src={photo ? URL.createObjectURL(photo): currUser?.userProfile}
               width={ 50 }
               height={ 50 }
               alt='small profile image'
             />
-          <div className='text-center border flex flex-col justify-center items-center border-gray-300 rounded-lg h-full px-10 py-12'>
+          <div 
+            className='text-center border flex flex-col justify-center items-center border-gray-300 rounded-lg h-full px-10 py-12'
+            onClick={handleDivClick}
+          >
             <Image
               src='/images/file-upload-image.png'
               width={ 25 }
               height={ 25 }
               alt='file upload image'
             />
-            <p className='text-[10px] font-semibold sm:text-[11px] text-[#858585]'> <span className='text-[#565656]'>Clik to upload</span> or drag and drop SVG, PNG, JPG or GIF(max 800x400px)</p>
+            <p className='text-[10px] font-semibold sm:text-[11px] text-[#858585]'> 
+              {' '}
+              <span className='text-[#565656]'>Clik to upload</span> or drag and drop
+              SVG, PNG, JPG or GIF(max 800x400px)
+            </p>
+            <input
+              type='file'
+              ref={fileInputRef}
+              style={{ display: 'none' }}
+              onChange={handleFileChange}
+            />
           </div>
         </div>
       </div>
     </div>
   );
 }
+
+
diff --git a/aait/web/group-1/store/features/user/userApi.ts b/aait/web/group-1/store/features/user/userApi.ts
@@ -0,0 +1,29 @@
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
+
+const BASE_URL = 'https://a2sv-backend.onrender.com/api';
+
+export const profileApi = createApi({
+  reducerPath: 'profileApi',
+  baseQuery: fetchBaseQuery({ 
+    baseUrl: BASE_URL,
+    prepareHeaders: (headers, { getState }) => {
+      const userData = localStorage.getItem('user');
+      const token = userData ? JSON.parse(userData)?.token : null;
+      if(token) {
+        headers.set('Authorization', `Bearer ${token}`);
+      }
+      return headers;
+    }
+  }),
+  endpoints: (builder) => ({
+    editProfile: builder.mutation({
+      query: (newUserData) => ({
+        url: '/auth/edit-profile',
+        method: 'PATCH',
+        body: newUserData,
+      }),
+    }),
+  }),
+});
+
+export const { useEditProfileMutation } = profileApi;
diff --git a/aait/web/group-1/store/index.ts b/aait/web/group-1/store/index.ts
@@ -1,15 +1,17 @@
 import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit'
 import { authApi } from './auth/authApi'
 import { blogsApi } from './features/blogs/blogs'
-
+import { profileApi } from './features/user/userApi'
 
 export const store = configureStore({
   reducer: {
     [authApi.reducerPath]: authApi.reducer,
     [blogsApi.reducerPath]: blogsApi.reducer,
+    [profileApi.reducerPath]: profileApi.reducer,
   },
 
-  middleware: getDefaultMiddleware => getDefaultMiddleware().concat(authApi.middleware, blogsApi.middleware)
+  middleware: getDefaultMiddleware => getDefaultMiddleware()
+  .concat(authApi.middleware, blogsApi.middleware, profileApi.middleware)
 })
 
 export type RootState = ReturnType<typeof store.getState>