feat/FE: optimize re-render workspace when open task detail (#25)

NhatNguyen1502 · web-flow · commit 32827e7285e1 · 2025-10-08T14:31:24.000+07:00
diff --git a/frontend/src/components/board/BoardContent.tsx b/frontend/src/components/board/BoardContent.tsx
@@ -1,7 +1,6 @@
 import BoardClosedBanner from '@/components/board/BoardClosedBanner';
 import BoardNavbar from '@/components/board/BoardNavbar';
 import DroppableColumn from '@/components/board/DroppableColumn';
-import TaskDetailModal from '@/components/board/TaskDetailModal';
 import LoadingContent from '@/components/ui/LoadingContent';
 import { useBoardData } from '@/hooks/useBoardData';
 import { useBoardOperations } from '@/hooks/useBoardOperations';
@@ -11,7 +10,7 @@ import { useAppSelector } from '@/store';
 import { selectActiveColumns } from '@/store/selectors/columnsSelector';
 import { selectTaskById, selectTasksByColumns } from '@/store/selectors/tasksSelectors';
 import { columnsReordered, setColumns } from '@/store/slices/columnsSlice';
-import type { Column, Task } from '@/types';
+import type { Column } from '@/types';
 import {
     DndContext,
     DragOverlay,
@@ -33,16 +32,14 @@ import {
     sortableKeyboardCoordinates,
 } from '@dnd-kit/sortable';
 import { GripVertical, Plus } from 'lucide-react';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { useParams } from 'react-router-dom';
 
 const WorkspaceBoard = () => {
 
     const { boardId } = useParams();
     const [activeId, setActiveId] = useState<UniqueIdentifier | null>(null);
-    const [showDetailModal, setShowDetailModal] = useState(false);
-    const [activeItem, setActiveItem] = useState<Task | null>(null);
     const containerRef = useRef<HTMLDivElement>(null);
     const dispatch = useDispatch();
     const columns = useAppSelector(selectActiveColumns);
@@ -408,15 +405,7 @@ const WorkspaceBoard = () => {
         setCardTitle('');
     }, [isBoardClosed]);
 
-    const handleHideDetailModal = useCallback(() => {
-        setShowDetailModal(false);
-    }, []);
-
-    const handleShowDetailModal = useCallback(() => {
-        setShowDetailModal(true);
-    }, []);
-
-    console.log("worspace board")
+    console.log("worspace board: " + boardId);
     return (
         <div className='bg-[#283449] w-full h-full flex flex-col'>
             {
@@ -457,8 +446,6 @@ const WorkspaceBoard = () => {
                                                 onUpdateColumnTitle={updateColumnTitle}
                                                 onArchiveColumn={archiveColumn}
                                                 onArchiveAllItems={archiveAllTasksInColumn}
-                                                handleShowDetailTask={handleShowDetailModal}
-                                                setActiveItem={setActiveItem}
                                             />
                                         ))}
                                     </SortableContext>
@@ -501,20 +488,10 @@ const WorkspaceBoard = () => {
                                 </DragOverlay>
                             </DndContext>
                         </div>
-                        {
-                            showDetailModal &&
-                            <TaskDetailModal
-                                onClose={handleHideDetailModal}
-                                itemId={activeItem?.id || 0}
-                                // item={activeItem}
-                                onArchive={archiveTask}
-                                onUpdate={updateTask}
-                            />
-                        }
                     </>
             }
         </div>
     );
 };
 
-export default WorkspaceBoard;
+export default memo(WorkspaceBoard);
diff --git a/frontend/src/components/board/DraggableItem.tsx b/frontend/src/components/board/DraggableItem.tsx
@@ -1,26 +1,22 @@
-import type { Item, Task } from '@/types';
 import { detectUrl } from '@/utils/UrlPreviewUtils';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { X } from 'lucide-react';
 import UrlPreview from './UrlPreview';
-import { useAppSelector, type RootState } from '@/store';
+import { useAppDispatch, useAppSelector, type RootState } from '@/store';
 import { useSelector } from 'react-redux';
 import { selectTaskById } from '@/store/selectors/tasksSelectors';
