[Tech] refacto

MTES-MCT · Dec 20, 2024 · b92a4fc · b92a4fc
1 parent ce228cb
commit b92a4fc
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 54 deletions.
diff --git a/frontend/src/components/Table/PaddingForVirtualizeTable.tsx b/frontend/src/components/Table/PaddingForVirtualizeTable.tsx
@@ -0,0 +1,28 @@
+import { notUndefined, Virtualizer, type VirtualItem } from '@tanstack/react-virtual'
+
+export function PaddingForVirtualizeTable({
+  columLength,
+  height,
+  name
+}: {
+  columLength: number
+  height: number
+  name: string
+}) {
+  return (
+    <tr>
+      <td aria-label={`padding ${name}`} colSpan={columLength} style={{ height }} />
+    </tr>
+  )
+}
+
+export const getPaddingValuesForVirtualizeTable = (
+  virtualRows: VirtualItem[],
+  rowVirtualizer: Virtualizer<HTMLDivElement, Element>
+): [number, number] =>
+  virtualRows?.length > 0
+    ? [
+        notUndefined(virtualRows[0]).start - rowVirtualizer.options.scrollMargin,
+        rowVirtualizer.getTotalSize() - notUndefined(virtualRows[virtualRows.length - 1]).end
+      ]
+    : [0, 0]
diff --git a/frontend/src/components/Table/index.tsx b/frontend/src/components/Table/index.tsx
@@ -1,20 +1,14 @@
 import { ChevronIcon } from '@features/commonStyles/icons/ChevronIcon.style'
 import { Icon, SimpleTable } from '@mtes-mct/monitor-ui'
 import { flexRender } from '@tanstack/react-table'
-import { notUndefined } from '@tanstack/react-virtual'
 import { forwardRef } from 'react'
 import styled from 'styled-components'
 
