fix: react-timeago issue

Unleash · Aug 20, 2024 · ced8468 · ced8468
1 parent 8e2ae6c
commit ced8468
Show file tree

Hide file tree

Showing 11 changed files with 19 additions and 3 deletions.
diff --git a/frontend/src/component/application/ApplicationChart.tsx b/frontend/src/component/application/ApplicationChart.tsx
@@ -307,6 +307,7 @@ export const ApplicationChart = ({ data }: IApplicationChartProps) => {
                                             <StyledCell>
                                                 {environment.lastSeen && (
                                                     <TimeAgo
+                                                        key={`${environment.lastSeen}`}
                                                         minPeriod={60}
                                                         date={
                                                             new Date(

diff --git a/frontend/src/component/archive/ArchiveTable/FeatureArchivedCell/FeatureArchivedCell.tsx b/frontend/src/component/archive/ArchiveTable/FeatureArchivedCell/FeatureArchivedCell.tsx
@@ -38,6 +38,7 @@ export const FeatureArchivedCell: VFC<IFeatureArchivedCellProps> = ({
             >
                 <Typography noWrap variant='body2' data-loading>
                     <TimeAgo
+                        key={`${archivedAt}`}
                         date={new Date(archivedAt)}
                         title=''
                         live={false}

diff --git a/...ponent/changeRequest/ChangeRequestOverview/ChangeRequestComments/ChangeRequestComment.tsx b/...ponent/changeRequest/ChangeRequestOverview/ChangeRequestComments/ChangeRequestComment.tsx
@@ -37,6 +37,7 @@ export const ChangeRequestComment: FC<{ comment: IChangeRequestComment }> = ({
                     <Typography color='text.secondary' component='span'>
                         commented{' '}
                         <TimeAgo
+                            key={`${comment.createdAt}`}
                             minPeriod={60}
                             date={new Date(comment.createdAt)}
                         />

diff --git a/...component/changeRequest/ChangeRequestOverview/ChangeRequestHeader/ChangeRequestHeader.tsx b/...component/changeRequest/ChangeRequestOverview/ChangeRequestHeader/ChangeRequestHeader.tsx
@@ -40,6 +40,7 @@ export const ChangeRequestHeader: FC<{ changeRequest: ChangeRequestType }> = ({
                 >
                     Created{' '}
                     <TimeAgo
+                        key={`${changeRequest.createdAt}`}
                         minPeriod={60}
                         date={new Date(changeRequest.createdAt)}
                     />{' '}

diff --git a/frontend/src/component/common/Notifications/Notification.tsx b/frontend/src/component/common/Notifications/Notification.tsx
@@ -158,6 +158,7 @@ export const Notification = ({
 
                     <StyledTimeAgoTypography>
                         <TimeAgo
+                            key={`${notification.createdAt}`}
                             date={new Date(notification.createdAt)}
                             minPeriod={60}
                         />

diff --git a/frontend/src/component/common/Table/cells/FeatureSeenCell/FeatureSeenCell.tsx b/frontend/src/component/common/Table/cells/FeatureSeenCell/FeatureSeenCell.tsx
@@ -98,6 +98,7 @@ export const FeatureSeenCell: VFC<IFeatureSeenCellProps> = ({
             condition={Boolean(lastSeenAt)}
             show={
                 <TimeAgo
+                    key={`${lastSeenAt}`}
                     date={lastSeenAt!}
                     title=''
                     live={false}

diff --git a/frontend/src/component/common/Table/cells/FeatureSeenCell/LastSeenTooltip.tsx b/frontend/src/component/common/Table/cells/FeatureSeenCell/LastSeenTooltip.tsx
@@ -99,6 +99,7 @@ export const LastSeenTooltip = ({
                                         condition={Boolean(lastSeenAt)}
                                         show={
                                             <TimeAgo
+                                                key={`${lastSeenAt}`}
                                                 date={lastSeenAt!}
                                                 title=''
                                                 live={false}

diff --git a/frontend/src/component/common/Table/cells/TimeAgoCell/TimeAgoCell.tsx b/frontend/src/component/common/Table/cells/TimeAgoCell/TimeAgoCell.tsx
@@ -1,6 +1,6 @@
 import { Tooltip, Typography } from '@mui/material';
 import { useLocationSettings } from 'hooks/useLocationSettings';
-import type { VFC } from 'react';
+import type { FC } from 'react';
 import { formatDateYMD } from 'utils/formatDate';
 import { TextCell } from '../TextCell/TextCell';
 import TimeAgo from 'react-timeago';
@@ -13,7 +13,7 @@ interface ITimeAgoCellProps {
     dateFormat?: (value: string | number | Date, locale: string) => string;
 }
 
-export const TimeAgoCell: VFC<ITimeAgoCellProps> = ({
+export const TimeAgoCell: FC<ITimeAgoCellProps> = ({
     value,
     live = false,
     emptyText,
@@ -35,7 +35,12 @@ export const TimeAgoCell: VFC<ITimeAgoCellProps> = ({
                     variant='body2'
                     data-loading
                 >
-                    <TimeAgo date={new Date(value)} live={live} title={''} />
+                    <TimeAgo
+                        key={`${value}`}
+                        date={new Date(value)}
+                        live={live}
+                        title={''}
+                    />
                 </Typography>
             </Tooltip>
         </TextCell>

diff --git a/frontend/src/component/feature/FeatureView/FeatureEnvironmentSeen/FeatureEnvironmentSeen.tsx b/frontend/src/component/feature/FeatureView/FeatureEnvironmentSeen/FeatureEnvironmentSeen.tsx
@@ -89,6 +89,7 @@ export const FeatureEnvironmentSeen = ({
         <>
             {lastSeen ? (
                 <TimeAgo
+                    key={`${lastSeen}`}
                     date={lastSeen}
                     title=''
                     live={false}

diff --git a/...omponent/feature/FeatureView/FeatureOverview/FeatureLifecycle/FeatureLifecycleTooltip.tsx b/...omponent/feature/FeatureView/FeatureOverview/FeatureLifecycle/FeatureLifecycleTooltip.tsx
@@ -117,6 +117,7 @@ const LastSeenIcon: FC<{
 
     return (
         <TimeAgo
+            key={`${lastSeen}`}
             date={lastSeen}
             title=''
             live={false}
@@ -230,6 +231,7 @@ const Environments: FC<{
                         </CenteredBox>
                         <CenteredBox>
                             <TimeAgo
+                                key={`${environment.lastSeenAt}`}
                                 minPeriod={60}
                                 date={environment.lastSeenAt}
                             />

diff --git a/frontend/src/component/project/NewProjectCard/ProjectArchiveCard.tsx b/frontend/src/component/project/NewProjectCard/ProjectArchiveCard.tsx
@@ -91,6 +91,7 @@ export const ProjectArchiveCard: FC<ProjectArchiveCardProps> = ({
                                     <p data-loading>
                                         Archived:{' '}
                                         <TimeAgo
+                                            key={`${archivedAt}`}
                                             minPeriod={60}
                                             date={
                                                 new Date(archivedAt as string)