mirror of
https://github.com/TheRealOwenRees/echecsfrance.git
synced 2026-07-23 12:36:57 +00:00
Use tRPC and react-hook-form
This commit is contained in:
Timothy Armes
@@ -1,111 +1,73 @@
|
||||
"use client";
|
||||
|
||||
import { ChangeEvent, useMemo, useRef } from "react";
|
||||
import { useMemo, useRef } from "react";
|
||||
|
||||
import { useSetAtom } from "jotai";
|
||||
import L from "leaflet";
|
||||
import L, { LatLngLiteral } from "leaflet";
|
||||
import "leaflet-defaulticon-compatibility";
|
||||
import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css";
|
||||
import "leaflet/dist/leaflet.css";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useFormContext, useWatch } from "react-hook-form";
|
||||
import { MapContainer, Marker, TileLayer } from "react-leaflet";
|
||||
|
||||
import MapEvents from "@/app/[lang]/components/MapEvents";
|
||||
import { mapBoundsAtom } from "@/app/atoms";
|
||||
import { MapProps } from "@/types";
|
||||
|
||||
const Map = ({ position, setPosition, center }: MapProps) => {
|
||||
const t = useTranslations("Map");
|
||||
const center: LatLngLiteral = { lat: 47.0844, lng: 2.3964 };
|
||||
|
||||
const latValue = position.lat.toFixed(4);
|
||||
const lngValue = position.lng.toFixed(4);
|
||||
const Map = () => {
|
||||
const { control, setValue } = useFormContext();
|
||||
|
||||
const latValue = useWatch({ control, name: "tournament.coordinates.0" });
|
||||
const lngValue = useWatch({ control, name: "tournament.coordinates.1" });
|
||||
|
||||
const setMapBounds = useSetAtom(mapBoundsAtom);
|
||||
const markerRef = useRef<L.Marker | null>(null);
|
||||
|
||||
const handleLatChange = ({ target }: ChangeEvent<HTMLInputElement>) => {
|
||||
const newLat = Number(target.value);
|
||||
setPosition((prevPosition) => ({ ...prevPosition, lat: newLat }));
|
||||
};
|
||||
|
||||
const handleLngChange = ({ target }: ChangeEvent<HTMLInputElement>) => {
|
||||
const newLng = Number(target.value);
|
||||
setPosition((prevPosition) => ({ ...prevPosition, lng: newLng }));
|
||||
};
|
||||
|
||||
const eventHandlers = useMemo(
|
||||
() => ({
|
||||
dragend() {
|
||||
const marker = markerRef.current;
|
||||
if (marker != null) {
|
||||
setPosition(marker.getLatLng());
|
||||
const position = marker.getLatLng();
|
||||
setValue(
|
||||
"tournament.coordinates.0",
|
||||
Math.round((position.lat + Number.EPSILON) * 10000) / 10000,
|
||||
);
|
||||
setValue(
|
||||
"tournament.coordinates.1",
|
||||
Math.round((position.lng + Number.EPSILON) * 10000) / 10000,
|
||||
);
|
||||
}
|
||||
},
|
||||
}),
|
||||
[setPosition],
|
||||
[setValue],
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="col-span-2 sm:col-span-1">
|
||||
<label
|
||||
htmlFor="lat"
|
||||
className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300"
|
||||
>
|
||||
{t("latLabel")}
|
||||
</label>
|
||||
<input
|
||||
value={latValue}
|
||||
onChange={handleLatChange}
|
||||
type="number"
|
||||
id="lat"
|
||||
className="dark:shadow-sm-light block w-full rounded-lg border border-gray-300 bg-gray-50 p-3 text-sm text-gray-900 shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-2 sm:col-span-1">
|
||||
<label
|
||||
htmlFor="lng"
|
||||
className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300"
|
||||
>
|
||||
{t("lngLabel")}
|
||||
</label>
|
||||
<input
|
||||
value={lngValue}
|
||||
onChange={handleLngChange}
|
||||
type="number"
|
||||
id="lng"
|
||||
className="dark:shadow-sm-light block w-full rounded-lg border border-gray-300 bg-gray-50 p-3 text-sm text-gray-900 shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<section id="map" className="z-0 col-span-4 flex h-auto">
|
||||
<MapContainer
|
||||
center={center}
|
||||
zoom={5}
|
||||
scrollWheelZoom={false}
|
||||
style={{ height: "600px", flexGrow: 1 }}
|
||||
ref={(map) => {
|
||||
if (map) {
|
||||
setMapBounds(map.getBounds());
|
||||
}
|
||||
}}
|
||||
>
|
||||
<MapEvents />
|
||||
<TileLayer
|
||||
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
|
||||
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
||||
/>
|
||||
<Marker
|
||||
position={position}
|
||||
draggable={true}
|
||||
ref={markerRef}
|
||||
eventHandlers={eventHandlers}
|
||||
/>
|
||||
</MapContainer>
|
||||
</section>
|
||||
</>
|
||||
<MapContainer
|
||||
center={center}
|
||||
zoom={5}
|
||||
scrollWheelZoom={false}
|
||||
style={{ height: "600px", flexGrow: 1 }}
|
||||
ref={(map) => {
|
||||
if (map) {
|
||||
setMapBounds(map.getBounds());
|
||||
}
|
||||
}}
|
||||
>
|
||||
<MapEvents />
|
||||
<TileLayer
|
||||
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
|
||||
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
||||
/>
|
||||
<Marker
|
||||
position={{ lat: latValue, lng: lngValue }}
|
||||
draggable={true}
|
||||
ref={markerRef}
|
||||
eventHandlers={eventHandlers}
|
||||
/>
|
||||
</MapContainer>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -2,18 +2,25 @@
|
||||
|
||||
import { useState } from "react";
|
||||
|
||||
import { useAtomValue } from "jotai";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { useTranslations } from "next-intl";
|
||||
import dynamic from "next/dynamic";
|
||||
import { FormProvider, useForm } from "react-hook-form";
|
||||
import { z } from "zod";
|
||||
|
||||
import { clearMessage } from "@/app/[lang]/components/InfoMessage";
|
||||
import InfoMessage from "@/app/[lang]/components/InfoMessage";
|
||||
import LoadingMap from "@/app/[lang]/components/LoadingMap";
|
||||
import { franceCenterAtom } from "@/app/atoms";
|
||||
import {
|
||||
handleClearTournamentForm,
|
||||
handleTournamentSubmit,
|
||||
} from "@/handlers/formHandlers";
|
||||
import useTournamentForm from "@/hooks/useTournamentForm";
|
||||
import { DateField } from "@/app/[lang]/components/form/DateField";
|
||||
import { SelectField } from "@/app/[lang]/components/form/SelectField";
|
||||
import { SwitchField } from "@/app/[lang]/components/form/SwitchField";
|
||||
import { TextAreaField } from "@/app/[lang]/components/form/TextAreaField";
|
||||
import { TextField } from "@/app/[lang]/components/form/TextField";
|
||||
import { addTournamentSchema } from "@/schemas";
|
||||
import { TimeControl } from "@/types";
|
||||
import { trpc } from "@/utils/trpc";
|
||||
|
||||
type TournamentFormValues = z.infer<typeof addTournamentSchema>;
|
||||
|
||||
const Map = dynamic(() => import("./Map"), {
|
||||
ssr: false,
|
||||
@@ -22,248 +29,184 @@ const Map = dynamic(() => import("./Map"), {
|
||||
|
||||
const TournamentForm = () => {
|
||||
const t = useTranslations("AddTournament");
|
||||
const center = useAtomValue(franceCenterAtom);
|
||||
const formRefs = useTournamentForm();
|
||||
|
||||
const [isSending, setIsSending] = useState(false);
|
||||
const at = useTranslations("App");
|
||||
const addTournament = trpc.addTournament.useMutation();
|
||||
const [responseMessage, setResponseMessage] = useState({
|
||||
isSuccessful: false,
|
||||
message: "",
|
||||
});
|
||||
|
||||
const form = useForm<TournamentFormValues>({
|
||||
resolver: zodResolver(addTournamentSchema),
|
||||
defaultValues: {
|
||||
tournament: {
|
||||
norm_tournament: false,
|
||||
coordinates: [47.0844, 2.3964],
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const onSubmit = async (data: TournamentFormValues) => {
|
||||
try {
|
||||
await addTournament.mutateAsync(data);
|
||||
setResponseMessage({
|
||||
isSuccessful: true,
|
||||
message: t("success"),
|
||||
});
|
||||
|
||||
clearMessage(setResponseMessage);
|
||||
form.reset();
|
||||
} catch (err: unknown) {
|
||||
console.log(err);
|
||||
setResponseMessage({
|
||||
isSuccessful: true,
|
||||
message: t("failure"),
|
||||
});
|
||||
|
||||
clearMessage(setResponseMessage);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<form
|
||||
onSubmit={(e) =>
|
||||
handleTournamentSubmit(
|
||||
e,
|
||||
t,
|
||||
setIsSending,
|
||||
setResponseMessage,
|
||||
formRefs,
|
||||
)
|
||||
}
|
||||
className="space-y-8"
|
||||
>
|
||||
<FormProvider {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
|
||||
<div className="grid grid-cols-4 items-start gap-6">
|
||||
<div className="col-span-4">
|
||||
<label
|
||||
htmlFor="tournament-name"
|
||||
className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300"
|
||||
>
|
||||
{t("tournamentNameLabel")}
|
||||
</label>
|
||||
<input
|
||||
ref={formRefs.tournamentNameRef}
|
||||
type="text"
|
||||
id="tournament-name"
|
||||
className="item dark:shadow-sm-light block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
|
||||
<TextField
|
||||
name="tournament.tournament"
|
||||
label={t("tournamentNameLabel")}
|
||||
placeholder={t("tournamentNamePlaceholder")}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-2 sm:col-span-1">
|
||||
<label
|
||||
htmlFor="date"
|
||||
className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300"
|
||||
>
|
||||
{t("dateLabel")}
|
||||
</label>
|
||||
<input
|
||||
ref={formRefs.dateRef}
|
||||
type="date"
|
||||
id="date"
|
||||
className="dark:shadow-sm-light block w-full content-center rounded-lg border border-gray-300 bg-gray-50 p-3 text-sm text-gray-900 shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
|
||||
required
|
||||
/>
|
||||
<DateField name="tournament.date" label={t("dateLabel")} required />
|
||||
</div>
|
||||
<div className="col-span-2 sm:col-span-1">
|
||||
<label
|
||||
htmlFor="url"
|
||||
className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300"
|
||||
>
|
||||
{t("urlLabel")}
|
||||
</label>
|
||||
<input
|
||||
ref={formRefs.urlRef}
|
||||
type="url"
|
||||
id="url"
|
||||
<TextField
|
||||
name="tournament.url"
|
||||
label={t("urlLabel")}
|
||||
placeholder={t("urlPlaceholder")}
|
||||
className="dark:shadow-sm-light block w-full rounded-lg border border-gray-300 bg-gray-50 p-3 text-sm text-gray-900 shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-2 sm:col-span-1">
|
||||
<label
|
||||
htmlFor="time-control"
|
||||
className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300"
|
||||
>
|
||||
{t("tcLabel")}
|
||||
</label>
|
||||
<select
|
||||
ref={formRefs.timeControlRef}
|
||||
id="time-control"
|
||||
className="dark:shadow-sm-light block w-full rounded-lg border border-gray-300 bg-gray-50 p-3 text-sm text-gray-900 shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
|
||||
defaultValue="Classical"
|
||||
>
|
||||
<option value="Classical">{t("tcOption1")}</option>
|
||||
<option value="Rapid">{t("tcOption2")}</option>
|
||||
<option value="Blitz">{t("tcOption3")}</option>
|
||||
<option value="Other">{t("tcOption4")}</option>
|
||||
</select>
|
||||
<SelectField
|
||||
name="tournament.time_control"
|
||||
label={t("tcLabel")}
|
||||
options={[
|
||||
TimeControl.Classic,
|
||||
TimeControl.Rapid,
|
||||
TimeControl.Blitz,
|
||||
].map((tc) => ({
|
||||
value: tc,
|
||||
label: at("timeControlEnum", { tc }),
|
||||
}))}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-2 sm:col-span-1">
|
||||
<label
|
||||
htmlFor="norm"
|
||||
className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300"
|
||||
>
|
||||
{t("normLabel")}
|
||||
</label>
|
||||
<select
|
||||
ref={formRefs.normRef}
|
||||
id="norm"
|
||||
className="dark:shadow-sm-light block w-full rounded-lg border border-gray-300 bg-gray-50 p-3 text-sm text-gray-900 shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
|
||||
defaultValue="false"
|
||||
>
|
||||
<option value="false">{t("normNo")}</option>
|
||||
<option value="true">{t("normYes")}</option>
|
||||
</select>
|
||||
<SwitchField
|
||||
name="tournament.norm_tournament"
|
||||
label={t("normLabel")}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-4">
|
||||
<label
|
||||
htmlFor="address"
|
||||
className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300"
|
||||
>
|
||||
{t("addressLabel")}
|
||||
</label>
|
||||
<input
|
||||
ref={formRefs.addressRef}
|
||||
type="text"
|
||||
id="address"
|
||||
className="dark:shadow-sm-light block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
|
||||
<TextField
|
||||
name="tournament.address"
|
||||
label={t("addressLabel")}
|
||||
placeholder={t("addressPlaceholder")}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-4 sm:col-span-2">
|
||||
<label
|
||||
htmlFor="town"
|
||||
className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300"
|
||||
>
|
||||
{t("townLabel")}
|
||||
</label>
|
||||
<input
|
||||
ref={formRefs.townRef}
|
||||
type="text"
|
||||
id="town"
|
||||
className="dark:shadow-sm-light block w-full rounded-lg border border-gray-300 bg-gray-50 p-3 text-sm text-gray-900 shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
|
||||
<TextField
|
||||
name="tournament.town"
|
||||
label={t("townLabel")}
|
||||
placeholder={t("townPlaceholder")}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-2 sm:col-span-1">
|
||||
<label
|
||||
htmlFor="department"
|
||||
className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300"
|
||||
>
|
||||
{t("departmentLabel")}
|
||||
</label>
|
||||
<input
|
||||
ref={formRefs.departmentRef}
|
||||
type="text"
|
||||
id="department"
|
||||
className="dark:shadow-sm-light block w-full rounded-lg border border-gray-300 bg-gray-50 p-3 text-sm text-gray-900 shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
|
||||
<TextField
|
||||
name="tournament.department"
|
||||
label={t("departmentLabel")}
|
||||
placeholder={t("departmentPlaceholder")}
|
||||
// required
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-2 sm:col-span-1">
|
||||
<label
|
||||
htmlFor="country"
|
||||
className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300"
|
||||
>
|
||||
{t("countryLabel")}
|
||||
</label>
|
||||
<input
|
||||
ref={formRefs.countryRef}
|
||||
type="text"
|
||||
id="country"
|
||||
className="dark:shadow-sm-light block w-full rounded-lg border border-gray-300 bg-gray-50 p-3 text-sm text-gray-900 shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
|
||||
<TextField
|
||||
name="tournament.country"
|
||||
label={t("countryLabel")}
|
||||
placeholder={t("countryPlaceholder")}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-2 sm:col-span-1">
|
||||
<label
|
||||
htmlFor="your-name"
|
||||
className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300"
|
||||
>
|
||||
{t("yourNameLabel")}
|
||||
</label>
|
||||
<input
|
||||
ref={formRefs.yourNameRef}
|
||||
type="text"
|
||||
id="your-name"
|
||||
className="dark:shadow-sm-light block w-full rounded-lg border border-gray-300 bg-gray-50 p-3 text-sm text-gray-900 shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
|
||||
<TextField
|
||||
name="name"
|
||||
label={t("yourNameLabel")}
|
||||
placeholder={t("yourNamePlaceholder")}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-2 sm:col-span-1">
|
||||
<label
|
||||
htmlFor="your-email"
|
||||
className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300"
|
||||
>
|
||||
{t("yourEmailLabel")}
|
||||
</label>
|
||||
<input
|
||||
ref={formRefs.yourEmailRef}
|
||||
type="email"
|
||||
id="your-email"
|
||||
className="dark:shadow-sm-light block w-full rounded-lg border border-gray-300 bg-gray-50 p-3 text-sm text-gray-900 shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
|
||||
<TextField
|
||||
name="email"
|
||||
label={t("yourEmailLabel")}
|
||||
placeholder={t("yourEmailPlaceholder")}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-4 row-span-2 sm:col-span-2">
|
||||
<label
|
||||
htmlFor="message"
|
||||
className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300"
|
||||
>
|
||||
{t("messageLabel")}
|
||||
</label>
|
||||
<textarea
|
||||
ref={formRefs.messageRef}
|
||||
id="message"
|
||||
<TextAreaField
|
||||
name="message"
|
||||
label={t("messageLabel")}
|
||||
rows={6}
|
||||
className="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
|
||||
placeholder={t("messagePlaceholder")}
|
||||
// required
|
||||
></textarea>
|
||||
/>
|
||||
</div>
|
||||
<Map
|
||||
position={formRefs.position}
|
||||
setPosition={formRefs.setPosition}
|
||||
center={center}
|
||||
/>
|
||||
|
||||
<div className="col-span-2 sm:col-span-1">
|
||||
<TextField
|
||||
name="tournament.coordinates.0"
|
||||
label={t("latLabel")}
|
||||
type="number"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-2 sm:col-span-1">
|
||||
<TextField
|
||||
name="tournament.coordinates.1"
|
||||
label={t("lngLabel")}
|
||||
type="number"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<section id="map" className="z-0 col-span-4 flex h-auto">
|
||||
<Map />
|
||||
</section>
|
||||
</div>
|
||||
<button
|
||||
disabled={isSending}
|
||||
disabled={form.formState.isSubmitting}
|
||||
type="submit"
|
||||
className="rounded-lg bg-primary-600 px-5 py-3 text-center text-sm font-medium text-white hover:bg-primary-800 focus:outline-none focus:ring-4 focus:ring-primary-300 disabled:opacity-25 dark:text-white dark:hover:bg-primary-700 dark:focus:ring-primary-800 sm:w-fit"
|
||||
>
|
||||
{isSending ? t("sending") : t("sendButton")}
|
||||
{form.formState.isSubmitting ? t("sending") : t("sendButton")}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleClearTournamentForm(formRefs, center)}
|
||||
onClick={() => form.reset()}
|
||||
type="button"
|
||||
className="ml-4 rounded-lg bg-primary-600 px-5 py-3 text-center text-sm font-medium text-white hover:bg-primary-800 focus:outline-none focus:ring-4 focus:ring-primary-300 disabled:opacity-25 dark:text-white dark:hover:bg-primary-700 dark:focus:ring-primary-800 sm:w-fit"
|
||||
>
|
||||
{t("clearForm")}
|
||||
</button>
|
||||
<InfoMessage responseMessage={responseMessage} />;
|
||||
|
||||
<InfoMessage responseMessage={responseMessage} />
|
||||
</form>
|
||||
</>
|
||||
</FormProvider>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -14,9 +14,11 @@ export default function Contact() {
|
||||
>
|
||||
{t("title")}
|
||||
</h2>
|
||||
|
||||
<p className="mb-8 text-center font-light text-gray-500 dark:text-gray-400 sm:text-xl lg:mb-16">
|
||||
{t("info")}
|
||||
</p>
|
||||
|
||||
<TournamentForm />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -25,7 +25,7 @@ const ThemeSwitcher = () => {
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 01.818.162z"
|
||||
clip-rule="evenodd"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,54 @@
|
||||
import React from "react";
|
||||
|
||||
import { format } from "date-fns";
|
||||
import { enGB, fr } from "date-fns/locale";
|
||||
import { useLocale } from "next-intl";
|
||||
import { ReactDatePickerCustomHeaderProps } from "react-datepicker";
|
||||
import { IoChevronBack, IoChevronForward } from "react-icons/io5";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
const chevronClasses = {
|
||||
chevronRoot: "h-4 w-4 dark:text-white",
|
||||
chevronClassDisabled: "!text-neutral-500",
|
||||
};
|
||||
|
||||
export const DatePickerCustomHeader = ({
|
||||
date,
|
||||
decreaseMonth,
|
||||
increaseMonth,
|
||||
prevMonthButtonDisabled,
|
||||
nextMonthButtonDisabled,
|
||||
}: ReactDatePickerCustomHeaderProps) => {
|
||||
// Bit of a hack. inputRef doesn't work because DatePicker doesn't correctly propagate props
|
||||
const locale = useLocale();
|
||||
|
||||
return (
|
||||
<div className="mb-2 flex !w-full items-center justify-between border-b border-neutral-500 px-6 pb-4">
|
||||
<button
|
||||
onClick={decreaseMonth}
|
||||
disabled={prevMonthButtonDisabled}
|
||||
className={chevronClasses.chevronRoot}
|
||||
>
|
||||
<IoChevronBack
|
||||
className={twMerge(
|
||||
chevronClasses.chevronRoot,
|
||||
prevMonthButtonDisabled && chevronClasses.chevronClassDisabled,
|
||||
)}
|
||||
/>
|
||||
</button>
|
||||
{format(date, "LLLL yyyy", { locale: locale === "fr" ? fr : enGB })}
|
||||
<button
|
||||
onClick={increaseMonth}
|
||||
disabled={nextMonthButtonDisabled}
|
||||
className={chevronClasses.chevronRoot}
|
||||
>
|
||||
<IoChevronForward
|
||||
className={twMerge(
|
||||
chevronClasses.chevronRoot,
|
||||
nextMonthButtonDisabled && chevronClasses.chevronClassDisabled,
|
||||
)}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,65 @@
|
||||
import React, { forwardRef } from "react";
|
||||
|
||||
import InputMask from "react-input-mask";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
interface InputProps {
|
||||
error?: boolean;
|
||||
className?: string;
|
||||
inputContainerClass?: string;
|
||||
inputClass?: string;
|
||||
mask?: string | (string | RegExp)[];
|
||||
}
|
||||
|
||||
type AllProps = React.DetailedHTMLProps<
|
||||
React.InputHTMLAttributes<HTMLInputElement>,
|
||||
HTMLInputElement
|
||||
> &
|
||||
InputProps;
|
||||
|
||||
export const InputDatePicker = forwardRef<HTMLInputElement, AllProps>(
|
||||
(
|
||||
{
|
||||
error,
|
||||
className,
|
||||
children,
|
||||
inputContainerClass,
|
||||
inputClass,
|
||||
mask,
|
||||
...props
|
||||
},
|
||||
inputRef,
|
||||
) => {
|
||||
return (
|
||||
<div
|
||||
className={twMerge(
|
||||
"flex w-full content-center rounded-lg border p-3 text-sm",
|
||||
"border-gray-300 bg-gray-50 text-gray-900 shadow-sm",
|
||||
"dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 ",
|
||||
!error &&
|
||||
"focus-within:border-primary-500 focus-within:ring-primary-500 dark:focus-within:border-primary-500 dark:focus-within:ring-primary-500",
|
||||
error && "!border-orange-700 focus:!border-orange-700",
|
||||
inputContainerClass,
|
||||
)}
|
||||
>
|
||||
<InputMask
|
||||
ref={inputRef as any}
|
||||
mask={mask ?? ""}
|
||||
className={twMerge(
|
||||
"w-full border-none bg-transparent text-sm outline-none ring-0 focus:outline-none focus:ring-0 focus:ring-offset-0",
|
||||
"text-gray-900 dark:text-white",
|
||||
inputClass,
|
||||
)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.code === "Enter") {
|
||||
e.stopPropagation();
|
||||
}
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
InputDatePicker.displayName = "InputDatePicker";
|
||||
@@ -0,0 +1 @@
|
||||
export * from "./InputDatePicker";
|
||||
@@ -0,0 +1,129 @@
|
||||
import React, { useRef } from "react";
|
||||
|
||||
import { getYear, isValid, parse } from "date-fns";
|
||||
import fr from "date-fns/locale/fr";
|
||||
import { get, range } from "lodash";
|
||||
import { useLocale, useTranslations } from "next-intl";
|
||||
import DatePicker from "react-datepicker";
|
||||
import { registerLocale } from "react-datepicker";
|
||||
import { Controller, useFormContext } from "react-hook-form";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
import { Field, FieldProps } from "../Field";
|
||||
|
||||
import { InputDatePicker } from "./components";
|
||||
import { DatePickerCustomHeader } from "./components/DatePickerCustomHeader";
|
||||
|
||||
registerLocale("fr", fr);
|
||||
|
||||
type DateFieldProps = FieldProps & {
|
||||
maxDate?: Date;
|
||||
minDate?: Date;
|
||||
dateFormat?: string;
|
||||
className?: string;
|
||||
datePickerPopperClass?: string;
|
||||
required?: boolean;
|
||||
};
|
||||
|
||||
export const DateField = ({
|
||||
minDate,
|
||||
maxDate,
|
||||
dateFormat = "dd/MM/yyyy",
|
||||
className,
|
||||
datePickerPopperClass,
|
||||
|
||||
name,
|
||||
...otherFieldProps
|
||||
}: DateFieldProps) => {
|
||||
const locale = useLocale();
|
||||
const at = useTranslations("App");
|
||||
const min = minDate ? minDate.getFullYear() : 1900;
|
||||
|
||||
const inputRef = useRef(null);
|
||||
|
||||
const form = useFormContext();
|
||||
const {
|
||||
formState: { errors },
|
||||
} = form;
|
||||
|
||||
const hasError = name && !!get(errors, name)?.message;
|
||||
|
||||
return (
|
||||
<Field name={name} {...otherFieldProps}>
|
||||
<div className={twMerge("relative flex w-full flex-col", className)}>
|
||||
<Controller
|
||||
control={form.control}
|
||||
name={name}
|
||||
render={({ field }) => (
|
||||
<DatePicker
|
||||
locale={locale}
|
||||
closeOnScroll={true}
|
||||
placeholderText={at("datePlaceholder")}
|
||||
portalId="calendar-portal"
|
||||
dateFormat={dateFormat}
|
||||
disabledKeyboardNavigation={true}
|
||||
formatWeekDay={(day: string) => (
|
||||
<div className="flex h-8 flex-col items-center justify-center">
|
||||
{day.slice(0, 3)}
|
||||
</div>
|
||||
)}
|
||||
weekDayClassName={() =>
|
||||
"text-xs h-8 w-8 flex-1 bg-gray-50 text-gray-900 dark:bg-gray-700 dark:text-white"
|
||||
}
|
||||
dayClassName={() =>
|
||||
"text-xs h-8 w-8 flex-1 bg-gray-50 cursor-pointer hover:font-bold text-gray-900 dark:bg-gray-700 dark:text-white"
|
||||
}
|
||||
value={field.value}
|
||||
selected={field.value}
|
||||
onSelect={field.onChange}
|
||||
onChange={field.onChange}
|
||||
onChangeRaw={(e) => {
|
||||
// Called when the user types in the input
|
||||
if (e.currentTarget.value) {
|
||||
const value = e.currentTarget.value;
|
||||
const date = parse(value, at("dateParseFormat"), new Date());
|
||||
if (
|
||||
isValid(date) &&
|
||||
date.getFullYear() >= min &&
|
||||
maxDate &&
|
||||
getYear(maxDate) >= getYear(date)
|
||||
) {
|
||||
field.onChange(date);
|
||||
}
|
||||
}
|
||||
}}
|
||||
popperPlacement="bottom-start"
|
||||
popperClassName={twMerge(
|
||||
"z-50 mt-[12px] rounded border",
|
||||
"border-gray-300 bg-gray-50 text-gray-900",
|
||||
"dark:border-gray-600 dark:bg-gray-700 dark:text-white",
|
||||
|
||||
datePickerPopperClass,
|
||||
)}
|
||||
showPopperArrow={false}
|
||||
calendarClassName={twMerge(
|
||||
"border-gray-300 bg-gray-50 text-gray-900",
|
||||
"dark:border-gray-600 dark:bg-gray-700 dark:text-white",
|
||||
)}
|
||||
minDate={minDate}
|
||||
showFullMonthYearPicker
|
||||
maxDate={maxDate}
|
||||
renderCustomHeader={(props) => (
|
||||
<DatePickerCustomHeader {...props} />
|
||||
)}
|
||||
customInput={
|
||||
<InputDatePicker
|
||||
mask={at("dateMask")}
|
||||
inputClass="p-0"
|
||||
className="text-left"
|
||||
ref={inputRef}
|
||||
error={!!hasError}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</Field>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,21 @@
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
type ErrorMessageProps = {
|
||||
errorMessage: string;
|
||||
};
|
||||
|
||||
export const ErrorMessage = ({ errorMessage }: ErrorMessageProps) => {
|
||||
const t = useTranslations();
|
||||
|
||||
type TranslationKey = Parameters<typeof t>[0];
|
||||
|
||||
return errorMessage !== undefined ? (
|
||||
<div className="mt-2 font-medium text-orange-700">
|
||||
<p>
|
||||
{errorMessage.startsWith("FormValidation")
|
||||
? t(errorMessage as TranslationKey)
|
||||
: errorMessage}
|
||||
</p>
|
||||
</div>
|
||||
) : null;
|
||||
};
|
||||
@@ -0,0 +1,68 @@
|
||||
import { ReactNode } from "react";
|
||||
|
||||
import { get } from "lodash";
|
||||
import { useFormContext } from "react-hook-form";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
import { ErrorMessage } from "./ErrorMessage";
|
||||
import { Label } from "./Label";
|
||||
|
||||
export type FieldProps = {
|
||||
name: string;
|
||||
className?: string;
|
||||
labelClassName?: string;
|
||||
childrenWrapperClassName?: string;
|
||||
label?: React.ReactNode;
|
||||
hideErrorMessage?: boolean;
|
||||
};
|
||||
|
||||
export const Field = (
|
||||
props: Omit<FieldProps, "name"> & {
|
||||
required?: boolean;
|
||||
name?: string;
|
||||
children: ReactNode;
|
||||
},
|
||||
) => {
|
||||
const {
|
||||
name,
|
||||
className,
|
||||
labelClassName,
|
||||
childrenWrapperClassName,
|
||||
label,
|
||||
children,
|
||||
required,
|
||||
hideErrorMessage = false,
|
||||
} = props;
|
||||
|
||||
const form = useFormContext();
|
||||
|
||||
const {
|
||||
formState: { errors },
|
||||
} = form;
|
||||
|
||||
const hasError = name && !!get(errors, name)?.message;
|
||||
|
||||
return (
|
||||
<div className={twMerge("flex w-full flex-col items-start", className)}>
|
||||
{label ? (
|
||||
<Label htmlFor={name} required={required} className={labelClassName}>
|
||||
{label}
|
||||
</Label>
|
||||
) : null}
|
||||
|
||||
<div
|
||||
className={twMerge(
|
||||
"flex w-full",
|
||||
label && "mt-2",
|
||||
childrenWrapperClassName,
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
|
||||
{hideErrorMessage || !hasError ? null : (
|
||||
<ErrorMessage errorMessage={String(get(errors, name)?.message)} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,31 @@
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
type LabelProps = React.DetailedHTMLProps<
|
||||
React.LabelHTMLAttributes<HTMLLabelElement>,
|
||||
HTMLLabelElement
|
||||
> & {
|
||||
required?: boolean;
|
||||
className?: string;
|
||||
tooltip?: React.ReactNode;
|
||||
};
|
||||
|
||||
export const Label = ({
|
||||
required,
|
||||
className,
|
||||
children,
|
||||
tooltip,
|
||||
...labelProps
|
||||
}: LabelProps) => {
|
||||
return (
|
||||
<label
|
||||
{...labelProps}
|
||||
className={twMerge(
|
||||
"flex items-center text-sm font-medium text-gray-900 dark:text-gray-300",
|
||||
required && "after:ml-0.5 after:content-['*']",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
<div>{children}</div>
|
||||
</label>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,200 @@
|
||||
import { Fragment, useRef } from "react";
|
||||
|
||||
import { Listbox, Transition } from "@headlessui/react";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { Controller, useFormContext } from "react-hook-form";
|
||||
import {
|
||||
IoChevronDown,
|
||||
IoCloseOutline,
|
||||
IoSearchOutline,
|
||||
} from "react-icons/io5";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
import { Field, FieldProps } from "./Field";
|
||||
|
||||
export type SelectOption = {
|
||||
value: string;
|
||||
label: React.ReactNode;
|
||||
selectedLabel?: React.ReactNode;
|
||||
disabled?: boolean;
|
||||
};
|
||||
|
||||
type SelectFieldProps = FieldProps & {
|
||||
required?: boolean;
|
||||
placeholder?: string;
|
||||
noOptionsMessage?: string;
|
||||
options: SelectOption[];
|
||||
searchable?: boolean;
|
||||
listboxClassName?: string;
|
||||
dropdownClassName?: string;
|
||||
searchValue?: string;
|
||||
onChangeSearchValue?: (value: string) => void;
|
||||
onOptionSelected?: (option: SelectOption) => void;
|
||||
};
|
||||
|
||||
export const SelectField = ({
|
||||
name,
|
||||
label,
|
||||
className,
|
||||
labelClassName,
|
||||
childrenWrapperClassName,
|
||||
hideErrorMessage = false,
|
||||
|
||||
required,
|
||||
placeholder,
|
||||
noOptionsMessage,
|
||||
options,
|
||||
searchable,
|
||||
searchValue = "",
|
||||
onChangeSearchValue,
|
||||
onOptionSelected,
|
||||
listboxClassName,
|
||||
dropdownClassName,
|
||||
}: SelectFieldProps) => {
|
||||
const at = useTranslations("App");
|
||||
const form = useFormContext();
|
||||
|
||||
// We need to keep track of the selected option to be able to continue to
|
||||
// display it when the user searches for something else
|
||||
const curOption = useRef<SelectOption | null>(null);
|
||||
|
||||
return (
|
||||
<Field
|
||||
{...{
|
||||
name,
|
||||
label,
|
||||
required,
|
||||
className,
|
||||
labelClassName,
|
||||
childrenWrapperClassName,
|
||||
hideErrorMessage,
|
||||
}}
|
||||
>
|
||||
<div className="flex w-full flex-col">
|
||||
<Controller
|
||||
control={form.control}
|
||||
name={name}
|
||||
render={({ field: { onChange, value, name } }) => {
|
||||
const selectedOption =
|
||||
curOption.current?.value === value
|
||||
? curOption.current
|
||||
: options.find((option) => option.value === value);
|
||||
|
||||
return (
|
||||
<Listbox
|
||||
value={value ?? null}
|
||||
name={name}
|
||||
onChange={(value) => {
|
||||
curOption.current =
|
||||
options.find((option) => option.value === value) ?? null;
|
||||
onChangeSearchValue?.("");
|
||||
onChange(value);
|
||||
onOptionSelected?.(curOption.current!);
|
||||
}}
|
||||
>
|
||||
{({ open }) => (
|
||||
<div className="relative w-full">
|
||||
<Listbox.Button
|
||||
className={twMerge(
|
||||
"group flex w-full items-center justify-between rounded-lg border p-3 text-sm",
|
||||
"border-gray-300 bg-gray-50 text-gray-900 shadow-sm focus-within:border-primary-500 focus-within:ring-primary-500",
|
||||
"dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus-within:border-primary-500 dark:focus-within:ring-primary-500",
|
||||
listboxClassName,
|
||||
)}
|
||||
>
|
||||
<span className="block truncate pr-2 text-gray-900 dark:text-white">
|
||||
{selectedOption?.selectedLabel ??
|
||||
selectedOption?.label ??
|
||||
placeholder ??
|
||||
at("selectPlaceholder")}
|
||||
</span>
|
||||
<span className="pointer-events-none flex items-center pr-2">
|
||||
<IoChevronDown
|
||||
className="h-3 w-3 text-gray-900 dark:text-white"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</span>
|
||||
</Listbox.Button>
|
||||
|
||||
<Transition
|
||||
as={Fragment}
|
||||
show={open}
|
||||
leave="transition ease-in duration-200"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div
|
||||
className={twMerge(
|
||||
"absolute z-10 mt-1 flex w-full flex-col overflow-y-hidden rounded border py-3 text-white focus:outline-none [&>ul]:outline-none",
|
||||
"border-gray-300 bg-gray-50 text-gray-900",
|
||||
"dark:border-gray-600 dark:bg-gray-700 dark:text-white",
|
||||
|
||||
dropdownClassName,
|
||||
)}
|
||||
>
|
||||
<Listbox.Options className="flex max-h-[180px] flex-1 flex-col justify-stretch">
|
||||
{searchable && (
|
||||
<div className="mx-3 mb-4 flex h-[40px] w-auto flex-1 items-center justify-between rounded border px-4 dark:border-neutral-500 dark:bg-neutral-600 focus-within:dark:border-neutral-200">
|
||||
<IoSearchOutline
|
||||
width="16px"
|
||||
className="h-4 w-4 flex-shrink-0 text-gray-900 dark:text-white"
|
||||
/>
|
||||
<input
|
||||
className="w-full flex-1 border-none bg-transparent ring-0 focus:outline-none focus:ring-0 focus:ring-offset-0"
|
||||
value={searchValue}
|
||||
onChange={
|
||||
onChangeSearchValue
|
||||
? (e) => onChangeSearchValue(e.target.value)
|
||||
: undefined
|
||||
}
|
||||
placeholder={at("searchPlaceholder")}
|
||||
type="search"
|
||||
/>
|
||||
{searchValue.trim() !== "" && (
|
||||
<button
|
||||
className="flex h-4 w-4 flex-shrink-0 items-center justify-center"
|
||||
type="button"
|
||||
onClick={() => onChangeSearchValue?.("")}
|
||||
>
|
||||
<IoCloseOutline className="h-4 w-4 text-gray-900 transition-all duration-200 dark:text-white" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{options.length === 0 ? (
|
||||
<div className="w-full text-center">
|
||||
{noOptionsMessage ?? at("noOptionsMessage")}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex-1 overflow-scroll">
|
||||
{options.map((option) => (
|
||||
<Listbox.Option
|
||||
key={option.value}
|
||||
value={option.value}
|
||||
disabled={option.disabled}
|
||||
className={twMerge(
|
||||
"w-full px-3 py-2 text-left",
|
||||
!option.disabled &&
|
||||
"hover:bg-primary-500 hover:text-white",
|
||||
option.disabled && "opacity-50",
|
||||
)}
|
||||
>
|
||||
{option.label}
|
||||
</Listbox.Option>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</Listbox.Options>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
)}
|
||||
</Listbox>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Field>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,60 @@
|
||||
import React from "react";
|
||||
|
||||
import { Switch, SwitchProps } from "@headlessui/react";
|
||||
import { Controller, useFormContext } from "react-hook-form";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
import { Field, FieldProps } from "./Field";
|
||||
|
||||
export const SwitchField = (props: FieldProps & SwitchProps<"button">) => {
|
||||
const {
|
||||
name,
|
||||
label,
|
||||
disabled,
|
||||
className,
|
||||
labelClassName,
|
||||
|
||||
childrenWrapperClassName,
|
||||
hideErrorMessage,
|
||||
|
||||
...rest
|
||||
} = props;
|
||||
const form = useFormContext();
|
||||
|
||||
return (
|
||||
<Field
|
||||
{...{
|
||||
name,
|
||||
type: "checkbox",
|
||||
label,
|
||||
disabled,
|
||||
className,
|
||||
labelClassName,
|
||||
}}
|
||||
>
|
||||
<div className="flex w-full flex-col">
|
||||
<Controller
|
||||
control={form.control}
|
||||
name={name}
|
||||
render={({ field }) => (
|
||||
<div className="flex h-[40px] items-center">
|
||||
<Switch
|
||||
checked={field.value}
|
||||
onChange={field.onChange}
|
||||
className={twMerge(
|
||||
"relative inline-flex h-5 w-9 items-center rounded-full transition-colors focus:outline-none",
|
||||
"ui-not-checked:bg-neutral-300 ui-not-checked:hover:bg-neutral-400",
|
||||
"ui-not-checked:dark:bg-neutral-500 ui-not-checked:dark:hover:bg-neutral-600",
|
||||
"ui-checked:bg-primary-500 ui-checked:hover:bg-primary-600",
|
||||
)}
|
||||
{...rest}
|
||||
>
|
||||
<span className="ui-checked:translate-x-[19px] ui-not-checked:translate-x-[3px] inline-block h-[14px] w-[14px] transform rounded-full bg-white transition-transform" />
|
||||
</Switch>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</Field>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,88 @@
|
||||
import React from "react";
|
||||
|
||||
import { get } from "lodash";
|
||||
import { Controller, useFormContext } from "react-hook-form";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
import { Field, FieldProps } from "./Field";
|
||||
|
||||
export const TextAreaField = (
|
||||
props: FieldProps &
|
||||
React.HTMLProps<HTMLTextAreaElement> & {
|
||||
handleChanged?: (props: { name: string }) => void;
|
||||
startIcon?: React.ReactNode;
|
||||
},
|
||||
) => {
|
||||
const {
|
||||
name,
|
||||
label,
|
||||
required,
|
||||
disabled,
|
||||
className,
|
||||
labelClassName,
|
||||
childrenWrapperClassName,
|
||||
hideErrorMessage = false,
|
||||
|
||||
startIcon,
|
||||
handleChanged,
|
||||
|
||||
...rest
|
||||
} = props;
|
||||
const form = useFormContext();
|
||||
|
||||
const {
|
||||
formState: { errors },
|
||||
} = form;
|
||||
|
||||
const hasError = !!get(errors, name)?.message;
|
||||
|
||||
return (
|
||||
<Field
|
||||
{...{
|
||||
name,
|
||||
label,
|
||||
required,
|
||||
className,
|
||||
labelClassName,
|
||||
childrenWrapperClassName,
|
||||
hideErrorMessage,
|
||||
}}
|
||||
>
|
||||
<div className="flex w-full flex-col">
|
||||
<Controller
|
||||
control={form.control}
|
||||
name={name}
|
||||
render={({ field }) => (
|
||||
<div className="relative">
|
||||
{startIcon && (
|
||||
<div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
|
||||
{startIcon}
|
||||
</div>
|
||||
)}
|
||||
<textarea
|
||||
{...form.register(name, {
|
||||
required,
|
||||
})}
|
||||
aria-required={required}
|
||||
aria-invalid={hasError}
|
||||
disabled={disabled}
|
||||
className={twMerge(
|
||||
"flex w-full content-center rounded-lg border p-3 text-sm",
|
||||
"border-gray-300 bg-gray-50 text-gray-900 shadow-sm focus:border-primary-500 focus:ring-primary-500",
|
||||
"dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500",
|
||||
hasError && "!border-orange-700 focus:!border-orange-700",
|
||||
disabled && "dark:bg-gray-50",
|
||||
)}
|
||||
{...rest}
|
||||
onChange={(e) => {
|
||||
field.onChange(e);
|
||||
}}
|
||||
value={field.value}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</Field>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,111 @@
|
||||
import React from "react";
|
||||
|
||||
import { get } from "lodash";
|
||||
import { Controller, useFormContext } from "react-hook-form";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
import { Field, FieldProps } from "./Field";
|
||||
|
||||
export const TextField = (
|
||||
props: FieldProps &
|
||||
React.HTMLProps<HTMLInputElement> & {
|
||||
handleChanged?: (props: { name: string }) => void;
|
||||
startIcon?: React.ReactNode;
|
||||
},
|
||||
) => {
|
||||
const {
|
||||
name,
|
||||
type = "text",
|
||||
label,
|
||||
required,
|
||||
disabled,
|
||||
className,
|
||||
labelClassName,
|
||||
childrenWrapperClassName,
|
||||
hideErrorMessage = false,
|
||||
|
||||
startIcon,
|
||||
handleChanged,
|
||||
|
||||
...rest
|
||||
} = props;
|
||||
const form = useFormContext();
|
||||
|
||||
const {
|
||||
formState: { errors },
|
||||
} = form;
|
||||
|
||||
const hasError = !!get(errors, name)?.message;
|
||||
|
||||
const input = (value: string | number) => {
|
||||
return typeof value === "number"
|
||||
? isNaN(value)
|
||||
? ""
|
||||
: value.toString()
|
||||
: value ?? "";
|
||||
};
|
||||
|
||||
const output =
|
||||
type === "number"
|
||||
? (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const output = parseFloat(e.target.value);
|
||||
return isNaN(output) ? 0 : output;
|
||||
}
|
||||
: (e: React.ChangeEvent<HTMLInputElement>) => e.target.value;
|
||||
|
||||
return (
|
||||
<Field
|
||||
{...{
|
||||
name,
|
||||
label,
|
||||
required,
|
||||
className,
|
||||
labelClassName,
|
||||
childrenWrapperClassName,
|
||||
hideErrorMessage,
|
||||
}}
|
||||
>
|
||||
<div className="flex w-full flex-col">
|
||||
<Controller
|
||||
control={form.control}
|
||||
name={name}
|
||||
render={({ field }) => (
|
||||
<div className="relative">
|
||||
{startIcon && (
|
||||
<div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
|
||||
{startIcon}
|
||||
</div>
|
||||
)}
|
||||
<input
|
||||
type={type}
|
||||
{...form.register(name, {
|
||||
valueAsNumber: type === "number",
|
||||
required,
|
||||
})}
|
||||
aria-required={required}
|
||||
aria-invalid={hasError}
|
||||
disabled={disabled}
|
||||
className={twMerge(
|
||||
"flex w-full content-center rounded-lg border p-3 text-sm",
|
||||
"border-gray-300 bg-gray-50 text-gray-900 shadow-sm focus:border-primary-500 focus:ring-primary-500",
|
||||
"dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500",
|
||||
hasError && "!border-orange-700 focus:!border-orange-700",
|
||||
disabled && "dark:bg-gray-50",
|
||||
startIcon && "pl-10",
|
||||
)}
|
||||
{...rest}
|
||||
onChange={(e) => {
|
||||
field.onChange(output(e));
|
||||
}}
|
||||
value={input(field.value)}
|
||||
onBlur={() => {
|
||||
if (handleChanged) handleChanged({ name });
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</Field>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,45 @@
|
||||
import { useState } from "react";
|
||||
|
||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||
import { getFetch, httpBatchLink, loggerLink } from "@trpc/client";
|
||||
import superjson from "superjson";
|
||||
|
||||
import { trpc } from "@/utils/trpc";
|
||||
|
||||
export const TrpcProvider = ({ children }: { children: React.ReactNode }) => {
|
||||
const [queryClient] = useState(
|
||||
() =>
|
||||
new QueryClient({
|
||||
defaultOptions: { queries: { staleTime: 5000 } },
|
||||
}),
|
||||
);
|
||||
|
||||
const url = "/api/trpc";
|
||||
|
||||
const [trpcClient] = useState(() =>
|
||||
trpc.createClient({
|
||||
links: [
|
||||
loggerLink({
|
||||
enabled: () => true,
|
||||
}),
|
||||
httpBatchLink({
|
||||
url,
|
||||
fetch: async (input, init?) => {
|
||||
const fetch = getFetch();
|
||||
return fetch(input, {
|
||||
...init,
|
||||
credentials: "include",
|
||||
});
|
||||
},
|
||||
}),
|
||||
],
|
||||
transformer: superjson,
|
||||
}),
|
||||
);
|
||||
|
||||
return (
|
||||
<trpc.Provider client={trpcClient} queryClient={queryClient}>
|
||||
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
|
||||
</trpc.Provider>
|
||||
);
|
||||
};
|
||||
@@ -4,7 +4,13 @@ import { Provider } from "jotai";
|
||||
|
||||
import { useDynamicViewportUnits } from "@/hooks/useDynamicViewportUnits";
|
||||
|
||||
import { TrpcProvider } from "./TrpcProvider";
|
||||
|
||||
export default function Providers({ children }: { children: React.ReactNode }) {
|
||||
useDynamicViewportUnits();
|
||||
return <Provider>{children}</Provider>;
|
||||
return (
|
||||
<Provider>
|
||||
<TrpcProvider>{children}</TrpcProvider>
|
||||
</Provider>
|
||||
);
|
||||
}
|
||||
@@ -10,7 +10,7 @@ import { TimeControlColours } from "@/app/constants";
|
||||
import { TimeControl } from "@/types";
|
||||
|
||||
const Legend = () => {
|
||||
const t = useTranslations("Tournaments");
|
||||
const at = useTranslations("App");
|
||||
const map = useMap();
|
||||
const tournaments = useAtomValue(filteredTournamentsByTimeControlAtom);
|
||||
|
||||
@@ -45,7 +45,7 @@ const Legend = () => {
|
||||
<li>
|
||||
<span class="block h-4 w-7 border border-[#999] float-left mr-1" style="background: ${
|
||||
TimeControlColours[tc]
|
||||
}"></span>${t("timeControlEnum", { tc })}
|
||||
}"></span>${at("timeControlEnum", { tc })}
|
||||
</li>
|
||||
`,
|
||||
)
|
||||
@@ -56,7 +56,7 @@ const Legend = () => {
|
||||
|
||||
legend.addTo(map);
|
||||
}
|
||||
}, [map, t]); // eslint-disable-line react-hooks/exhaustive-deps
|
||||
}, [map, at]); // eslint-disable-line react-hooks/exhaustive-deps
|
||||
return null;
|
||||
};
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@ import {
|
||||
import { TimeControl } from "@/types";
|
||||
|
||||
const TimeControlFilters = () => {
|
||||
const t = useTranslations("Tournaments");
|
||||
const at = useTranslations("App");
|
||||
const tournaments = useAtomValue(tournamentsAtom);
|
||||
|
||||
const classic = useAtom(classicAtom);
|
||||
@@ -37,7 +37,7 @@ const TimeControlFilters = () => {
|
||||
checked={atom[0]}
|
||||
onChange={() => atom[1](!atom[0])}
|
||||
/>
|
||||
{t("timeControlEnum", { tc })}
|
||||
{at("timeControlEnum", { tc })}
|
||||
</label>
|
||||
</div>
|
||||
))}
|
||||
|
||||
@@ -25,6 +25,7 @@ import TimeControlFilters from "./TimeControlFilters";
|
||||
|
||||
export default function TournamentTable() {
|
||||
const t = useTranslations("Tournaments");
|
||||
const at = useTranslations("App");
|
||||
|
||||
const filteredTournaments = useAtomValue(filteredTournamentsListAtom);
|
||||
const [syncVisible, setSyncVisible] = useAtom(syncVisibleAtom);
|
||||
@@ -150,7 +151,7 @@ export default function TournamentTable() {
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-1 py-2 sm:px-3 sm:py-3 lg:px-3 lg:py-3">
|
||||
{t("timeControlEnum", { tc: tournament.timeControl })}
|
||||
{at("timeControlEnum", { tc: tournament.timeControl })}
|
||||
</td>
|
||||
<td className="px-1 py-2 sm:px-3 sm:py-3 lg:px-3 lg:py-3">
|
||||
<a href={tournament.url} target="_blank">
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { differenceInDays, isSameDay, parse } from "date-fns";
|
||||
import { groupBy } from "lodash";
|
||||
import { ObjectId } from "mongodb";
|
||||
|
||||
import clientPromise from "@/lib/mongodb";
|
||||
import { TournamentData } from "@/types";
|
||||
import { TimeControl, Tournament } from "@/types";
|
||||
import { errorLog } from "@/utils/logger";
|
||||
|
||||
@@ -10,19 +10,6 @@ import TournamentsDisplay from "./TournamentsDisplay";
|
||||
|
||||
export const revalidate = 3600; // Revalidate cache every 6 hours
|
||||
|
||||
export interface TournamentData {
|
||||
_id: ObjectId;
|
||||
town: string;
|
||||
department: string;
|
||||
tournament: string;
|
||||
url: string;
|
||||
time_control: "Cadence Lente" | "Rapide" | "Blitz" | string;
|
||||
norm_tournament: boolean;
|
||||
date: string;
|
||||
coordinates: [number, number];
|
||||
pending: boolean;
|
||||
}
|
||||
|
||||
const tcMap: Record<TournamentData["time_control"], TimeControl> = {
|
||||
"Cadence Lente": TimeControl.Classic,
|
||||
Rapide: TimeControl.Rapid,
|
||||
|
||||
Reference in New Issue
Block a user