Compare commits
2 Commits
translate-
...
master
| Author | SHA1 | Date |
|---|---|---|
 Maxime BATISTA
|
b941d6530c | 1 year ago |
|
maxime.batista
|
1faa8168f9 | 1 year ago |
File diff suppressed because it is too large
Load Diff
Binary file not shown.
Binary file not shown.
@ -1,96 +0,0 @@
|
||||
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>
|
||||
|
||||
|
||||
)
|
||||
|
||||
}
|
||||
@ -1,112 +1,3 @@
|
||||
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() {
|
||||
|
||||
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>
|
||||
|
||||
|
||||
)
|
||||
return <h1>Create Team Page</h1>
|
||||
}
|
||||
|
||||
Loading…
Reference in new issue