fixing dynamic expands

nextjs/src/app/course/[courseName]/calendar/CalendarMonth.tsx

@@ -1,8 +1,8 @@
 "use client";
-import { useState } from "react";
 import { CalendarMonthModel } from "./calendarMonthUtils";
 import { DayOfWeek } from "@/models/local/localCourse";
 import Day from "./day/Day";
+import { Expandable } from "@/components/Expandable";
 
 export const CalendarMonth = ({ month }: { month: CalendarMonthModel }) => {
   const weekInMilliseconds = 604_800_000;
@@ -10,33 +10,30 @@ export const CalendarMonth = ({ month }: { month: CalendarMonthModel }) => {
     new Date(month.year, month.month, 1) <
     new Date(Date.now() - weekInMilliseconds);
 
-  const [isCollapsed, setIsCollapsed] = useState(isInPast);
-
   const monthName = new Date(month.year, month.month - 1, 1).toLocaleString(
     "default",
     { month: "long" }
   );
-  const toggleCollapse = () => setIsCollapsed(!isCollapsed);
   const weekDaysList: DayOfWeek[] = Object.values(DayOfWeek);
 
   return (
     <>
+      <Expandable
+        defaultExpanded={!isInPast}
+        ExpandableElement={({ setIsExpanded, isExpanded }) => (
           <div className="flex justify-center">
             <h3
               className={
                 "text-2xl transition-all duration-500 " +
                 "hover:text-slate-50 underline hover:scale-105 `"
               }
-          onClick={toggleCollapse}
+              onClick={() => setIsExpanded((e) => !e)}
               role="button"
             >
               {monthName}
             </h3>
           </div>
-
-      <div
-        id={monthName}
-        className={"collapsible " + (isCollapsed ? "" : "expand")}
+        )}
       >
         <div className="grid grid-cols-7 text-center fw-bold">
           {weekDaysList.map((day) => (
@@ -49,7 +46,7 @@ export const CalendarMonth = ({ month }: { month: CalendarMonthModel }) => {
         {month.daysByWeek.map((week, weekIndex) => (
           <CalendarWeek key={weekIndex} week={week} monthNumber={month.month} />
         ))}
-      </div>
+      </Expandable>
     </>
   );
 };

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

@@ -1,18 +1,14 @@
 "use client";
 import { useAssignmentsQueries } from "@/hooks/localCourse/assignmentHooks";
-import {
-  usePagesQueries,
-} from "@/hooks/localCourse/pageHooks";
-import {
-  useQuizzesQueries,
-} from "@/hooks/localCourse/quizHooks";
+import { usePagesQueries } from "@/hooks/localCourse/pageHooks";
+import { useQuizzesQueries } from "@/hooks/localCourse/quizHooks";
 import { IModuleItem } from "@/models/local/IModuleItem";
 import {
   getDateFromString,
   getDateFromStringOrThrow,
   getDateOnlyMarkdownString,
 } from "@/models/local/timeUtils";
-import { Fragment, useRef, useState } from "react";
+import { Fragment } from "react";
 import Modal from "../../../../components/Modal";
 import NewItemForm from "./NewItemForm";
 import { ModuleCanvasStatus } from "./ModuleCanvasStatus";
@@ -23,6 +19,7 @@ import DropTargetStyling from "../../../../components/DropTargetStyling";
 import Link from "next/link";
 import { getModuleItemUrl } from "@/services/urlUtils";
 import { useCourseContext } from "../context/courseContext";
+import { Expandable } from "../../../../components/Expandable";
 
 export default function ExpandableModule({
   moduleName,
@@ -35,7 +32,7 @@ export default function ExpandableModule({
   const { data: quizzes } = useQuizzesQueries(moduleName);
   const { data: pages } = usePagesQueries(moduleName);
 
-  const [expanded, setExpanded] = useState(false);
+  // const [expanded, setExpanded] = useState(false);
 
   const moduleItems: {
     type: "assignment" | "quiz" | "page";
@@ -65,7 +62,7 @@ export default function ExpandableModule({
           "item due date in expandable module"
         ).getTime()
     );
-  const expandRef = useRef<HTMLDivElement | null>(null);
+  // const expandRef = useRef<HTMLDivElement | null>(null);
 
   return (
     <div
@@ -75,10 +72,12 @@ export default function ExpandableModule({
     >
       <DropTargetStyling draggingClassName="shadow-[0_0px_10px_0px] shadow-blue-500/50 ">
         <div className=" p-3 ">
+          <Expandable
+            ExpandableElement={({ setIsExpanded, isExpanded }) => (
               <div
                 className="font-bold flex flex-row justify-between "
                 role="button"
-            onClick={() => setExpanded((e) => !e)}
+                onClick={() => setIsExpanded((e) => !e)}
               >
                 <div>{moduleName}</div>
                 <div className="flex flex-row">
@@ -87,22 +86,21 @@ export default function ExpandableModule({
                   </ClientOnly>
                   <ExpandIcon
                     style={{
-                  ...(expanded ? { rotate: "-90deg" } : {}),
+                      ...(isExpanded ? { rotate: "-90deg" } : {}),
                     }}
                   />
                 </div>
               </div>
-          <div
-            ref={expandRef}
-            className={` overflow-hidden transition-all `}
-            style={{
-              maxHeight: expanded ? expandRef?.current?.scrollHeight : "0",
-            }}
+            )}
           >
+            <>
               <Modal buttonText="New Item">
                 {({ closeModal }) => (
                   <div>
-                  <NewItemForm moduleName={moduleName} onCreate={closeModal} />
+                    <NewItemForm
+                      moduleName={moduleName}
+                      onCreate={closeModal}
+                    />
                     <br />
                     <button onClick={closeModal}>close</button>
                   </div>
@@ -118,7 +116,8 @@ export default function ExpandableModule({
                   />
                 ))}
               </div>
-          </div>
+            </>
+          </Expandable>
         </div>
       </DropTargetStyling>
     </div>

nextjs/src/components/Expandable.tsx

@@ -0,0 +1,36 @@
+"use client";
+import { ReactNode, Dispatch, SetStateAction, useState, useRef } from "react";
+
+export function Expandable({
+  children,
+  ExpandableElement,
+  defaultExpanded = false,
+}: {
+  children: ReactNode;
+  ExpandableElement: (props: {
+    setIsExpanded: Dispatch<SetStateAction<boolean>>;
+    isExpanded: boolean;
+  }) => ReactNode;
+  defaultExpanded?: boolean;
+}) {
+  const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+  const expandRef = useRef<HTMLDivElement | null>(null);
+
+  return (
+    <>
+      <ExpandableElement
+        setIsExpanded={setIsExpanded}
+        isExpanded={isExpanded}
+      />
+      <div
+        ref={expandRef}
+        className={` overflow-hidden transition-all `}
+        style={{
+          maxHeight: isExpanded ? expandRef?.current?.scrollHeight : "0",
+        }}
+      >
+        {children}
+      </div>
+    </>
+  );
+}