temporary server action for group and inside

app/grouping/GroupCreator.tsx

@@ -3,20 +3,12 @@
 import { LocationContext } from "@/components/locationContext";
 import { useContext, useState } from "react";
 import Grouping from "./Grouping";
+import { Group, JobCategory, updateGroups } from "./action";
 
 type Props = {
   allJobs: JobCategory[];
 };
 
-export type JobCategory = {
-  id: number;
-  name: string;
-};
-
-type Group = {
-  id: number;
-  jobs: number[];
-};
 export default function GroupCreator({ allJobs }: Props) {
   const locationContext = useContext(LocationContext);
   const [usedJobs, setUsedJobs] = useState<number[]>([]);
@@ -40,7 +32,22 @@ export default function GroupCreator({ allJobs }: Props) {
     );
   }
 
-  function submit() {} //TODO! submit group
+  async function submit() {
+    if (
+      locationContext?.zone[0] == undefined ||
+      locationContext?.province[0] == undefined
+    ) {
+      alert("ยังไม่ได้เลือกพื้นที่");
+      return;
+    }
+    await updateGroups(
+      locationContext.province[0],
+      locationContext.zone[0],
+      groups,
+    );
+
+    alert("อัพเดทสำเร็จ");
+  }
 
   if (
     locationContext?.zone[0] == undefined ||

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) => (

app/grouping/action.ts

@@ -0,0 +1,20 @@
+"use server";
+
+export type JobCategory = {
+  id: number;
+  name: string;
+};
+
+export type Group = {
+  id: number;
+  jobs: number[];
+};
+
+//TODO: submit group
+export async function updateGroups(
+  province: number,
+  zone: number,
+  groups: Group[],
+) {
+  console.log({ province, zone, groups });
+}

app/inside/IdComponent.tsx

@@ -7,14 +7,15 @@ type Props = {
 export default function IdComponent({ updateIdList }: Props) {
   const [idSet, setIdSet] = useState<Set<string>>(new Set());
   const onValidId = (id: string) => {
-    setIdSet((prev) => new Set(prev.add(id)));
+    const newSet = new Set(idSet.add(id));
+    setIdSet(newSet);
+    updateIdList([...newSet]);
   };
   const removeCid = (id: string) => {
-    setIdSet((prev) => new Set([...prev].filter((x) => x !== id)));
+    const newSet = new Set([...idSet].filter((x) => x !== id));
+    setIdSet(newSet);
+    updateIdList([...newSet]);
   };
-  useEffect(() => {
-    updateIdList([...idSet]);
-  }, [idSet, updateIdList]);
   return (
     <div className="flex justify-center">
       <div className="flex flex-col gap-2">

app/inside/action.ts

@@ -0,0 +1,5 @@
+"use server";
+
+export async function saveUser(ids: string[]) {
+  console.log(ids);
+} //TODO: submit inside user

app/inside/page.tsx

@@ -1,10 +1,14 @@
 "use client";
 import { useState } from "react";
+import { saveUser } from "./action";
 import IdComponent from "./IdComponent";
 
 export default function Page() {
   const [idList, setIdList] = useState<string[]>([]);
-  function submit() {} //TODO! submit inside user
+  async function submit() {
+    await saveUser(idList);
+    alert("อัพเดทสำเร็จ");
+  }
   return (
     <div>
       <IdComponent updateIdList={(cids) => setIdList(cids)} />