Create team page translated

.env

@@ -1,2 +1,2 @@
-#VITE_API_ENDPOINT=https://iqball.maxou.dev/api/dotnet-master
+VITE_API_ENDPOINT=https://iqball.maxou.dev/api/dotnet-master
-VITE_API_ENDPOINT=http://localhost:5254
+#VITE_API_ENDPOINT=http://localhost:5254

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/member"}
+                                    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

@@ -4,11 +4,11 @@ import { Failure } from "../api/failure.ts"
 import "../style/form.css"
 // @ts-ignore
 import { useNavigate } from "react-router-dom"
-import {getSession, saveSession} from "../api/session.ts";
+import {useAppFetcher} from "../App.tsx";
 export default function AddMemberPage() {
 
     const [errors, setErrors] = useState<Failure[]>([])
-
+    const fetcher = useAppFetcher()
     const navigate = useNavigate()
 
     async function handleSubmit(e : FormEvent){
@@ -18,7 +18,7 @@ export default function AddMemberPage() {
             new FormData(e.target as HTMLFormElement),
         )
 
-        const response = await fetchAPI(
+        const response = await fetcher.fetchAPI(
             "teams",
             {name,mainColor,secondColor,picture},
             "POST"

src/pages/CreateTeamPage.tsx

@@ -1,31 +1,31 @@
 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 {useAppFetcher} from "../App.tsx";
+import {Failure} from "../app/Failure.ts";
 export default function CreateTeamPage() {
 
     const [errors, setErrors] = useState<Failure[]>([])
-
+    const fetcher = useAppFetcher()
     const navigate = useNavigate()
 
     async function handleSubmit(e : FormEvent){
         e.preventDefault()
 
-        const { name, mainColor,secondColor,picture } = Object.fromEntries(
+        const { name, firstColor,secondColor,picture } = Object.fromEntries(
             new FormData(e.target as HTMLFormElement),
         )
 
-         const response = await fetchAPI(
+         const response = await fetcher.fetchAPI(
              "teams",
-             {name,mainColor,secondColor,picture},
+             {name,firstColor: firstColor.toString().toUpperCase(),secondColor: secondColor.toString().toUpperCase(),picture},
              "POST"
          )
 
         if(response.ok){
-            const teamId = await response.json()
+            const {id} = await response.json()
-            navigate("/team/"+teamId+"/members")
+            navigate("/team/"+id)
             return
         }
 
@@ -66,8 +66,8 @@ export default function CreateTeamPage() {
                     <input
                         className="text-input"
                         type="text"
-                        id="email"
+                        id="name"
-                        name="email"
+                        name="name"
                         required
                     />
                     <label htmlFor="picture">Logo :</label>
@@ -78,21 +78,21 @@ export default function CreateTeamPage() {
                         name="picture"
                         required
                     />
-                    <label htmlFor="mainColor">Couleur principale :</label>
+                    <label htmlFor="firstColor">Couleur principale :</label>
                     <input
                         className="color-input"
                         type="color"
-                        id="main_color"
+                        id="firstColor"
-                        name="main_color"
+                        name="firstColor"
-                        value="#ffffff"
+                        defaultValue="#ffffff"
                         required
                     />
                     <label htmlFor="secondColor">Couleur secondaire :</label>
                     <input
                         className="color-input"
                         type="color"
-                        id="second_color"
+                        id="secondColor"
-                        name="second_color"
+                        name="secondColor"
                         required
                     />
                     <div id="buttons">

src/pages/TeamPanel.tsx

@@ -1,23 +1,40 @@
 import "../style/team_panel.css"
-import { BASE } from "../Constants"
+import {BASE} from "../Constants"
-import { Member, Team, TeamInfo } from "../model/Team"
+import {Member, MemberRole, Team, TeamInfo} from "../model/Team"
-import { useParams } from "react-router-dom"
+import {useNavigate, 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)
+    console.log(isCoach,team,user)
     return (
         <TeamPanel
-            team={{ info: teamInfo, members: [] }}
+            team={{ info: team.info, members: team.members }}
-            currentUserId={0}
+            currentUserId={user!.id}
-            isCoach={false}
+            isCoach={isCoach}
         />
     )
 }
@@ -119,6 +136,7 @@ function MembersDisplay({
             currentUserId={currentUserId}
         />
     ))
+    const navigate = useNavigate()
     return (
         <div id="members">
             <div id="head-members">
@@ -127,7 +145,7 @@ function MembersDisplay({
                     <button
                         id="add-member"
                         onClick={() =>
-                            (window.location.href = `${BASE}/team/${idTeam}/addMember`)
+                            navigate("team/"+idTeam+"addMember")
                         }>
                         +
                     </button>
@@ -157,7 +175,7 @@ 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