Mutual Highlighting (#41) (#55)

* Mutual Highlighting (#41)

* Tidy up

* Delete unused API route

app/[lang]/tournois/page.tsx

@@ -1,38 +1,45 @@
 import clientPromise from "@/lib/mongodb";
-import dynamic from "next/dynamic";
-import { useTranslations } from "next-intl";
 
-import { dateOrderingFrance } from "@/utils/dbDateOrdering";
 import { errorLog } from "@/utils/logger";
+import { Tournament } from "@/types";
 
-import TournamentTable from "./TournamentTable";
+import TournamentsDisplay from "./TournamentsDisplay";
 
-export const revalidate = 3600; // revalidate cache every 6 hours;
-
-const LoadingMap = () => {
-  const t = useTranslations("Tournaments");
-  return (
-    <div className="grid h-screen place-items-center bg-white text-gray-900 dark:bg-gray-800 dark:text-white">
-      <p>{t("loading")}</p>
-    </div>
-  );
-};
-
-/**
- * Imports the tournament map component, ensuring CSR only.
- * @remarks SSR is not supported by react-leaflet
- */
-const TournamentMap = dynamic(() => import("./TournamentMap"), {
-  ssr: false,
-  loading: LoadingMap,
-});
+export const revalidate = 3600; // Revalidate cache every 6 hours
 
 const getTournaments = async () => {
   try {
     const client = await clientPromise;
     const db = client.db("tournamentsFranceDB");
-    const data = await dateOrderingFrance(db);
-    return JSON.stringify(data);
+    const data = await db
+      .collection("tournaments")
+      .aggregate<Tournament>([
+        {
+          $addFields: {
+            dateParts: {
+              $dateFromString: {
+                dateString: "$date",
+                format: "%d/%m/%Y",
+              },
+            },
+          },
+        },
+        {
+          $sort: {
+            dateParts: 1,
+          },
+        },
+        {
+          $unset: "dateParts",
+        },
+      ])
+      .toArray();
+
+    // We map the ObjectId to a string so that it can be serialized and sent to a client component
+    return data.map((t) => ({
+      ...t,
+      _id: t._id.toString(),
+    }));
   } catch (error) {
     errorLog(error);
     throw new Error("Error fetching tournament data");
@@ -40,16 +47,7 @@ const getTournaments = async () => {
 };
 
 export default async function Tournaments() {
-  const tournamentData = await getTournaments();
+  const tournaments = await getTournaments();
 
-  return (
-    <main className="relative grid h-full w-full lg:grid-cols-2">
-      <div className="">
-        <TournamentMap tournamentData={JSON.parse(tournamentData)} />
-      </div>
-      <div className="relative bg-white dark:bg-gray-800 lg:overflow-y-auto">
-        <TournamentTable tournamentData={JSON.parse(tournamentData)} />
-      </div>
-    </main>
-  );
+  return <TournamentsDisplay tournaments={tournaments} />;
 }