day of week selector

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

@@ -0,0 +1,44 @@
+"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-200 text-blue-900"
+                  : "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/page.tsx

@@ -3,11 +3,13 @@ import { useCourseContext } from "../context/courseContext";
 import StartAndEndDate from "./StartAndEndDate";
 import SettingsHeader from "./SettingsHeader";
 import DefaultDueTime from "./DefaultDueTime";
+import DaysOfWeekSelector from "./DaysOfWeekSelector";
 
 export default function page() {
   return (
     <div>
       <SettingsHeader />
+      <DaysOfWeekSelector />
       <StartAndEndDate />
       <DefaultDueTime />
     </div>