renaming pages also a thing

src/app/course/[courseName]/modules/[moduleName]/page/[pageName]/EditPage.tsx

@@ -10,10 +10,10 @@ import PagePreview from "./PagePreview";
 import { useLocalCourseSettingsQuery } from "@/hooks/localCourse/localCoursesHooks";
 import EditPageButtons from "./EditPageButtons";
 import ClientOnly from "@/components/ClientOnly";
-import { getModuleItemUrl } from "@/services/urlUtils";
 import { useRouter } from "next/navigation";
 import { useCourseContext } from "@/app/course/[courseName]/context/courseContext";
 import { useAuthoritativeUpdates } from "@/app/course/[courseName]/utils/useAuthoritativeUpdates";
+import EditPageHeader from "./EditPageHeader";
 
 export default function EditPage({
   moduleName,
@@ -48,33 +48,35 @@ export default function EditPage({
       }
 
       try {
-        const updatedPage = localPageMarkdownUtils.parseMarkdown(text);
+        const updatedPage = localPageMarkdownUtils.parseMarkdown(
+          text,
+          pageName
+        );
         if (
           localPageMarkdownUtils.toMarkdown(page) !==
           localPageMarkdownUtils.toMarkdown(updatedPage)
         ) {
           if (clientIsAuthoritative) {
             console.log("updating page");
-            updatePage
-              .mutateAsync({
-                page: updatedPage,
-                moduleName,
-                pageName: updatedPage.name,
-                previousModuleName: moduleName,
-                previousPageName: pageName,
-                courseName,
-              })
-              .then(() => {
-                if (updatedPage.name !== pageName)
-                  router.replace(
-                    getModuleItemUrl(
-                      courseName,
-                      moduleName,
-                      "page",
-                      updatedPage.name
-                    )
-                  );
-              });
+            updatePage.mutateAsync({
+              page: updatedPage,
+              moduleName,
+              pageName,
+              previousModuleName: moduleName,
+              previousPageName: pageName,
+              courseName,
+            });
+            // .then(() => {
+            //   if (updatedPage.name !== pageName)
+            //     router.replace(
+            //       getModuleItemUrl(
+            //         courseName,
+            //         moduleName,
+            //         "page",
+            //         updatedPage.name
+            //       )
+            //     );
+            // });
           } else {
             console.log(
               "client not authoritative, updating client with server page"
@@ -106,6 +108,7 @@ export default function EditPage({
 
   return (
     <div className="h-full flex flex-col">
+      <EditPageHeader pageName={pageName} moduleName={moduleName} />
       <div className="columns-2 min-h-0 flex-1">
         <div className="flex-1 h-full">
           <MonacoEditor key={monacoKey} value={text} onChange={textUpdate} />

src/app/course/[courseName]/modules/[moduleName]/page/[pageName]/EditPageHeader.tsx

@@ -0,0 +1,27 @@
+import { useCourseContext } from "@/app/course/[courseName]/context/courseContext";
+import { getCourseUrl } from "@/services/urlUtils";
+import Link from "next/link";
+import { UpdatePageName } from "./UpdatePageName";
+
+export default function EditPageHeader({
+  moduleName,
+  pageName,
+}: {
+  pageName: string;
+  moduleName: string;
+}) {
+  const { courseName } = useCourseContext();
+  return (
+    <div className="py-1 flex flex-row justify-start gap-3">
+      <Link
+        className="btn btn-thin"
+        href={getCourseUrl(courseName)}
+        shallow={true}
+      >
+        {courseName}
+      </Link>
+      <UpdatePageName pageName={pageName} moduleName={moduleName} />
+      <div>{pageName}</div>
+    </div>
+  );
+}

src/app/course/[courseName]/modules/[moduleName]/page/[pageName]/UpdatePageName.tsx

@@ -0,0 +1,68 @@
+import { useCourseContext } from "@/app/course/[courseName]/context/courseContext";
+import TextInput from "@/components/form/TextInput";
+import Modal, { useModal } from "@/components/Modal";
+import { Spinner } from "@/components/Spinner";
+import { usePageQuery, useUpdatePageMutation } from "@/hooks/localCourse/pageHooks";
+import { getModuleItemUrl } from "@/services/urlUtils";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+export function UpdatePageName({
+  moduleName,
+  pageName,
+}: {
+  pageName: string;
+  moduleName: string;
+}) {
+  const modal = useModal();
+  const { courseName } = useCourseContext();
+  const router = useRouter();
+  const [page] = usePageQuery(moduleName, pageName);
+  const updatePage = useUpdatePageMutation();
+  const [name, setName] = useState(page.name);
+  const [isLoading, setIsLoading] = useState(false);
+  
+  return (
+    <div>
+      <Modal
+        modalControl={modal}
+        buttonText="Rename Page"
+        buttonClass="py-0"
+        modalWidth="w-1/5"
+      >
+        {({ closeModal }) => (
+          <form
+            onSubmit={async (e) => {
+              e.preventDefault();
+              if (name === pageName) closeModal();
+
+              setIsLoading(true); // page refresh resets flag
+              await updatePage.mutateAsync({
+                page: page,
+                moduleName,
+                pageName: name,
+                previousModuleName: moduleName,
+                previousPageName: pageName,
+                courseName,
+              });
+
+              // update url (will trigger reload...)
+              router.replace(
+                getModuleItemUrl(courseName, moduleName, "page", name),
+                {}
+              );
+            }}
+          >
+            <TextInput
+              value={name}
+              setValue={setName}
+              label={"Rename Page"}
+            />
+            <button className="w-full my-3">Save New Name</button>
+            {isLoading && <Spinner />}
+          </form>
+        )}
+      </Modal>
+    </div>
+  );
+}

src/models/local/page/localCoursePage.ts

@@ -21,13 +21,12 @@ export const localPageMarkdownUtils = {
       page.dueAt,
       "page DueDateForOrdering"
     );
-    const settingsMarkdown = `Name: ${page.name}\nDueDateForOrdering: ${printableDueDate}\n---\n`;
+    const settingsMarkdown = `DueDateForOrdering: ${printableDueDate}\n---\n`;
     return settingsMarkdown + page.text;
   },
 
-  parseMarkdown: (pageMarkdown: string) => {
+  parseMarkdown: (pageMarkdown: string, name: string) => {
     const rawSettings = pageMarkdown.split("---")[0];
-    const name = extractLabelValue(rawSettings, "Name");
     const rawDate = extractLabelValue(rawSettings, "DueDateForOrdering");
     const dueAt = verifyDateOrThrow(rawDate, "page DueDateForOrdering");
 

src/models/local/tests/pageMarkdown.test.ts

@@ -3,15 +3,16 @@ import { LocalCoursePage, localPageMarkdownUtils } from "../page/localCoursePage
 
 describe("PageMarkdownTests", () => {
   it("can parse page", () => {
+    const name = "test title"
     const page: LocalCoursePage = {
-      name: "test title",
+      name,
       text: "test text content",
       dueAt: "07/09/2024 23:59:00",
     };
 
     const pageMarkdownString = localPageMarkdownUtils.toMarkdown(page);
 
-    const parsedPage = localPageMarkdownUtils.parseMarkdown(pageMarkdownString);
+    const parsedPage = localPageMarkdownUtils.parseMarkdown(pageMarkdownString, name);
 
     expect(parsedPage).toEqual(page);
   });

src/services/fileStorage/courseItemFileStorageService.ts

@@ -65,7 +65,7 @@ const getItem = async <T extends CourseItemType>(
     ) as CourseItemReturnType<T>;
   } else if (type === "Page") {
     return localPageMarkdownUtils.parseMarkdown(
-      rawFile
+      rawFile, name
     ) as CourseItemReturnType<T>;
   }
 

src/services/fileStorage/pageFileStorageService.ts

@@ -37,25 +37,12 @@ export const pageFileStorageService = {
       courseName,
       moduleName,
       "pages",
-      page.name + ".md"
+      pageName + ".md"
     );
 
     const pageMarkdown = localPageMarkdownUtils.toMarkdown(page);
     console.log(`Saving page ${filePath}`);
     await fs.writeFile(filePath, pageMarkdown);
-
-    const pageNameIsChanged = pageName !== page.name;
-    if (pageNameIsChanged) {
-      console.log("removing old page after name change " + pageName);
-      const oldFilePath = path.join(
-        basePath,
-        courseName,
-        moduleName,
-        "pages",
-        pageName + ".md"
-      );
-      await fs.unlink(oldFilePath);
-    }
   },
   async delete({
     courseName,