Refactor task creation to rely on socket events for state updates; add user fetching and assignee selection in TaskCreateForm

client/src/components/board/KanbanBoard.jsx

@@ -53,7 +53,7 @@
     if (projectId) {
       fetchTasks();
     }
   }, [projectId]);
 
   // Socket.io real-time effects
   useEffect(() => {
@@ -128,7 +128,7 @@
         leaveProject(projectId);
       };
     }
   }, [projectId, isConnected]);
 
   const fetchTasks = async () => {
     try {
@@ -187,7 +187,7 @@
     }
 
     const sourceColumn = columns[source.droppableId];
     const destinationColumn = columns[destination.droppableId];
     const task = sourceColumn.tasks.find(t => t._id === draggableId);
 
     if (!task) return;
@@ -247,11 +247,9 @@
       const response = await taskService.createTask(newTask);
       const createdTask = response.data?.task || response.data;
 
-      // Update local state
-      const newColumns = { ...columns };
-      newColumns[columnId].tasks.push(createdTask);
-      setColumns(newColumns);
-
+      // Don't update local state here - let socket event handle it to avoid duplicates
+      // The handleTaskCreated socket event will add the task to the UI
+
       // Emit real-time event
       emitTaskCreated(projectId, createdTask);
 

client/src/components/board/TaskCreateForm.jsx

@@ -1,6 +1,7 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Button, Input, Textarea, Select } from '../common';
 import { useToast } from '../../hooks/useToast';
+import { userService } from '../../services/userService';
 import { Calendar, Flag, User } from 'lucide-react';
 
 const TaskCreateForm = ({ onSubmit, onCancel }) => {
@@ -9,11 +10,27 @@ const TaskCreateForm = ({ onSubmit, onCancel }) => {
     description: '',
     priority: 'medium',
     dueDate: '',
-    assignee: ''
+    assignedTo: ''
   });
+  const [users, setUsers] = useState([]);
   const [loading, setLoading] = useState(false);
   const { toast } = useToast();
 
+  useEffect(() => {
+    fetchUsers();
+  }, []);
+
+  const fetchUsers = async () => {
+    try {
+      const response = await userService.getUsers();
+      const usersData = response.data?.users || response.users || response.data || [];
+      setUsers(Array.isArray(usersData) ? usersData : []);
+    } catch (error) {
+      console.error('Error fetching users:', error);
+      setUsers([]);
+    }
+  };
+
   const priorityOptions = [
     { value: 'low', label: 'Low Priority', color: 'text-green-600' },
     { value: 'medium', label: 'Medium Priority', color: 'text-yellow-600' },
@@ -34,7 +51,7 @@ const TaskCreateForm = ({ onSubmit, onCancel }) => {
         title: formData.title.trim(),
         description: formData.description.trim(),
         dueDate: formData.dueDate || null,
-        assignee: formData.assignee || null
+        assignedTo: formData.assignedTo || null
       };
 
       await onSubmit(taskData);
@@ -46,7 +63,7 @@ const TaskCreateForm = ({ onSubmit, onCancel }) => {
         description: '',
         priority: 'medium',
         dueDate: '',
-        assignee: ''
+        assignedTo: ''
       });
     } catch (error) {
       const errorMessage = error.response?.data?.message || error.message || 'Failed to create task';
@@ -113,6 +130,23 @@ const TaskCreateForm = ({ onSubmit, onCancel }) => {
               className="border-0 shadow-none p-0 text-xs focus:ring-0 text-gray-600"
             />
           </div>
+
+          {/* Assignee */}
+          <div className="flex items-center space-x-2">
+            <User className="h-4 w-4 text-gray-400" />
+            <Select
+              value={formData.assignedTo}
+              onChange={(e) => handleChange('assignedTo', e.target.value)}
+              className="border-0 shadow-none p-0 text-xs focus:ring-0"
+            >
+              <option value="">Unassigned</option>
+              {users.map(user => (
+                <option key={user._id} value={user._id}>
+                  {user.name || user.email}
+                </option>
+              ))}
+            </Select>
+          </div>
         </div>
 
         {/* Actions */}