Updated to make sure the client sends the correct request. Unnecessary requests are no longer sent.

src/pages/employee/AssignToProject.jsx

@@ -6,8 +6,8 @@ import ProjectRepository from "../../repositories/ProjectRepository";
 
 const AssignToProject = ({ employee, onClose }) => {
   const { projects, loading } = useProjects();
-  const { projectList } = useProjectsByEmployee(employee?.id);
-
+  const { projectList,loading:selectedProjectLoding ,refetch} = useProjectsByEmployee(employee?.id);
+  const [isSubmitting,setSubmitting] = useState(false)
   const [searchTerm, setSearchTerm] = useState("");
   const [checkedProjects, setCheckedProjects] = useState({});
   const [selectedEmployees, setSelectedEmployees] = useState([]);
@@ -20,7 +20,6 @@ const AssignToProject = ({ employee, onClose }) => {
       projectList.forEach((project) => {
         initialChecked[project.id] = true;
         initialSelected.push({
-          empID: employee.id,
           jobRoleId: employee.jobRoleId,
           projectId: project.id,
           status: true,
@@ -39,45 +38,62 @@ const AssignToProject = ({ employee, onClose }) => {
     setSearchTerm(e.target.value.toLowerCase());
   };
 
-  const handleCheckboxChange = (projectId) => {
-    const isChecked = !checkedProjects[projectId];
+const handleCheckboxChange = (projectId) => {
+  const isChecked = !checkedProjects[projectId];
 
-    setCheckedProjects((prev) => ({
-      ...prev,
-      [projectId]: isChecked,
-    }));
+  setCheckedProjects((prev) => ({
+    ...prev,
+    [projectId]: isChecked,
+  }));
+};
 
-    setSelectedEmployees((prev) => {
-      const index = prev.findIndex((emp) => emp.projectId === projectId && emp.empID === employee.id);
-      const newEntry = {
+
+const handleSubmit = async () => {
+  const initiallyAssigned = new Set(projectList.map((p) => p.id.toString()));
+  const changes = [];
+
+  Object.entries(checkedProjects).forEach(([projectId, isChecked]) => {
+    const wasAssigned = initiallyAssigned.has(projectId);
+
+    if (wasAssigned && !isChecked) {
+      changes.push({
+        projectId: projectId,
         jobRoleId: employee.jobRoleId,
-        projectId,
-        status: isChecked,
-      };
+        status: false,
+      });
+    }
+
+    if (!wasAssigned && isChecked) {
+      changes.push({
+        projectId: projectId,
+        jobRoleId: employee.jobRoleId,
+        status: true,
+      });
+    }
+
+  });
+
+  if (changes.length === 0) {
+    showToast("Make change before.", "info");
+    return;
+  }
+
+  try {
+    setSubmitting(true)
+    await ProjectRepository.updateProjectsByEmployee(employee.id, changes)
+    showToast( "Project assignments updated.", "success" );
+    setSubmitting(false)
+    onClose();
+    refetch(employee.id)
+  } catch (error) {
+    const msg = error.response?.data?.message || error.message || "Error during API call.";
+    showToast( msg, "error" );
+    setSubmitting(false)
+  }
+};
+
 
-      if (index === -1) {
-        return [...prev, newEntry];
-      } else {
-        const updated = [...prev];
-        updated[index].status = isChecked;
-        return updated;
-      }
-    });
-  };
 
-  const handleSubmit = async () =>
-  {
-    console.log(selectedEmployees)
-    try
-    {
-      // const resp = await ProjectRepository.updatesAssignProject( employee.id, selectedEmployees )
-      // console.group(resp.data)
-       
-     }catch(error)
-    {
-      const msg = error.response.data.message || error.message || "Error occured during API calling.";
-      showToast( msg, "error" );
-}  };
 
   const handleClosedModal = () => {
     onClose();
@@ -127,7 +143,9 @@ const AssignToProject = ({ employee, onClose }) => {
                           type="checkbox"
                           id={`project-${project.id}`}
                           checked={checkedProjects[project.id] || false}
-                          onChange={() => handleCheckboxChange(project.id)}
+                          onChange={() => handleCheckboxChange( project.id )}
+                          disabled={selectedProjectLoding}
+                          
                         />
                         <label
                           className="form-check-label ms-2"
@@ -148,10 +166,10 @@ const AssignToProject = ({ employee, onClose }) => {
           </table>
 
           <div className="d-flex justify-content-center gap-2 mt-2">
-            <button onClick={handleSubmit} className="btn btn-primary btn-sm">
-              Submit
+            <button onClick={handleSubmit} className="btn btn-primary btn-sm" disabled={selectedProjectLoding || loading || isSubmitting }>
+              {isSubmitting ? "Please Wait...":"Submit"}
             </button>
-            <button onClick={handleClosedModal} className="btn btn-secondary btn-sm">
+            <button onClick={handleClosedModal} className="btn btn-secondary btn-sm" disabled={isSubmitting}>
               Cancel
             </button>
           </div>