feat/FE: add ws for remove member from task (#24)

Author: hilu03

frontend/src/components/board/AssignMembers.tsx

@@ -12,7 +12,7 @@ interface AssignMembersProps {
 }
 
 const AssignMembers: React.FC<AssignMembersProps> = (props) => {
-    const {boardId} = useParams();
+    const { boardId } = useParams();
     const [assignedMembers, setAssignedMembers] = useState<Member[]>(props?.assignedMembers || []);
     const [members, setMembers] = useState<Member[]>([])
     const [isOpen, setIsOpen] = useState(false);
@@ -31,24 +31,24 @@ const AssignMembers: React.FC<AssignMembersProps> = (props) => {
     }
 
     const toggleAssign = async (member: Member) => {
-    try {
-        const isAssigned = assignedMembers.some(am => am.id === member.id);
-
-        if (isAssigned) {
-            // remove
-            await taskService.removeMember(Number(boardId), props.taskId, member.id);
-            setAssignedMembers(prev => prev.filter(am => am.id !== member.id));
-            notify.success(`${member.name} removed`);
-        } else {
-            // assign
-            await taskService.assignMember(Number(boardId), props.taskId, member.id);
-            setAssignedMembers(prev => [...prev, member]);
-            notify.success(`${member.name} assigned`);
+        try {
+            const isAssigned = assignedMembers.some(am => am.id === member.id);
+
+            if (isAssigned) {
+                // remove
+                await taskService.removeMember(Number(boardId), props.taskId, member.id);
+                setAssignedMembers(prev => prev.filter(am => am.id !== member.id));
+                notify.success(`${member.name} removed`);
+            } else {
+                // assign
+                await taskService.assignMember(Number(boardId), props.taskId, member.id);
+                setAssignedMembers(prev => [...prev, member]);
+                notify.success(`${member.name} assigned`);
+            }
+        } catch (error: any) {
+            notify.error(error.response?.data?.message || "Something went wrong");
         }
-    } catch (error: any) {
-        notify.error(error.response?.data?.message || "Something went wrong");
-    }
-};
+    };
 
     useEffect(() => {
         fetchMemebers();
@@ -164,7 +164,7 @@ const AssignMembers: React.FC<AssignMembersProps> = (props) => {
                                                 <li
                                                     key={m.id}
                                                     onClick={() => toggleAssign(m)}
-                                                    className="flex items-center justify-between px-2 py-1 rounded bg-gray-800"
+                                                    className="flex items-center justify-between px-2 py-1 rounded bg-gray-800 cursor-pointer hover:bg-gray-700"
                                                 >
                                                     <span className="text-white">{m.name}</span>
                                                     <span className="text-green-400 text-xs">✓</span>

frontend/src/store/slices/tasksSlice.ts

@@ -63,9 +63,20 @@ const tasksSlice = createSlice({
     assignedMemberToTask: (state, action: PayloadAction<{ taskId: number; memberId: number }>) => {
       const { taskId, memberId } = action.payload;
       const task = state.byId[taskId];
-      if (task) {
+      if (task && !task.memberIds.includes(memberId)) {
         task.memberIds.push(memberId);
       }
+    },
+
+    removeMemberFromTask: (state, action: PayloadAction<{ taskId: number; userId: number }>) => {
+      const { taskId, userId } = action.payload;
+      const task = state.byId[taskId];
+      if (task && task.memberIds.includes(userId)) {
+        const index = task.memberIds.indexOf(userId);
+        if (index !== -1) {
+          task.memberIds.splice(index, 1);
+        }
+      }
     }
   }
 });
@@ -78,5 +89,6 @@ export const {
   taskRemoved,
   taskRestored,
   assignedMemberToTask,
+  removeMemberFromTask
 } = tasksSlice.actions;
 export default tasksSlice.reducer;

frontend/src/websocket/boardHandler.ts

@@ -3,7 +3,7 @@ import type { RootState, AppDispatch } from "@/store";
 import { columnArchived, archivedColumnRestored, columnDeleted } from "@/store/slices/archiveColumnsSlice";
 import { taskArchived, taskDeleted, archivedTaskRestored } from "@/store/slices/archiveTasksSlice";
 import { addTaskToColumn, columnCreated, columnRemoved, columnReplaced, columnRestored, columnUpdated, removeTaskFromColumn } from "@/store/slices/columnsSlice";
-import { assignedMemberToTask, taskCreated, taskRemoved, taskReplaced, taskRestored, taskUpdated } from "@/store/slices/tasksSlice";
+import { assignedMemberToTask, removeMemberFromTask, taskCreated, taskRemoved, taskReplaced, taskRestored, taskUpdated } from "@/store/slices/tasksSlice";
 
 export const handleBoardWSMessage = (
   message: any,
@@ -115,10 +115,14 @@ export const handleBoardWSMessage = (
     case "MEMBER_ASSIGNED_TO_TASK": {
       console.log("Member assigned to task", message);
       const { taskId, assignData }: { taskId: number, assignData: { userId: number, username: string } } = message.payload;
-      const task = getState().tasks.byId[taskId];
-      if (task && !task.memberIds.includes(assignData.userId)) {
-        dispatch(assignedMemberToTask({ taskId, memberId: assignData.userId }));
-      }
+      dispatch(assignedMemberToTask({ taskId, memberId: assignData.userId }));
+      break;
+    }
+
+    case "MEMBER_UNASSIGNED_TO_TASK": {
+      console.log("Member unassigned to task", message);
+      const { taskId, userId } = message.payload;
+      dispatch(removeMemberFromTask({ taskId, userId }));
       break;
     }