From 0ca31ad6291487eae25234987189ab4cdbc431ea Mon Sep 17 00:00:00 2001 From: gracemugwanezak Date: Wed, 19 Jun 2024 17:08:05 +0200 Subject: [PATCH] finishes#187354206 edit-user-profile --- src/App.tsx | 17 +-- src/components/user/UserProfileEdit.tsx | 163 ++++++++++++++++++++++++ src/pages/EditUserProfile.tsx | 13 ++ src/redux/slices/editUserSlice.ts | 14 ++ src/services/index.ts | 4 +- src/services/updateUserApi.ts | 25 ++++ 6 files changed, 220 insertions(+), 16 deletions(-) create mode 100644 src/components/user/UserProfileEdit.tsx create mode 100644 src/pages/EditUserProfile.tsx create mode 100644 src/redux/slices/editUserSlice.ts create mode 100644 src/services/updateUserApi.ts diff --git a/src/App.tsx b/src/App.tsx index 35a92cf..fa016c1 100644 --- a/src/App.tsx +++ b/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: , - children: [ - { - index: true, - element: , - }, - { - path: 'categories', - element: , - }, - ], + path: 'edit/', + children: [{ path: ':id', element: }], }, ]); return ( diff --git a/src/components/user/UserProfileEdit.tsx b/src/components/user/UserProfileEdit.tsx new file mode 100644 index 0000000..24fe934 --- /dev/null +++ b/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({ + 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(); + const navigate = useNavigate(); + const [updateUser, { isLoading, isSuccess, isError, error }] = useUpdateUserProfileMutation(); + + const onSubmit: SubmitHandler = 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) => { + const { name, value, files } = e.target; + setFormData(prevState => ({ + ...prevState, + [name]: files ? files : value, + })); + }; + + return ( +
+
+

Edit Your Profile

+ {isError && error && ( +

{getErrorMessage(error)}

+ )} + {isSuccess && ( +

+ Profile updated successfully! +

+ )} +
+ +
+ + +
+ + +
+ + +
+
+
+
+ ); +}; + +export default EditUserProfile; diff --git a/src/pages/EditUserProfile.tsx b/src/pages/EditUserProfile.tsx new file mode 100644 index 0000000..6d13fb3 --- /dev/null +++ b/src/pages/EditUserProfile.tsx @@ -0,0 +1,13 @@ +import Navbar from '../components/navbar/Navbar'; +import UserProfileEdit from '../components/user/UserProfileEdit'; + +const EditUserProfile = () => { + return ( +
+ + +
+ ); +}; + +export default EditUserProfile; diff --git a/src/redux/slices/editUserSlice.ts b/src/redux/slices/editUserSlice.ts new file mode 100644 index 0000000..6e76a15 --- /dev/null +++ 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/services/index.ts b/src/services/index.ts index 8bb8414..ec126da 100644 --- a/src/services/index.ts +++ b/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: () => ({}), }); - diff --git a/src/services/updateUserApi.ts b/src/services/updateUserApi.ts new file mode 100644 index 0000000..034c9df --- /dev/null +++ b/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;