finishes#187354206 edit-user-profile

src/App.tsx

@@ -3,11 +3,10 @@ import Success from './components/authentication/Success';
 import RegisterSection from './components/authentication/RegisterSection';
 import { RouterProvider, createBrowserRouter } from 'react-router-dom';
 import Login from './pages/Login';
+import EditUserProfile from './pages/EditUserProfile';
 import LandingPage from './pages/LandingPage';
 import GoogleAuthSuccess from './components/authentication/GoogleAuthSucces';
 import { ToastContainer } from 'react-toastify';
-import AdminPage from './pages/Admin';
-import Category from './pages/Admin/Category';
 
 const App = () => {
   const router = createBrowserRouter([
@@ -40,18 +39,8 @@ const App = () => {
       ],
     },
     {
-      path: 'admin',
-      element: <AdminPage />,
-      children: [
-        {
-          index: true,
-          element: <AdminPage />,
-        },
-        {
-          path: 'categories',
-          element: <Category />,
-        },
-      ],
+      path: 'edit/',
+      children: [{ path: ':id', element: <EditUserProfile /> }],
     },
   ]);
   return (

src/components/user/UserProfileEdit.tsx

@@ -0,0 +1,163 @@
+import React, { useEffect, useState } from 'react';
+import { useForm, SubmitHandler } from 'react-hook-form';
+import { useUpdateUserProfileMutation, useGetUserDetailsQuery } from '../../services/updateUserApi';
+import { useNavigate } from 'react-router-dom';
+import Input from '../common/Input';
+import { useParams } from 'react-router-dom';
+
+export interface UserFormValues {
+  firstName: string;
+  lastName: string;
+  contactNumber?: string;
+  email: string;
+  profilePic?: FileList | null;
+}
+
+const EditUserProfile: React.FC = () => {
+  const [formData, setFormData] = useState<UserFormValues>({
+    firstName: '',
+    lastName: '',
+    email: '',
+    contactNumber: '',
+    profilePic: null,
+  });
+  const { id } = useParams();
+  const token = localStorage.getItem('token');
+  const { data, error: userDetailError } = useGetUserDetailsQuery({ id, token });
+  console.log(data, formData);
+  useEffect(() => {
+    if (data) {
+      setFormData({
+        firstName: data.message.firstName || '',
+        lastName: data.message.lastName || '',
+        contactNumber: data.message.phoneNumber || '',
+        email: data.message.email || '',
+        profilePic: data.message.photoUrl || null,
+      });
+    }
+  }, [data]);
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm<UserFormValues>();
+  const navigate = useNavigate();
+  const [updateUser, { isLoading, isSuccess, isError, error }] = useUpdateUserProfileMutation();
+
+  const onSubmit: SubmitHandler<UserFormValues> = async data => {
+    try {
+      const newData = new FormData();
+      newData.append('firstName', data.firstName);
+      newData.append('lastName', data.lastName);
+      newData.append('email', data.email);
+      newData.append('phoneNumber', data.contactNumber);
+      if (data.profilePic) {
+        newData.append('profileImage', data.profilePic[0]);
+      }
+      const result = await updateUser({ newData: newData, id, token }).unwrap();
+
+      console.log(isLoading, isSuccess, isError);
+
+      console.log('data', data);
+      console.log(newData.values());
+      console.log('User profile updated successfully!');
+      // navigate('/profile');
+    } catch (err) {
+      console.error('Error updating user profile:', err);
+    }
+  };
+
+  const getErrorMessage = (error: any) => {
+    if ('data' in error) {
+      return error.data?.message || 'Error updating profile';
+    } else {
+      return 'An unexpected error occurred';
+    }
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value, files } = e.target;
+    setFormData(prevState => ({
+      ...prevState,
+      [name]: files ? files : value,
+    }));
+  };
+
+  return (
+    <div className='w-full xl:container flex flex-col-reverse gap-14 md:flex-row px-4 mb-8 items-center md:gap-5 transition-all md:justify-between md:px-10 lg:justify-around mt-5 md:mt-10'>
+      <div className='w-full md:w-7/12 xl:w-4/12 border-greenColor border-2 rounded-xl p-8'>
+        <p className='font-bold text-3l text-center mb-4 border-b border-gray-300 pb-2'>Edit Your Profile</p>
+        {isError && error && (
+          <p className='text-lg bg-redColor text-whiteColor mt-4 py-2 rounded-lg px-3'>{getErrorMessage(error)}</p>
+        )}
+        {isSuccess && (
+          <p className='text-lg bg-greenColor text-whiteColor mt-4 py-2 rounded-lg px-3'>
+            Profile updated successfully!
+          </p>
+        )}
+        <form onSubmit={handleSubmit(onSubmit)} className='flex flex-col gap-3 justify-center '>
+          <Input id='profilePic' label='Profile Picture' type='file' {...register('profilePic')} />
+          <div className='grid grid-cols-2 gap-2 '>
+            <Input
+              id='firstName'
+              label='First Name'
+              type='text'
+              placeholder='Enter first name'
+              {...register('firstName', { required: 'First name is required', maxLength: 10 })}
+              error={errors.firstName?.message}
+              onChange={handleInputChange}
+              value={formData?.firstName}
+            />
+            <Input
+              id='lastName'
+              label='Last Name'
+              type='text'
+              placeholder='Enter last name'
+              {...register('lastName', { required: 'Last name is required', maxLength: 10 })}
+              error={errors.lastName?.message}
+              onChange={handleInputChange}
+              value={formData?.lastName}
+            />
+          </div>
+          <Input
+            id='contactNumber'
+            label='Contact Number'
+            type='tel'
+            placeholder='Enter your contact number'
+            {...register('contactNumber')}
+            error={errors.contactNumber?.message}
+            onChange={handleInputChange}
+            value={formData?.contactNumber}
+          />
+          <Input
+            id='email'
+            label='Email'
+            type='email'
+            placeholder='Enter your email'
+            {...register('email', { required: 'Email is required' })}
+            error={errors.email?.message}
+            onChange={handleInputChange}
+            value={formData?.email}
+          />
+          <div className='flex justify-between gap-4'>
+            <button
+              type='submit'
+              className='p-2 rounded-lg bg-greenColor hover:bg-darkGreen transition-all text-whiteColor font-bold'
+            >
+              {isSubmitting || isLoading ? 'Loading...' : 'Save'}
+            </button>
+            <button
+              type='button'
+              onClick={() => navigate('/')}
+              className='p-2 rounded-lg bg-gray-300 hover:border-greenColor transition-all text-greenColor '
+            >
+              Cancel
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default EditUserProfile;

src/pages/EditUserProfile.tsx

@@ -0,0 +1,13 @@
+import Navbar from '../components/navbar/Navbar';
+import UserProfileEdit from '../components/user/UserProfileEdit';
+
+const EditUserProfile = () => {
+  return (
+    <div>
+      <Navbar />
+      <UserProfileEdit />
+    </div>
+  );
+};
+
+export default EditUserProfile;

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;
+}

src/services/index.ts

@@ -3,8 +3,8 @@ import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
 export const mavericksApi = createApi({
   reducerPath: 'mavericksApi',
   baseQuery: fetchBaseQuery({
-    baseUrl: 'https://e-commerce-mavericcks-bn-staging-istf.onrender.com/api/',
+    // baseUrl: 'https://e-commerce-mavericcks-bn-staging-istf.onrender.com/api/',
+    baseUrl: 'http://localhost:3000/api',
   }),
   endpoints: () => ({}),
 });
-

src/services/updateUserApi.ts

@@ -0,0 +1,25 @@
+import { mavericksApi } from '.';
+const editUserProfileApi = mavericksApi.injectEndpoints({
+  endpoints: builder => ({
+    getUserDetails: builder.query({
+      query: ({ id, token }) => ({
+        url: `users/user/${id}`,
+        headers: {
+          Authorization: token,
+        },
+      }),
+    }),
+    updateUserProfile: builder.mutation({
+      query: ({ newData, id, token }) => ({
+        url: `users/edit/${id}`,
+        method: 'PATCH',
+        headers: {
+          Authorization: token,
+        },
+        body: newData,
+      }),
+    }),
+  }),
+});
+
+export const { useGetUserDetailsQuery, useUpdateUserProfileMutation } = editUserProfileApi;