Factorise Map logic

app/[locale]/tournois/TournamentTable.tsx

@@ -10,52 +10,45 @@ import { Tooltip } from "react-tooltip";
 import { twMerge } from "tailwind-merge";
 
 import {
-  debouncedHoveredListTournamentIdAtom,
-  debouncedHoveredMapTournamentGroupIdAtom,
+  debouncedHoveredListIdAtom,
+  debouncedHoveredMapIdAtom,
   filteredTournamentsListAtom,
-  hoveredMapTournamentGroupIdAtom,
+  hoveredMapIdAtom,
   normsOnlyAtom,
   syncVisibleAtom,
 } from "@/app/atoms";
+import ScrollToTopButton from "@/components/ScrollToTopButton";
+import SearchBar from "@/components/SearchBar";
 import { useBreakpoint } from "@/hooks/tailwind";
 
-import ScrollToTopButton from "./ScrollToTopButton";
-import SearchBar from "./SearchBar";
 import TimeControlFilters from "./TimeControlFilters";
 
-export default function TournamentTable() {
+const TournamentTable = () => {
   const t = useTranslations("Tournaments");
   const at = useTranslations("App");
 
   const filteredTournaments = useAtomValue(filteredTournamentsListAtom);
   const [syncVisible, setSyncVisible] = useAtom(syncVisibleAtom);
   const [normsOnly, setNormsOnly] = useAtom(normsOnlyAtom);
-  const hoveredMapTournamentGroupId = useAtomValue(
-    hoveredMapTournamentGroupIdAtom,
-  );
-  const debouncedHoveredMapTournamentGroupId = useAtomValue(
-    debouncedHoveredMapTournamentGroupIdAtom,
-  );
-  const setHoveredListTournamentId = useSetAtom(
-    debouncedHoveredListTournamentIdAtom,
-  );
+  const hoveredMapId = useAtomValue(hoveredMapIdAtom);
+  const debouncedHoveredMapId = useAtomValue(debouncedHoveredMapIdAtom);
+  const setHoveredListId = useSetAtom(debouncedHoveredListIdAtom);
 
   const isLg = useBreakpoint("lg");
 
   useEffect(() => {
-    if (!isLg || debouncedHoveredMapTournamentGroupId === null) return;
+    if (!isLg || debouncedHoveredMapId === null) return;
     const tournamentRow = document.querySelector(
-      `[data-group-id="${debouncedHoveredMapTournamentGroupId}"]`,
+      `[data-group-id="${debouncedHoveredMapId}"]`,
     );
 
     tournamentRow?.scrollIntoView({ behavior: "smooth" });
-  }, [debouncedHoveredMapTournamentGroupId, isLg]);
+  }, [debouncedHoveredMapId, isLg]);
 
   return (
     <section
-      className="tournament-table grid w-full auto-rows-max pb-20 lg:col-start-2 lg:col-end-3 lg:h-content lg:overflow-y-scroll lg:pb-0"
-      id="tournament-table"
-      data-test="tournament-table-div"
+      className="grid w-full auto-rows-max pb-20 lg:col-start-2 lg:col-end-3 lg:h-content lg:overflow-y-scroll lg:pb-0"
+      id="listing"
     >
       <div className="z-10 flex w-full flex-wrap items-center justify-between gap-3 p-3">
         <SearchBar />
@@ -90,10 +83,7 @@ export default function TournamentTable() {
       <ScrollToTopButton />
 
       <div className="overflow-x-scroll">
-        <table
-          className="relative min-w-full table-fixed text-center text-xs lg:w-full"
-          data-test="tournament-table"
-        >
+        <table className="relative min-w-full table-fixed text-center text-xs lg:w-full">
           <thead>
             <tr>
               <th className="sticky top-0 bg-primary-600 p-3 text-white dark:bg-gray-600">
@@ -108,7 +98,9 @@ export default function TournamentTable() {
               <th className="sticky top-0 bg-primary-600 p-3 text-white dark:bg-gray-600">
                 {t("timeControl")}
               </th>
-              <th className="sticky top-0 w-[50px] bg-primary-600 p-3 text-white dark:bg-gray-600"></th>
+              <th className="sticky top-0 w-[50px] bg-primary-600 p-3 text-white dark:bg-gray-600">
+                {t("ffe")}
+              </th>
             </tr>
           </thead>
 
@@ -125,11 +117,11 @@ export default function TournamentTable() {
                   key={tournament.id}
                   id={tournament.id}
                   data-group-id={tournament.groupId}
-                  onMouseEnter={() => setHoveredListTournamentId(tournament.id)}
-                  onMouseLeave={() => setHoveredListTournamentId(null)}
+                  onMouseEnter={() => setHoveredListId(tournament.id)}
+                  onMouseLeave={() => setHoveredListId(null)}
                   className={twMerge(
                     "scroll-m-20 bg-white text-gray-900 hover:bg-gray-200 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-900",
-                    hoveredMapTournamentGroupId === tournament.groupId &&
+                    hoveredMapId === tournament.groupId &&
                       "bg-gray-200 dark:bg-gray-900",
                   )}
                 >
@@ -139,7 +131,7 @@ export default function TournamentTable() {
                   <td className="px-1 py-2 sm:px-3 sm:py-3 lg:px-3 lg:py-3">
                     {tournament.town}
                   </td>
-                  <td className="px-1 py-2 sm:px-3 sm:py-3 lg:px-3 lg:py-3">
+                  <td className="px-1 py-2 text-left sm:px-3 sm:py-3 lg:px-3 lg:py-3">
                     <span>
                       {tournament.norm && (
                         <FaTrophy
@@ -154,9 +146,15 @@ export default function TournamentTable() {
                     {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">
-                      <FaExternalLinkAlt />
-                    </a>
+                    <div className="flex justify-center">
+                      <a
+                        href={tournament.url}
+                        target="_blank"
+                        className="text-primary hover:text-primary-800"
+                      >
+                        <FaExternalLinkAlt />
+                      </a>
+                    </div>
                   </td>
                 </tr>
               ))
@@ -173,4 +171,6 @@ export default function TournamentTable() {
       </Tooltip>
     </section>
   );
-}
+};
+
+export default TournamentTable;