Localisation (#39)

* Localisation

* Update tests

* Fix map markers in English view

* Fix typo

utils/layerGroups.tsx

@@ -1,8 +1,13 @@
-import { TournamentDataProps } from "@/types";
-import { LatLngLiteral } from "leaflet";
-
-import L from "leaflet";
-import { LayerGroup, LayersControl, Marker, Popup } from "react-leaflet";
+import { TournamentDataProps, Tournament } from "@/types";
+import L, { LatLngLiteral } from "leaflet";
+import {
+  LayerGroup,
+  LayersControl,
+  Marker,
+  Popup,
+  MarkerProps,
+} from "react-leaflet";
+import { useTranslations } from "next-intl";
 
 const coordinateRandomisation = (lat: number, lng: number): LatLngLiteral => {
   const randomisation = () => Math.random() * (-0.01 - 0.01) + 0.01;
@@ -12,6 +17,50 @@ const coordinateRandomisation = (lat: number, lng: number): LatLngLiteral => {
   };
 };
 
+type TournamentMarkerProps = {
+  tournament: Tournament;
+  colour: string;
+} & Omit<MarkerProps, "position">;
+
+export const CompetitionMarker = ({
+  tournament,
+  colour,
+  ...markerProps
+}: TournamentMarkerProps) => {
+  const t = useTranslations("Competitions");
+
+  const iconOptions = new L.Icon({
+    iconUrl: `/images/leaflet/marker-icon-2x-${colour}.png`,
+    shadowUrl: "/images/leaflet/marker-shadow.png",
+    iconSize: [25, 41],
+    iconAnchor: [12, 41],
+    popupAnchor: [1, -34],
+    shadowSize: [41, 41],
+  });
+
+  return (
+    <Marker
+      position={coordinateRandomisation(
+        tournament.coordinates[0],
+        tournament.coordinates[1]
+      )}
+      icon={iconOptions}
+      {...markerProps}
+    >
+      <Popup>
+        <p>
+          {tournament.date}
+          <br />
+          <a href={tournament.url} target="_blank" rel="noopener noreferrer">
+            {tournament.tournament}
+          </a>
+        </p>
+        {t("approx")}
+      </Popup>
+    </Marker>
+  );
+};
+
 export const createLayerGroups = (
   timeControl: string,
   colour: string,
@@ -21,33 +70,14 @@ export const createLayerGroups = (
     (t) => t.time_control === timeControl
   );
 
-  const iconOptions = new L.Icon({
-    iconUrl: `images/leaflet/marker-icon-2x-${colour}.png`,
-    shadowUrl: "images/leaflet/marker-shadow.png",
-    iconSize: [25, 41],
-    iconAnchor: [12, 41],
-    popupAnchor: [1, -34],
-    shadowSize: [41, 41],
-  });
-
-  const layerGroup = filteredTournaments.map((t) => {
+  const layerGroup = filteredTournaments.map((tournament) => {
     return (
-      <Marker
-        position={coordinateRandomisation(t.coordinates[0], t.coordinates[1])}
-        key={t._id}
-        icon={iconOptions}
-      >
-        <Popup>
-          <p>
-            {t.date}
-            <br />
-            <a href={t.url} target="_blank" rel="noopener noreferrer">
-              {t.tournament}
-            </a>
-          </p>
-          géolocalisation approximative
-        </Popup>
-      </Marker>
+      <CompetitionMarker
+        key={tournament._id}
+        tournament={tournament}
+        colour={colour}
+        riseOnHover
+      />
     );
   });