Merge remote-tracking branch 'origin/main'

app/api/tournaments/france/route.ts

@@ -1,44 +1,18 @@
 import clientPromise from "@/lib/mongodb";
+import { dateOrderingFrance } from "@/utils/dbDateOrdering";
 
-// 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/france
  * @internal
  */
+// TODO cache this result for 24 hours - using cache()
 export async function GET() {
   try {
     const client = await clientPromise;
     const db = client.db("tournamentsFranceDB");
 
-    /**
-     * Converts date from string into a date to allow ordering
-     */
-    // TODO add into a middleware?
-    const data = await db
-      .collection("tournaments")
-      .aggregate([
-        {
-          $addFields: {
-            dateParts: {
-              $dateFromString: {
-                dateString: "$date",
-                format: "%d/%m/%Y",
-              },
-            },
-          },
-        },
-        {
-          $sort: {
-            dateParts: 1,
-          },
-        },
-        {
-          $unset: "dateParts",
-        },
-      ])
-      .toArray();
+    const data = await dateOrderingFrance(db);
 
     return new Response(JSON.stringify(data), { status: 200 });
   } catch (error) {

app/page.tsx

@@ -1,11 +1,20 @@
 import Link from "next/link";
+import Image from "next/image";
 import Layout from "@/components/Layout";
+import bgImage from "@/public/images/map-bg.jpg";
 
 export default function Home() {
   return (
     <Layout>
       <header className="grid h-[calc(100%-153px)] md:h-[calc(100%-173px)] place-items-center">
-        <div className="relative h-full w-full bg-[url('/images/map-bg.jpg')] bg-cover bg-center brightness-[0.2]"></div>
+        <div className="relative h-full w-full brightness-[0.2]">
+          <Image
+            src={bgImage}
+            alt="Background image of France"
+            fill={true}
+            style={{ objectFit: "cover" }}
+          />
+        </div>
         <div className="absolute text-center">
           <h1 className="text-5xl p-5">Echecs France</h1>
           <h2 className="text-3xl p-5">

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>