expanding modules, items displaying

nextjs/src/app/course/[courseName]/modules/ExpandableModule.tsx

@@ -1,37 +1,62 @@
+import { IModuleItem } from "@/models/local/IModuleItem";
 import { LocalModule } from "@/models/local/localModules";
-import React from "react";
+import { getDateFromStringOrThrow } from "@/models/local/timeUtils";
+import React, { useState } from "react";
 
 export default function ExpandableModule({ module }: { module: LocalModule }) {
+  const [expanded, setExpanded] = useState(false);
+
+  const moduleItems: {
+    type: "assignment" | "quiz" | "page";
+    item: IModuleItem;
+  }[] = module.assignments
+    .map(
+      (
+        a
+      ): {
+        type: "assignment" | "quiz" | "page";
+        item: IModuleItem;
+      } => ({
+        type: "assignment",
+        item: a,
+      })
+    )
+    .concat(module.quizzes.map((q) => ({ type: "quiz", item: q })))
+    .concat(module.pages.map((p) => ({ type: "page", item: p })))
+    .sort(
+      (a, b) =>
+        getDateFromStringOrThrow(
+          a.item.dueAt,
+          "item due date in expandable module"
+        ).getTime() -
+        getDateFromStringOrThrow(
+          b.item.dueAt,
+          "item due date in expandable module"
+        ).getTime()
+    );
+
   return (
-    <>
+    <div className="bg-slate-800 rounded-lg p-3 border border-slate-600 mb-3">
-      <section className="">
-        <label>
       <div
-            className="
+        className="font-bold "
-            max-h-14 max-w-xs
+        role="button"
-            overflow-hidden 
+        onClick={() => setExpanded((e) => !e)}
-            rounded-lg
-            bg-slate-800 
-            px-4 py-0 mb-3
-            transition-all duration-500 
-            peer-checked/showLabel:max-h-screen
-          "
       >
-            <div className="flex h-14 cursor-pointer items-center font-bold">
-              <input
-                className="peer/showLabel absolute scale-0"
-                type="checkbox"
-              />
         {module.name}
       </div>
+      <div
+        className={
+          `
+          overflow-hidden 
+           transition-all duration-1000 ease-in
+          ` + (expanded ? " max-h-[30vh]" : " max-h-0")
+        }
+      >
         <hr />
-            <p className="mb-2">
+        {moduleItems.map(({ type, item }) => (
-              crafted a sleek collapsible panel using Tailwind CSS without the
+          <div key={item.name}>{item.name}</div>
-              need for JavaScript. Impressive! 😎
+        ))}
-            </p>
+      </div>
     </div>
-        </label>
-      </section>
-    </>
   );
 }

nextjs/src/app/course/[courseName]/page.tsx

@@ -20,7 +20,7 @@ export default async function CoursePage({
             <div className="flex-1 min-h-0">
               <CourseCalendar />
             </div>
-            <div className="m-5">
+            <div className="w-96 p-3">
               <ModuleList />
             </div>
           </div>

nextjs/src/models/local/assignmnet/localAssignment.ts

@@ -1,9 +1,10 @@
+import { IModuleItem } from "../IModuleItem";
 import { AssignmentSubmissionType } from "./assignmentSubmissionType";
 import { RubricItem } from "./rubricItem";
 import { assignmentMarkdownParser } from "./utils/assignmentMarkdownParser";
 import { assignmentMarkdownSerializer } from "./utils/assignmentMarkdownSerializer";
 
-export interface LocalAssignment {
+export interface LocalAssignment extends IModuleItem {
   name: string;
   description: string;
   lockAt?: string; // 08/21/2023 23:59:00

nextjs/src/models/local/quiz/localQuiz.ts

@@ -1,7 +1,8 @@
+import { IModuleItem } from "../IModuleItem";
 import { LocalQuizQuestion } from "./localQuizQuestion";
 import { quizMarkdownUtils } from "./utils/quizMarkdownUtils";
 
-export interface LocalQuiz {
+export interface LocalQuiz extends IModuleItem {
   name: string;
   description: string;
   password?: string;

nextjs/tailwind.config.ts

@@ -12,6 +12,8 @@ const config: Config = {
       ...borderRadius,
       xl: "24px",
     },
+    extend: {
+    }
   },
   plugins: [],
 };