calendar scroll position...

src/app/course/[courseName]/calendar/CourseCalendar.tsx

@@ -3,8 +3,9 @@ import { getDateFromStringOrThrow } from "@/models/local/utils/timeUtils";
 import { getMonthsBetweenDates } from "./calendarMonthUtils";
 import { CalendarMonth } from "./CalendarMonth";
 import { useLocalCourseSettingsQuery } from "@/hooks/localCourse/localCoursesHooks";
-import { useMemo } from "react";
+import { useEffect, useMemo, useRef } from "react";
 import CalendarItemsContextProvider from "../context/CalendarItemsContextProvider";
+import { SuspenseAndErrorHandling } from "@/components/SuspenseAndErrorHandling";
 
 export default function CourseCalendar() {
   const [settings] = useLocalCourseSettingsQuery();
@@ -21,6 +22,24 @@ export default function CourseCalendar() {
     () => getMonthsBetweenDates(startDateTime, endDateTime),
     [endDateTime, startDateTime]
   );
+  const divRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    const storageKey = `courseScroll-${settings.name}`;
+    const scrollValue = localStorage.getItem(storageKey);
+    console.log("resetting scroll", scrollValue, divRef.current);
+
+    const yValue = scrollValue ? parseInt(scrollValue) : 0;
+
+    if (!divRef.current) console.log("cannot scroll, ref is null");
+    else {
+      divRef.current.scroll({
+        top: yValue,
+        left: 0,
+        // behavior: "smooth"
+      });
+    }
+  }, [settings.name]);
 
   return (
     <div
@@ -34,7 +53,17 @@ export default function CourseCalendar() {
         sm:p-1
       "
     >
-      <div className="h-full overflow-y-scroll sm:pe-1">
+      <div
+        className="h-full overflow-y-scroll sm:pe-1"
+        onScroll={(e) => {
+          const storageKey = `courseScroll-${settings.name}`;
+          localStorage.setItem(
+            storageKey,
+            e.currentTarget.scrollTop.toString()
+          );
+        }}
+        ref={divRef}
+      >
         <CalendarItemsContextProvider>
           {months.map((month) => (
             <CalendarMonth key={month.month + "" + month.year} month={month} />

src/app/course/[courseName]/context/CalendarItemsContextProvider.tsx

@@ -1,3 +1,4 @@
+"use client"
 import { ReactNode } from "react";
 import {
   CalendarItemsContext,