day of week selector

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

@@ -12,6 +12,7 @@ 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 } }

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>

nextjs/src/hooks/localCourse/localCoursesHooks.ts

@@ -57,6 +57,10 @@ export const useUpdateLocalCourseSettingsMutation = () => {
   const queryClient = useQueryClient();
   return useMutation({
     mutationFn: async (updatedSettings: LocalCourseSettings) => {
+      queryClient.setQueryData(
+        localCourseKeys.settings(courseName),
+        updatedSettings
+      );
       const url = `/api/courses/${courseName}/settings`;
       await axiosClient.put(url, updatedSettings);
     },

nextjs/src/services/fileStorage/fileStorageService.ts

@@ -1,7 +1,6 @@
 import { promises as fs } from "fs";
 import path from "path";
 import {
-  LocalCourse,
   LocalCourseSettings,
   localCourseYamlUtils,
 } from "@/models/local/localCourse";
@@ -28,18 +27,6 @@ const basePath = process.env.STORAGE_DIRECTORY ?? "./storage";
 console.log("base path", basePath);
 
 export const fileStorageService = {
-  // async saveCourseAsync(
-  //   course: LocalCourse,
-  //   previouslyStoredCourse?: LocalCourse
-  // ) {
-  //   await courseMarkdownSaver.save(course, previouslyStoredCourse);
-  // },
-
-  // async loadSavedCourses(): Promise<LocalCourse[]> {
-  //   console.log("loading pages from file system");
-  //   return (await courseMarkdownLoader.loadSavedCourses()) || [];
-  // },
-
   async getCourseNames() {
     console.log("loading course ids");
     const courseDirectories = await fs.readdir(basePath, {