atlp-rwanda · gracemugwanezak · Jul 17, 2024
diff --git a/src/App.tsx b/src/App.tsx
@@ -5,6 +5,7 @@ import { RouterProvider, createBrowserRouter } from 'react-router-dom';
 import Login from './pages/Login';
 import LandingPage from './pages/LandingPage';
 import GoogleAuthSuccess from './components/authentication/GoogleAuthSucces';
+import EditUserProfile from './pages/editUserProfile';
 import { ToastContainer } from 'react-toastify';
 import Searchpage from './containers/searchResults/SearchPage';
 import { useDispatch } from 'react-redux';
@@ -83,8 +84,8 @@ const App = () => {
           element: <GoogleAuthSuccess />,
         },
         {
-          path: 'shoppingcart',
-          element: <Cart />,
+          path: 'profile',
+          element: <EditUserProfile />,
         },
         {
           path: 'categories/:categoryId',

diff --git a/src/components/common/Input.tsx b/src/components/common/Input.tsx
@@ -21,7 +21,13 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
           type={type}
           id={id}
           placeholder={placeholder}
-          className={cn('p-1 px-3 rounded-lg border border-blackColor outline-none font-normal', inputClasname)}
+          className={cn('p-1 px-3 rounded-lg border border-blackColor outline-none font-normal', 
+
+            'p-1 px-3 rounded-lg border border-blackColor outline-none font-normal',
+
+            'p-1 px-3 rounded-lg border border-blackColor outline-none font-normal disabled:cursor-not-allowed disabled:opacity-50 focus:ring-grayColor/40 disabled:border-grayColor',
+            inputClasname
+          )}
           ref={ref}
           {...rest}
         />

diff --git a/src/components/profile/Profile.tsx b/src/components/profile/Profile.tsx
@@ -0,0 +1,187 @@
+import React, { useEffect, useState } from 'react';
+import { useForm, SubmitHandler } from 'react-hook-form';
+import { useGetUserByIdQuery, useUpdateUserMutation } from '../../services/userApi';
+import Input from '../common/Input';
+import { useSelector } from 'react-redux';
+
+export interface UserFormValues {
+  firstName: string;
+  lastName: string;
+  phoneNumber: string;
+  email: string;
+  photoUrl?: any;
+}
+
+const Profile: React.FC = () => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [showSuccessMessage, setShowSuccessMessage] = useState(false);
+  const id = useSelector((state: any) => state.user.userId);
+
+  const { data } = useGetUserByIdQuery(id);
+  const [userData, setUserData] = useState(data?.message);
+
+  const {
+    register,
+    handleSubmit,
+    setValue,
+    formState: { errors, isSubmitting },
+  } = useForm<UserFormValues>();
+
+  useEffect(() => {
+    if (data?.message) {
+      setUserData(data.message);
+    }
+  }, [data]);
+
+  useEffect(() => {
+    if (userData) {
+      setValue('firstName', userData.firstName);
+      setValue('lastName', userData.lastName);
+      setValue('email', userData.email);
+      setValue('phoneNumber', userData.phoneNumber);
+    }
+  }, [userData, setValue]);
+
+  const [updateUser, { isLoading, isError, error }] = useUpdateUserMutation();
+
+  const onSubmit: SubmitHandler<UserFormValues> = async data => {
+    const formData = new FormData();
+    formData.append('firstName', data.firstName);
+    formData.append('lastName', data.lastName);
+    formData.append('phoneNumber', data.phoneNumber);
+    formData.append('email', data.email);
+    if (data.photoUrl && data.photoUrl.length > 0) {
+      formData.append('profileImage', data.photoUrl[0]);
+    }
+
+    try {
+      const response = await updateUser(formData).unwrap();
+      setUserData(response.message);
+      setIsEditing(false);
+      setShowSuccessMessage(true);
+      setTimeout(() => setShowSuccessMessage(false), 3000); 
+    } catch (err) {
+      console.error('Failed to update profile:', err);
+    }
+  };
+
+  const getErrorMessage = (error: any) => {
+    if ('data' in error) {
+      return error.data?.message || 'Error updating profile';
+    } else {
+      return 'An unexpected error occurred';
+    }
+  };
+
+  return (
+    <div className='container mx-auto px-4'>
+      <div className='flex flex-col items-center'>
+        {showSuccessMessage && (
+          <div className='w-full md:w-8/12 lg:w-6/12 xl:w-5/12 bg-[#38a169] text-[#ffffff] p-4 rounded-lg mb-6 text-center'>
+            Profile updated successfully!
+          </div>
+        )}
+        <h1 className='text-3xl font-bold my-6 text-[#000000]'>My Profile</h1>
+        <div className='w-full md:w-8/12 lg:w-6/12 xl:w-5/12 border border-[#d1d5db] p-6 rounded-lg shadow-md mb-6'>
+          <div className='flex items-center justify-between'>
+            <div className='flex items-center'>
+              <img
+                className='h-24 w-24 rounded-full'
+                src={userData?.photoUrl || '/default-profile.png'}
+                alt={userData?.firstName}
+              />
+              <div className='ml-4'>
+                <div className='text-2xl font-medium text-[#000000]'>
+                  {userData?.firstName} {userData?.lastName}
+                </div>
+                <p className='text-[#6b7280] font-light mt-1'>{userData?.role}</p>
+              </div>
+            </div>
+            <button
+              type='button'
+              className='p-3 rounded-lg bg-[#d1d5db] hover:bg-[#9ca3af] transition-all text-[#000000] font-bold'
+              onClick={() => setIsEditing(true)}
+            >
+              Edit
+            </button>
+          </div>
+        </div>
+        {isEditing && (
+          <div className='w-full md:w-8/12 lg:w-6/12 xl:w-5/12 border border-[#d1d5db] rounded-xl p-8 shadow-md'>
+            <h2 className='text-xl font-semibold mb-4 text-[#000000]'>Personal Information</h2>
+            {isError && error && (
+              <p className='text-lg bg-[#f56565] text-[#ffffff] mt-4 py-2 rounded-lg px-3'>{getErrorMessage(error)}</p>
+            )}
+            <form onSubmit={handleSubmit(onSubmit)} className='space-y-6'>
+              <div>
+                <label className='block text-sm font-medium text-[#000000]'>Profile Picture</label>
+                <input type='file' accept='image/*' className='mt-2' {...register('photoUrl')} />
+              </div>
+              <div className='grid grid-cols-1 sm:grid-cols-2 gap-4'>
+                <div className='text-[#000000]'>
+                  <Input
+                    id='firstName'
+                    label='First Name'
+                    type='text'
+                    placeholder='Enter first name'
+                    {...register('firstName')}
+                    error={errors?.firstName?.message}
+                  />
+                </div>
+                <div className='text-[#000000]'>
+                  <Input
+                    id='lastName'
+                    label='Last Name'
+                    type='text'
+                    placeholder='Enter last name'
+                    {...register('lastName')}
+                    error={errors?.lastName?.message}
+                  />
+                </div>
+              </div>
+              <div className='text-[#000000]'>
+                <Input
+                  id='phoneNumber'
+                  label='Contact Number'
+                  type='tel'
+                  placeholder='Enter your contact number'
+                  {...register('phoneNumber')}
+                  error={errors?.phoneNumber?.message}
+                />
+              </div>
+              <div className='text-[#000000]'>
+                <Input
+                  id='email'
+                  label='Email'
+                  type='email'
+                  disabled
+                  placeholder='Enter your email'
+                  {...register('email')}
+                  error={errors?.email?.message}
+                />
+              </div>
+              <div className='flex justify-between gap-4'>
+                <button
+                  type='submit'
+                  className='p-3 rounded-lg bg-[#38a169] hover:bg-[#2f855a] transition-all text-[#ffffff] font-bold'
+                  disabled={isSubmitting || isLoading}
+                >
+                  {isSubmitting || isLoading ? 'Loading...' : 'Save'}
+                </button>
+                <button
+                  type='button'
+                  onClick={() => setIsEditing(false)}
+                  className='p-3 rounded-lg bg-[#d1d5db] hover:bg-[#9ca3af] transition-all text-[#000000]'
+                >
+                  Cancel
+                </button>
+              </div>
+            </form>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Profile;
diff --git a/src/pages/editUserProfile.tsx b/src/pages/editUserProfile.tsx
@@ -0,0 +1,13 @@
+import Navbar from '../components/navbar/Navbar';
+import UserProfileEdit from '../components/profile/Profile';
+
+const EditUserProfile = () => {
+  return (
+    <div>
+      <Navbar />
+      <UserProfileEdit />
+    </div>
+  );
+};
+
+export default EditUserProfile;
diff --git a/src/redux/slices/editUserSlice.ts b/src/redux/slices/editUserSlice.ts
@@ -0,0 +1,14 @@
+interface UserState {
+    user?: {
+      firstName: string;
+      lastName: string;
+      gender: string;
+      contactNumber: string;
+      email: string;
+      changePassword: boolean;
+      currentPassword: string;
+      newPassword: string;
+    };
+    isLoading: boolean;
+    error?: string;
+  }
diff --git a/src/redux/slices/userSlice.ts b/src/redux/slices/userSlice.ts
@@ -30,6 +30,7 @@ const userSlice = createSlice({
       state.userId = action.payload;
       if (action.payload) {
         localStorage.setItem('user', action.payload);
+        localStorage.setItem('user', action.payload);
       } else {
         localStorage.removeItem('user');
       }

diff --git a/src/services/index.ts b/src/services/index.ts
@@ -5,11 +5,12 @@ export const mavericksApi = createApi({
   reducerPath: 'mavericksApi',
   baseQuery: fetchBaseQuery({
     baseUrl: 'https://e-commerce-mavericcks-bn-staging-istf.onrender.com/api/',
-    prepareHeaders: (headers, { getState }) => {
-      const token = (getState() as RootState).user.token;
-      if (token) {
-        headers.set('authorization', `${token.replace(/"/g, '')!}`);
-      }
+        // baseUrl: 'localhost:5000',
+        prepareHeaders: (headers, { getState }) => {
+          const token = (getState() as RootState).user.token;
+          if (token) {
+            headers.set('authorization', `${token.replace(/"/g, '')!}`);
+          }
       return headers;
     },
   }),

diff --git a/src/services/userApi.ts b/src/services/userApi.ts
@@ -1,6 +1,8 @@
 import { mavericksApi } from '.';
 import { User } from '../types/Types';
 
+const id = localStorage.getItem('user');
+
 export const userApi = mavericksApi.injectEndpoints({
   endpoints: builder => ({
     getUserById: builder.query({
@@ -16,6 +18,17 @@ export const userApi = mavericksApi.injectEndpoints({
         },
       }),
     }),
+    updateUser: builder.mutation({
+      query: data => ({
+        url: `/users/edit/${id}`,
+        method: 'PATCH',
+        headers: {
+          authorization: localStorage.getItem('token') || '',
+        },
+        body: data,
+        formData: true,
+      }),
+    }),
     getSellers: builder.query({
       query: () => ({
         url: 'users/role/seller',
@@ -47,4 +60,11 @@ export const userApi = mavericksApi.injectEndpoints({
   overrideExisting: false,
 });
 
-export const { useGetUserByIdQuery, useGetUsersQuery,useGetSellersQuery, useGetBuyersQuery, useUpdateUserRoleMutation } = userApi;
+export const {
+  useGetUserByIdQuery,
+  useUpdateUserMutation,
+  useGetUsersQuery,
+  useGetSellersQuery,
+  useGetBuyersQuery, 
+  useUpdateUserRoleMutation,
+} = userApi;