starting to work on settings page

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

@@ -1,8 +0,0 @@
-"use client";
-
-import { useLocalCourseSettingsQuery } from "@/hooks/localCourse/localCoursesHooks";
-
-export default function CourseSettings() {
-  const { data: settings } = useLocalCourseSettingsQuery();
-  return <div>{settings.name}</div>;
-}

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

@@ -0,0 +1,26 @@
+"use client";
+
+import { useLocalCourseSettingsQuery } from "@/hooks/localCourse/localCoursesHooks";
+import Link from "next/link";
+import { useCourseContext } from "./context/courseContext";
+
+export default function CourseSettingsLink() {
+  const {courseName} = useCourseContext();
+  const { data: settings } = useLocalCourseSettingsQuery();
+  return (
+    <div>
+      {settings.name}
+
+      <Link
+        href={
+          "/course/" +
+          encodeURIComponent(courseName) +
+          "/settings"
+        }
+        shallow={true}
+      >
+        Course Settings
+      </Link>
+    </div>
+  );
+}

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

@@ -19,7 +19,6 @@ export const CalendarMonth = ({ month }: { month: CalendarMonthModel }) => {
     { month: "long" }
   );
   const toggleCollapse = () => setIsCollapsed(!isCollapsed);
-  // const collapseClass = isInPast ? "collapse _hide" : "collapse _show";
   const weekDaysList: DayOfWeek[] = Object.values(DayOfWeek);
 
   console.log(isCollapsed);
@@ -32,22 +31,13 @@ export const CalendarMonth = ({ month }: { month: CalendarMonthModel }) => {
         onClick={toggleCollapse}
         role="button"
       >
-        {/* <button
-          type="button"
-          className="btn btn-link"
-          onClick={toggleCollapse}
-          aria-expanded={!isCollapsed}
-          aria-controls={monthName}
-        > */}
         {monthName}
-        {/* </button> */}
       </h3>
 
       <div
         id={monthName}
         className={"panel"}
         style={{
-          // display: isCollapsed ? "none" : "block",
           maxHeight: isCollapsed ? "0" : "100vh",
         }}
       >

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

@@ -1,18 +1,18 @@
 import CourseCalendar from "./calendar/CourseCalendar";
-import CourseSettings from "./CourseSettings";
+import CourseSettingsLink from "./CourseSettingsLink";
 import ModuleList from "./modules/ModuleList";
 import DraggingContextProvider from "./context/DraggingContextProvider";
 
 export default async function CoursePage({}: {}) {
   return (
     <div className="h-full flex flex-col">
-      <CourseSettings />
       <div className="flex flex-row min-h-0">
         <DraggingContextProvider>
           <div className="flex-1 min-h-0">
             <CourseCalendar />
           </div>
           <div className="w-96 p-3">
+            <CourseSettingsLink />
             <ModuleList />
           </div>
         </DraggingContextProvider>

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

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default function page() {
+  return (
+    <div>page</div>
+  )
+}