From 48fc05d01068d9069354bbd2274ca55aac775bd6 Mon Sep 17 00:00:00 2001
From: Alex Mickelson <alexmickelson96@gmail.com>
Date: Fri, 1 Nov 2024 20:09:27 -0600
Subject: [PATCH] better lecture ui

---
 .../course/[courseName]/calendar/day/Day.tsx  | 11 +++--
 .../lecture/[lectureDay]/EditLecture.tsx      |  8 +++-
 .../lecture/[lectureDay]/EditLectureTitle.tsx | 47 +++++++++++++++++++
 .../lecture/[lectureDay]/LecturePreview.tsx   | 16 ++-----
 .../lecture/[lectureDay]/page.tsx             |  1 -
 .../preview/LecturePreviewPage.tsx            | 44 +++++++++++++++++
 .../lecture/[lectureDay]/preview/page.tsx     | 21 +++++++++
 .../fileStorage/lectureFileStorageService.ts  | 10 +---
 .../fileStorage/utils/lectureUtils.ts         | 21 ++++++++-
 nextjs/src/services/urlUtils.ts               |  3 ++
 10 files changed, 156 insertions(+), 26 deletions(-)
 create mode 100644 nextjs/src/app/course/[courseName]/lecture/[lectureDay]/EditLectureTitle.tsx
 create mode 100644 nextjs/src/app/course/[courseName]/lecture/[lectureDay]/preview/LecturePreviewPage.tsx
 create mode 100644 nextjs/src/app/course/[courseName]/lecture/[lectureDay]/preview/page.tsx

diff --git a/nextjs/src/app/course/[courseName]/calendar/day/Day.tsx b/nextjs/src/app/course/[courseName]/calendar/day/Day.tsx
index f9050d2..1e7f363 100644
--- a/nextjs/src/app/course/[courseName]/calendar/day/Day.tsx
+++ b/nextjs/src/app/course/[courseName]/calendar/day/Day.tsx
@@ -14,6 +14,7 @@ import { ItemInDay } from "./ItemInDay";
 import { useTodaysItems } from "./useTodaysItems";
 import Modal from "@/components/Modal";
 import NewItemForm from "../../modules/NewItemForm";
