add make request to join

Author: BasharElmetwaliahmed

src/Components/Teams/JoinTeam/JoinTeam.jsx

@@ -0,0 +1,33 @@
+/* eslint-disable react/prop-types */
+import { api } from "../../../api"
+import useFetch from "../../../CustomHooks/useFetch"
+import { postOptions } from "../../../options";
+import { useCenterContent } from "../CenterContent/CenterContentContext";
+import ReactLoading from 'react-loading';
+
+
+function JoinTeam({team}) {
+    const {fetchApi:joinTeam,loading}=useFetch(`${api}/join-requests/join/${team.id}`,postOptions)
+    const {  setCenterContent } = useCenterContent();
+    const joinHandler=async()=>{
+        const res=await joinTeam() 
+        console.log(res)
+        setCenterContent('waitscreen')
+    }
+  return (
+    <>
+    {!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>:
+     <div className="element-center center-element w-[60px]">             <ReactLoading
+          className="mx-auto"
+          type="spin"
+          color="#D9C6A4"
+          height={20}
+          width={20}
+        /></div>
+    }
+      
+    </>
+    )
+}
+
+export default JoinTeam

src/Components/Teams/TeamsCenterContent.jsx

@@ -3,7 +3,7 @@ import WaitingScreen from "./WaitingScreen"
 import TeamChat from './TeamChat/TeamChat'
 import { useCenterContent } from "./CenterContent/CenterContentContext";
 function TeamsCenterContent({isFixed,scroll}) {
-      const { centerContent, setCenterContent } = useCenterContent();
+      const { centerContent } = useCenterContent();
 
 
     if(!centerContent) {

src/Components/Teams/TeamsList/TeamItemList.jsx

@@ -3,22 +3,19 @@ import { useNavigate } from 'react-router-dom'
 import { useCenterContent } from '../CenterContent/CenterContentContext';
 import {useSelector} from 'react-redux'
 import {  imgLink } from '../../../api';
+import JoinTeam from '../JoinTeam/JoinTeam';
 function TeamItemList({team}) {
-    const {  setCenterContent } = useCenterContent();
     const userData=useSelector(state=>state.auth).user
    const joinedTeam=team.members?.find(user=>user.id==userData.id)
   const navigate=useNavigate()
-  const clickJoinHandler=()=>{
-   setCenterContent('waitscreen')
-   navigate(`/teams/${team.id}`)
-  }
+
   return (
     <div className='flex justify-between items-center'>
         <div className='flex items-center gap-2'>
         <img src={`${imgLink}/${team.imageUrl}`} alt="teamIcon" className='w-9' />
         <h5 className='text-xl  cursor-pointer' onClick={()=>navigate(`/teams/${team.id}`)}>{team.name} </h5>
         </div>
-       {!joinedTeam&& <button className='bg-[rgba(217,198,164,1)] rounded-[10px] text-[12px] font-medium w-[60px] h-[30px]  element-center shadow-none' onClick={clickJoinHandler}>Join</button>}
+       {!joinedTeam&&<JoinTeam team={team}/>}
     </div>
   )
 }