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}
-          shallow={true}
-        >
             {settings.name}
           </Link>
+        </div>
       ))}
     </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"
@@ -139,13 +142,8 @@ function DraggableListItem({
           })
         );
       }}
-    >
-      <Link
-        href={getModuleItemUrl(courseName, moduleName, type, item.name)}
-        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,6 +26,7 @@ export default function EditAssignment({
   useEffect(() => {
     const delay = 500;
     const handler = setTimeout(() => {
+      try {
         const updatedAssignment =
           localAssignmentMarkdown.parseMarkdown(assignmentText);
         if (
@@ -33,16 +34,16 @@ export default function EditAssignment({
           localAssignmentMarkdown.toMarkdown(updatedAssignment)
         ) {
           console.log("updating assignment");
-        try {
           updateAssignment.mutate({
             assignment: updatedAssignment,
             moduleName,
             assignmentName,
           });
+        }
+        setError("");
       } catch (e: any) {
         setError(e.toString());
       }
-      }
     }, delay);
 
     return () => {
@@ -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,22 +35,23 @@ export default function EditPage({
   useEffect(() => {
     const delay = 500;
     const handler = setTimeout(() => {
+      try {
         const updatedPage = localPageMarkdownUtils.parseMarkdown(pageText);
         if (
           localPageMarkdownUtils.toMarkdown(page) !==
           localPageMarkdownUtils.toMarkdown(updatedPage)
         ) {
-        console.log("updating assignment");
+          console.log("updating page");
-        try {
           updatePage.mutate({
             page: updatedPage,
             moduleName,
             pageName,
           });
+        }
+        setError("");
       } catch (e: any) {
         setError(e.toString());
       }
-      }
     }, delay);
 
     return () => {

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

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

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">