+import { showTaskModal } from '@/store/slices/taskModalSlice';
 
 interface DraggableItemProps {
     onDelete: (itemId: number) => void;
-    handleShowDetailTask: () => void;
     label?: string; // e.g., "FE", "BE"
-    setActiveItem: (item: Task) => void;
     itemId: number;
 }
 
 const DraggableItem: React.FC<DraggableItemProps> = ({
     onDelete,
-    handleShowDetailTask,
     label,
-    setActiveItem,
     itemId
 }) => {
     const item = useAppSelector((state) => selectTaskById(itemId)(state));
@@ -45,6 +41,7 @@ const DraggableItem: React.FC<DraggableItemProps> = ({
     };
 
     const members = useSelector((state: RootState) => state.members);
+    const dispatch = useAppDispatch();
 
     // console.log("Rendering DraggableItem:", item.id, item.name);
     return (
@@ -54,8 +51,7 @@ const DraggableItem: React.FC<DraggableItemProps> = ({
             {...attributes}
             {...listeners}
             onClick={() => {
-                detectUrl(item.name) ? undefined : handleShowDetailTask();
-                setActiveItem(item);
+                detectUrl(item.name) ? undefined : dispatch(showTaskModal(item.id));
             }}
             className={`
                 select-none bg-[#222f44] p-2 rounded-lg 
diff --git a/frontend/src/components/board/DroppableColumn.tsx b/frontend/src/components/board/DroppableColumn.tsx
@@ -32,8 +32,6 @@ interface DroppableColumnProps {
     onUpdateColumnTitle: (columnId: number, newTitle: string) => void;
     onArchiveColumn: (column: Column) => void;
     onArchiveAllItems: (columnId: number) => void;
-    handleShowDetailTask: () => void;
-    setActiveItem: (item: Task) => void;
 }
 
 const DroppableColumnComponent: React.FC<DroppableColumnProps> = ({
@@ -49,8 +47,6 @@ const DroppableColumnComponent: React.FC<DroppableColumnProps> = ({
     onUpdateColumnTitle,
     onArchiveColumn,
     onArchiveAllItems,
-    handleShowDetailTask,
-    setActiveItem,
 }) => {
     const [isEditingTitle, setIsEditingTitle] = useState(false);
     const [showOptionsMenu, setShowOptionsMenu] = useState(false);
@@ -296,8 +292,6 @@ const DroppableColumnComponent: React.FC<DroppableColumnProps> = ({
                                 key={item.id}
                                 itemId={item.id}
                                 onDelete={onDeleteItem}
-                                handleShowDetailTask={handleShowDetailTask}
-                                setActiveItem={setActiveItem}
                             />
                         ))}
                     </div>
diff --git a/frontend/src/components/board/TaskDetailModal.tsx b/frontend/src/components/board/TaskDetailModal.tsx
@@ -1,43 +1,66 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import {
   X, Calendar, Users,
   List, Edit3, Archive,
   // Eye, Paperclip, Copy, Trash2, MessageSquareText 
 } from 'lucide-react';
 import LoadingContent from '../ui/LoadingContent';
-import type { ItemDetail } from '@/types';
+import type { ItemDetail, UpdateItemRequest } from '@/types';
 import taskService from '@/services/taskService';
 import AssignMembers from './AssignMembers';
+import { hideTaskModal } from '@/store/slices/taskModalSlice';
+import { useAppDispatch } from '@/store';
+import { useSelector } from 'react-redux';
+import { selectTaskModalState } from '@/store/selectors/modalSelector';
+import { notify } from '@/services/toastService';
 
-interface TaskModalProps {
-  onClose: () => void;
-  itemId: number;
-  onUpdate: (itemId: number, updates: any) => void;
-  onArchive: (itemId: number) => void;
-}
-
-const TaskDetailModal: React.FC<TaskModalProps> = ({
-  onClose,
-  itemId,
-  onUpdate,
-  onArchive,
-}) => {
+const TaskDetailModal: React.FC = () => {
   const [isLoading, setIsLoading] = useState(false);
   const [item, setItem] = useState<ItemDetail>(null as any);
   const [isEditingTitle, setIsEditingTitle] = useState(false);
   const [isEditingDescription, setIsEditingDescription] = useState(false);
   // const [comment, setComment] = useState('');
 
+  const dispatch = useAppDispatch();
+  const { taskId } = useSelector(selectTaskModalState);
+
+  const onModalClose = useCallback(() => {
+    dispatch(hideTaskModal());
+  }, [dispatch]);
+
+  const archiveTask = useCallback(
+    async (taskId: number) => {
+      try {
+        const result = await taskService.archiveTask(taskId);
+        notify.success(result.message);
+      } catch (error: any) {
+        notify.error(error.response?.data?.message || 'Failed to archive task');
+      }
+    },
+    []
+  );
+
+  const updateTask = useCallback(
+    async (taskId: number, data: UpdateItemRequest) => {
+      try {
+        const result = await taskService.updateTask(taskId, data);
+        notify.success(result.message);
+      } catch (error: any) {
+        notify.error(error.response?.data?.message || 'Failed to update task');
+      }
+    },
+    []
+  );
 
   const handleUpdate = () => {
     setIsEditingTitle(false);
-    onUpdate(item.id, item);
+    updateTask(item.id, { name: item.name, description: item.description as string });
   };
 
   const fetchTaskDetail = async () => {
     setIsLoading(true);
     try {
-      const response = await taskService.getTaskDetail(itemId);
+      const response = await taskService.getTaskDetail(Number(taskId));
       setItem(response.data);
     }
     catch (error) {
@@ -48,12 +71,20 @@ const TaskDetailModal: React.FC<TaskModalProps> = ({
     }
   };
 
-  console.log("Rendering TaskDetailModal for itemId:", itemId, item);
+  // Close modal on Escape key press
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onModalClose();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [onModalClose]);
 
+  console.log("Rendering TaskDetailModal for taskId:", taskId, item);
 
   useEffect(() => {
     fetchTaskDetail();
-  }, [itemId]);
+  }, [taskId]);
 
   return (
     <div className="fixed inset-0 bg-black/50 flex items-start justify-center z-40 pt-8 px-4">
@@ -88,7 +119,7 @@ const TaskDetailModal: React.FC<TaskModalProps> = ({
                       </h1>
                     )}
                     <button
-                      onClick={onClose}
+                      onClick={onModalClose}
                       className="text-gray-400 hover:text-white p-1 rounded hover:bg-gray-600 hover:bg-opacity-50"
                     >
                       <X size={18} />
@@ -117,7 +148,7 @@ const TaskDetailModal: React.FC<TaskModalProps> = ({
                 <div className="pl-6 flex flex-wrap gap-2">
 
                   {/* Member section */}
-                  <AssignMembers assignedMembers={item?.assignedMembers} taskId={itemId}/>
+                  <AssignMembers assignedMembers={item?.assignedMembers} taskId={Number(taskId)} />
 
                   {/* Labels Section */}
                   <div className="pb-4">
@@ -272,8 +303,8 @@ const TaskDetailModal: React.FC<TaskModalProps> = ({
                       <button
                         className="w-full text-left px-2 py-2 text-sm text-gray-300 hover:bg-gray-600 hover:bg-opacity-50 rounded flex items-center gap-2"
                         onClick={() => {
-                          onArchive(item.id);
-                          onClose();
+                          archiveTask(item.id);
+                          onModalClose();
                         }}
                       >
                         <Archive size={14} />
diff --git a/frontend/src/pages/Board.tsx b/frontend/src/pages/Board.tsx
@@ -0,0 +1,16 @@
+import { useSelector } from "react-redux";
+import WorkspaceBoard from "../components/board/BoardContent";
+import { selectTaskModalState } from "@/store/selectors/modalSelector";
+import TaskDetailModal from "@/components/board/TaskDetailModal";
+
+const Board = () => {
+    const { isTaskModalShow } = useSelector(selectTaskModalState);
+    return (
+        <>
+            <WorkspaceBoard />
+            {isTaskModalShow && <TaskDetailModal />}
+        </>
+    );
+}
+
+export default Board;
diff --git a/frontend/src/router/AppRouter.tsx b/frontend/src/router/AppRouter.tsx
@@ -20,11 +20,12 @@ import Template from '@/pages/Template';
 import Home from '@/pages/Home';
 import Member from '@/pages/workspace/Member';
 import Setting from '@/pages/workspace/Setting';
-import WorkspaceBoard from '@/pages/WorkspaceBoard';
+import WorkspaceBoard from '@/components/board/BoardContent';
 import HomeBoards from '@/pages/HomeBoards';
 import Boards from '@/pages/workspace/Board';
 import WorkspaceDetail from '@/pages/workspace/WorkspaceDetail';
 import SearchPage from '@/pages/SearchPage';
+import Board from '@/pages/Board';
 
 // Layout wrappers for different roles
 const AdminLayout = () => (
@@ -105,7 +106,7 @@ const router = createBrowserRouter([
             },
             {
                 path: 'board/:boardId',
-                element: <WorkspaceBoard />,
+                element: <Board />,
             },
             {
                 path: 'workspace',
diff --git a/frontend/src/store/index.ts b/frontend/src/store/index.ts
@@ -8,6 +8,8 @@ import tasksReducer from "./slices/tasksSlice";
 import membersReducer from "./slices/membersSlice";
 import archivedColumnsReducer from "./slices/archiveColumnsSlice";
 import archivedTasksReducer from "./slices/archiveTasksSlice";
+import taskModalReducer from "./slices/taskModalSlice";
+
 import { useDispatch, useSelector, type TypedUseSelectorHook } from 'react-redux';
 
 // Persist configuration
@@ -24,6 +26,7 @@ const rootReducer = combineReducers({
     archivedColumns: archivedColumnsReducer,
     archivedTasks: archivedTasksReducer,
     members: membersReducer,
+    taskModal: taskModalReducer,
 });
 
 const persistedReducer = persistReducer(persistConfig, rootReducer);
diff --git a/frontend/src/store/selectors/modalSelector.ts b/frontend/src/store/selectors/modalSelector.ts
@@ -0,0 +1,3 @@
+import type { RootState } from "..";
+
+export const selectTaskModalState = (state: RootState) => state.taskModal;
diff --git a/frontend/src/store/slices/taskModalSlice.ts b/frontend/src/store/slices/taskModalSlice.ts
@@ -0,0 +1,17 @@
+import { createSlice } from '@reduxjs/toolkit';
+const taskModalSlice = createSlice({
+  name: 'taskModal',
+  initialState: { isTaskModalShow: false, taskId: null },
+  reducers: {
+    showTaskModal: (state, action) => {
+      state.isTaskModalShow = true;
+      state.taskId = action.payload;
+    },
+    hideTaskModal: (state) => {
+      state.isTaskModalShow = false;
+      state.taskId = null;
+    }
+  }
+});
+export const { showTaskModal, hideTaskModal } = taskModalSlice.actions;
+export default taskModalSlice.reducer;

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+import type { RootState } from "..";`
	`2`	`+`
	`3`	`+export const selectTaskModalState = (state: RootState) => state.taskModal;`