Factorise Map logic

app/[locale]/tournois/TournamentMarker.tsx

@@ -9,109 +9,102 @@ import { useTranslations } from "next-intl";
 import { FaTrophy } from "react-icons/fa";
 import { Marker, MarkerProps, Popup } from "react-leaflet";
 
-import { debouncedHoveredMapTournamentGroupIdAtom } from "@/app/atoms";
+import { debouncedHoveredMapIdAtom } from "@/app/atoms";
 import { TimeControlColours } from "@/app/constants";
+import type { MarkerRef } from "@/components/Map";
 import type { BouncingMarker } from "@/leafletTypes";
 import { Tournament } from "@/types";
 
-export type TournamentMarkerRef = {
-  getMarker: () => L.Marker<any>;
-  bounce: () => void;
-};
-
 type TournamentMarkerProps = {
   tournamentGroup: Tournament[];
 } & Omit<MarkerProps, "position">;
 
-export const TournamentMarker = forwardRef<
-  TournamentMarkerRef,
-  TournamentMarkerProps
->(({ tournamentGroup, ...markerProps }, ref) => {
-  const t = useTranslations("Tournaments");
-  const markerRef = useRef<L.Marker<any> | null>(null);
+export const TournamentMarker = forwardRef<MarkerRef, TournamentMarkerProps>(
+  ({ tournamentGroup, ...markerProps }, ref) => {
+    const t = useTranslations("Tournaments");
+    const markerRef = useRef<L.Marker<any> | null>(null);
 
-  useImperativeHandle(
-    ref,
-    () => ({
-      getMarker: () => markerRef.current!,
-      bounce: () => {
-        const bouncingMarker = markerRef.current as BouncingMarker;
-        bouncingMarker.setBouncingOptions({ contractHeight: 0 });
-        bouncingMarker.bounce();
-      },
-    }),
-    [],
-  );
+    useImperativeHandle(
+      ref,
+      () => ({
+        getMarker: () => markerRef.current!,
+        bounce: () => {
+          const bouncingMarker = markerRef.current as BouncingMarker;
+          bouncingMarker.setBouncingOptions({ contractHeight: 0 });
+          bouncingMarker.bounce();
+        },
+      }),
+      [],
+    );
 
-  const { date, latLng, groupId, timeControl } = tournamentGroup[0];
+    const { date, latLng, groupId, timeControl } = tournamentGroup[0];
 
-  const setHoveredMapTournamentGroupId = useSetAtom(
-    debouncedHoveredMapTournamentGroupIdAtom,
-  );
+    const setHoveredMapId = useSetAtom(debouncedHoveredMapIdAtom);
 
-  const iconOptions = useMemo(
-    () =>
-      new L.DivIcon({
-        html: `
+    const iconOptions = useMemo(
+      () =>
+        new L.DivIcon({
+          html: `
           <svg x="0px" y="0px" viewBox="0 0 365 560" enable-background="new 0 0 365 560" xml:space="preserve">
             <g><circle fill="#FFFFFF" cx="182" cy="180" r="70" /></g>
             <g><path stroke="#666666" stroke-width="10" fill="${TimeControlColours[timeControl]}" d="M182.9,551.7c0,0.1,0.2,0.3,0.2,0.3S358.3,283,358.3,194.6c0-130.1-88.8-186.7-175.4-186.9 C96.3,7.9,7.5,64.5,7.5,194.6c0,88.4,175.3,357.4,175.3,357.4S182.9,551.7,182.9,551.7z M122.2,187.2c0-33.6,27.2-60.8,60.8-60.8   c33.6,0,60.8,27.2,60.8,60.8S216.5,248,182.9,248C149.4,248,122.2,220.8,122.2,187.2z"/></g>
           </svg>
         `,
-        className: timeControl,
-        iconSize: [24, 40],
-        iconAnchor: [12, 40],
-        popupAnchor: [1, -40],
-      }),
-    [timeControl],
-  );
+          className: timeControl,
+          iconSize: [24, 40],
+          iconAnchor: [12, 40],
+          popupAnchor: [1, -40],
+        }),
+      [timeControl],
+    );
 
-  const startDate = date;
-  const endDate = last(tournamentGroup)!.date;
+    const startDate = date;
+    const endDate = last(tournamentGroup)!.date;
 
-  return (
-    <Marker
-      ref={markerRef}
-      position={latLng}
-      icon={iconOptions}
-      eventHandlers={{
-        mouseover: () => setHoveredMapTournamentGroupId(groupId),
-        mouseout: () => setHoveredMapTournamentGroupId(null),
-      }}
-      {...markerProps}
-    >
-      <Popup maxWidth={10000}>
-        <div className="flex max-w-[calc(100vw-80px)] flex-col gap-3 lg:max-w-[calc(100vw/2-80px)]">
-          <b>
-            {date}
-            {endDate !== startDate && ` - ${endDate}`}
-          </b>
+    return (
+      <Marker
+        ref={markerRef}
+        position={latLng}
+        icon={iconOptions}
+        eventHandlers={{
+          mouseover: () => setHoveredMapId(groupId),
+          mouseout: () => setHoveredMapId(null),
+        }}
+        {...markerProps}
+      >
+        <Popup maxWidth={10000}>
+          <div className="flex max-w-[calc(100vw-80px)] flex-col gap-3 lg:max-w-[calc(100vw/2-80px)]">
+            <b>
+              {date}
+              {endDate !== startDate && ` - ${endDate}`}
+            </b>
 
-          <div className="flex flex-col gap-0">
-            {tournamentGroup.map((tournament) => (
-              <a
-                key={tournament.id}
-                href={tournament.url}
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                {tournament.tournament}
-              </a>
-            ))}
-          </div>
-
-          {tournamentGroup.some((t) => t.norm) && (
-            <div className="flex items-center">
-              <FaTrophy className="mr-3 h-4 w-4" />
-              {t("norm")}
+            <div className="flex flex-col gap-0">
+              {tournamentGroup.map((tournament) => (
+                <a
+                  key={tournament.id}
+                  href={tournament.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  {tournament.tournament}
+                </a>
+              ))}
             </div>
-          )}
 
-          {t("approx")}
-        </div>
-      </Popup>
-    </Marker>
-  );
-});
+            {tournamentGroup.some((t) => t.norm) && (
+              <div className="flex items-center">
+                <FaTrophy className="mr-3 h-4 w-4" />
+                {t("norm")}
+              </div>
+            )}
+
+            {t("approx")}
+          </div>
+        </Popup>
+      </Marker>
+    );
+  },
+);
 
 TournamentMarker.displayName = "TournamentMarker";