tournaments ordered by date

app/api/tournaments/route.ts

@@ -1,13 +1,39 @@
-import type { NextApiRequest, NextApiResponse } from 'next'
+import type { NextApiRequest, NextApiResponse } from "next";
 import clientPromise from "@/lib/mongodb";
 
 export async function GET(req: NextApiRequest, res: NextApiResponse) {
-    try {
-        const client = await clientPromise
-        const db = client.db("tournamentsFranceDB")
-        const data = await db.collection("tournaments").find({}).toArray()
-        return new Response(JSON.stringify(data), { status: 200 })
-    } catch (error) {
-        return new Response(JSON.stringify(error), { status: 500 })
-    }
+  // TODO delete req / res ?
+  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
+    const data = await db
+      .collection("tournaments")
+      .aggregate([
+        {
+          $addFields: {
+            dateParts: {
+              $dateFromString: {
+                dateString: "$date",
+                format: "%d/%m/%Y",
+              },
+            },
+          },
+        },
+        {
+          $sort: {
+            dateParts: 1,
+          },
+        },
+        {
+          $unset: "dateParts",
+        },
+      ])
+      .toArray();
+
+    return new Response(JSON.stringify(data), { status: 200 });
+  } catch (error) {
+    return new Response(JSON.stringify(error), { status: 500 });
+  }
 }

app/tournois/page.tsx

@@ -1,3 +1,5 @@
+import Layout from "@/components/Layout";
+
 export interface TournamentType {
   _id: string;
   location: string;
@@ -21,7 +23,7 @@ export default async function Tournaments() {
   console.log(data);
 
   const tournaments = data.map((t: TournamentType) => (
-    <tr>
+    <tr key={t._id}>
       <td>{t.date}</td>
       <td>{t.location}</td>
       <td>{t.tournament}</td>
@@ -30,18 +32,20 @@ export default async function Tournaments() {
   ));
 
   return (
-    <main className="">
-      <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>
+    <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>
+    </Layout>
   );
 }