inproper submit...

nextjs/src/app/NewCourseForm.tsx

@@ -1,6 +1,8 @@
+import { DayOfWeekInput } from "@/components/form/DayOfWeekInput";
 import SelectInput from "@/components/form/SelectInput";
 import { useCanvasTermsQuery } from "@/hooks/canvas/canvasHooks";
 import { CanvasEnrollmentTermModel } from "@/models/canvas/enrollmentTerms/canvasEnrollmentTermModel";
+import { DayOfWeek } from "@/models/local/localCourse";
 import React, { useState } from "react";
 
 export default function NewCourseForm() {
@@ -9,10 +11,10 @@ export default function NewCourseForm() {
   const [selectedTerm, setSelectedTerm] = useState<
     CanvasEnrollmentTermModel | undefined
   >();
+  const [selectedDaysOfWeek, setSelectedDaysOfWeek] = useState<DayOfWeek[]>([]);
 
   return (
     <form>
-      form is here
       <SelectInput
         value={selectedTerm}
         setValue={setSelectedTerm}
@@ -20,6 +22,22 @@ export default function NewCourseForm() {
         options={canvasTerms}
         getOptionName={(t) => t.name}
       />
+      {selectedTerm && (
+        <div>
+          <DayOfWeekInput
+            selectedDays={selectedDaysOfWeek}
+            updateSettings={(day) => {
+              setSelectedDaysOfWeek((oldDays) => {
+                const hasDay = oldDays.includes(day);
+
+                return hasDay
+                  ? oldDays.filter((d) => d !== day)
+                  : [day, ...oldDays];
+              });
+            }}
+          />
+        </div>
+      )}
     </form>
   );
 }

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 />

nextjs/src/components/form/DayOfWeekInput.tsx

@@ -0,0 +1,31 @@
+import { DayOfWeek } from "@/models/local/localCourse";
+
+export function DayOfWeekInput({
+  selectedDays,
+  updateSettings,
+}: {
+  selectedDays: DayOfWeek[];
+  updateSettings: (day: DayOfWeek) => void;
+}) {
+  return (
+    <div className="flex flex-row gap-3">
+      {Object.values(DayOfWeek).map((day) => {
+        const hasDay = selectedDays.includes(day);
+        return (
+          <button
+            role="button"
+            key={day}
+            className={
+              hasDay
+                ? "bg-blue-300 text-blue-950 border-blue-500 border"
+                : "bg-slate-900 border-blue-900 border "
+            }
+            onClick={() => updateSettings(day)}
+          >
+            {day}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

nextjs/src/components/form/SelectInput.tsx

@@ -24,6 +24,7 @@ export default function SelectInput<T>({
           setValue(option);
         }}
       >
+        <option></option>
         {options.map((o) => (
           <option key={getOptionName(o)}>{getOptionName(o)}</option>
         ))}