map and table added

app/api/tournaments/route.ts

@@ -1,13 +1,18 @@
-import type { NextApiRequest, NextApiResponse } from "next";
 import clientPromise from "@/lib/mongodb";
 
-export async function GET(req: NextApiRequest, res: NextApiResponse) {
-  // TODO delete req / res ?
+/**
+ * Tournament data API endpoint
+ * @route /api/tournaments
+ * @internal
+ */
+export async function GET() {
   try {
     const client = await clientPromise;
     const db = client.db("tournamentsFranceDB");
-    // const data = await db.collection("tournaments").find({}).toArray();
-    // converts date from string into a date and then orders by date
+
+    /**
+     * Converts date from string into a date to allow ordering
+     */
     const data = await db
       .collection("tournaments")
       .aggregate([

app/page.tsx

@@ -1,9 +1,9 @@
-import Image from 'next/image'
+import Layout from "@/components/Layout";
 
 export default function Home() {
   return (
-    <main className="">
-
-    </main>
-  )
+    <Layout>
+      <main className=""></main>
+    </Layout>
+  );
 }

app/tournois/page.tsx

@@ -1,16 +1,22 @@
+import dynamic from "next/dynamic";
 import Layout from "@/components/Layout";
+import TournamentTable from "@/components/TournamentTable";
 
-export interface TournamentType {
-  _id: string;
-  location: string;
-  department: string;
-  tournament: string;
-  url: string;
-  time_control: string;
-  date: string;
-  coordinates: [number, number];
-}
+/**
+ * Imports the tournament map component, ensuring CSR only.
+ * @remarks SSR is not supported by react-leaflet
+ */
+const TournamentMapNoSSR = dynamic(
+  () => import("../../components/TournamentMap"),
+  {
+    ssr: false,
+  }
+);
 
+/**
+ * Retrieves tournament data from /api/tournaments
+ * @remarks The result is cached for the revalidation period in seconds
+ */
 async function getTournaments() {
   const res = await fetch("http://localhost:3000/api/tournaments", {
     next: { revalidate: 300 },
@@ -19,33 +25,13 @@ async function getTournaments() {
 }
 
 export default async function Tournaments() {
-  const data = await getTournaments();
-  console.log(data);
-
-  const tournaments = data.map((t: TournamentType) => (
-    <tr key={t._id}>
-      <td>{t.date}</td>
-      <td>{t.location}</td>
-      <td>{t.tournament}</td>
-      <td>{t.time_control}</td>
-    </tr>
-  ));
+  const tournamentData = await getTournaments();
+  console.log(tournamentData);
 
   return (
     <Layout>
-      <main className="w-full">
-        <table className="table-auto">
-          <thead>
-            <tr>
-              <th>Date</th>
-              <th>Ville</th>
-              <th>Tournois</th>
-              <th>Cadence</th>
-            </tr>
-          </thead>
-          <tbody>{tournaments}</tbody>
-        </table>
-      </main>
+      <TournamentMapNoSSR />
+      <TournamentTable tournamentData={tournamentData} />
     </Layout>
   );
 }