1- // Page where users can change their profile information, including their username, email, and password.
1+ // Page where users can change their profile information, including their username, email, and password.
2+ import React , { useEffect , useState } from 'react' ;
3+ import { useNavigate , useParams } from 'react-router-dom' ;
4+ import userService from "../../services/users"
5+ import InputField from "../auth/InputField" ;
6+
7+ function EditProfile ( ) {
8+ const navigate = useNavigate ( ) ;
9+ const { id } = useParams ( ) ; // Access the id from the route
10+ const [ userData , setUserData ] = useState ( null ) ;
11+
12+ const [ errorMessage , setErrorMessage ] = useState ( '' ) ;
13+ const [ successMessage , setSuccessMessage ] = useState ( '' ) ;
14+ const [ usernameError , setUsernameError ] = useState ( false ) ;
15+ const [ emailError , setEmailError ] = useState ( false ) ;
16+ const [ passwordError , setPasswordError ] = useState ( false ) ;
17+
18+ useEffect ( ( ) => {
19+ // Fetch the user data based on the id
20+ async function fetchUserData ( ) {
21+ const response = await userService . getUser ( id ,
22+ { headers : { Authorization : `Bearer ${ sessionStorage . getItem ( 'jwt_token' ) } } } ) ;
23+ setUserData ( response . data ) ;
24+ }
25+ fetchUserData ( ) ;
26+ } , [ id ] ) ;
27+
28+ const [ username , setUsername ] = useState ( '' ) ;
29+ const [ email , setEmail ] = useState ( '' ) ;
30+ const [ password , setPassword ] = useState ( '' ) ;
31+ const [ confirmPassword , setConfirmPassword ] = useState ( '' )
32+ const handleEditProfile = async ( e ) => {
33+ e . preventDefault ( ) ;
34+ // Handle the user profile edit
35+ const newUser = { } ;
36+ if ( username ) newUser . username = username ;
37+ if ( email ) newUser . email = email ;
38+ if ( password ) newUser . password = password ;
39+
40+ // Reset error messages
41+ setErrorMessage ( '' ) ;
42+ setSuccessMessage ( '' ) ;
43+ setUsernameError ( false ) ;
44+ setEmailError ( false ) ;
45+ setPasswordError ( false ) ;
46+
47+ // Validate inputs
48+ if ( ! username && ! email && ! password ) {
49+ setErrorMessage ( "Please fill in at least one field" )
50+ return ;
51+ }
52+
53+ if ( password !== confirmPassword ) {
54+ setPasswordError ( true ) ;
55+ setErrorMessage ( 'Passwords do not match' ) ;
56+ return ;
57+ }
58+
59+ // update user data
60+ try {
61+ await userService . updateUser ( id , newUser ,
62+ { headers : { Authorization : `Bearer ${ sessionStorage . getItem ( 'jwt_token' ) } } } ) ;
63+ setSuccessMessage ( 'User data updated successfully!' ) ;
64+ navigate ( "/home" )
65+ } catch ( e ) {
66+ console . log ( "Unable to update user data" , e ) ;
67+ if ( e . response ) {
68+ switch ( e . response . status ) {
69+ case 401 :
70+ setErrorMessage ( 'Unauthorized. Please login again.' ) ;
71+ break ;
72+ case 409 :
73+ setErrorMessage ( 'Username or email already exists.' ) ;
74+ setUsernameError ( true ) ;
75+ setEmailError ( true ) ;
76+ break ;
77+ case 500 :
78+ setErrorMessage ( 'Server error. Please try again later.' ) ;
79+ break ;
80+ default :
81+ setErrorMessage ( 'An unexpected error occurred.' ) ;
82+ break ;
83+ }
84+ }
85+ }
86+ }
87+
88+
89+ const goHome = ( ) => navigate ( '/home' )
90+ // Render user edit form based on userData
91+ return userData ? (
92+ < div >
93+ < h2 > Edit Profile</ h2 >
94+ < div className = "right-side" >
95+ < div className = "input-container" >
96+ < form onSubmit = { handleEditProfile } >
97+ < InputField
98+ label = "Username"
99+ type = "text"
100+ placeholder = "Enter your username"
101+ value = { username }
102+ onChange = { ( e ) => {
103+ setUsername ( e . target . value )
104+ setUsernameError ( false ) ;
105+ } }
106+ error = { usernameError }
107+ />
108+ < InputField
109+ label = "Email"
110+ type = "email"
111+ placeholder = "Enter your email"
112+ value = { email }
113+ onChange = { ( e ) => {
114+ setEmail ( e . target . value )
115+ setEmailError ( false ) ;
116+ } }
117+ error = { emailError }
118+ />
119+ < InputField
120+ label = "Password"
121+ type = "password"
122+ placeholder = "Enter your password"
123+ value = { password }
124+ onChange = { ( e ) => {
125+ setPassword ( e . target . value )
126+ setPasswordError ( false ) ;
127+ } }
128+ error = { passwordError }
129+ />
130+ < InputField
131+ label = "Confirm Password"
132+ type = "password"
133+ placeholder = "Confirm your password"
134+ value = { confirmPassword }
135+ onChange = { ( e ) => {
136+ setConfirmPassword ( e . target . value )
137+ setPasswordError ( false ) ;
138+ } }
139+ error = { passwordError }
140+ />
141+ < div className = 'button-container' >
142+ < button type = "submit" className = "signup-button" >
143+ Change Profile Details
144+ </ button >
145+ </ div >
146+ < div className = 'button-container' >
147+ < button type = { 'button' } onClick = { goHome } className = "signup-button" >
148+ Cancel
149+ </ button >
150+ </ div >
151+ </ form >
152+ < div className = 'notification' >
153+ { /* Success Message */ }
154+ { successMessage && < p className = "text-success mt-3" > { successMessage } </ p > }
155+
156+ { /* Error Message */ }
157+ { errorMessage && < p className = "text-danger mt-3" > { errorMessage } </ p > }
158+ </ div >
159+ </ div >
160+ </ div >
161+ </ div >
162+ ) : (
163+ < p > Loading...</ p >
164+ ) ;
165+ }
166+
167+ export default EditProfile ;
0 commit comments