finished the removal of members and add(but api servor error)

src/App.tsx

@@ -133,7 +133,7 @@ export default function App() {
                                     )}
                                 />
                                 <Route
-                                    path={"/team/:teamId/member"}
+                                    path={"/team/:teamId/addMember"}
                                     element={suspense(<AddMemberPage/>)}
                                 />
                                 <Route

src/pages/AddMemberPage.tsx

@@ -1,32 +1,32 @@
 import {FormEvent, useState} from "react"
-import { fetchAPI } from "../Fetcher.ts"
-import { Failure } from "../api/failure.ts"
 import "../style/form.css"
 // @ts-ignore
-import { useNavigate } from "react-router-dom"
+import {useNavigate, useParams} from "react-router-dom"
 import {useAppFetcher} from "../App.tsx";
+import {Failure} from "../app/Failure.ts";
 export default function AddMemberPage() {
 
     const [errors, setErrors] = useState<Failure[]>([])
     const fetcher = useAppFetcher()
     const navigate = useNavigate()
+    const { teamId } = useParams()
 
     async function handleSubmit(e : FormEvent){
         e.preventDefault()
 
-        const { name, mainColor,secondColor,picture } = Object.fromEntries(
+        const { email,role} = Object.fromEntries(
             new FormData(e.target as HTMLFormElement),
         )
-
+        console.log(email,role)
         const response = await fetcher.fetchAPI(
-            "teams",
-            {name,mainColor,secondColor,picture},
+            "teams/"+teamId+"/members",
+            {email,role},
             "POST"
         )
 
         if(response.ok){
             const teamId = await response.json()
-            navigate("/team/"+teamId+"/members")
+            navigate("/team/"+teamId)
             return
         }
 
@@ -51,7 +51,7 @@ export default function AddMemberPage() {
 
     return (
         <div className="container">
-            <h2>Créer une équipe</h2>
+            <h2>Ajouter un membre à votre équipe</h2>
 
             {errors.map(({ type, messages }) =>
                 messages.map((message) => (
@@ -63,46 +63,28 @@ export default function AddMemberPage() {
 
             <form onSubmit={handleSubmit}>
                 <div className="form-group">
-                    <label htmlFor="name">Nom de l'équipe :</label>
-                    <input
-                        className="text-input"
-                        type="text"
-                        id="email"
-                        name="email"
-                        required
-                    />
-                    <label htmlFor="picture">Logo :</label>
-                    <input
-                        className="text-input"
-                        type="text"
-                        id="picture"
-                        name="picture"
-                        required
-                    />
-                    <label htmlFor="mainColor">Couleur principale :</label>
-                    <input
-                        className="color-input"
-                        type="color"
-                        id="main_color"
-                        name="main_color"
-                        value="#ffffff"
-                        required
-                    />
-                    <label htmlFor="secondColor">Couleur secondaire :</label>
-                    <input
-                        className="color-input"
-                        type="color"
-                        id="second_color"
-                        name="second_color"
-                        required
-                    />
-                    <div id="buttons">
-                        <input
-                            className="button"
-                            type="submit"
-                            value="Confirmer"
-                        />
-                    </div>
+                    <label htmlFor="email">Email du membre :</label>
+                    <input type="text" id="email" name="email" required/>
+
+                        <fieldset className="role">
+                            <legend>Rôle du membre dans l'équipe :</legend>
+                            <div className="radio">
+                                <label htmlFor="P">Joueur</label>
+                                <input type="radio" id="P" name="role" value="PLAYER" checked />
+                            </div>
+                            <div className="radio">
+                                <label htmlFor="C">Coach</label>
+                                <input type="radio" id="C" name="role" value="COACH" />
+                            </div>
+                        </fieldset>
+
+                        <div id="buttons">
+                            <input
+                                className="button"
+                                type="submit"
+                                value="Confirmer"
+                            />
+                        </div>
                 </div>
             </form>
 

src/pages/TeamPanel.tsx

@@ -1,5 +1,4 @@
 import "../style/team_panel.css"
-import {BASE} from "../Constants"
 import {Member, MemberRole, Team, TeamInfo} from "../model/Team"
 import {useNavigate, useParams} from "react-router-dom"
 import {useAppFetcher, useUser} from "../App.tsx";
@@ -29,7 +28,6 @@ export default function TeamPanelPage() {
     }
 
     const isCoach = team.members.some(m=>m.user.id === user!.id && m.role === MemberRole.COACH)
-    console.log(isCoach,team,user)
     return (
         <TeamPanel
             team={{ info: team.info, members: team.members }}
@@ -50,14 +48,9 @@ function TeamPanel({
 }) {
     return (
         <div id="main-div">
-            <header>
-                <h1>
-                    <a href={BASE + "/"}>IQBall</a>
-                </h1>
-            </header>
             <TeamDisplay team={team.info} />
 
-            {isCoach && <CoachOptions id={team.info.id} />}
+            {isCoach && <CoachOptions id={team.info.id} userId={currentUserId} />}
 
             <MembersDisplay
                 members={team.members}
@@ -94,25 +87,27 @@ function ColorDisplay({ color }: { color: string }) {
     return <div className="square" style={{ backgroundColor: color }} />
 }
 
-function CoachOptions({ id }: { id: number }) {
+function CoachOptions({ id,userId }: { id: number,userId:number }) {
+    const navigate = useNavigate()
+    const fetcher = useAppFetcher()
     return (
         <div>
             <button
                 id="delete"
-                onClick={() =>
-                    confirm("Êtes-vous sûr de supprimer cette équipe?")
-                        ? (window.location.href = `${BASE}/team/${id}/delete`)
-                        : {}
+                onClick={async () => {
+                    const res = confirm("Êtes-vous sûr de supprimer cette équipe?")
+                    if (res) {
+                        await fetcher.fetchAPI(
+                            "team/" + id + "/members/" + userId,
+                            {},
+                            "DELETE"
+                        )
+                        navigate("/")
+                    }
+                }
                 }>
                 Supprimer
             </button>
-            <button
-                id="edit"
-                onClick={() =>
-                    (window.location.href = `${BASE}/team/${id}/edit`)
-                }>
-                Modifier
-            </button>
         </div>
     )
 }
@@ -145,7 +140,7 @@ function MembersDisplay({
                     <button
                         id="add-member"
                         onClick={() =>
-                            navigate("team/"+idTeam+"addMember")
+                            navigate("/team/"+idTeam+"/addMember")
                         }>
                         +
                     </button>
@@ -167,6 +162,9 @@ function MemberDisplay({
     idTeam: number
     currentUserId: number
 }) {
+    const fetcher = useAppFetcher()
+    const navigate = useNavigate()
+
     return (
         <div className="member">
             <img
@@ -181,10 +179,13 @@ function MemberDisplay({
                 <button
                     id="delete"
                     onClick={() =>
-                        confirm(
-                            "Êtes-vous sûr de retirer ce membre de l'équipe?",
-                        )
-                            ? (window.location.href = `${BASE}/team/${idTeam}/remove/${member.user.id}`)
+                        confirm("Êtes-vous sûr de quitter cette équipe?")
+                            ? (fetcher.fetchAPI(
+                                    "team/"+idTeam+"/members/"+member.user.id,
+                                    {},
+                                    "DELETE"
+                                )
+                            )
                             : {}
                     }>
                     Retirer
@@ -193,10 +194,20 @@ function MemberDisplay({
             {isCoach && currentUserId == member.user.id && (
                 <button
                     id="delete"
-                    onClick={() =>
-                        confirm("Êtes-vous sûr de quitter cette équipe?")
-                            ? (window.location.href = `${BASE}/team/${idTeam}/remove/${member.user.id}`)
-                            : {}
+                    onClick={async () => {
+
+                        const res = confirm(
+                            "Êtes-vous sûr de retirer ce membre de l'équipe?"
+                        )
+                        if (res) {
+                            await fetcher.fetchAPI(
+                                "team/" + idTeam + "/members/" + member.user.id,
+                                {},
+                                "DELETE"
+                            )
+                            navigate("/")
+                        }
+                    }
                     }>
                     Quitter
                 </button>