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

src/App.tsx

@@ -23,6 +23,7 @@ import {
 import { BASE } from "./Constants.ts"
 import { Authentication, Fetcher } from "./app/Fetcher.ts"
 import { User } from "./model/User.ts"
+import AddMemberPage from "./pages/AddMemberPage.tsx";
 
 const HomePage = lazy(() => import("./pages/HomePage.tsx"))
 const LoginPage = lazy(() => import("./pages/LoginPage.tsx"))
@@ -131,6 +132,10 @@ export default function App() {
                                         </LoggedInPage>,
                                     )}
                                 />
+                                <Route
+                                    path={"/team/:teamId/addMember"}
+                                    element={suspense(<AddMemberPage/>)}
+                                />
                                 <Route
                                     path={"/tactic/new"}
                                     element={suspense(<NewTacticPage />)}

src/model/Team.ts

@@ -15,5 +15,10 @@ export interface Team {
 
 export interface Member {
     user: User
-    role: string
+    role: MemberRole
+}
+
+export const enum MemberRole{
+    PLAYER,
+    COACH
 }

src/pages/AddMemberPage.tsx

@@ -0,0 +1,96 @@
+import {FormEvent, useState} from "react"
+import "../style/form.css"
+// @ts-ignore
+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 { email,role} = Object.fromEntries(
+            new FormData(e.target as HTMLFormElement),
+        )
+        console.log(email,role)
+        const response = await fetcher.fetchAPI(
+            "teams/"+teamId+"/members",
+            {email,role},
+            "POST"
+        )
+
+        if(response.ok){
+            const teamId = await response.json()
+            navigate("/team/"+teamId)
+            return
+        }
+
+        try {
+            const failures = await response.json()
+            setErrors(
+                Object.entries<string[]>(failures).map(([type, messages]) => ({
+                    type,
+                    messages,
+                })),
+            )
+        } catch (e) {
+            setErrors([
+                {
+                    type: "internal error",
+                    messages: ["an internal error occurred."],
+                },
+            ])
+        }
+
+    }
+
+    return (
+        <div className="container">
+            <h2>Ajouter un membre à votre équipe</h2>
+
+            {errors.map(({ type, messages }) =>
+                messages.map((message) => (
+                    <p key={type} style={{ color: "red" }}>
+                        {type} : {message}
+                    </p>
+                )),
+            )}
+
+            <form onSubmit={handleSubmit}>
+                <div className="form-group">
+                    <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>
+
+        </div>
+
+
+    )
+
+}

src/pages/CreateTeamPage.tsx

@@ -1,3 +1,112 @@
+import {FormEvent, useState} from "react"
+import "../style/form.css"
+// @ts-ignore
+import { useNavigate } from "react-router-dom"
+import {useAppFetcher} from "../App.tsx";
+import {Failure} from "../app/Failure.ts";
 export default function CreateTeamPage() {
-    return <h1>Create Team Page</h1>
+
+    const [errors, setErrors] = useState<Failure[]>([])
+    const fetcher = useAppFetcher()
+    const navigate = useNavigate()
+
+    async function handleSubmit(e : FormEvent){
+        e.preventDefault()
+
+        const { name, firstColor,secondColor,picture } = Object.fromEntries(
+            new FormData(e.target as HTMLFormElement),
+        )
+
+         const response = await fetcher.fetchAPI(
+             "teams",
+             {name,firstColor: firstColor.toString().toUpperCase(),secondColor: secondColor.toString().toUpperCase(),picture},
+             "POST"
+         )
+
+        if(response.ok){
+            const {id} = await response.json()
+            navigate("/team/"+id)
+            return
+        }
+
+        try {
+            const failures = await response.json()
+            setErrors(
+                Object.entries<string[]>(failures).map(([type, messages]) => ({
+                    type,
+                    messages,
+                })),
+            )
+        } catch (e) {
+            setErrors([
+                {
+                    type: "internal error",
+                    messages: ["an internal error occurred."],
+                },
+            ])
+        }
+
+    }
+
+    return (
+        <div className="container">
+            <h2>Créer une équipe</h2>
+
+            {errors.map(({ type, messages }) =>
+                messages.map((message) => (
+                    <p key={type} style={{ color: "red" }}>
+                        {type} : {message}
+                    </p>
+                )),
+            )}
+
+            <form onSubmit={handleSubmit}>
+                <div className="form-group">
+                    <label htmlFor="name">Nom de l'équipe :</label>
+                    <input
+                        className="text-input"
+                        type="text"
+                        id="name"
+                        name="name"
+                        required
+                    />
+                    <label htmlFor="picture">Logo :</label>
+                    <input
+                        className="text-input"
+                        type="text"
+                        id="picture"
+                        name="picture"
+                        required
+                    />
+                    <label htmlFor="firstColor">Couleur principale :</label>
+                    <input
+                        className="color-input"
+                        type="color"
+                        id="firstColor"
+                        name="firstColor"
+                        defaultValue="#ffffff"
+                        required
+                    />
+                    <label htmlFor="secondColor">Couleur secondaire :</label>
+                    <input
+                        className="color-input"
+                        type="color"
+                        id="secondColor"
+                        name="secondColor"
+                        required
+                    />
+                    <div id="buttons">
+                        <input
+                            className="button"
+                            type="submit"
+                            value="Confirmer"
+                        />
+                    </div>
+                </div>
+            </form>
+
+        </div>
+
+
+    )
 }

