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) {
+  // TODO delete req / res ?
   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 })
+    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 })
+    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,7 +32,8 @@ export default async function Tournaments() {
   ));
 
   return (
-    <main className="">
+    <Layout>
+      <main className="w-full">
         <table className="table-auto">
           <thead>
             <tr>
@@ -43,5 +46,6 @@ export default async function Tournaments() {
           <tbody>{tournaments}</tbody>
         </table>
       </main>
+    </Layout>
   );
 }

components/Layout.tsx

@@ -0,0 +1,14 @@
+import Navbar from "@/components/Navbar";
+
+export default function Layout({
+  children, // will be a page or nested layout
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <Navbar />
+      {children}
+    </>
+  );
+}

components/Navbar.tsx

@@ -0,0 +1,3 @@
+export default function Navbar() {
+  return <nav className="bg-gray-800 p-2 m-0 w-full">NAVBAR</nav>;
+}

package.json

@@ -6,7 +6,8 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "test": "jest --watch"
   },
   "dependencies": {
     "@types/node": "20.2.3",
@@ -22,5 +23,11 @@
     "react-dom": "18.2.0",
     "tailwindcss": "3.3.2",
     "typescript": "5.0.4"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.5.0"
   }
 }