[UX] fix bug with scroll to top of table when refetch data

MTES-MCT · Nov 14, 2024 · 2086560 · 2086560
1 parent 46d0a00
commit 2086560
Show file tree

Hide file tree

Showing 15 changed files with 167 additions and 112 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -32,7 +32,7 @@
     "@sentry/tracing": "7.114.0",
     "@svgr/webpack": "8.1.0",
     "@tanstack/react-table": "8.20.5",
-    "@tanstack/react-virtual": "beta",
+    "@tanstack/react-virtual": "3.10.9",
     "classnames": "2.5.1",
     "compressorjs": "1.2.1",
     "dayjs": "1.11.13",

diff --git a/frontend/src/features/Dashboard/components/DashboardsList/Columns/index.tsx b/frontend/src/features/Dashboard/components/DashboardsList/Columns/index.tsx
@@ -1,5 +1,6 @@
 import { DateCell } from '@components/Table/DateCell'
 import { LocalizeCell } from '@components/Table/LocalizeCell'
+import { StyledSkeletonRow } from '@features/commonComponents/Skeleton'
 import { type Row } from '@tanstack/react-table'
 
 import { ControlUnitsCell } from '../Rows/ControlUnitsCell'
@@ -8,43 +9,50 @@ import { RegulatoryAreasThemesCell } from '../Rows/RegulatoryAreasThemesCell'
 import { TotalSelectedItemsCell } from '../Rows/TotalSelectedItemsCell'
 
 import type { Dashboard } from '@features/Dashboard/types'
+import type { ControlUnit } from '@mtes-mct/monitor-ui'
+import type { RegulatoryLayerCompactFromAPI } from 'domain/entities/regulatory'
 
