static data generation with cache

app/tournois/page.tsx

@@ -1,11 +1,9 @@
-import { Tournament } from "@/types";
-
+import clientPromise from "@/lib/mongodb";
 import dynamic from "next/dynamic";
 import Layout from "@/components/Layout";
 import TournamentTable from "@/components/TournamentTable";
-import getTournaments from "@/utils/getTournamentData";
+import { dateOrderingFrance } from "@/utils/dbDateOrdering";
 
-// 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
@@ -19,17 +17,32 @@ const TournamentMap = dynamic(() => import("@/components/TournamentMap"), {
   ),
 });
 
+export const revalidate = 86400; // cache for 24 hours
+
+const getTournaments = async () => {
+  try {
+    const client = await clientPromise;
+    const db = client.db("tournamentsFranceDB");
+
+    const data = await dateOrderingFrance(db);
+
+    return JSON.stringify(data);
+  } catch (error) {
+    throw new Error("Error fetching tournament data");
+  }
+};
+
 export default async function Tournaments() {
-  const tournamentData = await getTournaments("france");
+  const tournamentData = await getTournaments();
 
   return (
     <Layout>
       <main className="grid lg:grid-cols-2">
         <div className="">
-          <TournamentMap tournamentData={tournamentData} />
+          <TournamentMap tournamentData={JSON.parse(tournamentData)} />
         </div>
         <div className="bg-white dark:bg-gray-800 lg:overflow-y-auto">
-          <TournamentTable tournamentData={tournamentData} />
+          <TournamentTable tournamentData={JSON.parse(tournamentData)} />
         </div>
       </main>
     </Layout>