diff --git a/client/sites/tools/logs/index.tsx b/client/sites/tools/logs/index.tsx index 79c0ac02645a4a..87c8add39c6c07 100644 --- a/client/sites/tools/logs/index.tsx +++ b/client/sites/tools/logs/index.tsx @@ -8,7 +8,8 @@ import { sprintf } from '@wordpress/i18n'; import { download } from '@wordpress/icons'; import { useI18n } from '@wordpress/react-i18n'; import { translate } from 'i18n-calypso'; -import { useCallback, useEffect, useState } from 'react'; +import { useCallback, useEffect, useState, useMemo } from 'react'; +import { v4 as uuid } from 'uuid'; import QuerySiteSettings from 'calypso/components/data/query-site-settings'; import InlineSupportLink from 'calypso/components/inline-support-link'; import { useLocalizedMoment } from 'calypso/components/localized-moment'; @@ -263,7 +264,6 @@ export const SiteLogsDataViews = ( { logType }: { logType: LogType } ) => { // - translate for field labels https://github.com/Automattic/wp-calypso/blob/update/logs-to-dataviews/client/sites/tools/logs/components/site-logs-toolbar/index.tsx#L82 const { __ } = useI18n(); - const moment = useLocalizedMoment(); const getLatestDateRange = useCallback( () => { const startTime = moment().subtract( 7, 'd' ); @@ -271,6 +271,9 @@ export const SiteLogsDataViews = ( { logType }: { logType: LogType } ) => { return { startTime, endTime }; }, [ moment ] ); + // Can we actually derive an unique ID from the data? + const getItemId = useMemo( () => () => uuid(), [] ); + const [ dateRange, setDateRange ] = useState( () => { const latest = getLatestDateRange(); const dateRangeQuery = getDateRangeQueryParam( moment ); @@ -426,6 +429,7 @@ export const SiteLogsDataViews = ( { logType }: { logType: LogType } ) => { view={ view } onChangeView={ onChangeView } search={ false } + getItemId={ getItemId } defaultLayouts={ { table: {} } } header={