diff --git a/frontend/cypress/e2e/side_window/prior_notification_list/pagination.spec.ts b/frontend/cypress/e2e/side_window/prior_notification_list/pagination.spec.ts index 8447b856ee..3d0dcb15ea 100644 --- a/frontend/cypress/e2e/side_window/prior_notification_list/pagination.spec.ts +++ b/frontend/cypress/e2e/side_window/prior_notification_list/pagination.spec.ts @@ -20,29 +20,31 @@ context('Side Window > Prior Notification List > Pagination', () => { LogbookMessage.ApiListExtraData > = interception.response!.body - const fakeData = [ - ...responseBody.data, - ...responseBody.data.map(priorNotification => ({ ...priorNotification, id: getPseudoRandomString() })) - ] - - cy.intercept('GET', `${apiPathBase}*pageNumber=0&pageSize=10*`, { + const fakeData = Array.from({ length: 100 }).flatMap(() => + responseBody.data.map(priorNotification => ({ + ...priorNotification, + id: getPseudoRandomString() + })) + ) + + cy.intercept('GET', `${apiPathBase}*pageNumber=0&pageSize=50*`, { body: { ...responseBody, - data: fakeData.slice(0, 10), + data: fakeData.slice(0, 50), lastPageNumber: 1, pageNumber: 0, - pageSize: 10, - totalLength: 20 + pageSize: 50, + totalLength: 100 } }).as('getPriorNotificationsFirstPage') - cy.intercept('GET', `${apiPathBase}*pageNumber=0&pageSize=20*`, { + cy.intercept('GET', `${apiPathBase}*pageNumber=0&pageSize=100*`, { body: { ...responseBody, - data: fakeData.slice(0, 10), + data: fakeData.slice(0, 100), lastPageNumber: 1, pageNumber: 0, - pageSize: 20, - totalLength: 20 + pageSize: 100, + totalLength: 100 } }).as('getPriorNotificationsSecondPage') @@ -50,11 +52,11 @@ context('Side Window > Prior Notification List > Pagination', () => { cy.wait('@getPriorNotificationsFirstPage') - cy.get('button').contains('Charger les 10 préavis suivants').click() + cy.get('button').contains('Charger les 50 préavis suivants').click() cy.wait('@getPriorNotificationsSecondPage') - cy.get('button').contains('Charger les 10 préavis suivants').should('not.exist') + cy.get('button').contains('Charger les 50 préavis suivants').should('not.exist') }) }) }) diff --git a/frontend/src/features/PriorNotification/components/PriorNotificationList/constants.ts b/frontend/src/features/PriorNotification/components/PriorNotificationList/constants.ts index ea54d5241b..ff25fa1cb4 100644 --- a/frontend/src/features/PriorNotification/components/PriorNotificationList/constants.ts +++ b/frontend/src/features/PriorNotification/components/PriorNotificationList/constants.ts @@ -74,7 +74,7 @@ export const DEFAULT_LIST_FILTER_VALUES: ListFilter = { statuses: undefined } -export const DEFAULT_PAGE_SIZE = 10 +export const DEFAULT_PAGE_SIZE = 50 export const COMMUNITY_PRIOR_NOTIFICATION_TYPES = ['Préavis communautaire', 'Préavis navire tiers'] export const DESIGNATED_PORTS_PRIOR_NOTIFICATION_TYPE_PREFIX = 'Ports désignés' diff --git a/frontend/src/features/PriorNotification/components/PriorNotificationList/index.tsx b/frontend/src/features/PriorNotification/components/PriorNotificationList/index.tsx index cd0182884d..43f34661e1 100644 --- a/frontend/src/features/PriorNotification/components/PriorNotificationList/index.tsx +++ b/frontend/src/features/PriorNotification/components/PriorNotificationList/index.tsx @@ -14,14 +14,13 @@ import { useListSorting } from '@hooks/useListSorting' import { useLoadingState } from '@hooks/useLoadingState' import { useMainAppDispatch } from '@hooks/useMainAppDispatch' import { useMainAppSelector } from '@hooks/useMainAppSelector' -import { customSentry, CustomSentryMeasurementName } from '@libs/customSentry' import { DisplayedErrorKey } from '@libs/DisplayedError/constants' import { Accent, Button, Icon, Size, TableWithSelectableRows, usePrevious } from '@mtes-mct/monitor-ui' import { skipToken } from '@reduxjs/toolkit/query' import { flexRender, getCoreRowModel, getExpandedRowModel, useReactTable } from '@tanstack/react-table' import { isLegacyFirefox } from '@utils/isLegacyFirefox' import { useIsSuperUser } from 'auth/hooks/useIsSuperUser' -import { useCallback, useEffect, useState } from 'react' +import { useCallback, useEffect, useRef, useState } from 'react' import styled, { css } from 'styled-components' import { getTableColumns } from './columns' @@ -43,6 +42,8 @@ type PriorNotificationListProps = Readonly<{ isFromUrl: boolean }> export function PriorNotificationList({ isFromUrl }: PriorNotificationListProps) { + const lastFetchStartDateRef = useRef(undefined) + const dispatch = useMainAppDispatch() const listFilter = useMainAppSelector(state => state.priorNotification.listFilterValues) const openedPriorNotificationDetail = useMainAppSelector( @@ -54,6 +55,7 @@ export function PriorNotificationList({ isFromUrl }: PriorNotificationListProps) const isSuperUser = useIsSuperUser() const [rowSelection, setRowSelection] = useState({}) + const [lastFetchDuration, setLastFetchDuration] = useState(undefined) const { apiPaginationParams, reactTablePaginationState, setReactTablePaginationState } = useListPagination( DEFAULT_PAGE_SIZE, @@ -145,12 +147,17 @@ export function PriorNotificationList({ isFromUrl }: PriorNotificationListProps) } }, [previousListFilter, listFilter, table]) - if (isBodyLoaderVisible) { - customSentry.startMeasurement(CustomSentryMeasurementName.PRIOR_NOTIFICATION_LIST_BODY_LOADING, '0') - customSentry.startMeasurement(CustomSentryMeasurementName.PRIOR_NOTIFICATION_LIST_BODY_SPINNER, '0') - } else { - customSentry.endMeasurement(CustomSentryMeasurementName.PRIOR_NOTIFICATION_LIST_BODY_SPINNER, '0', 2000) - } + useEffect(() => { + if (isFetching) { + lastFetchStartDateRef.current = Date.now() + + return + } + + if (lastFetchStartDateRef.current) { + setLastFetchDuration(Date.now() - lastFetchStartDateRef.current) + } + }, [isFetching]) return ( <> @@ -176,7 +183,7 @@ export function PriorNotificationList({ isFromUrl }: PriorNotificationListProps) {`${ isBodyLoaderVisible || isError || totalLength === undefined ? '...' : totalLength - } préavis (tous les horaires sont en UTC)`} + } préavis (tous les horaires sont en UTC) en ${isBodyLoaderVisible || isError || lastFetchDuration === undefined ? '...' : `${lastFetchDuration / 1000}s`}`} {isSuperUser && (