moving v2 to top level

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

@@ -0,0 +1,128 @@
+"use client";
+import { MonacoEditor } from "@/components/editor/MonacoEditor";
+import {
+  usePageQuery,
+  useUpdatePageMutation,
+} from "@/hooks/localCourse/pageHooks";
+import { localPageMarkdownUtils } from "@/models/local/page/localCoursePage";
+import { useEffect, useState } from "react";
+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";
+
+export default function EditPage({
+  moduleName,
+  pageName,
+}: {
+  pageName: string;
+  moduleName: string;
+}) {
+  const router = useRouter();
+  const { courseName } = useCourseContext();
+  const [page, { dataUpdatedAt, isFetching }] = usePageQuery(
+    moduleName,
+    pageName
+  );
+  const updatePage = useUpdatePageMutation();
+
+  const { clientIsAuthoritative, text, textUpdate, monacoKey } =
+    useAuthoritativeUpdates({
+      serverUpdatedAt: dataUpdatedAt,
+      startingText: localPageMarkdownUtils.toMarkdown(page),
+    });
+
+  const [error, setError] = useState("");
+  const [settings] = useLocalCourseSettingsQuery();
+
+  useEffect(() => {
+    const delay = 500;
+    const handler = setTimeout(() => {
+      if (isFetching || updatePage.isPending) {
+        console.log("network requests in progress, not updating page");
+        return;
+      }
+
+      try {
+        const updatedPage = localPageMarkdownUtils.parseMarkdown(text);
+        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
+                    )
+                  );
+              });
+          } else {
+            console.log(
+              "client not authoritative, updating client with server page"
+            );
+            textUpdate(localPageMarkdownUtils.toMarkdown(page), true);
+          }
+        }
+        setError("");
+      } catch (e: any) {
+        setError(e.toString());
+      }
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [
+    clientIsAuthoritative,
+    courseName,
+    isFetching,
+    moduleName,
+    page,
+    pageName,
+    router,
+    text,
+    textUpdate,
+    updatePage,
+  ]);
+
+  return (
+    <div className="h-full flex flex-col">
+      <div className="columns-2 min-h-0 flex-1">
+        <div className="flex-1 h-full">
+          <MonacoEditor key={monacoKey} value={text} onChange={textUpdate} />
+        </div>
+        <div className="h-full">
+          <div className="text-red-300">{error && error}</div>
+          <div className="h-full overflow-y-auto">
+            <br />
+            <PagePreview page={page} />
+          </div>
+        </div>
+      </div>
+      {settings.canvasId && (
+        <ClientOnly>
+          <EditPageButtons pageName={pageName} moduleName={moduleName} />
+        </ClientOnly>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,130 @@
+import { useCourseContext } from "@/app/course/[courseName]/context/courseContext";
+import Modal, { useModal } from "@/components/Modal";
+import { Spinner } from "@/components/Spinner";
+import {
+  useCanvasPagesQuery,
+  useCreateCanvasPageMutation,
+  useDeleteCanvasPageMutation,
+  useUpdateCanvasPageMutation,
+} from "@/hooks/canvas/canvasPageHooks";
+import { useLocalCourseSettingsQuery } from "@/hooks/localCourse/localCoursesHooks";
+import {
+  useDeletePageMutation,
+  usePageQuery,
+} from "@/hooks/localCourse/pageHooks";
+import { baseCanvasUrl } from "@/services/canvas/canvasServiceUtils";
+import { getCourseUrl } from "@/services/urlUtils";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import React, { useState } from "react";
+
+export default function EditPageButtons({
+  moduleName,
+  pageName,
+}: {
+  pageName: string;
+  moduleName: string;
+}) {
+  const router = useRouter();
+  const { courseName } = useCourseContext();
+  const [settings] = useLocalCourseSettingsQuery();
+  const [page] = usePageQuery(moduleName, pageName);
+  const { data: canvasPages } = useCanvasPagesQuery();
+  const createPageInCanvas = useCreateCanvasPageMutation();
+  const updatePageInCanvas = useUpdateCanvasPageMutation();
+  const deletePageInCanvas = useDeleteCanvasPageMutation();
+  const deletePageLocal = useDeletePageMutation();
+  const modal = useModal();
+  const [loading, setLoading] = useState(false);
+
+  const pageInCanvas = canvasPages?.find((p) => p.title === pageName);
+
+  const requestIsPending =
+    createPageInCanvas.isPending ||
+    updatePageInCanvas.isPending ||
+    deletePageInCanvas.isPending;
+
+  return (
+    <div className="p-5 flex justify-end flex-row gap-x-3">
+      {requestIsPending && <Spinner />}
+      {!pageInCanvas && (
+        <button
+          onClick={() => createPageInCanvas.mutate({ page, moduleName })}
+          disabled={requestIsPending}
+        >
+          Add to Canvas
+        </button>
+      )}
+      {pageInCanvas && (
+        <button
+          onClick={() =>
+            updatePageInCanvas.mutate({
+              page,
+              canvasPageId: pageInCanvas.page_id,
+            })
+          }
+          disabled={requestIsPending}
+        >
+          Update in Canvas
+        </button>
+      )}
+      {pageInCanvas && (
+        <a
+          className="btn"
+          target="_blank"
+          href={`${baseCanvasUrl}/courses/${settings.canvasId}/pages/${pageInCanvas.url}`}
+        >
+          View in Canvas
+        </a>
+      )}
+      {pageInCanvas && (
+        <button
+          className="btn-danger"
+          onClick={() => deletePageInCanvas.mutate(pageInCanvas.page_id)}
+          disabled={requestIsPending}
+        >
+          Delete from Canvas
+        </button>
+      )}
+
+      {!pageInCanvas && (
+        <Modal
+          modalControl={modal}
+          buttonText="Delete Localy"
+          buttonClass="btn-danger"
+          modalWidth="w-1/5"
+        >
+          {({ closeModal }) => (
+            <div>
+              <div className="text-center">
+                Are you sure you want to delete this page locally?
+              </div>
+              <br />
+              <div className="flex justify-around gap-3">
+                <button
+                  onClick={async () => {
+                    setLoading(true);
+                    await deletePageLocal.mutateAsync({
+                      moduleName,
+                      pageName,
+                      courseName,
+                    });
+                    router.push(getCourseUrl(courseName));
+                  }}
+                  className="btn-danger"
+                >
+                  Yes
+                </button>
+                <button onClick={closeModal}>No</button>
+              </div>
+              {loading && <Spinner />}
+            </div>
+          )}
+        </Modal>
+      )}
+      <Link className="btn" href={getCourseUrl(courseName)} shallow={true}>
+        Go Back
+      </Link>
+    </div>
+  );
+}

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

@@ -0,0 +1,16 @@
+import { useLocalCourseSettingsQuery } from "@/hooks/localCourse/localCoursesHooks";
+import { LocalCoursePage } from "@/models/local/page/localCoursePage";
+import { markdownToHTMLSafe } from "@/services/htmlMarkdownUtils";
+import React from "react";
+
+export default function PagePreview({ page }: { page: LocalCoursePage }) {
+  const [settings] = useLocalCourseSettingsQuery();
+  return (
+    <div
+      className="markdownPreview"
+      dangerouslySetInnerHTML={{
+        __html: markdownToHTMLSafe(page.text, settings),
+      }}
+    ></div>
+  );
+}

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

@@ -0,0 +1,5 @@
+import React, { ReactNode, Suspense } from "react";
+
+export default function layout({ children }: { children: ReactNode }) {
+  return <Suspense>{children}</Suspense>;
+}

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

@@ -0,0 +1,10 @@
+import { Spinner } from "@/components/Spinner";
+import React from "react";
+
+export default function Loading() {
+  return (
+    <div>
+      <Spinner />
+    </div>
+  );
+}

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

@@ -0,0 +1,13 @@
+import React from "react";
+import EditPage from "./EditPage";
+
+export default async function Page({
+  params,
+}: {
+  params: Promise<{ pageName: string; moduleName: string }>;
+}) {
+  const { moduleName, pageName } = await params;
+  const decodedPageName = decodeURIComponent(pageName);
+  const decodedModuleName = decodeURIComponent(moduleName);
+  return <EditPage pageName={decodedPageName} moduleName={decodedModuleName} />;
+}