adding editing assignment groups

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

@@ -0,0 +1,123 @@
+"use client";
+
+import {
+  useLocalCourseSettingsQuery,
+  useUpdateLocalCourseSettingsMutation,
+} from "@/hooks/localCourse/localCoursesHooks";
+import { LocalAssignmentGroup } from "@/models/local/assignment/localAssignmentGroup";
+import { useEffect, useState } from "react";
+import TextInput from "./TextInput";
+import { useSetAssignmentGroupsMutation } from "@/hooks/canvas/canvasCourseHooks";
+
+export default function AssignmentGroupManagement() {
+  const { data: settings } = useLocalCourseSettingsQuery();
+  const updateSettings = useUpdateLocalCourseSettingsMutation();
+  const applyInCanvas = useSetAssignmentGroupsMutation(settings.canvasId); // untested
+
+  const [assignmentGroups, setAssignmentGroups] = useState<
+    LocalAssignmentGroup[]
+  >(settings.assignmentGroups);
+
+  useEffect(() => {
+    const delay = 1000;
+    const handler = setTimeout(() => {
+      if (
+        !areAssignmentGroupsEqual(assignmentGroups, settings.assignmentGroups)
+      ) {
+        updateSettings.mutate({
+          ...settings,
+          assignmentGroups,
+        });
+      }
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [assignmentGroups, settings, updateSettings]);
+
+  return (
+    <div>
+      {assignmentGroups.map((group) => (
+        <div key={group.id} className="flex flex-row gap-3">
+          <TextInput
+            value={group.name}
+            setValue={(newValue) =>
+              setAssignmentGroups((oldGroups) =>
+                oldGroups.map((g) =>
+                  g.id === group.id ? { ...g, name: newValue } : g
+                )
+              )
+            }
+            label={"Group Name"}
+          />
+          <TextInput
+            value={group.weight.toString()}
+            setValue={(newValue) =>
+              setAssignmentGroups((oldGroups) =>
+                oldGroups.map((g) =>
+                  g.id === group.id
+                    ? { ...g, weight: parseInt(newValue || "0") }
+                    : g
+                )
+              )
+            }
+            label={"Weight"}
+          />
+        </div>
+      ))}
+      <button
+        onClick={() => {
+          setAssignmentGroups((oldGroups) => [
+            ...oldGroups,
+            {
+              id: Date.now().toString(),
+              name: "",
+              weight: 0,
+            },
+          ]);
+        }}
+      >
+        Add Assignment Group
+      </button>
+    </div>
+  );
+}
+
+function areAssignmentGroupsEqual(
+  list1: LocalAssignmentGroup[],
+  list2: LocalAssignmentGroup[]
+): boolean {
+  // Check if lists have the same length
+  if (list1.length !== list2.length) return false;
+
+  // Sort both lists by the unique 'id' or 'canvasId' as a fallback
+  const sortedList1 = [...list1].sort((a, b) => {
+    if (a.id !== b.id) return a.id > b.id ? 1 : -1;
+    if (a.canvasId !== b.canvasId) return (a.canvasId || 0) - (b.canvasId || 0);
+    return 0;
+  });
+
+  const sortedList2 = [...list2].sort((a, b) => {
+    if (a.id !== b.id) return a.id > b.id ? 1 : -1;
+    if (a.canvasId !== b.canvasId) return (a.canvasId || 0) - (b.canvasId || 0);
+    return 0;
+  });
+
+  // Deep compare each object in the sorted lists
+  for (let i = 0; i < sortedList1.length; i++) {
+    const group1 = sortedList1[i];
+    const group2 = sortedList2[i];
+
+    if (
+      group1.id !== group2.id ||
+      group1.name !== group2.name ||
+      group1.weight !== group2.weight ||
+      group1.canvasId !== group2.canvasId
+    ) {
+      return false;
+    }
+  }
+
+  return true;
+}

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

@@ -0,0 +1,23 @@
+import React from "react";
+
+export default function TextInput({
+  value,
+  setValue,
+  label,
+}: {
+  value: string;
+  setValue: (newValue: string) => void;
+  label: string;
+}) {
+  return (
+    <label className="block">
+      {label}
+      <br />
+      <input
+        className="bg-slate-800 rounded-md  px-1"
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+      />
+    </label>
+  );
+}

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

@@ -4,6 +4,7 @@ import StartAndEndDate from "./StartAndEndDate";
 import SettingsHeader from "./SettingsHeader";
 import DefaultDueTime from "./DefaultDueTime";
 import DaysOfWeekSelector from "./DaysOfWeekSelector";
+import AssignmentGroupManagement from "./AssignmentGroupManagement";
 
 export default function page() {
   return (
@@ -12,6 +13,7 @@ export default function page() {
       <DaysOfWeekSelector />
       <StartAndEndDate />
       <DefaultDueTime />
+      <AssignmentGroupManagement />
     </div>
   );
 }