updating settings

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

@@ -0,0 +1,28 @@
+"use client";
+
+import {
+  useLocalCourseSettingsQuery,
+  useUpdateLocalCourseSettingsMutation,
+} from "@/hooks/localCourse/localCoursesHooks";
+import { TimePicker } from "../../../../components/TimePicker";
+
+export default function DefaultDueTime() {
+  const { data: settings } = useLocalCourseSettingsQuery();
+  const updateSettings = useUpdateLocalCourseSettingsMutation();
+  return (
+    <div className="border w-fit p-3 m-3 rounded-md">
+      <div className="text-center">Default Assignment Due Time</div>
+      <hr className="m-1 p-0" />
+      <TimePicker
+        time={settings.defaultDueTime}
+        setChosenTime={(simpleTime) => {
+          console.log(simpleTime);
+          updateSettings.mutate({
+            ...settings,
+            defaultDueTime: simpleTime,
+          });
+        }}
+      />
+    </div>
+  );
+}

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

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

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

@@ -0,0 +1,16 @@
+"use client";
+import { useLocalCourseSettingsQuery } from "@/hooks/localCourse/localCoursesHooks";
+import { getDateOnlyMarkdownString } from "@/models/local/timeUtils";
+import React from "react";
+
+export default function StartAndEndDate() {
+  const { data: settings } = useLocalCourseSettingsQuery();
+  const startDate = new Date(settings.startDate);
+  const endDate = new Date(settings.endDate);
+  return (
+    <div>
+      <div>Start: {getDateOnlyMarkdownString(startDate)}</div>
+      <div>End: {getDateOnlyMarkdownString(endDate)}</div>
+    </div>
+  );
+}

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

@@ -1,7 +1,15 @@
-import React from 'react'
+import React from "react";
+import { useCourseContext } from "../context/courseContext";
+import StartAndEndDate from "./StartAndEndDate";
+import SettingsHeader from "./SettingsHeader";
+import DefaultDueTime from "./DefaultDueTime";
 
 export default function page() {
   return (
-    <div>page</div>
-  )
+    <div>
+      <SettingsHeader />
+      <StartAndEndDate />
+      <DefaultDueTime />
+    </div>
+  );
 }