src/pages/TeamPanel.tsx

@@ -1,23 +1,38 @@
 import "../style/team_panel.css"
-import { BASE } from "../Constants"
+import {Member, MemberRole, Team, TeamInfo} from "../model/Team"
-import { Member, Team, TeamInfo } from "../model/Team"
+import {useNavigate, useParams} from "react-router-dom"
-import { useParams } from "react-router-dom"
+import {useAppFetcher, useUser} from "../App.tsx";
+import {useEffect, useState} from "react";
 
 export default function TeamPanelPage() {
+    const fetcher = useAppFetcher()
     const { teamId } = useParams()
-    const teamInfo = {
+    const [team,setTeam ] = useState<Team>()
-        id: parseInt(teamId!),
+    const [user] = useUser()
-        name: teamId!,
+    useEffect(() => {
-        mainColor: "#FFFFFF",
+        async function init(){
-        secondColor: "#000000",
+            const infoResponse = await fetcher.fetchAPIGet("teams/"+teamId)
-        picture:
+            const teamInfo : TeamInfo = await infoResponse.json()
-            "https://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/lal.png",
+            const membersResponse = await fetcher.fetchAPIGet("teams/"+teamId+"/members")
+            const members : Member[] = await membersResponse.json()
+            setTeam({info:teamInfo, members:members})
+        }
+
+        if(team === undefined){
+            init()
+        }
+
+    }, [fetcher,team]);
+    if(team === undefined){
+        return <p>Chargement ...</p>
     }
+
+    const isCoach = team.members.some(m=>m.user.id === user!.id && m.role === MemberRole.COACH)
     return (
         <TeamPanel
-            team={{ info: teamInfo, members: [] }}
+            team={{ info: team.info, members: team.members }}
-            currentUserId={0}
+            currentUserId={user!.id}
-            isCoach={false}
+            isCoach={isCoach}
         />
     )
 }
@@ -33,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}
@@ -77,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={() =>
+                onClick={async () => {
-                    confirm("Êtes-vous sûr de supprimer cette équipe?")
+                    const res = confirm("Êtes-vous sûr de supprimer cette équipe?")
-                        ? (window.location.href = `${BASE}/team/${id}/delete`)
+                    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>
     )
 }
@@ -119,6 +131,7 @@ function MembersDisplay({
             currentUserId={currentUserId}
         />
     ))
+    const navigate = useNavigate()
     return (
         <div id="members">
             <div id="head-members">
@@ -127,7 +140,7 @@ function MembersDisplay({
                     <button
                         id="add-member"
                         onClick={() =>
-                            (window.location.href = `${BASE}/team/${idTeam}/addMember`)
+                            navigate("/team/"+idTeam+"/addMember")
                         }>
                         +
                     </button>
@@ -149,6 +162,9 @@ function MemberDisplay({
     idTeam: number
     currentUserId: number
 }) {
+    const fetcher = useAppFetcher()
+    const navigate = useNavigate()
+
     return (
         <div className="member">
             <img
@@ -157,16 +173,19 @@ function MemberDisplay({
                 alt="Photo de profile"
             />
             <p>{member.user.name}</p>
-            <p>{member.role}</p>
+            <p>{member.role === MemberRole.COACH ? "Coach" : "Joueur"}</p>
             <p>{member.user.email}</p>
             {isCoach && currentUserId !== member.user.id && (
                 <button
                     id="delete"
                     onClick={() =>
-                        confirm(
+                        confirm("Êtes-vous sûr de quitter cette équipe?")
-                            "Êtes-vous sûr de retirer ce membre de l'équipe?",
+                            ? (fetcher.fetchAPI(
-                        )
+                                    "team/"+idTeam+"/members/"+member.user.id,
-                            ? (window.location.href = `${BASE}/team/${idTeam}/remove/${member.user.id}`)
+                                    {},
+                                    "DELETE"
+                                )
+                            )
                             : {}
                     }>
                     Retirer
@@ -175,10 +194,20 @@ function MemberDisplay({
             {isCoach && currentUserId == member.user.id && (
                 <button
                     id="delete"
-                    onClick={() =>
+                    onClick={async () => {
-                        confirm("Êtes-vous sûr de quitter cette équipe?")
+
-                            ? (window.location.href = `${BASE}/team/${idTeam}/remove/${member.user.id}`)
+                        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>

src/style/home/home.css

@@ -75,11 +75,9 @@
 
 .tactic-card-actions * {
     width: 30px;
-    pointer-events: all;
 }
 
 .tactic-card-actions {
-    pointer-events: none;
     display: flex;
     width: 100%;
     height: 30px;
@@ -88,6 +86,10 @@
     align-content: center;
     align-items: center;
     justify-content: center;
+
+    * {
+        pointer-events: all;
+    }
 }
 
 .tactic-card-export-btn {