moving v2 to top level

2026-03-26 07:38:33 -06:00 · 2024-12-17 09:19:21 -07:00
parent 5f0b3554dc
commit 576ee02afb
468 changed files with 79 additions and 15430 deletions
--- a/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/AssignmentButtons.tsx
+++ b/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/AssignmentButtons.tsx
@@ -0,0 +1,163 @@
+import { useCourseContext } from "@/app/course/[courseName]/context/courseContext";
+import Modal, { useModal } from "@/components/Modal";
+import { Spinner } from "@/components/Spinner";
+import {
+  useCanvasAssignmentsQuery,
+  useAddAssignmentToCanvasMutation,
+  useDeleteAssignmentFromCanvasMutation,
+  useUpdateAssignmentInCanvasMutation,
+} from "@/hooks/canvas/canvasAssignmentHooks";
+import {
+  useAssignmentQuery,
+  useDeleteAssignmentMutation,
+} from "@/hooks/localCourse/assignmentHooks";
+import { useLocalCourseSettingsQuery } from "@/hooks/localCourse/localCoursesHooks";
+import { baseCanvasUrl } from "@/services/canvas/canvasServiceUtils";
+import { getCourseUrl } from "@/services/urlUtils";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+export function AssignmentButtons({
+  moduleName,
+  assignmentName,
+  toggleHelp,
+}: {
+  assignmentName: string;
+  moduleName: string;
+  toggleHelp: () => void;
+}) {
+  const router = useRouter();
+  const { courseName } = useCourseContext();
+  const [settings] = useLocalCourseSettingsQuery();
+  const { data: canvasAssignments, isFetching: canvasIsFetching } =
+    useCanvasAssignmentsQuery();
+  const [assignment, { isFetching }] = useAssignmentQuery(
+    moduleName,
+    assignmentName
+  );
+  const addToCanvas = useAddAssignmentToCanvasMutation();
+  const deleteFromCanvas = useDeleteAssignmentFromCanvasMutation();
+  const updateAssignment = useUpdateAssignmentInCanvasMutation();
+  const deleteLocal = useDeleteAssignmentMutation();
+  const [isLoading, setIsLoading] = useState(false);
+  const modal = useModal();
+
+  const assignmentInCanvas = canvasAssignments?.find(
+    (a) => a.name === assignmentName
+  );
+
+  const anythingIsLoading =
+    addToCanvas.isPending ||
+    canvasIsFetching ||
+    isFetching ||
+    deleteFromCanvas.isPending ||
+    updateAssignment.isPending;
+
+  console.log("assignment pending", updateAssignment.isPending);
+
+  return (
+    <div className="p-5 flex flex-row justify-between gap-3">
+      <div>
+        <button onClick={toggleHelp}>Toggle Help</button>
+      </div>
+      <div className="flex flex-row gap-3 justify-end">
+        {anythingIsLoading && <Spinner />}
+        {assignmentInCanvas && !assignmentInCanvas?.published && (
+          <div className="text-rose-300 my-auto">Not Published</div>
+        )}
+        {!assignmentInCanvas && (
+          <button
+            disabled={addToCanvas.isPending}
+            onClick={() => addToCanvas.mutate({ assignment, moduleName })}
+          >
+            Add to canvas
+          </button>
+        )}
+        {assignmentInCanvas && (
+          <a
+            className="btn"
+            target="_blank"
+            href={`${baseCanvasUrl}/courses/${settings.canvasId}/assignments/${assignmentInCanvas.id}`}
+          >
+            View in Canvas
+          </a>
+        )}
+        {assignmentInCanvas && (
+          <button
+            className=""
+            disabled={deleteFromCanvas.isPending}
+            onClick={() =>
+              updateAssignment.mutate({
+                canvasAssignmentId: assignmentInCanvas.id,
+                assignment,
+              })
+            }
+          >
+            Update in Canvas
+          </button>
+        )}
+        {assignmentInCanvas && (
+          <button
+            className="btn-danger"
+            disabled={deleteFromCanvas.isPending}
+            onClick={() =>
+              deleteFromCanvas.mutate({
+                canvasAssignmentId: assignmentInCanvas.id,
+                assignmentName: assignment.name,
+              })
+            }
+          >
+            Delete from Canvas
+          </button>
+        )}
+        {!assignmentInCanvas && (
+          <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 assignment locally?
+                </div>
+                <br />
+                <div className="flex justify-around gap-3">
+                  <button
+                    onClick={async () => {
+                      router.push(getCourseUrl(courseName));
+                      setIsLoading(true);
+                      await deleteLocal.mutateAsync({
+                        moduleName,
+                        assignmentName,
+                        courseName,
+                      });
+                      router.refresh();
+                      // setIsLoading(false); //refreshing the router will make spinner go away
+                    }}
+                    disabled={deleteLocal.isPending || isLoading}
+                    className="btn-danger"
+                  >
+                    Yes
+                  </button>
+                  <button
+                    onClick={closeModal}
+                    disabled={deleteLocal.isPending || isLoading}
+                  >
+                    No
+                  </button>
+                </div>
+                {(deleteLocal.isPending || isLoading) && <Spinner />}
+              </div>
+            )}
+          </Modal>
+        )}
+        <Link className="btn" href={getCourseUrl(courseName)} shallow={true}>
+          Go Back
+        </Link>
+      </div>
+    </div>
+  );
+}
--- a/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/AssignmentPreview.tsx
+++ b/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/AssignmentPreview.tsx
@@ -0,0 +1,89 @@
+import ClientOnly from "@/components/ClientOnly";
+import { SuspenseAndErrorHandling } from "@/components/SuspenseAndErrorHandling";
+import { useLocalCourseSettingsQuery } from "@/hooks/localCourse/localCoursesHooks";
+import { LocalAssignment } from "@/models/local/assignment/localAssignment";
+import { rubricItemIsExtraCredit } from "@/models/local/assignment/rubricItem";
+import { assignmentPoints } from "@/models/local/assignment/utils/assignmentPointsUtils";
+import { markdownToHTMLSafe } from "@/services/htmlMarkdownUtils";
+import React, { Fragment } from "react";
+
+export default function AssignmentPreview({
+  assignment,
+}: {
+  assignment: LocalAssignment;
+}) {
+  const [settings] = useLocalCourseSettingsQuery();
+  const totalPoints = assignmentPoints(assignment.rubric)
+  const extraPoints = assignment.rubric.reduce(
+    (sum, cur) => (rubricItemIsExtraCredit(cur) ? sum + cur.points : sum),
+    0
+  );
+  return (
+    <div className="h-full overflow-y-auto">
+      <section>
+        <div className="flex">
+          <div className="flex-1 text-end pe-3">Due Date</div>
+          <div className="flex-1">{assignment.dueAt}</div>
+        </div>
+        <div className="flex">
+          <div className="flex-1 text-end pe-3">Lock Date</div>
+          <div className="flex-1">{assignment.lockAt}</div>
+        </div>
+        <div className="flex">
+          <div className="flex-1 text-end pe-3">Assignment Group Name</div>
+          <div className="flex-1">{assignment.localAssignmentGroupName}</div>
+        </div>
+        <div className="flex">
+          <div className="flex-1 text-end pe-3">Submission Types</div>
+          <div className="flex-1">
+            <ul className="">
+              {assignment.submissionTypes.map((t) => (
+                <li key={t}>{t}</li>
+              ))}
+            </ul>
+          </div>
+        </div>
+        <div className="flex">
+          <div className="flex-1 text-end pe-3">File Upload Types</div>
+          <div className="flex-1">
+            <ul className="">
+              {assignment.allowedFileUploadExtensions.map((t) => (
+                <li key={t}>{t}</li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      </section>
+      <br />
+      <hr />
+      <br />
+      <section>
+        <div
+          className="markdownPreview"
+          dangerouslySetInnerHTML={{
+            __html: markdownToHTMLSafe(assignment.description, settings),
+          }}
+        ></div>
+      </section>
+      <hr />
+      <section>
+        <h2 className="text-center">Rubric - {totalPoints} Points</h2>
+        {extraPoints !== 0 && (
+          <h5 className="text-center">{extraPoints} Extra Credit Points</h5>
+        )}
+        <div className="grid grid-cols-3">
+          {assignment.rubric.map((rubricItem, i) => (
+            <Fragment key={rubricItem.label + i}>
+              <div className="text-end pe-3 col-span-2">{rubricItem.label}</div>
+              <div>
+                {rubricItem.points}
+
+                {rubricItemIsExtraCredit(rubricItem) ? " - Extra Credit" : ""}
+              </div>
+            </Fragment>
+          ))}
+        </div>
+      </section>
+    </div>
+  );
+}
--- a/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/EditAssignment.tsx
+++ b/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/EditAssignment.tsx
@@ -0,0 +1,184 @@
+"use client";
+import { MonacoEditor } from "@/components/editor/MonacoEditor";
+import {
+  useAssignmentQuery,
+  useUpdateAssignmentMutation,
+  useUpdateImageSettingsForAssignment,
+} from "@/hooks/localCourse/assignmentHooks";
+import {
+  LocalAssignment,
+  localAssignmentMarkdown,
+} from "@/models/local/assignment/localAssignment";
+import { useEffect, useState } from "react";
+import AssignmentPreview from "./AssignmentPreview";
+import { getModuleItemUrl } from "@/services/urlUtils";
+import { useCourseContext } from "@/app/course/[courseName]/context/courseContext";
+import { useLocalCourseSettingsQuery } from "@/hooks/localCourse/localCoursesHooks";
+import ClientOnly from "@/components/ClientOnly";
+import { SuspenseAndErrorHandling } from "@/components/SuspenseAndErrorHandling";
+import { AssignmentSubmissionType } from "@/models/local/assignment/assignmentSubmissionType";
+import { LocalCourseSettings } from "@/models/local/localCourseSettings";
+import { useRouter } from "next/navigation";
+import { AssignmentButtons } from "./AssignmentButtons";
+import { useAuthoritativeUpdates } from "@/app/course/[courseName]/utils/useAuthoritativeUpdates";
+
+export default function EditAssignment({
+  moduleName,
+  assignmentName,
+}: {
+  assignmentName: string;
+  moduleName: string;
+}) {
+  const router = useRouter();
+  const { courseName } = useCourseContext();
+  const [settings] = useLocalCourseSettingsQuery();
+  const [
+    assignment,
+    { dataUpdatedAt: serverDataUpdatedAt, isFetching: assignmentIsFetching },
+  ] = useAssignmentQuery(moduleName, assignmentName);
+  const updateAssignment = useUpdateAssignmentMutation();
+  useUpdateImageSettingsForAssignment({ moduleName, assignmentName });
+
+  const {
+    clientIsAuthoritative,
+    text,
+    textUpdate,
+    monacoKey,
+    serverUpdatedAt,
+    clientDataUpdatedAt,
+  } = useAuthoritativeUpdates({
+    serverUpdatedAt: serverDataUpdatedAt,
+    startingText: localAssignmentMarkdown.toMarkdown(assignment),
+  });
+
+  const [error, setError] = useState("");
+  const [showHelp, setShowHelp] = useState(false);
+
+  useEffect(() => {
+    const delay = 500;
+
+    const handler = setTimeout(() => {
+      try {
+        if (assignmentIsFetching || updateAssignment.isPending) {
+          console.log("network requests in progress, not updating assignments");
+          return;
+        }
+
+        const updatedAssignment: LocalAssignment =
+          localAssignmentMarkdown.parseMarkdown(text);
+        if (
+          localAssignmentMarkdown.toMarkdown(assignment) !==
+          localAssignmentMarkdown.toMarkdown(updatedAssignment)
+        ) {
+          if (clientIsAuthoritative) {
+            console.log("updating assignment, client is authoritative");
+            updateAssignment
+              .mutateAsync({
+                assignment: updatedAssignment,
+                moduleName,
+                assignmentName: updatedAssignment.name,
+                previousModuleName: moduleName,
+                previousAssignmentName: assignmentName,
+                courseName,
+              })
+              .then(async () => {
+                // await new Promise(resolve => setTimeout(resolve, 1000));
+
+                if (updatedAssignment.name !== assignmentName)
+                  router.replace(
+                    getModuleItemUrl(
+                      courseName,
+                      moduleName,
+                      "assignment",
+                      updatedAssignment.name
+                    ), {
+                      
+                    }
+                  );
+              });
+          } else {
+            console.log(
+              "client not authoritative, updating client with server assignment",
+              "client updated",
+              clientDataUpdatedAt,
+              "server updated",
+              serverUpdatedAt
+            );
+            textUpdate(localAssignmentMarkdown.toMarkdown(assignment), true);
+          }
+        }
+        setError("");
+      } catch (e: any) {
+        setError(e.toString());
+      }
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [
+    assignment,
+    assignmentName,
+    clientDataUpdatedAt,
+    clientIsAuthoritative,
+    courseName,
+    assignmentIsFetching,
+    moduleName,
+    router,
+    serverUpdatedAt,
+    text,
+    textUpdate,
+    updateAssignment,
+  ]);
+
+  return (
+    <div className="h-full flex flex-col align-middle px-1">
+      <div className={"min-h-0 flex flex-row w-full flex-grow"}>
+        {showHelp && (
+          <pre className=" max-w-96">
+            <code>{getHelpString(settings)}</code>
+          </pre>
+        )}
+        <div className="flex-1 h-full">
+          <MonacoEditor key={monacoKey} value={text} onChange={textUpdate} />
+        </div>
+        <div className="flex-1 h-full">
+          <div className="text-red-300">{error && error}</div>
+
+          <div className="px-3 h-full">
+            <ClientOnly>
+              <SuspenseAndErrorHandling showToast={false}>
+                <AssignmentPreview assignment={assignment} />
+              </SuspenseAndErrorHandling>
+            </ClientOnly>
+          </div>
+        </div>
+      </div>
+      <ClientOnly>
+        <SuspenseAndErrorHandling>
+          <AssignmentButtons
+            moduleName={moduleName}
+            assignmentName={assignmentName}
+            toggleHelp={() => setShowHelp((h) => !h)}
+          />
+        </SuspenseAndErrorHandling>
+      </ClientOnly>
+    </div>
+  );
+}
+
+function getHelpString(settings: LocalCourseSettings) {
+  const groupNames = settings.assignmentGroups.map((g) => g.name).join("\n- ");
+  const helpString = `SubmissionTypes:
+- ${AssignmentSubmissionType.ONLINE_TEXT_ENTRY}
+- ${AssignmentSubmissionType.ONLINE_UPLOAD}
+- ${AssignmentSubmissionType.DISCUSSION_TOPIC}
+AllowedFileUploadExtensions:
+- pdf
+- jpg
+- jpeg
+- png
+Assignment Group Names:
+- ${groupNames}`;
+  return helpString;
+}
--- a/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/layout.tsx
+++ b/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/layout.tsx
@@ -0,0 +1,5 @@
+import React, { ReactNode, Suspense } from "react";
+
+export default function layout({ children }: { children: ReactNode }) {
+  return <Suspense>{children}</Suspense>;
+}
--- a/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/loading.tsx
+++ b/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/loading.tsx
@@ -0,0 +1,10 @@
+import { Spinner } from "@/components/Spinner";
+import React from "react";
+
+export default function Loading() {
+  return (
+    <div>
+      <Spinner />
+    </div>
+  );
+}
--- a/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/page.tsx
+++ b/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/page.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import EditAssignment from "./EditAssignment";
+
+export default async function Page({
+  params,
+}: {
+  params: Promise<{ assignmentName: string; moduleName: string }>;
+}) {
+  const { moduleName, assignmentName } = await params;
+  const decodedAssignmentName = decodeURIComponent(assignmentName);
+  const decodedModuleName = decodeURIComponent(moduleName);
+  return (
+    <EditAssignment
+      assignmentName={decodedAssignmentName}
+      moduleName={decodedModuleName}
+    />
+  );
+}
--- a/src/app/course/[courseName]/modules/[moduleName]/page/[pageName]/EditPage.tsx
+++ b/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>
+  );
+}
--- a/src/app/course/[courseName]/modules/[moduleName]/page/[pageName]/EditPageButtons.tsx
+++ b/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>
+  );
+}
--- a/src/app/course/[courseName]/modules/[moduleName]/page/[pageName]/PagePreview.tsx
+++ b/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>
+  );
+}
--- a/src/app/course/[courseName]/modules/[moduleName]/page/[pageName]/layout.tsx
+++ b/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>;
+}
--- a/src/app/course/[courseName]/modules/[moduleName]/page/[pageName]/loading.tsx
+++ b/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>
+  );
+}
--- a/src/app/course/[courseName]/modules/[moduleName]/page/[pageName]/page.tsx
+++ b/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} />;
+}
--- a/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/EditQuiz.tsx
+++ b/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/EditQuiz.tsx
@@ -0,0 +1,170 @@
+"use client";
+import { MonacoEditor } from "@/components/editor/MonacoEditor";
+import { quizMarkdownUtils } from "@/models/local/quiz/utils/quizMarkdownUtils";
+import { useEffect, useState } from "react";
+import QuizPreview from "./QuizPreview";
+import { QuizButtons } from "./QuizButton";
+import ClientOnly from "@/components/ClientOnly";
+import { SuspenseAndErrorHandling } from "@/components/SuspenseAndErrorHandling";
+import { useRouter } from "next/navigation";
+import { getModuleItemUrl } from "@/services/urlUtils";
+import { useCourseContext } from "@/app/course/[courseName]/context/courseContext";
+import {
+  useQuizQuery,
+  useUpdateQuizMutation,
+} from "@/hooks/localCourse/quizHooks";
+import { useAuthoritativeUpdates } from "../../../../utils/useAuthoritativeUpdates";
+
+const helpString = `QUESTION REFERENCE
+---
+Points: 2
+this is a question?
+*a) correct
+b) not correct
+---
+points: 1
+question goes here
+[*] correct
+[ ] not correct
+[] not correct
+---
+the points default to 1?
+*a) true
+b) false
+---
+Markdown is supported
+
+- like
+- this
+- list
+
+[*] true
+[ ] false
+---
+This is a one point essay question
+essay
+---
+points: 4
+this is a short answer question
+short_answer
+---
+points: 4
+the underscore is optional
+short answer
+---
+this is a matching question
+^ left answer - right dropdown
+^ other thing -  another option`;
+
+export default function EditQuiz({
+  moduleName,
+  quizName,
+}: {
+  quizName: string;
+  moduleName: string;
+}) {
+  const router = useRouter();
+  const { courseName } = useCourseContext();
+  const [quiz, { dataUpdatedAt: serverDataUpdatedAt, isFetching }] =
+    useQuizQuery(moduleName, quizName);
+  const updateQuizMutation = useUpdateQuizMutation();
+  const { clientIsAuthoritative, text, textUpdate, monacoKey } =
+    useAuthoritativeUpdates({
+      serverUpdatedAt: serverDataUpdatedAt,
+      startingText: quizMarkdownUtils.toMarkdown(quiz),
+    });
+
+  const [error, setError] = useState("");
+  const [showHelp, setShowHelp] = useState(false);
+
+  useEffect(() => {
+    const delay = 1000;
+    const handler = setTimeout(async () => {
+      if (isFetching || updateQuizMutation.isPending) {
+        console.log("network requests in progress, not updating page");
+        return;
+      }
+      try {
+        if (
+          quizMarkdownUtils.toMarkdown(quiz) !==
+          quizMarkdownUtils.toMarkdown(quizMarkdownUtils.parseMarkdown(text))
+        ) {
+          if (clientIsAuthoritative) {
+            const updatedQuiz = quizMarkdownUtils.parseMarkdown(text);
+            await updateQuizMutation
+              .mutateAsync({
+                quiz: updatedQuiz,
+                moduleName,
+                quizName: updatedQuiz.name,
+                previousModuleName: moduleName,
+                previousQuizName: quizName,
+                courseName,
+              })
+              .then(() => {
+                if (updatedQuiz.name !== quizName)
+                  router.replace(
+                    getModuleItemUrl(
+                      courseName,
+                      moduleName,
+                      "quiz",
+                      updatedQuiz.name
+                    )
+                  );
+              });
+          } else {
+            console.log(
+              "client not authoritative, updating client with server quiz"
+            );
+            textUpdate(quizMarkdownUtils.toMarkdown(quiz), true);
+          }
+        }
+        setError("");
+      } catch (e: any) {
+        setError(e.toString());
+      }
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [
+    clientIsAuthoritative,
+    courseName,
+    isFetching,
+    moduleName,
+    quiz,
+    quizName,
+    router,
+    text,
+    textUpdate,
+    updateQuizMutation,
+  ]);
+
+  return (
+    <div className="h-full flex flex-col align-middle px-1">
+      <div className={"min-h-96 h-full flex flex-row w-full"}>
+        {showHelp && (
+          <pre className=" max-w-96">
+            <code>{helpString}</code>
+          </pre>
+        )}
+        <div className="flex-1 h-full">
+          <MonacoEditor key={monacoKey} value={text} onChange={textUpdate} />
+        </div>
+        <div className="flex-1 h-full">
+          <div className="text-red-300">{error && error}</div>
+          <QuizPreview moduleName={moduleName} quizName={quizName} />
+        </div>
+      </div>
+      <ClientOnly>
+        <SuspenseAndErrorHandling>
+          <QuizButtons
+            moduleName={moduleName}
+            quizName={quizName}
+            toggleHelp={() => setShowHelp((h) => !h)}
+          />
+        </SuspenseAndErrorHandling>
+      </ClientOnly>
+    </div>
+  );
+}
--- a/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/QuizButton.tsx
+++ b/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/QuizButton.tsx
@@ -0,0 +1,113 @@
+import { useCourseContext } from "@/app/course/[courseName]/context/courseContext";
+import Modal, { useModal } from "@/components/Modal";
+import { Spinner } from "@/components/Spinner";
+import {
+  useCanvasQuizzesQuery,
+  useAddQuizToCanvasMutation,
+  useDeleteQuizFromCanvasMutation,
+} from "@/hooks/canvas/canvasQuizHooks";
+import { useLocalCourseSettingsQuery } from "@/hooks/localCourse/localCoursesHooks";
+import {
+  useDeleteQuizMutation,
+  useQuizQuery,
+} from "@/hooks/localCourse/quizHooks";
+import { baseCanvasUrl } from "@/services/canvas/canvasServiceUtils";
+import { getCourseUrl } from "@/services/urlUtils";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+
+export function QuizButtons({
+  moduleName,
+  quizName,
+  toggleHelp,
+}: {
+  quizName: string;
+  moduleName: string;
+  toggleHelp: () => void;
+}) {
+  const router = useRouter();
+  const { courseName } = useCourseContext();
+  const [settings] = useLocalCourseSettingsQuery();
+  const { data: canvasQuizzes } = useCanvasQuizzesQuery();
+
+  const [quiz] = useQuizQuery(moduleName, quizName);
+  const addToCanvas = useAddQuizToCanvasMutation();
+  const deleteFromCanvas = useDeleteQuizFromCanvasMutation();
+  const deleteLocal = useDeleteQuizMutation();
+  const modal = useModal();
+
+  const quizInCanvas = canvasQuizzes?.find((c) => c.title === quizName);
+
+  return (
+    <div className="p-5 flex flex-row justify-between">
+      <div>
+        <button onClick={toggleHelp}>Toggle Help</button>
+      </div>
+      <div className="flex flex-row gap-3 justify-end">
+        {(addToCanvas.isPending || deleteFromCanvas.isPending) && <Spinner />}
+        {quizInCanvas && !quizInCanvas.published && (
+          <div className="text-rose-300 my-auto">Not Published</div>
+        )}
+        {!quizInCanvas && (
+          <button
+            disabled={addToCanvas.isPending}
+            onClick={() => addToCanvas.mutate({ quiz, moduleName })}
+          >
+            Add to canvas
+          </button>
+        )}
+        {quizInCanvas && (
+          <a
+            className="btn"
+            target="_blank"
+            href={`${baseCanvasUrl}/courses/${settings.canvasId}/quizzes/${quizInCanvas.id}`}
+          >
+            View in Canvas
+          </a>
+        )}
+        {quizInCanvas && (
+          <button
+            className="btn-danger"
+            disabled={deleteFromCanvas.isPending}
+            onClick={() => deleteFromCanvas.mutate(quizInCanvas.id)}
+          >
+            Delete from Canvas
+          </button>
+        )}
+        {!quizInCanvas && (
+          <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 quiz locally?
+                </div>
+                <br />
+                <div className="flex justify-around gap-3">
+                  <button
+                    onClick={async () => {
+                      await deleteLocal.mutateAsync({ moduleName, quizName, courseName });
+                      router.push(getCourseUrl(courseName));
+                    }}
+                    className="btn-danger"
+                  >
+                    Yes
+                  </button>
+                  <button onClick={closeModal}>No</button>
+                </div>
+              </div>
+            )}
+          </Modal>
+        )}
+
+        <Link className="btn" href={getCourseUrl(courseName)} shallow={true}>
+          Go Back
+        </Link>
+      </div>
+    </div>
+  );
+}
--- a/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/QuizPreview.tsx
+++ b/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/QuizPreview.tsx
@@ -0,0 +1,143 @@
+import CheckIcon from "@/components/icons/CheckIcon";
+import { useLocalCourseSettingsQuery } from "@/hooks/localCourse/localCoursesHooks";
+import { useQuizQuery } from "@/hooks/localCourse/quizHooks";
+import {
+  LocalQuizQuestion,
+  QuestionType,
+} from "@/models/local/quiz/localQuizQuestion";
+import { markdownToHTMLSafe } from "@/services/htmlMarkdownUtils";
+
+export default function QuizPreview({
+  moduleName,
+  quizName,
+}: {
+  quizName: string;
+  moduleName: string;
+}) {
+  const [quiz] = useQuizQuery(moduleName, quizName);
+  const [settings] = useLocalCourseSettingsQuery();
+  return (
+    <div style={{ overflow: "scroll", height: "100%" }}>
+      <div className="columns-2">
+        <div className="text-end">Name</div>
+        <div>{quiz.name}</div>
+      </div>
+      <div className="columns-2">
+        <div className="text-end">Points</div>
+        <div>
+          {quiz.questions.reduce((sum, question) => sum + question.points, 0)}
+        </div>
+      </div>
+      <div className="columns-2">
+        <div className="text-end">Due Date</div>
+        <div>{quiz.dueAt}</div>
+      </div>
+      <div className="columns-2">
+        <div className="text-end">Lock At</div>
+        <div>{quiz.lockAt}</div>
+      </div>
+      <div className="columns-2">
+        <div className="text-end">Shuffle Answers</div>
+        <div>{quiz.shuffleAnswers}</div>
+      </div>
+      <div className="columns-2">
+        <div className="text-end">Allowed Attempts</div>
+        <div>{quiz.allowedAttempts}</div>
+      </div>
+      <div className="columns-2">
+        <div className="text-end">One Question at a Time</div>
+        <div>{quiz.oneQuestionAtATime}</div>
+      </div>
+      <div className="columns-2">
+        <div className="text-end">Assignment Group Name</div>
+        <div>{quiz.localAssignmentGroupName}</div>
+      </div>
+      <div
+        className="p-3 markdownPreview"
+        dangerouslySetInnerHTML={{
+          __html: markdownToHTMLSafe(quiz.description, settings),
+        }}
+      ></div>
+      <div className="p-3 rounded-md bg-slate-950 m-5 flex flex-col gap-3">
+        {quiz.questions.map((question, i) => (
+          <QuizQuestionPreview key={i} question={question} />
+        ))}
+      </div>
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+    </div>
+  );
+}
+
+function QuizQuestionPreview({ question }: { question: LocalQuizQuestion }) {
+  const [settings] = useLocalCourseSettingsQuery();
+  return (
+    <div className="rounded bg-slate-900 px-2">
+      <div className="flex flex-row justify-between text-slate-400">
+        <div>{question.questionType}</div>
+        <div className="">
+          {question.points} {question.points === 1 ? " Point" : " Points"}
+        </div>
+      </div>
+
+      <div
+        className="ms-4 mb-2 markdownPreview"
+        dangerouslySetInnerHTML={{ __html: markdownToHTMLSafe(question.text, settings) }}
+      ></div>
+      {question.questionType === QuestionType.MATCHING && (
+        <div>
+          {question.answers.map((answer) => (
+            <div
+              key={JSON.stringify(answer)}
+              className="mx-3 mb-1 bg-dark rounded border border-slate-600 flex flex-row"
+            >
+              <div className="text-right my-auto">{answer.text} - </div>
+              <div className="">{answer.matchedText}</div>
+            </div>
+          ))}
+          {question.matchDistractors.map((distractor) => (
+            <div
+              key={distractor}
+              className="mx-3 mb-1 bg-dark px-2 rounded border flex row"
+            >
+              DISTRACTOR: {distractor}
+            </div>
+          ))}
+        </div>
+      )}
+      {question.questionType !== QuestionType.MATCHING && (
+        <div>
+          {question.answers.map((answer) => (
+            <div
+              key={JSON.stringify(answer)}
+              className="mx-3 mb-1 pt-1 border-t border-slate-700 flex flex-row"
+            >
+              <div className="w-8 flex flex-col justify-center">
+                {answer.correct ? (
+                  <CheckIcon />
+                ) : question.questionType === QuestionType.MULTIPLE_ANSWERS ? (
+                  <span className="mx-auto">{"[ ]"}</span>
+                ) : (
+                  <div></div>
+                )}
+              </div>
+              <div
+                className="markdownQuizAnswerPreview"
+                dangerouslySetInnerHTML={{
+                  __html: markdownToHTMLSafe(answer.text, settings),
+                }}
+              />
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
--- a/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/layout.tsx
+++ b/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/layout.tsx
@@ -0,0 +1,5 @@
+import React, { ReactNode, Suspense } from "react";
+
+export default function layout({ children }: { children: ReactNode }) {
+  return <Suspense>{children}</Suspense>;
+}
--- a/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/loading.tsx
+++ b/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/loading.tsx
@@ -0,0 +1,10 @@
+import { Spinner } from "@/components/Spinner";
+import React from "react";
+
+export default function Loading() {
+  return (
+    <div>
+      <Spinner />
+    </div>
+  );
+}
--- a/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/page.tsx
+++ b/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/page.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+import EditQuiz from "./EditQuiz";
+
+export default async function Page({
+  params,
+}: {
+  params: Promise<{ quizName: string; moduleName: string }>;
+}) {
+  const { moduleName, quizName } = await params;
+  const decodedQuizName = decodeURIComponent(quizName)
+  const decodedModuleName = decodeURIComponent(moduleName)
+  return <EditQuiz quizName={decodedQuizName} moduleName={decodedModuleName} />;
+}