updating settings

nextjs/src/app/api/courses/[courseName]/settings/route.ts

@@ -12,3 +12,14 @@ export const GET = async (
     const settings = await fileStorageService.getCourseSettings(courseName);
     return Response.json(settings);
   });
+export const PUT = async (
+  request: Request,
+  { params: { courseName } }: { params: { courseName: string } }
+) =>
+  await withErrorHandling(async () => {
+    const settings = await request.json();
+
+    await fileStorageService.updateCourseSettings(courseName, settings);
+
+    return Response.json({});
+  });

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>
+  );
 }

nextjs/src/app/globals.css

@@ -59,7 +59,7 @@ ol {
   padding-left: 1.5rem;
 }
 hr {
-  @apply border-t border-gray-200 my-4;
+  @apply border-t border-gray-500 my-4;
 }
 
 blockquote {
@@ -76,3 +76,9 @@ p {
 button {
   @apply bg-blue-900 hover:bg-blue-700 text-blue-50 font-bold py-1 px-3 rounded transition-all duration-200;
 }
+
+select {
+  @apply block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm sm:text-sm;
+  @apply focus:outline-none focus:ring-blue-500 focus:border-blue-500 ;
+  @apply bg-slate-800;
+}