From 6d760dbe6ce771f88598e61af4376c68172d8d4a Mon Sep 17 00:00:00 2001
From: Alex Mickelson <alexmickelson96@gmail.com>
Date: Tue, 27 Aug 2024 20:52:41 -0600
Subject: [PATCH] got the middle scrolling correct

---
 .../src/app/course/[courseName]/ModuleList.tsx   |  3 ---
 .../[courseName]/calendar/CourseCalendar.tsx     |  4 ++--
 .../[courseName]/modules/ExpandableModule.tsx    | 11 +++++++++++
 .../course/[courseName]/modules/ModuleList.tsx   | 16 ++++++++++++++++
 nextjs/src/app/course/[courseName]/page.tsx      | 10 +++++-----
 nextjs/src/app/layout.tsx                        |  2 +-
 6 files changed, 35 insertions(+), 11 deletions(-)
 delete mode 100644 nextjs/src/app/course/[courseName]/ModuleList.tsx
 create mode 100644 nextjs/src/app/course/[courseName]/modules/ExpandableModule.tsx
 create mode 100644 nextjs/src/app/course/[courseName]/modules/ModuleList.tsx

diff --git a/nextjs/src/app/course/[courseName]/ModuleList.tsx b/nextjs/src/app/course/[courseName]/ModuleList.tsx
deleted file mode 100644
index 17001fa..0000000
--- a/nextjs/src/app/course/[courseName]/ModuleList.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function ModuleList() {
-  return <div></div>
-}
\ No newline at end of file
diff --git a/nextjs/src/app/course/[courseName]/calendar/CourseCalendar.tsx b/nextjs/src/app/course/[courseName]/calendar/CourseCalendar.tsx
index c784c6b..90604e3 100644
--- a/nextjs/src/app/course/[courseName]/calendar/CourseCalendar.tsx
+++ b/nextjs/src/app/course/[courseName]/calendar/CourseCalendar.tsx
@@ -19,10 +19,10 @@ export default function CourseCalendar() {
   const months = getMonthsBetweenDates(startDateTime, endDateTime);
 
   return (
-    <>
+    <div className="overflow-y-scroll h-full border bg-slate-950">
       {months.map((month) => (
         <CalendarMonth key={month.month + "" + month.year} month={month} />
       ))}
-    </>
+    </div>
   );
 }
diff --git a/nextjs/src/app/course/[courseName]/modules/ExpandableModule.tsx b/nextjs/src/app/course/[courseName]/modules/ExpandableModule.tsx
new file mode 100644
index 0000000..dd5eabd
--- /dev/null
+++ b/nextjs/src/app/course/[courseName]/modules/ExpandableModule.tsx
@@ -0,0 +1,11 @@
+import { LocalModule } from "@/models/local/localModules";
+import React from "react";
+
+export default function ExpandableModule({ module }: { module: LocalModule }) {
+  return (
+    <details>
+      <summary> {module.name}</summary>
+      expanded details
+    </details>
+  );
+}
diff --git a/nextjs/src/app/course/[courseName]/modules/ModuleList.tsx b/nextjs/src/app/course/[courseName]/modules/ModuleList.tsx
new file mode 100644
index 0000000..2c8a180
--- /dev/null
+++ b/nextjs/src/app/course/[courseName]/modules/ModuleList.tsx
@@ -0,0 +1,16 @@
+"use client";
+import { useCourseContext } from "../context/courseContext";
+import ExpandableModule from "./ExpandableModule";
+
+export default function ModuleList() {
+  const {
+    localCourse: { modules },
+  } = useCourseContext();
+  return (
+    <div>
+      {modules.map((m) => (
+        <ExpandableModule key={m.name} module={m} />
+      ))}
+    </div>
+  );
+}
diff --git a/nextjs/src/app/course/[courseName]/page.tsx b/nextjs/src/app/course/[courseName]/page.tsx
index 2ae4538..b15df8b 100644
--- a/nextjs/src/app/course/[courseName]/page.tsx
+++ b/nextjs/src/app/course/[courseName]/page.tsx
@@ -3,7 +3,7 @@ import CourseContextProvider from "./context/CourseContextProvider";
 import CourseCalendar from "./calendar/CourseCalendar";
 import { HydrationBoundary } from "@tanstack/react-query";
 import CourseSettings from "./CourseSettings";
-import ModuleList from "./ModuleList";
+import ModuleList from "./modules/ModuleList";
 
 export default async function CoursePage({
   params: { courseName },
@@ -14,13 +14,13 @@ export default async function CoursePage({
   return (
     <HydrationBoundary state={dehydratedState}>
       <CourseContextProvider localCourseName={courseName}>
-        <div>
+        <div className="h-full flex flex-col">
           <CourseSettings />
-          <div className="flex flex-row">
-            <div className="grow">
+          <div className="flex flex-row min-h-0">
+            <div className="flex-1 min-h-0">
               <CourseCalendar />
             </div>
-            <div className="w-96">
+            <div className="m-5">
               <ModuleList />
             </div>
           </div>
diff --git a/nextjs/src/app/layout.tsx b/nextjs/src/app/layout.tsx
index dd51ed9..2ee9214 100644
--- a/nextjs/src/app/layout.tsx
+++ b/nextjs/src/app/layout.tsx
@@ -25,7 +25,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <Providers>
-        <body className="bg-slate-950">{children}</body>
+        <body className="bg-slate-900 h-screen p-1">{children}</body>
       </Providers>
     </html>
   );