updates

nextjs/src/app/CourseList.tsx

@@ -8,13 +8,11 @@ export default function CourseList() {
   return (
     <div>
       {allSettings.map((settings) => (
-        <Link
+        <div key={settings.name}>
-          href={getCourseUrl(settings.name)}
+          <Link href={getCourseUrl(settings.name)} shallow={true}>
-          key={settings.name}
+            {settings.name}
-          shallow={true}
+          </Link>
-        >
+        </div>
-          {settings.name}
-        </Link>
       ))}
     </div>
   );

nextjs/src/app/course/[courseName]/CourseNavigation.tsx

@@ -0,0 +1,21 @@
+"use client";
+import { useLocalCourseSettingsQuery } from "@/hooks/localCourse/localCoursesHooks";
+import Link from "next/link";
+
+export function CourseNavigation() {
+  const { data: settings } = useLocalCourseSettingsQuery();
+  return (
+    <div className="pb-1 ps-5 flex flex-row gap-3">
+      <Link href={"/"} className="btn">
+        Back to Course List
+      </Link>
+      <a
+        href={`https://snow.instructure.com/courses/${settings.canvasId}`}
+        className="btn"
+        target="_blank"
+      >
+        View in Canvas
+      </a>
+    </div>
+  );
+}

nextjs/src/app/course/[courseName]/calendar/Day.tsx

@@ -122,10 +122,13 @@ function DraggableListItem({
 }) {
   const { courseName } = useCourseContext();
   return (
-    <div
+    <Link
+      href={getModuleItemUrl(courseName, moduleName, type, item.name)}
+      shallow={true}
       className={
         " border rounded-sm px-1 mx-1 break-all " +
-        " border-slate-600 bg-slate-800 "
+        " border-slate-600 bg-slate-800 " + 
+        " block "
       }
       role="button"
       draggable="true"
@@ -140,12 +143,7 @@ function DraggableListItem({
         );
       }}
     >
-      <Link
+      {item.name}
-        href={getModuleItemUrl(courseName, moduleName, type, item.name)}
+    </Link>
-        shallow={true}
-      >
-        {item.name}
-      </Link>
-    </div>
   );
 }

nextjs/src/app/course/[courseName]/context/DraggingContextProvider.tsx

@@ -25,9 +25,9 @@ export default function DraggingContextProvider({
 
   const itemDrop = useCallback(
     (e: DragEvent<HTMLDivElement>, day: string | undefined) => {
-      const itemBeingDragged = JSON.parse(
+      const rawData = e.dataTransfer.getData("draggableItem");
-        e.dataTransfer.getData("draggableItem")
+      // console.log(rawData);
-      );
+      const itemBeingDragged = JSON.parse(rawData);
 
       if (itemBeingDragged && day) {
         const dayAsDate = getDateFromStringOrThrow(day, "in drop callback");

nextjs/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/EditAssignment.tsx

@@ -26,22 +26,23 @@ export default function EditAssignment({
   useEffect(() => {
     const delay = 500;
     const handler = setTimeout(() => {
-      const updatedAssignment =
+      try {
-        localAssignmentMarkdown.parseMarkdown(assignmentText);
+        const updatedAssignment =
-      if (
+          localAssignmentMarkdown.parseMarkdown(assignmentText);
-        localAssignmentMarkdown.toMarkdown(assignment) !==
+        if (
-        localAssignmentMarkdown.toMarkdown(updatedAssignment)
+          localAssignmentMarkdown.toMarkdown(assignment) !==
-      ) {
+          localAssignmentMarkdown.toMarkdown(updatedAssignment)
-        console.log("updating assignment");
+        ) {
-        try {
+          console.log("updating assignment");
           updateAssignment.mutate({
             assignment: updatedAssignment,
             moduleName,
             assignmentName,
           });
-        } catch (e: any) {
-          setError(e.toString());
         }
+        setError("");
+      } catch (e: any) {
+        setError(e.toString());
       }
     }, delay);
 
@@ -68,9 +69,7 @@ export default function EditAssignment({
         </div>
       </div>
       <div className="p-5">
-        <button>
+        <button>Add to canvas....</button>
-          Add to canvas....
-        </button>
       </div>
     </div>
   );

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

@@ -35,21 +35,22 @@ export default function EditPage({
   useEffect(() => {
     const delay = 500;
     const handler = setTimeout(() => {
-      const updatedPage = localPageMarkdownUtils.parseMarkdown(pageText);
+      try {
-      if (
+        const updatedPage = localPageMarkdownUtils.parseMarkdown(pageText);
-        localPageMarkdownUtils.toMarkdown(page) !==
+        if (
-        localPageMarkdownUtils.toMarkdown(updatedPage)
+          localPageMarkdownUtils.toMarkdown(page) !==
-      ) {
+          localPageMarkdownUtils.toMarkdown(updatedPage)
-        console.log("updating assignment");
+        ) {
-        try {
+          console.log("updating page");
           updatePage.mutate({
             page: updatedPage,
             moduleName,
             pageName,
           });
-        } catch (e: any) {
-          setError(e.toString());
         }
+        setError("");
+      } catch (e: any) {
+        setError(e.toString());
       }
     }, delay);
 

nextjs/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/EditQuiz.tsx

@@ -23,20 +23,23 @@ export default function EditQuiz({
   useEffect(() => {
     const delay = 500;
     const handler = setTimeout(() => {
-      if (
+      try {
-        quizMarkdownUtils.toMarkdown(quiz) !==
+        if (
-        quizMarkdownUtils.toMarkdown(quizMarkdownUtils.parseMarkdown(quizText))
+          quizMarkdownUtils.toMarkdown(quiz) !==
-      ) {
+          quizMarkdownUtils.toMarkdown(
-        try {
+            quizMarkdownUtils.parseMarkdown(quizText)
+          )
+        ) {
           const updatedQuiz = quizMarkdownUtils.parseMarkdown(quizText);
           updateQuizMutation.mutate({
             quiz: updatedQuiz,
             moduleName,
             quizName,
           });
-        } catch (e: any) {
-          setError(e.toString());
         }
+        setError("");
+      } catch (e: any) {
+        setError(e.toString());
       }
     }, delay);
 

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

@@ -4,6 +4,7 @@ import ModuleList from "./modules/ModuleList";
 import DraggingContextProvider from "./context/DraggingContextProvider";
 import Link from "next/link";
 import CourseTitle from "./CourseTitle";
+import { CourseNavigation } from "./CourseNavigation";
 
 export default async function CoursePage({}: {}) {
   return (
@@ -13,12 +14,7 @@ export default async function CoursePage({}: {}) {
         <div className="flex flex-row min-h-0">
           <DraggingContextProvider>
             <div className="flex-1 min-h-0">
-              <div className="pb-1 ps-5">
+              <CourseNavigation />
-                <Link href={"/"} className="btn">
-                  Back to Course List
-                </Link>
-              </div>
-
               <CourseCalendar />
             </div>
             <div className="w-96 p-3">