IQBall
/
Application-Web
6
0
Fork 0
Code Issues 49 Pull Requests Packages Projects 5 Releases Wiki Activity

finished the removal of members and add(but api servor error)
continuous-integration/drone/push Build is passing Details

Browse Source
translate-to-react/createTeam
Maël DAIM 1 year ago
parent 0d233ebf89
commit c0fa7096ea
3 changed files with 72 additions and 79 deletions
Show Stats Download Patch File Download Diff File

2
src/App.tsx
Unescape View File

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

80
src/pages/AddMemberPage.tsx
Unescape View File

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

69
src/pages/TeamPanel.tsx
Unescape View File

@ -1,5 +1,4 @@
import "../style/team_panel.css" import "../style/team_panel.css"
import {BASE} from "../Constants"
import {Member, MemberRole, Team, TeamInfo} from "../model/Team" import {Member, MemberRole, Team, TeamInfo} from "../model/Team"
import {useNavigate, useParams} from "react-router-dom" import {useNavigate, useParams} from "react-router-dom"
import {useAppFetcher, useUser} from "../App.tsx"; 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) const isCoach = team.members.some(m=>m.user.id === user!.id && m.role === MemberRole.COACH)
console.log(isCoach,team,user)
return ( return (
<TeamPanel <TeamPanel
team={{ info: team.info, members: team.members }} team={{ info: team.info, members: team.members }}
@ -50,14 +48,9 @@ function TeamPanel({
}) { }) {
return ( return (
<div id="main-div"> <div id="main-div">
<header>
<h1>
<a href={BASE + "/"}>IQBall</a>
</h1>
</header>
<TeamDisplay team={team.info} /> <TeamDisplay team={team.info} />
{isCoach && <CoachOptions id={team.info.id} />} {isCoach && <CoachOptions id={team.info.id} userId={currentUserId} />}
<MembersDisplay <MembersDisplay
members={team.members} members={team.members}
@ -94,25 +87,27 @@ function ColorDisplay({ color }: { color: string }) {
return <div className="square" style={{ backgroundColor: color }} /> 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 ( return (
<div> <div>
<button <button
id="delete" 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 Supprimer
</button> </button>
<button
id="edit"
onClick={() =>
(window.location.href = `${BASE}/team/${id}/edit`)
}>
Modifier
</button>
</div> </div>
) )
} }
@ -145,7 +140,7 @@ function MembersDisplay({
<button <button
id="add-member" id="add-member"
onClick={() => onClick={() =>
navigate("team/"+idTeam+"addMember") navigate("/team/"+idTeam+"/addMember")
}> }>
+ +
</button> </button>
@ -167,6 +162,9 @@ function MemberDisplay({
idTeam: number idTeam: number
currentUserId: number currentUserId: number
}) { }) {
const fetcher = useAppFetcher()
const navigate = useNavigate()
return ( return (
<div className="member"> <div className="member">
<img <img
@ -181,10 +179,13 @@ function MemberDisplay({
<button <button
id="delete" id="delete"
onClick={() => 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 Retirer
@ -193,10 +194,20 @@ function MemberDisplay({
{isCoach && currentUserId == member.user.id && ( {isCoach && currentUserId == member.user.id && (
<button <button
id="delete" 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 Quitter
</button> </button>

Write Preview
Loading…
Cancel
Save