inproper submit...

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

@@ -1,44 +0,0 @@
-"use client";
-import { Spinner } from "@/components/Spinner";
-import {
-  useLocalCourseSettingsQuery,
-  useUpdateLocalCourseSettingsMutation,
-} from "@/hooks/localCourse/localCoursesHooks";
-import { DayOfWeek } from "@/models/local/localCourse";
-import React from "react";
-
-export default function DaysOfWeekSelector() {
-  const { data: settings } = useLocalCourseSettingsQuery();
-  const updateSettings = useUpdateLocalCourseSettingsMutation();
-
-  return (
-    <>
-      <div className="flex flex-row gap-3">
-        {Object.values(DayOfWeek).map((day) => {
-          const hasDay = settings.daysOfWeek.includes(day);
-          return (
-            <button
-              key={day}
-              className={
-                hasDay
-                  ? "bg-blue-300 text-blue-950 border-blue-500 border"
-                  : "bg-slate-900 border-blue-900 border "
-              }
-              onClick={() => {
-                updateSettings.mutate({
-                  ...settings,
-                  daysOfWeek: hasDay
-                    ? settings.daysOfWeek.filter((d) => d !== day)
-                    : [day, ...settings.daysOfWeek],
-                });
-              }}
-            >
-              {day}
-            </button>
-          );
-        })}
-      </div>
-      {updateSettings.isPending && <Spinner />}
-    </>
-  );
-}

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

@@ -0,0 +1,31 @@
+"use client";
+import { DayOfWeekInput } from "@/components/form/DayOfWeekInput";
+import { Spinner } from "@/components/Spinner";
+import {
+  useLocalCourseSettingsQuery,
+  useUpdateLocalCourseSettingsMutation,
+} from "@/hooks/localCourse/localCoursesHooks";
+import React from "react";
+
+export default function DaysOfWeekSettings() {
+  const { data: settings } = useLocalCourseSettingsQuery();
+  const updateSettings = useUpdateLocalCourseSettingsMutation();
+
+  return (
+    <>
+      <DayOfWeekInput
+        selectedDays={settings.daysOfWeek}
+        updateSettings={(day) => {
+          const hasDay = settings.daysOfWeek.includes(day);
+          updateSettings.mutate({
+            ...settings,
+            daysOfWeek: hasDay
+              ? settings.daysOfWeek.filter((d) => d !== day)
+              : [day, ...settings.daysOfWeek],
+          });
+        }}
+      />
+      {updateSettings.isPending && <Spinner />}
+    </>
+  );
+}

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

@@ -3,7 +3,7 @@ import { useCourseContext } from "../context/courseContext";
 import StartAndEndDate from "./StartAndEndDate";
 import SettingsHeader from "./SettingsHeader";
 import DefaultDueTime from "./DefaultDueTime";
-import DaysOfWeekSelector from "./DaysOfWeekSelector";
+import DaysOfWeekSettings from "./DaysOfWeekSettings";
 import AssignmentGroupManagement from "./AssignmentGroupManagement";
 
 export default function page() {
@@ -11,7 +11,7 @@ export default function page() {
     <div className="flex justify-center">
       <div className=" w-fit mt-5">
         <SettingsHeader />
-        <DaysOfWeekSelector />
+        <DaysOfWeekSettings />
         <StartAndEndDate />
         <DefaultDueTime />
         <AssignmentGroupManagement />