diff --git a/src/frontend/apps/standalone_site/src/features/PortabilityRequests/components/PortabilityRequests.tsx b/src/frontend/apps/standalone_site/src/features/PortabilityRequests/components/PortabilityRequests.tsx index b81160bbca..588b189b7e 100644 --- a/src/frontend/apps/standalone_site/src/features/PortabilityRequests/components/PortabilityRequests.tsx +++ b/src/frontend/apps/standalone_site/src/features/PortabilityRequests/components/PortabilityRequests.tsx @@ -5,9 +5,9 @@ import { usePagination, } from '@openfun/cunningham-react'; import { Box, Button, Heading, Text } from 'grommet'; -import { CenterLoader } from 'lib-components'; +import { CenterLoader, PortabilityRequest } from 'lib-components'; import { useEffect, useMemo, useState } from 'react'; -import { defineMessages, useIntl } from 'react-intl'; +import { IntlShape, defineMessages, useIntl } from 'react-intl'; import { WhiteCard } from 'components/Cards'; import { ITEM_PER_PAGE } from 'conf/global'; @@ -102,6 +102,38 @@ const messages = defineMessages({ }, }); +/** + * Clean the data to be displayed in the table + */ +const cleanupPortabilityRequest = ( + portabilityRequests: PortabilityRequest[] | undefined, + intl: IntlShape, +) => + portabilityRequests + ? portabilityRequests.map((portabilityRequest) => ({ + id: portabilityRequest.id, + created_on: `${new Date( + portabilityRequest.created_on, + ).toLocaleDateString(navigator.language)} ${new Date( + portabilityRequest.created_on, + ).toLocaleTimeString(navigator.language)}`, + portabilityRequest: intl.formatMessage( + messages.rowPortabilityRequestText, + { + from_playlist: portabilityRequest.from_playlist.title, + for_playlist: portabilityRequest.for_playlist.title, + }, + ), + consumerSite: portabilityRequest.from_lti_consumer_site?.name, + fromUserEmail: + portabilityRequest?.from_user?.email || + intl.formatMessage(messages.requestFromLtiUser), + updatedUserEmail: portabilityRequest?.updated_by_user?.email, + state: portabilityRequest.state, + can_accept_or_reject: portabilityRequest.can_accept_or_reject, + })) + : []; + interface PortabilityRequestsProps { state?: string; for_playlist_id?: string; @@ -153,35 +185,8 @@ export const PortabilityRequests = ({ const hasNoResult = !isError && data && !data?.count && !isLoading; const hasResult = !isError && data && data?.count && !isLoading; - /** - * Clean the data to be displayed in the table - */ const rows = useMemo( - () => - data?.results - ? data?.results.map((portabilityRequest) => ({ - id: portabilityRequest.id, - created_on: `${new Date( - portabilityRequest.created_on, - ).toLocaleDateString(navigator.language)} ${new Date( - portabilityRequest.created_on, - ).toLocaleTimeString(navigator.language)}`, - portabilityRequest: intl.formatMessage( - messages.rowPortabilityRequestText, - { - from_playlist: portabilityRequest.from_playlist.title, - for_playlist: portabilityRequest.for_playlist.title, - }, - ), - consumerSite: portabilityRequest.from_lti_consumer_site?.name, - fromUserEmail: - portabilityRequest?.from_user?.email || - intl.formatMessage(messages.requestFromLtiUser), - updatedUserEmail: portabilityRequest?.updated_by_user?.email, - state: portabilityRequest.state, - can_accept_or_reject: portabilityRequest.can_accept_or_reject, - })) - : [], + () => cleanupPortabilityRequest(data?.results, intl), [data?.results, intl], );