Skip to content

Commit 8ed052d

Browse files
BasharElmetwaliahmedBasharElmetwaliahmed
committed
add edit profile page
1 parent 8d9d0f7 commit 8ed052d

File tree

14 files changed

+196
-45
lines changed

14 files changed

+196
-45
lines changed

‎src/Components/Forms/InputField.jsx

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
/* eslint-disable react/prop-types */
22
/* eslint-disable no-unused-vars */
33

4+
import { useState } from "react";
45
import { useSelector } from "react-redux";
56
import { Link } from "react-router-dom";
67

@@ -12,23 +13,24 @@ function InputField({
1213
value,
1314
type,
1415
forgetPassword,
16+
initialValue,
17+
1518
}) {
1619
const error = useSelector((state) => state.auth.error);
1720

1821
const changeValueHandler = (e) => {
19-
const newValue = e.target.value;
20-
setFormData({ ...formData, [value]: newValue });
22+
setFormData({ ...formData, [value]: e.target.value });
2123
};
22-
2324
return (
2425
<div>
2526
<div className="input-form bg-white">
2627
<input
2728
type={type}
2829
placeholder={placeholder}
2930
name={value}
30-
className="input-field pl-2"
31+
className="input-field pl-2 rounded-[15px]"
3132
onChange={changeValueHandler}
33+
defaultValue={initialValue?initialValue:''}
3234
/>
3335
<img
3436
src={icon}

‎src/Components/GlobalComponents/UploadImage.jsx

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
/* eslint-disable react/prop-types */
2+
3+
import { useEffect, useRef } from "react";
4+
5+
function UploadImage({uploadIcon,value,setFormData,formData,setUploadFromDevice}) {
6+
const imageRef=useRef()
7+
const imageChange = (e) => {
8+
if (e.target.files && e.target.files.length > 0) {
9+
setFormData({...formData,[value]:e.target.files[0]})
10+
setUploadFromDevice(true)
11+
}
12+
};
13+
14+
return (
15+
<div className='flex'>
16+
<label htmlFor='file-input' className='cursor-pointer'>
17+
<img src={uploadIcon}/>
18+
</label>
19+
<input id="file-input" className='hidden' type="file" ref={imageRef} onChange={imageChange}/>
20+
21+
22+
</div>
23+
)
24+
}
25+
26+
export default UploadImage

‎src/Components/Profile/EditProfile/EditProfile.jsx

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,23 @@
1+
import { useState } from "react"
2+
import EditProfileForm from "./EditProfileForm"
13
import EditProfileHeader from "./EditProfileHeader"
2-
4+
import {useSelector} from 'react-redux'
5+
import profileImage from '../../../assets/images/profile/no-profile-picture.svg'
36
function EditProfile() {
7+
const user=useSelector(state=>state.auth.user)
8+
const [formData,setFormData]=useState({
9+
name:'',
10+
bio:'',
11+
track:'',
12+
imageUrl:null
13+
14+
})
15+
16+
if(user)
417
return (
518
<div className="w-full flex flex-col mt-6">
6-
<EditProfileHeader/>
19+
<EditProfileHeader formData={formData} setFormData={setFormData} user={user} />
20+
<EditProfileForm formData={formData} setFormData={setFormData} user={user} userId={user.id}/>
721
</div>
822
)
923
}

‎src/Components/Profile/EditProfile/EditProfileForm.jsx

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
/* eslint-disable react/prop-types */
2+
import userIcon from '../../../assets/images/profile/user.svg'
3+
import biotrackIcon from '../../../assets/images/profile/bio-track.svg'
4+
import InputField from '../../Forms/InputField';
5+
import SaveEditForm from './SaveEditForm';
6+
function EditProfileForm({formData,setFormData,userId,user}) {
7+
const editProfileInput=[
8+
9+
{
10+
placeholder: 'Name',
11+
icon: userIcon,
12+
type: 'text',
13+
value: 'name',
14+
initialValue: user.name
15+
},
16+
{
17+
placeholder: 'Track',
18+
icon: biotrackIcon,
19+
type: 'text',
20+
value: 'track',
21+
initialValue: user.track
22+
},
23+
{
24+
placeholder: 'Bio',
25+
icon: biotrackIcon,
26+
type: 'text',
27+
value: 'bio',
28+
initialValue: user.bio
29+
},
30+
31+
];
32+
return (
33+
<form className='w-[350px] flex flex-col gap-5 mx-auto mt-4 mb-8' onSubmit={(e)=>e.preventDefault()}>
34+
{editProfileInput.map(input=><InputField key={input.value} icon={input.icon}
35+
placeholder={input.placeholder} type={input.placeholder} value={input.value} setFormData={setFormData} formData={formData} initialValue={input.initialValue}/>)}
36+
<SaveEditForm user={user} data={formData}/>
37+
</form>
38+
)
39+
}
40+
41+
export default EditProfileForm

‎src/Components/Profile/EditProfile/EditProfileHeader.jsx

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,27 @@
1-
import profileImage from '../../../assets/images/profile/Ellipse 30.svg'
2-
import profileImage from '../../../assets/images/profile/Ellipse 30.svg'
3-
4-
function EditProfileHeader() {
1+
/* eslint-disable react/prop-types */
2+
import unkownImage from '../../../assets/images/profile/no-profile-picture.svg'
3+
import uploadIcon from '../../../assets/images/profile/uploadImage.svg'
4+
import UploadImage from '../../GlobalComponents/UploadImage'
5+
import { imgLink } from '../../../api'
6+
import { useState } from 'react';
7+
8+
9+
function EditProfileHeader({formData,setFormData,user}) {
10+
const [uploadFromDevice, setUploadFromDevice] = useState(false);
11+
const profileImage= user.imageUrl?(uploadFromDevice?URL.createObjectURL(formData.imageUrl):`${imgLink}/${user.imageUrl}`):unkownImage
12+
513
return (
614
<div className='text-center'>
715
<h4 className="text-xl font-semibold mb-4 text-center">Edit profile</h4>
8-
<div>
9-
<img src={profileImage} alt='profile image update' className='mx-auto mb-1'/>
16+
<div className='relative w-fit mx-auto'>
17+
<img src={profileImage} alt='profile image update' className='mx-auto mb-1 w-[176px] w-[176px] rounded-full border-4 border-solid border-white'/>
18+
19+
<div alt='upload img icon' className='absolute right-[20px] bottom-[5px]'>
20+
<UploadImage setUploadFromDevice={setUploadFromDevice} value='imageUrl' formData={formData} uploadIcon={uploadIcon} setFormData={setFormData} />
21+
</div>
1022
</div>
11-
<h4 className='text-lg font-bold mb-2'>Emilia William</h4>
12-
<p className='text-[rgba(184,184,184,1)]'>UI/UX designer</p>
23+
<h4 className='text-lg font-bold mb-2'>{user.name}</h4>
24+
<p className='text-[rgba(184,184,184,1)]'>{user.track?user.track:''}</p>
1325

1426
</div>
1527
)

‎src/Components/Profile/EditProfile/SaveEditForm.jsx

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
/* eslint-disable no-unused-vars */
2+
/* eslint-disable react/prop-types */
3+
import useFetch from "../../../CustomHooks/useFetch"
4+
import { toFormData } from "../../../Functions/toFormData"
5+
import { postOptions } from "../../../options"
6+
import ReactLoading from 'react-loading';
7+
import { useDispatch } from "react-redux";
8+
import { editUser } from "../../../store/user/userSlice";
9+
import { imgLink } from "../../../api";
10+
11+
function SaveEditForm({data,user}) {
12+
const {fetchApi:saveProfileForm,loading}=useFetch(`http://localhost:8000/api/profile/edit-profile/${user.id}`,postOptions)
13+
const dispatch=useDispatch()
14+
15+
const editHandler =async ()=>{
16+
let formData
17+
if(data.imageUrl){
18+
formData=toFormData([{name:'name',value:data.name},
19+
{name:'bio',value:data.bio},
20+
{name:'track',value:data.track},
21+
{name:'imageUrl',value:data.imageUrl}
22+
])}
23+
else{
24+
formData=toFormData([{name:'name',value:data.name},
25+
{name:'bio',value:data.bio},
26+
{name:'track',value:data.track},
27+
])
28+
}
29+
30+
const resData=await saveProfileForm(formData)
31+
dispatch(editUser(resData.data))}
32+
33+
return (
34+
35+
<>
36+
{!loading?
37+
<button className="btn w-fit px-20 py-4 text-lg font-medium mx-auto mt-8" onClick={editHandler}>Save</button>:
38+
<div className="element-center center-element mx-auto w-[60px]"> <ReactLoading
39+
className="mx-auto"
40+
type="spin"
41+
color="#D9C6A4"
42+
height={40}
43+
width={40}
44+
/></div>
45+
46+
}
47+
</>
48+
49+
)
50+
}
51+
52+
export default SaveEditForm

‎src/Components/Teams/CreateTeamForm/CreateTeamForm.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import uploadIcon from '../../../assets/images/teams/Layer_1.svg';
33
import createTeamImg from '../../../assets/images/teams/Team work-amico (3) 3.svg';
44
import CreateTeam from './CreateTeam';
55
import CreateTeamInput from './CreateTeamInput';
6-
import UploadTeamImage from './UploadTeamImage';
6+
import UploadImage from '../../GlobalComponents/UploadImage';
77

88
function CreateTeamForm() {
99
const [teamForm, setTeamForm] = useState({
@@ -22,7 +22,7 @@ function CreateTeamForm() {
2222
className='w-[225px] h-[225px]'
2323
/>
2424
<div alt='upload img icon' className='absolute right-[36px] bottom-[28px]'>
25-
<UploadTeamImage setTeamForm={setTeamForm} teamForm={teamForm} value='image' uploadIcon={uploadIcon} />
25+
<UploadImage setFormData={setTeamForm} formData={teamForm} value='image' uploadIcon={uploadIcon} />
2626
</div>
2727
</div>
2828
<div className='pt-8 flex flex-col '>

‎src/Components/Teams/CreateTeamForm/UploadTeamImage.jsx

Lines changed: 0 additions & 23 deletions
This file was deleted.

‎src/Components/Teams/EditTeamForm/EditTeamForm.jsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { useSelector } from 'react-redux';
44
import { Navigate, useParams } from 'react-router-dom';
55
import uploadIcon from '../../../assets/images/teams/Layer_1.svg';
66
import CreateTeamInput from '../CreateTeamForm/CreateTeamInput';
7-
import UploadTeamImage from '../CreateTeamForm/UploadTeamImage';
7+
import UploadImage from '../../GlobalComponents/UploadImage';
88
import { imgLink } from '../../../api';
99
import DeleteTeam from './DeleteTeam';
1010
import EditTeam from './EditTeam';
@@ -50,10 +50,10 @@ function EditTeamForm() {
5050
className="w-[225px] h-[225px]"
5151
/>
5252
<div alt="upload img icon" className="absolute right-[36px] bottom-[28px]">
53-
<UploadTeamImage
53+
<UploadImage
5454
setUploadFromDevice={setUploadFromDevice}
55-
setTeamForm={setTeamForm}
56-
teamForm={teamForm}
55+
setFormData={setTeamForm}
56+
formData={teamForm}
5757
value="image"
5858
uploadIcon={uploadIcon}
5959
/>

‎src/Pages/Profile/Profile.jsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
1-
import {useDispatch} from 'react-redux'
21
import ProfileSideBar from '../../Components/Profile/SideBar/ProfileSideBar'
32
import RequireAuth from '../../Protected/RequireAuth'
43
import {Outlet} from 'react-router-dom'
4+
import { useDispatch } from 'react-redux'
55
import { logOut } from '../../store/user/logOutAction'
66
function Profile() {
77
const dispatch=useDispatch()
8+
89
return (
910
<RequireAuth>
1011
<div className='flex'>
1112
<ProfileSideBar></ProfileSideBar>
1213
<Outlet/>
14+
<button onClick={()=>dispatch(logOut())}>logoout</button>
1315

1416
</div>
1517
</RequireAuth>

0 commit comments

Comments
 (0)