mirror of
https://github.com/TheRealOwenRees/echecsfrance.git
synced 2026-07-23 04:26:57 +00:00
Update next-intl (and other packages), internationalize URLs
This commit is contained in:
Timothy Armes
@@ -0,0 +1,74 @@
|
||||
"use client";
|
||||
|
||||
import { useMemo, useRef } from "react";
|
||||
|
||||
import { useSetAtom } from "jotai";
|
||||
import L, { LatLngLiteral } from "leaflet";
|
||||
import "leaflet-defaulticon-compatibility";
|
||||
import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css";
|
||||
import "leaflet/dist/leaflet.css";
|
||||
import { useFormContext, useWatch } from "react-hook-form";
|
||||
import { MapContainer, Marker, TileLayer } from "react-leaflet";
|
||||
|
||||
import { mapBoundsAtom } from "@/app/atoms";
|
||||
import MapEvents from "@/components/MapEvents";
|
||||
|
||||
const center: LatLngLiteral = { lat: 47.0844, lng: 2.3964 };
|
||||
|
||||
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 eventHandlers = useMemo(
|
||||
() => ({
|
||||
dragend() {
|
||||
const marker = markerRef.current;
|
||||
if (marker != null) {
|
||||
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,
|
||||
);
|
||||
}
|
||||
},
|
||||
}),
|
||||
[setValue],
|
||||
);
|
||||
|
||||
return (
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
||||
export default Map;
|
||||
@@ -0,0 +1,231 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
|
||||
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 "@/components/InfoMessage";
|
||||
import InfoMessage from "@/components/InfoMessage";
|
||||
import LoadingMap from "@/components/LoadingMap";
|
||||
import { DateField } from "@/components/form/DateField";
|
||||
import { SelectField } from "@/components/form/SelectField";
|
||||
import { SwitchField } from "@/components/form/SwitchField";
|
||||
import { TextAreaField } from "@/components/form/TextAreaField";
|
||||
import { TextField } from "@/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,
|
||||
loading: LoadingMap,
|
||||
});
|
||||
|
||||
const TournamentForm = () => {
|
||||
const t = useTranslations("AddTournament");
|
||||
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 (
|
||||
<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">
|
||||
<TextField
|
||||
name="tournament.tournament"
|
||||
control={form.control}
|
||||
label={t("tournamentNameLabel")}
|
||||
placeholder={t("tournamentNamePlaceholder")}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-2 sm:col-span-1">
|
||||
<DateField
|
||||
name="tournament.date"
|
||||
control={form.control}
|
||||
label={t("dateLabel")}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-2 sm:col-span-1">
|
||||
<TextField
|
||||
name="tournament.url"
|
||||
control={form.control}
|
||||
label={t("urlLabel")}
|
||||
placeholder={t("urlPlaceholder")}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-2 sm:col-span-1">
|
||||
<SelectField
|
||||
name="tournament.time_control"
|
||||
control={form.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">
|
||||
<SwitchField
|
||||
name="tournament.norm_tournament"
|
||||
control={form.control}
|
||||
label={t("normLabel")}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-4">
|
||||
<TextField
|
||||
name="tournament.address"
|
||||
control={form.control}
|
||||
label={t("addressLabel")}
|
||||
placeholder={t("addressPlaceholder")}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-4 sm:col-span-2">
|
||||
<TextField
|
||||
name="tournament.town"
|
||||
control={form.control}
|
||||
label={t("townLabel")}
|
||||
placeholder={t("townPlaceholder")}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-2 sm:col-span-1">
|
||||
<TextField
|
||||
name="tournament.department"
|
||||
control={form.control}
|
||||
label={t("departmentLabel")}
|
||||
placeholder={t("departmentPlaceholder")}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-2 sm:col-span-1">
|
||||
<TextField
|
||||
name="tournament.country"
|
||||
control={form.control}
|
||||
label={t("countryLabel")}
|
||||
placeholder={t("countryPlaceholder")}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-2 sm:col-span-1">
|
||||
<TextField
|
||||
name="name"
|
||||
control={form.control}
|
||||
label={t("yourNameLabel")}
|
||||
placeholder={t("yourNamePlaceholder")}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-2 sm:col-span-1">
|
||||
<TextField
|
||||
name="email"
|
||||
control={form.control}
|
||||
label={t("yourEmailLabel")}
|
||||
placeholder={t("yourEmailPlaceholder")}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-4 row-span-2 sm:col-span-2">
|
||||
<TextAreaField
|
||||
name="message"
|
||||
control={form.control}
|
||||
label={t("messageLabel")}
|
||||
rows={6}
|
||||
placeholder={t("messagePlaceholder")}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="col-span-2 sm:col-span-1">
|
||||
<TextField
|
||||
name="tournament.coordinates.0"
|
||||
control={form.control}
|
||||
label={t("latLabel")}
|
||||
type="number"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-2 sm:col-span-1">
|
||||
<TextField
|
||||
name="tournament.coordinates.1"
|
||||
control={form.control}
|
||||
label={t("lngLabel")}
|
||||
type="number"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<section id="map" className="z-0 col-span-4 flex h-auto">
|
||||
<Map />
|
||||
</section>
|
||||
</div>
|
||||
<button
|
||||
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"
|
||||
>
|
||||
{form.formState.isSubmitting ? t("sending") : t("sendButton")}
|
||||
</button>
|
||||
<button
|
||||
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} />
|
||||
</form>
|
||||
</FormProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export default TournamentForm;
|
||||
@@ -0,0 +1,26 @@
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
import TournamentForm from "./TournamentForm";
|
||||
|
||||
export default function Contact() {
|
||||
const t = useTranslations("AddTournament");
|
||||
|
||||
return (
|
||||
<section className="grid place-items-center bg-white pb-20 dark:bg-gray-800">
|
||||
<div className="mx-auto max-w-screen-md px-4 py-8 lg:py-16">
|
||||
<h2
|
||||
className="mb-4 text-center text-4xl font-extrabold tracking-tight text-gray-900 dark:text-white"
|
||||
data-test="header2"
|
||||
>
|
||||
{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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user