Skip to content

Commit e706d96

Browse files
BasharElmetwaliahmedBasharElmetwaliahmed
committed
add vistprofile and delete account
1 parent c210693 commit e706d96

File tree

14 files changed

+152
-20
lines changed

14 files changed

+152
-20
lines changed

‎src/Components/Chat/ChatBox/MessageContainer/MessageComponent.jsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* eslint-disable react/prop-types */
12

23
function MessageComponent({img,text,time,user}) {
34
return (

‎src/Components/Home/FriendsList/Requests/Requests.jsx

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import { api } from "../../../../api";
44
import useFetch from "../../../../CustomHooks/useFetch";
55
import { getOptions } from "../../../../options";
66
import RequestItem from "./RequestItem";
7+
import ReactLoading from 'react-loading';
8+
79
let init=false
810
function Requests() {
911
const {fetchApi:getJoinRequest,loading}=useFetch(`${api}/invite-requests`,getOptions,true)
@@ -19,14 +21,14 @@ function Requests() {
1921
}
2022
fetchData()
2123
},[user])
22-
if(requests.length>0)
2324
return (
2425
<div className="border-b-4 border-b-white">
2526
<div className="flex justify-between items-center pl-6 pt-9 ">
2627
<h3 className="font-bold text-xl text-mulish text-customblack">Invite to teams requests</h3>
2728
</div>
28-
<div className="flex flex-col gap-3 mt-10">
29-
{requests.map((request, index) => (
29+
{loading?<div className="h-20 py-10 center-element"><ReactLoading className="mx-auto" type={'spin'} color={"#D9C6A4"} height={30} width={30} /></div>:<div className="flex flex-col gap-3 mt-10">
30+
{ requests.length>0?
31+
requests.map((request, index) => (
3032
<div
3133
key={index}
3234
className={`${
@@ -36,8 +38,8 @@ function Requests() {
3638
<RequestItem request={request} />
3739

3840
</div>
39-
))}
40-
</div>
41+
)):<p className="pt-3 py-6 text-center">There are no invitations to join teams</p>}
42+
</div>}
4143
</div>
4244
);
4345
}

‎src/Components/Home/FriendsList/Requests/RespondToInvite.jsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,16 @@ import { api } from "../../../../api"
44
import useFetch from "../../../../CustomHooks/useFetch"
55
import ReactLoading from 'react-loading';
66
import { postOptions } from "../../../../options";
7+
import {useNavigate} from 'react-router-dom'
78

89

910
function RespondToInvite({response,request}) {
10-
const {fetchApi:respondToJoin,loading}=useFetch(`${api}/join-requests/${response}-join/${request.id}`,postOptions)
11-
11+
const {fetchApi:respondToJoin,loading}=useFetch(`${api}/invite-requests/${response}-invite/${request.id}`,postOptions)
12+
const navigate=useNavigate()
1213
const clickHandler=async()=>{
13-
console.log(request.id)
1414
const resData=await respondToJoin()
1515
if(resData.ok){
16-
console.log(resData)
16+
navigate(0)
1717
}
1818
}
1919
const style=' py-2 px-4 rounded-xl text-sm font-medium transition-all duration-300 border-2 border-solid'

‎src/Components/Posts/Posts.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ function Posts() {
55
const posts=useSelector(state=>state.posts).posts
66
if(posts)
77
return (
8-
<div >
8+
<div>
99
{posts.map(post=><Post post={post} key={post.id}/>)}
1010

1111
</div>

‎src/Components/Profile/SideBar/DeleteAccount.jsx

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
/* eslint-disable no-unused-vars */
2+
/* eslint-disable react/prop-types */
3+
import useFetch from "../../../CustomHooks/useFetch"
4+
import { postOptions } from "../../../options"
5+
import ReactLoading from 'react-loading';
6+
import {useNavigate} from 'react-router-dom'
7+
import deleteAccountIcon from '../../../assets/images/profile/sidebar/deleteAccount.svg'
8+
9+
function DeleteAccount({data,user}) {
10+
const {fetchApi:deleteAccount,loading}=useFetch(`http://localhost:8000/api/profile/edit-profile/${user.id}`,postOptions)
11+
const navigate=useNavigate()
12+
13+
const deleteHandler =async ()=>{
14+
15+
if(confirm('are you sure you want to delete')){
16+
const resData=await DeleteAccount()
17+
if(resData.ok){
18+
localStorage.clear()
19+
navigate('/')
20+
}
21+
}
22+
}
23+
return (
24+
25+
<>
26+
{!loading?
27+
<button onClick={deleteHandler} className='py-5 flex gap-3 items-center pl-11 text-2xl hover:bg-gray-300 transition-all duration-500'><img src={deleteAccountIcon}/>Delete account</button>:
28+
<div className="element-center center-element mx-auto w-[60px]"> <ReactLoading
29+
className="mx-auto"
30+
type="spin"
31+
color="#D9C6A4"
32+
height={40}
33+
width={40}
34+
/></div>
35+
36+
}
37+
</>
38+
39+
)
40+
}
41+
42+
export default DeleteAccount

‎src/Components/Profile/SideBar/ProfileSideBar.jsx

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,13 @@ import profileIcon from '../../../assets/images/profile/sidebar/profile.svg'
33
import homeIcon from '../../../assets/images/profile/sidebar/home.svg'
44
import editProfileIcon from '../../../assets/images/profile/sidebar/editprofile.svg'
55
import logOutIcon from '../../../assets/images/profile/sidebar/logout.svg'
6+
import DeleteAccount from './DeleteAccount'
7+
import { useDispatch, useSelector } from 'react-redux'
8+
import { logOut } from '../../../store/user/logOutAction'
69

710
function ProfileSideBar() {
11+
const user=useSelector(state=>state.auth.user)
12+
const dispatch=useDispatch()
813
const profileNavigation=[
914
{
1015
text:'My profile',
@@ -22,13 +27,19 @@ function ProfileSideBar() {
2227
icon:homeIcon
2328
}
2429
]
30+
if(user)
2531
return (
2632
<div className="w-1/3 bg-[rgba(252,250,248,1)] shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] h-[calc(100vh_-_99px)] sidebar">
2733
<div className='flex flex-col'>
28-
{profileNavigation.map((link,index)=><NavLink className='py-5 flex gap-3 items-center pl-11 text-2xl hover:bg-gray-300 transition-all duration-500' key={index} to={link.path}>
29-
<img src={link.icon} alt={link.text} /> {link.text}</NavLink>)}
34+
{profileNavigation.map((link,index)=><NavLink className='py-5 flex gap-3 items-center pl-11 text-2xl
35+
hover:bg-gray-300 transition-all duration-500' key={index} to={link.path}>
36+
<img src={link.icon} alt={link.text} /> {link.text}</NavLink>)}
37+
<DeleteAccount user={user}/>
38+
<button className='py-5 flex gap-3 items-center pl-11 text-2xl hover:bg-gray-300
39+
transition-all duration-500' onClick={()=>dispatch(logOut())}><img src={logOutIcon} alt='log out'/>Log out</button>
3040
</div>
3141

42+
3243
</div>
3344
)
3445
}

‎src/Components/Profile/UserProfile/Contacts.jsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,14 +17,16 @@ function Contacts({ githubUrl, linkedinUrl, behanceUrl, facebookUrl, twitterUrl
1717
return (
1818
<div className='pt-4'>
1919
<span className="border-t-[rgba(251,249,247,1)] border-t-[11px] absolute left-0 w-full"></span>
20-
<h2 className='pt-5'>Contacts</h2>
20+
<h2 className='pt-5'>Contacts</h2>
21+
{contactLinks.length===0?<p className='text-center font-semibold py-2'>No Contacts</p>:
2122
<ul className='flex gap-3 mt-3'>
23+
2224
{contactLinks.map((link, index) => (
2325
<li key={index}>
2426
<a href={link.url} target="_blank" rel="noopener noreferrer"><img src={link.icon} /></a>
2527
</li>
2628
))}
27-
</ul>
29+
</ul>}
2830
</div>
2931
);
3032
}

‎src/Components/Profile/UserProfile/ProfileHeader/ProfileHeadeDetails.jsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,20 +9,20 @@ import About from '../About'
99
import Posts from '../ProfilePosts'
1010
import Contacts from '../Contacts'
1111

12-
function ProfileHeaderDetails({user}) {
12+
function ProfileHeaderDetails({user,visit}) {
1313

1414
return (
1515
<>
1616
<div className='bg-white shadow-[0px_6px_20px_0px_rgba(218,218,218,0.3)] -top-[90px] w-[488px]
1717
rounded-2xl relative px-5 py-5'>
1818
<div className='flex justify-between items-start w-full'>
19-
<Link to='/profile/invite'><button><img src={inviteIcon}/></button></Link>
20-
<Link to='/profile/edit/personalinformation'><button><img src={editPersonalInformation}/></button></Link>
19+
{!visit&& <Link to='/profile/invite'><button><img src={inviteIcon}/></button></Link>}
20+
{!visit&& <Link to='/profile/edit/personalinformation'><button><img src={editPersonalInformation}/></button></Link>}
2121
</div>
22-
<div className='pt-16'>
22+
<div className='pt-16 mt-6'>
2323
<h3 className='font-bold text-center text-lg pb-[6px]'>{user.name}</h3>
2424
<p className='text-[rgba(184,184,184,1)] text-center text-sm mb-4'>{user.track?user.track:null}</p>
25-
<ProfileOptions/>
25+
<ProfileOptions visit={visit}/>
2626
<ProfileNumbers/>
2727
<Contacts {...user}/>
2828
<About user={user}/>

‎src/Components/Profile/UserProfile/UserProfile.jsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* eslint-disable react/prop-types */
12
import { api } from "../../../api"
23
import { getOptions } from "../../../options"
34
import ProfileHeaderDetails from "./ProfileHeader/ProfileHeadeDetails"

‎src/Components/Profile/UserProfile/VisitProfile.jsx

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { useEffect, useState } from "react"
2+
import { useSelector } from "react-redux"
3+
import { useParams } from "react-router-dom"
4+
import { api } from "../../../api"
5+
import useFetch from "../../../CustomHooks/useFetch"
6+
import { getOptions } from "../../../options"
7+
import ProfileHeaderDetails from "./ProfileHeader/ProfileHeadeDetails"
8+
import ProfileHeader from "./ProfileHeader/ProfileHeader"
9+
import ReactLoading from 'react-loading';
10+
11+
12+
function VisitProfile() {
13+
const {userId}=useParams()
14+
console.log(userId)
15+
const {fetchApi:getUser,loading}=useFetch(`${api}/users/show/${userId}`,getOptions,true)
16+
const user=useSelector(state=>state.auth.user)
17+
const [currentUser,setCurrentUser]=useState(null)
18+
useEffect(()=>{
19+
if(user && user.token){
20+
const fetchUser=async()=>{
21+
const resData=await getUser()
22+
setCurrentUser(resData.data.user)
23+
}
24+
fetchUser()}
25+
26+
},[userId,user])
27+
if(currentUser){
28+
return (
29+
<div className=" mx-auto w-[496px]">
30+
{!loading ? <div className="w-full ">
31+
<ProfileHeader user={currentUser}/>
32+
<ProfileHeaderDetails visit={true} user={currentUser}/>
33+
</div>:<div className="element-center center-element h-full w-full"><ReactLoading
34+
className="mx-auto"
35+
type="spin"
36+
color="#D9C6A4"
37+
height={40}
38+
width={40}
39+
/></div>}
40+
</div>
41+
)
42+
}}
43+
44+
export default VisitProfile

‎src/Components/Teams/TeamsDetails/TeamsDetails.jsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,13 @@ import { useParams } from 'react-router-dom'
44
import { useSelector } from 'react-redux'
55
import { imgLink } from '../../../api'
66
import JoinRequestsList from '../JoinRequestList/JoinRequestsList'
7-
7+
import {Navigate} from 'react-router-dom'
88
function TeamsDetails() {
99
const {teamId}=useParams()
1010
const teams=useSelector(state=>state.teams).teams;
1111
const team=teams.find(team=>team.id==teamId)
1212
const userData=useSelector(state=>state.auth).user
13+
if(!team) return <Navigate to='/teams'/>
1314
if(team &&userData)
1415
return (
1516

‎src/assets/images/profile/sidebar/deleteAccount.svg

Lines changed: 13 additions & 0 deletions
Loading

‎src/assets/images/profile/sidebar/image 52 (1).svg

Lines changed: 9 additions & 0 deletions
Loading

‎src/router/routes.jsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import EditProfile from '../Components/Profile/EditProfile/EditProfile';
2121
import EditPersonalInformation from '../Components/Profile/EditPersonaInformation/EditPersonalInformation';
2222
import InviteTeams from '../Components/Profile/InviteTeam.jsx/InviteTeams';
2323
import IndividualsList from '../Components/Individuals/IndividualsList';
24+
import VisitProfile from '../Components/Profile/UserProfile/VisitProfile';
2425

2526

2627
export const router = createBrowserRouter([
@@ -140,6 +141,11 @@ export const router = createBrowserRouter([
140141
element:<InviteTeams/>
141142
}
142143
]
144+
},
145+
{
146+
path:'/visit/:userId',
147+
element:<VisitProfile/>
148+
143149
}
144150
]
145151
}

0 commit comments

Comments
 (0)