Add Tournament form

2026-07-23 04:26:57 +00:00 · 2023-08-29 22:55:22 +02:00
parent 419a3dd0c0
commit d33d447f90
21 changed files with 924 additions and 110 deletions
@@ -0,0 +1,112 @@
+"use client";
+
+import { MapProps } from "@/types";
+import { useMemo, useRef, ChangeEvent } from "react";
+import { useTranslations } from "next-intl";
+import { useSetAtom } from "jotai";
+import { mapBoundsAtom } from "@/app/atoms";
+
+import L from "leaflet";
+import { MapContainer, TileLayer, Marker } from "react-leaflet";
+import "leaflet/dist/leaflet.css";
+import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css";
+import "leaflet-defaulticon-compatibility";
+
+import MapEvents from "@/app/[lang]/components/MapEvents";
+
+const Map = ({ position, setPosition, center }: MapProps) => {
+  const t = useTranslations("Map");
+
+  const latValue = position.lat.toFixed(4);
+  const lngValue = position.lng.toFixed(4);
+
+  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());
+        }
+      },
+    }),
+    [setPosition],
+  );
+
+  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='&copy; <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>
+    </>
+  );
+};
+
+export default Map;
@@ -0,0 +1,268 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import { useState } from "react";
+import { useTranslations } from "next-intl";
+import { useAtomValue } from "jotai";
+import { franceCenterAtom } from "@/app/atoms";
+import useTournamentForm from "@/hooks/useTournamentForm";
+import InfoMessage from "@/app/[lang]/components/InfoMessage";
+import {
+  handleTournamentSubmit,
+  handleClearTournamentForm,
+} from "@/handlers/formHandlers";
+import LoadingMap from "@/app/[lang]/components/LoadingMap";
+
+const Map = dynamic(() => import("./Map"), {
+  ssr: false,
+  loading: LoadingMap,
+});
+
+const TournamentForm = () => {
+  const t = useTranslations("AddTournament");
+  const center = useAtomValue(franceCenterAtom);
+  const formRefs = useTournamentForm();
+
+  const [isSending, setIsSending] = useState(false);
+  const [responseMessage, setResponseMessage] = useState({
+    isSuccessful: false,
+    message: "",
+  });
+
+  return (
+    <>
+      <form
+        onSubmit={(e) =>
+          handleTournamentSubmit(
+            e,
+            t,
+            setIsSending,
+            setResponseMessage,
+            formRefs,
+          )
+        }
+        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"
+              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
+            />
+          </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"
+              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>
+          </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>
+          </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"
+              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"
+              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"
+              placeholder={t("departmentPlaceholder")}
+              // 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"
+              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"
+              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"
+              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"
+              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>
+        <button
+          disabled={isSending}
+          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")}
+        </button>
+        <button
+          onClick={() => handleClearTournamentForm(formRefs, center)}
+          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>
+    </>
+  );
+};
+
+export default TournamentForm;
@@ -0,0 +1,24 @@
+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>
+  );
+}