+import { useLecturesByWeekQuery } from "@/hooks/localCourse/lectureHooks";
 
 export default function Day({ day, month }: { day: string; month: number }) {
   const dayAsDate = getDateFromStringOrThrow(
@@ -129,14 +130,18 @@ export default function Day({ day, month }: { day: string; month: number }) {
 
 function DayTitle({ day, dayAsDate }: { day: string; dayAsDate: Date }) {
   const { courseName } = useCourseContext();
+  const { data: weeks } = useLecturesByWeekQuery();
+  const todaysLecture = weeks
+    .flatMap((w) => w.lectures)
+    .find((l) => l.date == getDateOnlyMarkdownString(dayAsDate));
   return (
     <div className="flex justify-between">
-      <Link className="ms-1" href={getLectureUrl(courseName, day)}>
-        {dayAsDate.getDate()}
+      <Link className="ms-1 me-1 truncate text-nowrap transition-all hover:font-bold hover:text-slate-300" href={getLectureUrl(courseName, day)}>
+        {dayAsDate.getDate()} {todaysLecture?.name}
       </Link>
       <Modal
         buttonText="+"
-        buttonClass="unstyled hover:font-bold px-1 mb-auto mt-0 pt-0"
+        buttonClass="unstyled hover:font-bold hover:scale-125 px-1 mb-auto mt-0 pt-0"
       >
         {({ closeModal }) => (
           <div>
diff --git a/nextjs/src/app/course/[courseName]/lecture/[lectureDay]/EditLecture.tsx b/nextjs/src/app/course/[courseName]/lecture/[lectureDay]/EditLecture.tsx
index 68a00b4..bbdcc0e 100644
--- a/nextjs/src/app/course/[courseName]/lecture/[lectureDay]/EditLecture.tsx
+++ b/nextjs/src/app/course/[courseName]/lecture/[lectureDay]/EditLecture.tsx
@@ -5,22 +5,25 @@ 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";
+import EditLectureTitle from "./EditLectureTitle";
 
 export default function EditLecture({ lectureDay }: { lectureDay: string }) {
   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
+  const startingText = lecture
+    ? lectureToString(lecture)
+    : `Name: 
 Date: ${lectureDay}
 ---
 `;
@@ -50,6 +53,7 @@ Date: ${lectureDay}
 
   return (
     <div className="h-full flex flex-col">
+      <EditLectureTitle lectureDay={lectureDay} />
       <div className="columns-2 min-h-0 flex-1">
         <div className="flex-1 h-full">
           <MonacoEditor value={text} onChange={setText} />
diff --git a/nextjs/src/app/course/[courseName]/lecture/[lectureDay]/EditLectureTitle.tsx b/nextjs/src/app/course/[courseName]/lecture/[lectureDay]/EditLectureTitle.tsx
new file mode 100644
index 0000000..04fee3c
--- /dev/null
+++ b/nextjs/src/app/course/[courseName]/lecture/[lectureDay]/EditLectureTitle.tsx
@@ -0,0 +1,47 @@
+import { useLocalCourseSettingsQuery } from "@/hooks/localCourse/localCoursesHooks";
+import { getDayOfWeek } from "@/models/local/localCourse";
+import { getDateFromString } from "@/models/local/timeUtils";
+import { getLectureWeekName } from "@/services/fileStorage/utils/lectureUtils";
+import { getCourseUrl, getLecturePreviewUrl } from "@/services/urlUtils";
+import { useRouter } from "next/navigation";
+import { useCourseContext } from "../../context/courseContext";
+import Link from "next/link";
+
+export default function EditLectureTitle({
+  lectureDay,
+}: {
+  lectureDay: string;
+}) {
+  const router = useRouter();
+  const { data: settings } = useLocalCourseSettingsQuery();
+  const { courseName } = useCourseContext();
+  const lectureDate = getDateFromString(lectureDay);
+  const lectureWeekName = getLectureWeekName(settings.startDate, lectureDay);
+  return (
+    <div className="flex justify-between">
+      <div className="my-auto">
+        <Link
+          className="btn"
+          href={getCourseUrl(courseName)}
+        >
+          {courseName}
+        </Link>
+      </div>
+      <div className="flex justify-center  ">
+        <h3 className="mt-auto me-3 text-slate-500 ">Lecture</h3>
+        <h1 className="">
+          {lectureDate && getDayOfWeek(lectureDate)}{" "}
+          {lectureWeekName.toUpperCase()}
+        </h1>
+      </div>
+      <div className="text-end my-auto">
+        <Link
+          className="btn"
+          href={getLecturePreviewUrl(courseName, lectureDay)}
+        >
+          preview
+        </Link>
+      </div>
+    </div>
+  );
+}
diff --git a/nextjs/src/app/course/[courseName]/lecture/[lectureDay]/LecturePreview.tsx b/nextjs/src/app/course/[courseName]/lecture/[lectureDay]/LecturePreview.tsx
index 046a8a4..076b791 100644
--- a/nextjs/src/app/course/[courseName]/lecture/[lectureDay]/LecturePreview.tsx
+++ b/nextjs/src/app/course/[courseName]/lecture/[lectureDay]/LecturePreview.tsx
@@ -3,16 +3,10 @@ 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 className="border-b-slate-700 border-b-4">
+        <div className="text-center font-extrabold">{lecture.name}</div>
+        <div className="text-center font-bold text-slate-400">{lecture.date}</div>
       </section>
       <section>
         <div
@@ -22,6 +16,6 @@ export default function LecturePreview({ lecture }: { lecture: Lecture }) {
           }}
         ></div>
       </section>
-    </div>
+    </>
   );
 }
diff --git a/nextjs/src/app/course/[courseName]/lecture/[lectureDay]/page.tsx b/nextjs/src/app/course/[courseName]/lecture/[lectureDay]/page.tsx
index 08598b0..03abe22 100644
--- a/nextjs/src/app/course/[courseName]/lecture/[lectureDay]/page.tsx
+++ b/nextjs/src/app/course/[courseName]/lecture/[lectureDay]/page.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import EditLecture from "./EditLecture";
 import { getDateFromStringOrThrow, getDateOnlyMarkdownString } from "@/models/local/timeUtils";
 
diff --git a/nextjs/src/app/course/[courseName]/lecture/[lectureDay]/preview/LecturePreviewPage.tsx b/nextjs/src/app/course/[courseName]/lecture/[lectureDay]/preview/LecturePreviewPage.tsx
new file mode 100644
index 0000000..6db2d28
--- /dev/null
+++ b/nextjs/src/app/course/[courseName]/lecture/[lectureDay]/preview/LecturePreviewPage.tsx
@@ -0,0 +1,44 @@
+"use client";
+
+import { useLecturesByWeekQuery } from "@/hooks/localCourse/lectureHooks";
+import LecturePreview from "../LecturePreview";
+import { getLectureUrl } from "@/services/urlUtils";
+import { useCourseContext } from "../../../context/courseContext";
+import Link from "next/link";
+
+export default function LecturePreviewPage({
+  lectureDay,
+}: {
+  lectureDay: string;
+}) {
+  const { courseName } = useCourseContext();
+  const { data: weeks } = useLecturesByWeekQuery();
+  const lecture = weeks
+    .flatMap(({ lectures }) => lectures.map((lecture) => lecture))
+    .find((l) => l.date === lectureDay);
+
+  if (!lecture) {
+    return <div>lecture not found for day</div>;
+  }
+  return (
+    <div className="flex h-full xl:flex-row flex-col ">
+      <div className="flex-shrink flex-1 pb-1 ms-3 xl:ms-0">
+        <Link className="btn" href={getLectureUrl(courseName, lectureDay)}>
+          Edit Page
+        </Link>
+      </div>
+      <div className="flex  justify-center min-h-0 px-2">
+        <div
+          className="
+          w-full max-w-screen-lg 
+          border-slate-700 border-4 rounded-md
+          p-3 overflow-auto
+        "
+        >
+          <LecturePreview lecture={lecture} />
+        </div>
+      </div>
+      <div className="flex-shrink flex-1"></div>
+    </div>
+  );
+}
diff --git a/nextjs/src/app/course/[courseName]/lecture/[lectureDay]/preview/page.tsx b/nextjs/src/app/course/[courseName]/lecture/[lectureDay]/preview/page.tsx
new file mode 100644
index 0000000..5c291a0
--- /dev/null
+++ b/nextjs/src/app/course/[courseName]/lecture/[lectureDay]/preview/page.tsx
@@ -0,0 +1,21 @@
+import {
+  getDateFromStringOrThrow,
+  getDateOnlyMarkdownString,
+} from "@/models/local/timeUtils";
+import LecturePreviewPage from "./LecturePreviewPage";
+
+export default function Page({
+  params: { lectureDay },
+}: {
+  params: { lectureDay: string };
+}) {
+  const decodedLectureDay = decodeURIComponent(lectureDay);
+  console.log(decodedLectureDay);
+  const lectureDate = getDateFromStringOrThrow(
+    decodedLectureDay,
+    "lecture day in lecture page"
+  );
+  const lectureDayOnly = getDateOnlyMarkdownString(lectureDate);
+
+  return <LecturePreviewPage lectureDay={lectureDayOnly} />;
+}
diff --git a/nextjs/src/services/fileStorage/lectureFileStorageService.ts b/nextjs/src/services/fileStorage/lectureFileStorageService.ts
index b3ee2dd..b679215 100644
--- a/nextjs/src/services/fileStorage/lectureFileStorageService.ts
+++ b/nextjs/src/services/fileStorage/lectureFileStorageService.ts
@@ -3,6 +3,7 @@ import path from "path";
 import { basePath } from "./utils/fileSystemUtils";
 import fs from "fs/promises";
 import {
+  getLectureWeekName,
   lectureFolderName,
   lectureToString,
   parseLecture,
@@ -51,19 +52,12 @@ export async function updateLecture(
   lecture: Lecture
 ) {
   const courseLectureRoot = path.join(basePath, courseName, lectureFolderName);
-  const startDate = getDateFromStringOrThrow(
-    courseSettings.startDate,
-    "semester start date in update lecture"
-  );
   const lectureDate = getDateFromStringOrThrow(
     lecture.date,
     "lecture start date in update lecture"
   );
-  const weekNumber = getWeekNumber(startDate, lectureDate)
-    .toString()
-    .padStart(2, "0");
 
-  const weekFolderName = `week-${weekNumber}`;
+  const weekFolderName = getLectureWeekName(courseSettings.startDate, lecture.date);
   const weekPath = path.join(courseLectureRoot, weekFolderName);
   if (!(await directoryExists(weekPath))) {
     await fs.mkdir(weekPath, { recursive: true });
diff --git a/nextjs/src/services/fileStorage/utils/lectureUtils.ts b/nextjs/src/services/fileStorage/utils/lectureUtils.ts
index fb38761..ec96dd1 100644
--- a/nextjs/src/services/fileStorage/utils/lectureUtils.ts
+++ b/nextjs/src/services/fileStorage/utils/lectureUtils.ts
@@ -1,5 +1,7 @@
+import { getWeekNumber } from "@/app/course/[courseName]/calendar/calendarMonthUtils";
 import { extractLabelValue } from "@/models/local/assignment/utils/markdownUtils";
 import { Lecture } from "@/models/local/lecture";
+import { getDateFromStringOrThrow } from "@/models/local/timeUtils";
 
 export function parseLecture(fileContent: string): Lecture {
   try {
@@ -27,4 +29,21 @@ Date: ${lecture.date}
 ${lecture.content}`;
 }
 
-export const lectureFolderName = "00 - lectures"
\ No newline at end of file
+export const lectureFolderName = "00 - lectures";
+
+export function getLectureWeekName(semesterStart: string, lectureDate: string) {
+  const startDate = getDateFromStringOrThrow(
+    semesterStart,
+    "semester start date in update lecture"
+  );
+  const targetDate = getDateFromStringOrThrow(
+    lectureDate,
+    "lecture start date in update lecture"
+  );
+  const weekNumber = getWeekNumber(startDate, targetDate)
+    .toString()
+    .padStart(2, "0");
+
+  const weekName = `week-${weekNumber}`;
+  return weekName;
+}
diff --git a/nextjs/src/services/urlUtils.ts b/nextjs/src/services/urlUtils.ts
index c2d72e8..6aa21d9 100644
--- a/nextjs/src/services/urlUtils.ts
+++ b/nextjs/src/services/urlUtils.ts
@@ -21,6 +21,9 @@ export function getLectureUrl(courseName: string, lectureDate: string) {
     encodeURIComponent(lectureDate)
   );
 }
+export function getLecturePreviewUrl(courseName: string, lectureDate: string) {
+  return getLectureUrl(courseName, lectureDate) + "/preview";
+}
 
 export function getCourseUrl(courseName: string) {
   return "/course/" + encodeURIComponent(courseName);