-export const Columns = (regulatoryAreas, controlUnits, legacyFirefoxOffset: number = 0) => [
+export const Columns = (
+  regulatoryAreas: RegulatoryLayerCompactFromAPI[],
+  controlUnits: ControlUnit.ControlUnit[] | undefined,
+  legacyFirefoxOffset: number = 0,
+  isFetching: boolean = false
+) => [
   {
     accessorFn: row => row.seaFront,
-    cell: info => info.getValue(),
+    cell: info => (isFetching ? <StyledSkeletonRow /> : info.getValue()),
     enableSorting: true,
     header: () => 'Façade',
     id: 'seaFront',
     size: 104 + legacyFirefoxOffset
   },
   {
     accessorFn: row => row.name,
-    cell: info => info.getValue(),
+    cell: info => (isFetching ? <StyledSkeletonRow /> : info.getValue()),
     enableSorting: true,
     header: () => 'Nom',
     id: 'name',
     size: 215 + legacyFirefoxOffset
   },
   {
     accessorFn: row => row.createdAt,
-    cell: info => <DateCell date={info.getValue()} />,
+    cell: info => (isFetching ? <StyledSkeletonRow /> : <DateCell date={info.getValue()} />),
     enableSorting: true,
     header: () => 'Créé le ...',
     id: 'createdAt',
     size: 212 + legacyFirefoxOffset
   },
   {
     accessorFn: row => row.updatedAt,
-    cell: info => <DateCell date={info.getValue()} />,
+    cell: info => (isFetching ? <StyledSkeletonRow /> : <DateCell date={info.getValue()} />),
     enableSorting: true,
     header: () => 'Mis à jour le ...',
     id: 'updatedAt',
     size: 212 + legacyFirefoxOffset
   },
   {
     accessorFn: row => row.controlUnitIds,
-    cell: info => <ControlUnitsCell controlUnitIds={info.getValue()} />,
+    cell: info => (isFetching ? <StyledSkeletonRow /> : <ControlUnitsCell controlUnitIds={info.getValue()} />),
     enableSorting: true,
     header: () => 'Unité (Administration)',
     id: 'controlUnitIds',
@@ -62,7 +70,7 @@ export const Columns = (regulatoryAreas, controlUnits, legacyFirefoxOffset: numb
   },
   {
     accessorFn: row => row.regulatoryAreaIds,
-    cell: info => <RegulatoryAreasThemesCell themeIds={info.getValue()} />,
+    cell: info => (isFetching ? <StyledSkeletonRow /> : <RegulatoryAreasThemesCell themeIds={info.getValue()} />),
     enableSorting: true,
     header: () => 'Thématiques',
     id: 'regulatoryAreaIds',
@@ -71,15 +79,15 @@ export const Columns = (regulatoryAreas, controlUnits, legacyFirefoxOffset: numb
       const themeIdA = rowA.original[columnId][0]
       const themeIdB = rowB.original[columnId][0]
 
-      const themeA: string = regulatoryAreas?.entities[themeIdA]?.layer_name ?? ''
-      const themeB: string = regulatoryAreas?.entities[themeIdB]?.layer_name ?? ''
+      const themeA: string = regulatoryAreas?.[themeIdA]?.layer_name ?? ''
+      const themeB: string = regulatoryAreas?.[themeIdB]?.layer_name ?? ''
 
       return themeA?.localeCompare(themeB)
     }
   },
   {
     accessorFn: row => row,
-    cell: ({ row }) => <TotalSelectedItemsCell row={row} />,
+    cell: ({ row }) => (isFetching ? <StyledSkeletonRow /> : <TotalSelectedItemsCell row={row} />),
     enableSorting: true,
     header: () => "Nb d'éléments sélectionnés",
     id: 'totalSelectedItems',
@@ -106,15 +114,15 @@ export const Columns = (regulatoryAreas, controlUnits, legacyFirefoxOffset: numb
   },
   {
     accessorFn: row => row.geom,
-    cell: info => <LocalizeCell geom={info.getValue()} />,
+    cell: info => (isFetching ? <StyledSkeletonRow /> : <LocalizeCell geom={info.getValue()} />),
     enableSorting: false,
     header: () => '',
     id: 'geom',
     size: 52 + legacyFirefoxOffset
   },
   {
     accessorFn: row => row.id,
-    cell: info => <EditDashboardCell id={info.getValue()} />,
+    cell: info => (isFetching ? <StyledSkeletonRow /> : <EditDashboardCell id={info.getValue()} />),
     enableSorting: false,
     header: () => '',
     id: 'edit',

diff --git a/frontend/src/features/Dashboard/components/DashboardsList/DashboardsTable.tsx b/frontend/src/features/Dashboard/components/DashboardsList/DashboardsTable.tsx
@@ -16,10 +16,11 @@ import type { Dashboard } from '@features/Dashboard/types'
 
 interface DashboardsTableProps {
   dashboards: Dashboard.Dashboard[]
+  isFetching: boolean
   isLoading: boolean
 }
 
-export function DashboardsTable({ dashboards, isLoading }: DashboardsTableProps) {
+export function DashboardsTable({ dashboards, isFetching, isLoading }: DashboardsTableProps) {
   const tableContainerRef = useRef<HTMLDivElement>(null)
 
   const { pathname } = useLocation()
@@ -31,16 +32,17 @@ export function DashboardsTable({ dashboards, isLoading }: DashboardsTableProps)
   const columns = useMemo(
     () =>
       isLoading
-        ? Columns(regulatoryAreas, controlUnits, legacyFirefoxOffset).map(column => ({
-            ...column,
-            cell: StyledSkeletonRow
-          }))
-        : Columns(regulatoryAreas, controlUnits, legacyFirefoxOffset),
-    [isLoading, controlUnits, regulatoryAreas, legacyFirefoxOffset]
+        ? Columns(Object.values(regulatoryAreas?.entities ?? {}), controlUnits, legacyFirefoxOffset, false).map(
+            column => ({
+              ...column,
+              cell: StyledSkeletonRow
+            })
+          )
+        : Columns(Object.values(regulatoryAreas?.entities ?? {}), controlUnits, legacyFirefoxOffset, isFetching),
+    [isFetching, isLoading, controlUnits, regulatoryAreas, legacyFirefoxOffset]
   )
 
   const [sorting, setSorting] = useState<SortingState>([{ desc: true, id: 'updatedAt' }])
-
   const tableData = useMemo(() => (isLoading ? Array(5).fill({}) : dashboards), [isLoading, dashboards])
 
   const table = useTable({

diff --git a/frontend/src/features/Dashboard/components/DashboardsList/index.tsx b/frontend/src/features/Dashboard/components/DashboardsList/index.tsx
@@ -4,9 +4,15 @@ import { SideWindowContent } from '@features/SideWindow/style'
 import styled from 'styled-components'
 
 import { DashboardsTable } from './DashboardsTable'
+import { TWO_MINUTES } from '../../../../constants'
 
 export function DashboardsList() {
-  const { data: dashboards, isError, isFetching, isLoading } = useGetDashboardsQuery()
+  const {
+    data: dashboards,
+    isError,
+    isFetching,
+    isLoading
+  } = useGetDashboardsQuery(undefined, { pollingInterval: TWO_MINUTES })
 
   return (
     <SideWindowContent>
@@ -20,7 +26,7 @@ export function DashboardsList() {
       {isError ? (
         <p>Erreur au chargement des données</p>
       ) : (
-        <DashboardsTable dashboards={dashboards ?? []} isLoading={isLoading || isFetching} />
+        <DashboardsTable dashboards={dashboards ?? []} isFetching={isFetching} isLoading={isLoading} />
       )}
     </SideWindowContent>
   )