adding storage for lectures

nextjs/src/app/course/[courseName]/calendar/calendarMonthUtils.ts

@@ -1,5 +1,3 @@
-"use client";
-
 import {
   dateToMarkdownString,
   getDateFromStringOrThrow,

nextjs/src/app/course/[courseName]/lecture/[lectureDay]/EditLecture.tsx

@@ -1,10 +1,53 @@
 "use client";
 
 import { MonacoEditor } from "@/components/editor/MonacoEditor";
-import { useState } from "react";
+import {
+  useLecturesByWeekQuery,
+  useLectureUpdateMutation,
+} from "@/hooks/localCourse/lectureHooks";
+import { Lecture } from "@/models/local/lecture";
+import {
+  lectureToString,
+  parseLecture,
+} from "@/services/fileStorage/utils/lectureUtils";
+import { useEffect, useState } from "react";
+import LecturePreview from "./LecturePreview";
 
 export default function EditLecture({ lectureDay }: { lectureDay: string }) {
-  const [text, setText] = useState("");
+  const { data: weeks } = useLecturesByWeekQuery();
+  const updateLecture = useLectureUpdateMutation();
+  const lecture = weeks
+    .flatMap(({ lectures }) => lectures.map((lecture) => lecture))
+    .find((l) => l.date === lectureDay);
+
+  const startingText = lecture ? lectureToString(lecture) : `Name: Name Here
+Date: ${lectureDay}
+---
+`;
+
+  const [text, setText] = useState(startingText);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    const delay = 500;
+    const handler = setTimeout(() => {
+      try {
+        const parsed = parseLecture(text);
+        if (!lecture || lectureToString(parsed) !== lectureToString(lecture)) {
+          console.log("updating lecture");
+          updateLecture.mutate(parsed);
+        }
+        setError("");
+      } catch (e: any) {
+        setError(e.toString());
+      }
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [lecture, text, updateLecture]);
+
   return (
     <div className="h-full flex flex-col">
       <div className="columns-2 min-h-0 flex-1">
@@ -12,8 +55,8 @@ export default function EditLecture({ lectureDay }: { lectureDay: string }) {
           <MonacoEditor value={text} onChange={setText} />
         </div>
         <div className="h-full">
-          {/* <div className="text-red-300">{error && error}</div> */}
-          {/* <AssignmentPreview assignment={assignment} /> */}
+          <div className="text-red-300">{error && error}</div>
+          {lecture && <LecturePreview lecture={lecture} />}
         </div>
       </div>
     </div>

nextjs/src/app/course/[courseName]/lecture/[lectureDay]/LecturePreview.tsx

@@ -0,0 +1,27 @@
+import { Lecture } from "@/models/local/lecture";
+import { markdownToHTMLSafe } from "@/services/htmlMarkdownUtils";
+
+export default function LecturePreview({ lecture }: { lecture: Lecture }) {
+  return (
+    <div>
+      <section>
+        <div className="flex">
+          <div className="flex-1 text-end pe-3">Name</div>
+          <div className="flex-1">{lecture.name}</div>
+        </div>
+        <div className="flex">
+          <div className="flex-1 text-end pe-3">Date</div>
+          <div className="flex-1">{lecture.date}</div>
+        </div>
+      </section>
+      <section>
+        <div
+          className="markdownPreview"
+          dangerouslySetInnerHTML={{
+            __html: markdownToHTMLSafe(lecture.content),
+          }}
+        ></div>
+      </section>
+    </div>
+  );
+}

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

@@ -1,5 +1,6 @@
 import React from "react";
 import EditLecture from "./EditLecture";
+import { getDateFromStringOrThrow, getDateOnlyMarkdownString } from "@/models/local/timeUtils";
 
 export default function page({
   params: { lectureDay },
@@ -8,5 +9,7 @@ export default function page({
 }) {
   const decodedLectureDay = decodeURIComponent(lectureDay);
   console.log(decodedLectureDay);
-  return <EditLecture lectureDay={decodedLectureDay} />;
+  const lectureDate = getDateFromStringOrThrow(decodedLectureDay, "lecture day in lecture page")
+  const lectureDayOnly = getDateOnlyMarkdownString(lectureDate)
+  return <EditLecture lectureDay={lectureDayOnly} />;
 }