Skip to content

Commit a820cff

Browse files
BasharElmetwaliahmedBasharElmetwaliahmed
committed
add leave team
1 parent 2f947ea commit a820cff

File tree

23 files changed

+272
-65
lines changed

23 files changed

+272
-65
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ function CreateTeam({ teamForm, setTeamForm }) {
5252
<button
5353
type="submit"
5454
onClick={editHandler}
55-
className="btn w-[220px] block mx-auto h-14 mt-10"
55+
className="btn w-[220px] block mx-auto h-14 mt-10 btn-hover"
5656
>
5757
Create
5858
</button>

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
1+
import { useState } from "react"
12

23
function CreateTeamInput({placeholder,value,setTeamForm,teamForm}) {
34
const changeHandler =(e)=>{
45
setTeamForm({...teamForm,[value]:e.target.value})
56
}
7+
68
return (
7-
<input type='text' placeholder={placeholder} onChange={changeHandler} value={teamForm[value]} className="w-[350px] max-w-full pl-8 rounded-2xl mb-5
8-
shadow-[0px_6px_20px_0px_rgba(218,_218,_218,_0.3)] bg-white text-sm h-[60px]"/>
9+
<input type='text' placeholder={placeholder} onChange={changeHandler} value={teamForm[value]} className={`w-[350px] max-w-full pl-8 rounded-2xl mb-5
10+
shadow-[0px_6px_20px_0px_rgba(218,_218,_218,_0.3)] outline-none focu transition-all duration-300 bg-white text-sm h-[60px] `}/>
911
)
1012
}
1113

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ function EditTeam({ team, teamForm, setTeamForm }) {
5151
<button
5252
type="submit"
5353
onClick={editHandler}
54-
className="btn w-[220px] block mx-auto h-14 mt-10"
54+
className="btn w-[220px] block mx-auto h-14 mt-10 btn-hover "
5555
>
5656
Save
5757
</button>

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

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/* eslint-disable react-hooks/rules-of-hooks */
22
import { useState, useEffect } from 'react';
33
import { useSelector } from 'react-redux';
4-
import { useParams } from 'react-router-dom';
4+
import { Navigate, useParams } from 'react-router-dom';
55
import uploadIcon from '../../../assets/images/teams/Layer_1.svg';
66
import CreateTeamInput from '../CreateTeamForm/CreateTeamInput';
77
import UploadTeamImage from '../CreateTeamForm/UploadTeamImage';
@@ -16,9 +16,10 @@ function EditTeamForm() {
1616
description: '',
1717
image: null,
1818
});
19+
const user=useSelector(state=>state.auth).user
1920
const [uploadFromDevice, setUploadFromDevice] = useState(false);
2021
const teams = useSelector((state) => state.teams).teams;
21-
const team = teams.find((t) => t.id === teamId);
22+
const team = teams.find((t) =>{ return t.id == teamId});
2223

2324
useEffect(() => {
2425
if (team) {
@@ -29,13 +30,14 @@ function EditTeamForm() {
2930
});
3031
}
3132
}, [team]);
32-
33+
if(team){
34+
if(team.leader_id!=user.id) return <Navigate to='/teams' replace={true}/>
3335
return (
3436
<div className="w-full bg-[rgba(252,250,248,1)] z-10 relative pt-20">
3537
<DeleteTeam team={team ? team : null} />
3638
<form
3739
onSubmit={(e) => e.preventDefault()}
38-
className="w-[375px] mx-auto element-center flex-col"
40+
className="w-[375px] mx-auto element-center flex-col mt-4"
3941
>
4042
<div className="relative w-[250px] h-[250px] mx-auto element-center rounded-full bg-white">
4143
<img
@@ -74,7 +76,7 @@ function EditTeamForm() {
7476
<EditTeam setTeamForm={setTeamForm} teamForm={teamForm} team={team} />
7577
</form>
7678
</div>
77-
);
79+
);}
7880
}
7981

8082
export default EditTeamForm;

‎src/Components/Teams/JoinRequestList/JoinRequestListItem.jsx

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
/* eslint-disable react/prop-types */
2+
import profileImage from '../../../assets/images/teams/Ellipse 26.svg'
3+
import RespondToRequest from './RespondToRequest'
4+
function JoinRequestListItem({request,setJoinRequestsList}) {
5+
return (
6+
<div>
7+
<div className='flex mb-5 items-center justify-center flex-wrap'>
8+
<img src={profileImage} alt='profile image' className='mr-3 mb-2 w-12 h-12'/>
9+
<div className='flex-col mr-5 mb-2'>
10+
<h4 className='text-[12px] font-bold'>{request.user.name}</h4>
11+
<p className='text-[10px] font-semibold'>FrontEnd developer</p>
12+
</div>
13+
<div className='flex gap-2'>
14+
<RespondToRequest response='accept' request={request} setJoinRequestsList={setJoinRequestsList}/>
15+
<RespondToRequest response='reject' request={request} setJoinRequestsList={setJoinRequestsList}/>
16+
</div>
17+
</div>
18+
</div>
19+
)
20+
}
21+
22+
export default JoinRequestListItem

