temporary server action for group and inside

app/grouping/Grouping.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { JobCategory } from "./GroupCreator";
+import { JobCategory } from "./action";
 
 type Props = {
   availableJobs: JobCategory[];
@@ -19,16 +19,17 @@ export default function Grouping({
     const _id = parseInt(id);
     const job = availableJobs.find((j) => j.id == _id);
     if (job == undefined) return;
-    setSelectedJob((old) => [...old, job]);
+    const newSelectedJob = [...selectedJob, job];
+    setSelectedJob(newSelectedJob);
     selectJob(_id);
+    updateGroup(newSelectedJob.map((j) => j.id));
   }
   function removeJobFromGroup(id: number) {
-    setSelectedJob((old) => old.filter((j) => j.id != id));
+    const newSelectedJob = selectedJob.filter((j) => j.id != id);
+    setSelectedJob(newSelectedJob);
     removeJob(id);
+    updateGroup(newSelectedJob.map((j) => j.id));
   }
-  useEffect(() => {
-    updateGroup(selectedJob.map((j) => j.id));
-  }, [selectedJob, updateGroup]);
   return (
     <div className="m-2 flex w-full flex-col gap-2 rounded-md border border-black p-2 shadow-md">
       {selectedJob.map((j) => (