refactor(patient:worklist, history): refactor WorklistTable component and related usages

Refactor WorklistTable to receive props for controlling selection, filtering and data
Adjust usage of WorklistTable in history and worklist to adapt to the refactored component
Maintain original functionality while improving reusability and maintainability

src/pages/patient/HistoryList.tsx

@@ -1,9 +1,17 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Row, Col, Button, Drawer, Grid } from 'antd';
 import { SettingOutlined } from '@ant-design/icons';
 import { FormattedMessage } from 'react-intl';
+import { useSelector, useDispatch } from 'react-redux';
+import {
+  fetchWorkThunk,
+  workSelectionSlice,
+} from '../../states/patient/worklist/slices/workSlice';
 import WorklistTable from './components/WorklistTable';
 import OperationPanel from './components/OperationPanel';
+import { RootState, AppDispatch } from '../../states/store';
+import { Task } from '@/domain/work';
+import worklistToExam from '../../domain/patient/worklistToExam';
 
 const { useBreakpoint } = Grid;
 
@@ -11,11 +19,60 @@ const HistorylistPage: React.FC = () => {
   const screens = useBreakpoint();
   const [drawerVisible, setDrawerVisible] = useState(false);
 
+  const dispatch: AppDispatch = useDispatch();
+  const filters = useSelector((state: RootState) => state.workFilters);
+  const page = useSelector((state: RootState) => state.workPagination.page);
+  const pageSize = useSelector(
+    (state: RootState) => state.workPagination.pageSize
+  );
+  const selectedIds = useSelector(
+    (state: RootState) => state.workSelection.selectedIds
+  );
+  const worklistData = useSelector(
+    (state: RootState) => state.workEntities.data
+  );
+
+  useEffect(() => {
+    console.log(
+      'Fetching worklist data with filters:',
+      filters,
+      'page:',
+      page,
+      'pageSize:',
+      pageSize
+    );
+    dispatch(fetchWorkThunk({ page, pageSize, filters }));
+  }, [dispatch, filters, page, pageSize]);
+
+  const handleRowClick = (record: Task) => {
+    console.log('Row clicked:', JSON.stringify(record, null, 2));
+    console.log('Selected IDs before:', record.StudyInstanceUID);
+    dispatch(
+      workSelectionSlice.actions.setSelectedIds([record.StudyInstanceUID])
+    );
+  };
+
+  const handleRowDoubleClick = (record: Task) => {
+    console.log(
+      '[WorklistTable] Row double-clicked:',
+      JSON.stringify(record, null, 2)
+    );
+    worklistToExam(record);
+  };
+
   return (
     <div className="h-full">
       {screens.xs ? (
         <>
-          <WorklistTable />
+          <WorklistTable
+            worklistData={worklistData}
+            filters={filters}
+            page={page}
+            pageSize={pageSize}
+            selectedIds={selectedIds}
+            handleRowClick={handleRowClick}
+            handleRowDoubleClick={handleRowDoubleClick}
+          />
           <Button
             type="primary"
             shape="circle"
@@ -44,7 +101,15 @@ const HistorylistPage: React.FC = () => {
             span={screens.lg ? 18 : screens.md ? 20 : 24}
             className="overflow-auto"
           >
-            <WorklistTable />
+            <WorklistTable
+              worklistData={worklistData}
+              filters={filters}
+              page={page}
+              pageSize={pageSize}
+              selectedIds={selectedIds}
+              handleRowClick={handleRowClick}
+              handleRowDoubleClick={handleRowDoubleClick}
+            />
           </Col>
           <Col
             span={screens.lg ? 6 : screens.md ? 4 : 0}

src/pages/patient/components/WorklistTable.tsx

@@ -1,17 +1,10 @@
 import React, { useState } from 'react';
-import { useSelector, useDispatch } from 'react-redux';
-import { useEffect } from 'react';
-import {
-  fetchWorkThunk,
-  workSelectionSlice,
-} from '../../../states/patient/worklist/slices/workSlice';
 import { Table, TableColumnsType } from 'antd';
 import { FormattedMessage } from 'react-intl';
-import { RootState, AppDispatch } from '../../../states/store';
 import { Task, Task as DataType } from '@/domain/work';
-import worklistToExam from '../../../domain/patient/worklistToExam';
 import type { ResizeCallbackData } from 'react-resizable';
 import { Resizable } from 'react-resizable';
+import { WorkFilter } from '@/states/patient/worklist/types/workfilter';
 
 const columnsDef = [
   {
@@ -378,48 +371,25 @@ const ResizableTitle: React.FC<
   );
 };
 
-const WorklistTable: React.FC = () => {
-  const dispatch: AppDispatch = useDispatch();
-  const worklistData = useSelector(
-    (state: RootState) => state.workEntities.data
-  );
-  const filters = useSelector((state: RootState) => state.workFilters);
-  const page = useSelector((state: RootState) => state.workPagination.page);
-  const pageSize = useSelector(
-    (state: RootState) => state.workPagination.pageSize
-  );
-  const selectedIds = useSelector(
-    (state: RootState) => state.workSelection.selectedIds
-  );
-
-  useEffect(() => {
-    console.log(
-      'Fetching worklist data with filters:',
-      filters,
-      'page:',
-      page,
-      'pageSize:',
-      pageSize
-    );
-    dispatch(fetchWorkThunk({ page, pageSize, filters }));
-  }, [dispatch, filters, page, pageSize]);
-
-  const handleRowClick = (record: Task) => {
-    console.log('Row clicked:', JSON.stringify(record, null, 2));
-    console.log('Selected IDs before:', record.StudyInstanceUID);
-    dispatch(
-      workSelectionSlice.actions.setSelectedIds([record.StudyInstanceUID])
-    );
-  };
-
-  const handleRowDoubleClick = (record: Task) => {
-    console.log(
-      '[WorklistTable] Row double-clicked:',
-      JSON.stringify(record, null, 2)
-    );
-    worklistToExam(record);
-  };
+interface WorklistTableProps {
+  worklistData: Task[];
+  filters?: WorkFilter;
+  page?: number;
+  pageSize?: number;
+  selectedIds: string[];
+  handleRowClick: (record: Task) => void;
+  handleRowDoubleClick: (record: Task) => void;
+}
 
+const WorklistTable: React.FC<WorklistTableProps> = ({
+  worklistData,
+  // filters,
+  // page,
+  // pageSize,
+  selectedIds,
+  handleRowClick,
+  handleRowDoubleClick,
+}) => {
   const [columns, setColumns] = useState<TableColumnsType<DataType>>(
     columnsDef.map((col) => ({
       ...col,

src/pages/patient/worklist.tsx

@@ -1,9 +1,17 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Row, Col, Button, Drawer, Grid } from 'antd';
 import { SettingOutlined } from '@ant-design/icons';
 import { FormattedMessage } from 'react-intl';
+import { useSelector, useDispatch } from 'react-redux';
+import {
+  fetchWorkThunk,
+  workSelectionSlice,
+} from '../../states/patient/worklist/slices/workSlice';
 import WorklistTable from './components/WorklistTable';
 import OperationPanel from './components/OperationPanel';
+import { RootState, AppDispatch } from '../../states/store';
+import { Task } from '@/domain/work';
+import worklistToExam from '../../domain/patient/worklistToExam';
 
 const { useBreakpoint } = Grid;
 
@@ -11,11 +19,60 @@ const WorklistPage: React.FC = () => {
   const screens = useBreakpoint();
   const [drawerVisible, setDrawerVisible] = useState(false);
 
+  const dispatch: AppDispatch = useDispatch();
+  const filters = useSelector((state: RootState) => state.workFilters);
+  const page = useSelector((state: RootState) => state.workPagination.page);
+  const pageSize = useSelector(
+    (state: RootState) => state.workPagination.pageSize
+  );
+  const selectedIds = useSelector(
+    (state: RootState) => state.workSelection.selectedIds
+  );
+  const worklistData = useSelector(
+    (state: RootState) => state.workEntities.data
+  );
+
+  useEffect(() => {
+    console.log(
+      'Fetching worklist data with filters:',
+      filters,
+      'page:',
+      page,
+      'pageSize:',
+      pageSize
+    );
+    dispatch(fetchWorkThunk({ page, pageSize, filters }));
+  }, [dispatch, filters, page, pageSize]);
+
+  const handleRowClick = (record: Task) => {
+    console.log('Row clicked:', JSON.stringify(record, null, 2));
+    console.log('Selected IDs before:', record.StudyInstanceUID);
+    dispatch(
+      workSelectionSlice.actions.setSelectedIds([record.StudyInstanceUID])
+    );
+  };
+
+  const handleRowDoubleClick = (record: Task) => {
+    console.log(
+      '[WorklistTable] Row double-clicked:',
+      JSON.stringify(record, null, 2)
+    );
+    worklistToExam(record);
+  };
+
   return (
     <div className="h-full">
       {screens.xs ? (
         <>
-          <WorklistTable />
+          <WorklistTable
+            worklistData={worklistData}
+            filters={filters}
+            page={page}
+            pageSize={pageSize}
+            selectedIds={selectedIds}
+            handleRowClick={handleRowClick}
+            handleRowDoubleClick={handleRowDoubleClick}
+          />
           <Button
             type="primary"
             shape="circle"
@@ -44,7 +101,15 @@ const WorklistPage: React.FC = () => {
             span={screens.lg ? 18 : screens.md ? 20 : 24}
             className="overflow-auto"
           >
-            <WorklistTable />
+            <WorklistTable
+              worklistData={worklistData}
+              filters={filters}
+              page={page}
+              pageSize={pageSize}
+              selectedIds={selectedIds}
+              handleRowClick={handleRowClick}
+              handleRowDoubleClick={handleRowDoubleClick}
+            />
           </Col>
           <Col
             span={screens.lg ? 6 : screens.md ? 4 : 0}