‎src/Components/Teams/JoinRequestList/JoinRequestsList.jsx

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
/* eslint-disable react/prop-types */
2+
import { useState } from "react"
3+
import { useEffect } from "react"
4+
import { api } from "../../../api"
5+
import useFetch from "../../../CustomHooks/useFetch"
6+
import { getOptions } from "../../../options"
7+
import JoinRequestListItem from "./JoinRequestListItem"
8+
9+
function JoinRequestsList({teamId}) {
10+
const {fetchApi:getRequests}=useFetch(`${api}/join-requests/${teamId}`,getOptions,true)
11+
const [joinRequestsList,setJoinRequestsList]=useState([]);
12+
13+
14+
useEffect(()=>{
15+
setJoinRequestsList([])
16+
const fetchRequests=async()=>{
17+
const response=await getRequests()
18+
setJoinRequestsList(response.data.join_requests)
19+
}
20+
fetchRequests()
21+
22+
},[teamId])
23+
return (
24+
<>
25+
{joinRequestsList.length? <div>
26+
<h2 className=" font-semibold text-2xl py-6 text-center">Requests</h2>
27+
<div>
28+
29+
{ joinRequestsList.map(request=><JoinRequestListItem setJoinRequestsList={setJoinRequestsList} teamId={teamId} key={request.id} request={request}/>)}
30+
</div>
31+
</div>:null}
32+
</>
33+
34+
)
35+
}
36+
37+
export default JoinRequestsList

‎src/Components/Teams/JoinRequestList/RespondToRequest.jsx

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
/* eslint-disable react/prop-types */
2+
import { useDispatch } from "react-redux"
3+
import { api } from "../../../api"
4+
import useFetch from "../../../CustomHooks/useFetch"
5+
import { postOptions } from "../../../options"
6+
import ReactLoading from 'react-loading';
7+
8+
import {useNavigate} from 'react-router-dom'
9+
10+
function RespondToRequest({response,request,setJoinRequestsList}) {
11+
const {fetchApi: respondToRequest,loading}=useFetch(`${api}/join-requests/${response}-join/${request.id}`,postOptions)
12+
const navigate=useNavigate()
13+
const clickHandler=async()=>{
14+
const resData= await respondToRequest()
15+
if(resData.ok ){
16+
setJoinRequestsList(prevRequests=>{
17+
const updated=prevRequests.filter(req=>request.id!=req.id)
18+
return updated
19+
})
20+
navigate(0)
21+
22+
23+
}
24+
}
25+
return (
26+
<> {loading ?<div className="element-center center-element w-[60px]"> <ReactLoading
27+
className="mx-auto"
28+
type="spin"
29+
color="#D9C6A4"
30+
height={20}
31+
width={20}
32+
/></div>:
33+
<div>
34+
{response==='accept'?<button onClick={clickHandler} className='bg-primary text-white px-2 py-1 rounded-xl hover:bg-white hover:text-primary
35+
transition-all duration-300 border-2 border-solid border-transparent hover:border-primary h-[40px]'>Accept</button>:
36+
<button onClick={clickHandler} className='bg-white text-primary px-4 py-2 rounded-xl hover:bg-primary hover:text-white
37+
transition-all duration-300 border-2 border-solid border-primary h-[40px] '>Reject</button> }
38+
</div>
39+
}
40+
</>
41+
)
42+
}
43+
44+
export default RespondToRequest

‎src/Components/Teams/JoinTeam/JoinTeam.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { api } from "../../../api"
33
import useFetch from "../../../CustomHooks/useFetch"
44
import { postOptions } from "../../../options";
55
import { useCenterContent } from "../CenterContent/CenterContentContext";
6+
import TeamButton from "../TeamButton";
67
import ReactLoading from 'react-loading';
78

89

@@ -11,12 +12,11 @@ function JoinTeam({team}) {
1112
const { setCenterContent } = useCenterContent();
1213
const joinHandler=async()=>{
1314
const res=await joinTeam()
14-
console.log(res)
1515
setCenterContent('waitscreen')
1616
}
1717
return (
1818
<>
19-
{!loading? <button onClick={()=>joinHandler()} className='bg-[rgba(217,198,164,1)] rounded-[10px] text-[12px] font-medium w-[60px] h-[30px] element-center shadow-none' >Join</button>:
19+
{!loading?<TeamButton click={joinHandler} text='join'/>:
2020
<div className="element-center center-element w-[60px]"> <ReactLoading
2121
className="mx-auto"
2222
type="spin"

‎src/Components/Teams/LeavTeam/LeaveTeam.jsx

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import useFetch from "../../../CustomHooks/useFetch"
2+
import TeamButton from "../TeamButton"
3+
import ReactLoading from 'react-loading';
4+
import { useDispatch, useSelector } from "react-redux";
5+
import { postOptions } from "../../../options";
6+
7+
function LeaveTeam({team}) {
8+
9+
const {fetchApi:leaveTeam,loading}=useFetch(`http://localhost:8000/api/teams/leave/${team.id}`,postOptions)
10+
const user=useSelector(state=>state.auth).user
11+
const dispatch=useDispatch()
12+
const leaveHandler =async()=>{
13+
const res=await leaveTeam();
14+
dispatch({userId:user.id, teamId:team.id})
15+
16+
}
17+
return (
18+
<>
19+
{!loading?<TeamButton click={leaveHandler} text='leave'/>:
20+
<div className="element-center center-element w-[60px] btn-hover"> <ReactLoading
21+
className="mx-auto"
22+
type="spin"
23+
color="#D9C6A4"
24+
height={20}
25+
width={20}
26+
/></div>
27+
}
28+
</>
29+
)
30+
}
31+
32+
export default LeaveTeam

‎src/Components/Teams/LeaveTeam/LeaveTeams.jsx

Whitespace-only changes.

0 commit comments

Comments
 (0)