You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
113 lines
3.4 KiB
113 lines
3.4 KiB
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>
|
|
|
|
|
|
)
|
|
}
|