session page now has access to session db

app/session/[sessionId]/page.tsx

@@ -2,6 +2,8 @@
 import React from 'react';
 import VideoThumbnail from "../../components/VideoThumbnail";
 import SessionDetails from "./components/SessionDetails";
+import clientPromise from '../../../lib/mongodb';
+import { ObjectId } from 'mongodb';
 
 interface Video {
   id: number;
@@ -30,9 +32,60 @@ const videos: Video[] = [
 ];
 
 
+export interface Session {
+  id: string;
+  surfer: string;
+  location: string;
+  time: string;
+  wave: string;
+  date: string;
+  wave_count: string;
+  time_surfed: string;
+  board: string;
+  videos: string;
+}
+
+async function getSession(id: string)
+{
+  if (!clientPromise)
+    return null;
+
+  const client = await clientPromise;
 
-const SessionPage: React.FC = () => {
+  // Get the database and collection from the MongoDB client
+  const db = client.db(process.env.MONGODB_DB_NAME);
+  const collection = db.collection(process.env.MONGODB_COLLECTION_NAME || 'sessions');
 
+  // Fetch our session from the collection
+  const record = await collection.findOne({ _id: new ObjectId(id as string) });
+
+  if (!record) {
+    return null;
+  }
+
+  const session: Session = {
+    id: record._id.toString(),
+    surfer: record.surfer,
+    location: record.location,
+    time: record.time,
+    wave: record.wave,
+    date: record.date,
+    wave_count: record.wave_count,
+    time_surfed: record.time_surfed,
+    board: record.board,
+    videos: record.videos
+  }
+
+  return session;
+}
+
+export default async function SessionPage({ params }: { params: { sessionId: string } }) {
+
+  const session = await getSession(params.sessionId);
+
+  if (!session)
+    return <div>No session data available</div>;
+
   return (
     <div className='session-page'>
       <div className="flex h-40 items-center ml-4 mr-4">
@@ -41,7 +94,7 @@ const SessionPage: React.FC = () => {
         {/* Section 2 */}
         <div className="flex-1 flex flex-col items-center justify-center">
           <img src="/chickenjoe.jpg" alt="Profile Image" className="w-24 ml-2 rounded-full" />
-          <h2>Chicken Joe</h2>
+          <h2>{session.surfer}</h2>
         </div>
 
         {/* Section 3 */}
@@ -166,4 +219,4 @@ const SessionPage: React.FC = () => {
   );
 };
 
-export default SessionPage;
+// export default SessionPage;