+import { getPaddingValuesForVirtualizeTable, PaddingForVirtualizeTable } from './PaddingForVirtualizeTable'
 import { TableContainer } from './style'
 
 export function TableWithRef({ columnsLength, rows, rowVirtualizer, table, virtualRows }, ref) {
-  const [before, after] =
-    virtualRows.length > 0
-      ? [
-          notUndefined(virtualRows[0]).start - rowVirtualizer.options.scrollMargin,
-          rowVirtualizer.getTotalSize() - notUndefined(virtualRows[virtualRows.length - 1]).end
-        ]
-      : [0, 0]
+  const [before, after] = getPaddingValuesForVirtualizeTable(virtualRows, rowVirtualizer)
 
   return (
     <TableContainer ref={ref}>
@@ -43,11 +37,7 @@ export function TableWithRef({ columnsLength, rows, rowVirtualizer, table, virtu
             </tr>
           ))}
         </SimpleTable.Head>
-        {before > 0 && (
-          <tr>
-            <td aria-label="padding before" colSpan={columnsLength} style={{ height: before }} />
-          </tr>
-        )}
+        {before > 0 && <PaddingForVirtualizeTable columLength={columnsLength} height={before} name="before" />}
         <tbody>
           {virtualRows?.map(virtualRow => {
             const row = rows[virtualRow?.index]
@@ -75,11 +65,7 @@ export function TableWithRef({ columnsLength, rows, rowVirtualizer, table, virtu
             )
           })}
         </tbody>
-        {after > 0 && (
-          <tr>
-            <td aria-label="padding after" colSpan={columnsLength} style={{ height: after }} />
-          </tr>
-        )}
+        {after > 0 && <PaddingForVirtualizeTable columLength={columnsLength} height={after} name="after" />}
       </SimpleTable.Table>
     </TableContainer>
   )

diff --git a/frontend/src/features/Reportings/components/ReportingsList/ReportingsTable.tsx b/frontend/src/features/Reportings/components/ReportingsList/ReportingsTable.tsx
@@ -1,3 +1,7 @@
+import {
+  getPaddingValuesForVirtualizeTable,
+  PaddingForVirtualizeTable
+} from '@components/Table/PaddingForVirtualizeTable'
 import { TableContainer } from '@components/Table/style'
 import { TableWithSelectableRowsHeader } from '@components/Table/TableWithSelectableRows/Header'
 import { StyledSkeletonRow } from '@features/commonComponents/Skeleton'
@@ -7,7 +11,6 @@ import { useTable } from '@hooks/useTable'
 import { useTableVirtualizer } from '@hooks/useTableVirtualizer'
 import { TableWithSelectableRows } from '@mtes-mct/monitor-ui'
 import { flexRender, type RowSelectionState, type SortingState } from '@tanstack/react-table'
-import { notUndefined } from '@tanstack/react-virtual'
 import { isLegacyFirefox } from '@utils/isLegacyFirefox'
 import { paths } from 'paths'
 import { useMemo, useRef, useState } from 'react'
@@ -68,13 +71,8 @@ export function ReportingsTable({
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [table, rowSelection]
   )
-  const [before, after] =
-    virtualRows.length > 0
-      ? [
-          notUndefined(virtualRows[0]).start - rowVirtualizer.options.scrollMargin,
-          rowVirtualizer.getTotalSize() - notUndefined(virtualRows[virtualRows.length - 1]).end
-        ]
-      : [0, 0]
+
+  const [before, after] = getPaddingValuesForVirtualizeTable(virtualRows, rowVirtualizer)
 
   const resetSelection = () => {
     table.resetRowSelection(true)
@@ -94,11 +92,7 @@ export function ReportingsTable({
               <TableWithSelectableRowsHeader key={headerGroup.id} headerGroup={headerGroup} />
             ))}
           </TableWithSelectableRows.Head>
-          {before > 0 && (
-            <tr>
-              <td aria-label="padding before" colSpan={columns.length} style={{ height: before }} />
-            </tr>
-          )}
+          {before > 0 && <PaddingForVirtualizeTable columLength={columns.length} height={before} name="before" />}
           <tbody>
             {virtualRows?.map(virtualRow => {
               const row = rows[virtualRow.index]
@@ -130,11 +124,7 @@ export function ReportingsTable({
               )
             })}
           </tbody>
-          {after > 0 && (
-            <tr>
-              <td aria-label="padding after" colSpan={columns.length} style={{ height: after }} />
-            </tr>
-          )}
+          {after > 0 && <PaddingForVirtualizeTable columLength={columns.length} height={after} name="after" />}
         </StyledTable>
       </TableContainer>
     </>

diff --git a/frontend/src/features/VigilanceArea/components/VigilanceAreasList/VigilanceAreasTable.tsx b/frontend/src/features/VigilanceArea/components/VigilanceAreasList/VigilanceAreasTable.tsx
@@ -1,11 +1,14 @@
+import {
+  getPaddingValuesForVirtualizeTable,
+  PaddingForVirtualizeTable
+} from '@components/Table/PaddingForVirtualizeTable'
 import { TableContainer } from '@components/Table/style'
 import { TableWithSelectableRowsHeader } from '@components/Table/TableWithSelectableRows/Header'
 import { StyledSkeletonRow } from '@features/commonComponents/Skeleton'
 import { useTable } from '@hooks/useTable'
 import { useTableVirtualizer } from '@hooks/useTableVirtualizer'
 import { TableWithSelectableRows } from '@mtes-mct/monitor-ui'
 import { flexRender, type SortingState } from '@tanstack/react-table'
-import { notUndefined } from '@tanstack/react-virtual'
 import { isLegacyFirefox } from '@utils/isLegacyFirefox'
 import { paths } from 'paths'
 import { useMemo, useRef, useState } from 'react'
@@ -55,13 +58,7 @@ export function VigilanceAreasTable({
 
   const virtualRows = rowVirtualizer.getVirtualItems()
 
-  const [before, after] =
-    virtualRows.length > 0
-      ? [
-          notUndefined(virtualRows[0]).start - rowVirtualizer.options.scrollMargin,
-          rowVirtualizer.getTotalSize() - notUndefined(virtualRows[virtualRows.length - 1]).end
-        ]
-      : [0, 0]
+  const [before, after] = getPaddingValuesForVirtualizeTable(virtualRows, rowVirtualizer)
 
   return (
     <TableContainer ref={tableContainerRef}>
@@ -71,11 +68,7 @@ export function VigilanceAreasTable({
             <TableWithSelectableRowsHeader key={headerGroup.id} headerGroup={headerGroup} />
           ))}
         </TableWithSelectableRows.Head>
-        {before > 0 && (
-          <tr>
-            <td aria-label="padding before" colSpan={columns.length} style={{ height: before }} />
-          </tr>
-        )}
+        {before > 0 && <PaddingForVirtualizeTable columLength={columns.length} height={before} name="before" />}
         <tbody>
           {virtualRows?.map(virtualRow => {
             const row = rows[virtualRow.index]
@@ -100,11 +93,7 @@ export function VigilanceAreasTable({
             )
           })}
         </tbody>
-        {after > 0 && (
-          <tr>
-            <td aria-label="padding after" colSpan={columns.length} style={{ height: after }} />
-          </tr>
-        )}
+        {after > 0 && <PaddingForVirtualizeTable columLength={columns.length} height={after} name="after" />}
       </TableWithSelectableRows.Table>
     </TableContainer>
   )