map legend

app/api/tournaments/france/route.ts

@@ -1,8 +1,10 @@
 import clientPromise from "@/lib/mongodb";
 
+// TODO collate only the country of France - redundant for now but will be needed when new countries are added
+// probably do this by passing the country name as parameter
 /**
  * Tournament data API endpoint
- * @route /api/tournaments
+ * @route /api/tournaments/france
  * @internal
  */
 export async function GET() {

app/tournois/page.tsx

@@ -1,8 +1,11 @@
+import { Tournament } from "@/types";
+
 import dynamic from "next/dynamic";
 import Layout from "@/components/Layout";
 import TournamentTable from "@/components/TournamentTable";
-import { Tournament } from "@/types";
+import getTournaments from "@/utils/getTournamentData";
 
+// TODO can these functions be put into a custom hook?
 /**
  * Imports the tournament map component, ensuring CSR only.
  * @remarks SSR is not supported by react-leaflet
@@ -16,23 +19,12 @@ const TournamentMap = dynamic(() => import("@/components/TournamentMap"), {
   ),
 });
 
-/**
- * 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 },
-  });
-  return await res.json();
-}
-
 export default async function Tournaments() {
-  const tournamentData: Tournament[] = await getTournaments();
+  const tournamentData: Tournament[] = await getTournaments("france");
 
   return (
     <Layout>
-      <main className="grid lg:grid-cols-2">
+      <main className="relative grid lg:grid-cols-2">
         <div className="relative h-screen">
           <TournamentMap tournamentData={tournamentData} />
         </div>