From 32a27c14b455c83c0d8929594b23b1d7cd85bb70 Mon Sep 17 00:00:00 2001
From: Alf Eaton <alf.eaton@overleaf.com>
Date: Fri, 31 Jan 2025 10:04:14 +0000
Subject: [PATCH] Add memoized FormatTimeBasedOnYear component (#23199)

GitOrigin-RevId: 1f26ca9c0dbbda639939736f1e6a0c236e38a160
---
 .../history/components/change-list/label-list-item.tsx |  4 ++--
 .../history/components/change-list/tag-tooltip.tsx     |  6 ++++--
 .../components/review-panel-change.tsx                 | 10 ++++++----
 .../components/review-panel-message.tsx                |  4 ++--
 .../components/review-panel-resolved-message.tsx       |  4 ++--
 .../features/utils/{format-date.js => format-date.ts}  |  6 +++---
 .../js/shared/components/format-time-based-on-year.tsx |  8 ++++++++
 .../history/components/change-list-bs5.spec.tsx        |  5 +----
 .../features/history/components/change-list.spec.tsx   |  5 +----
 9 files changed, 29 insertions(+), 23 deletions(-)
 rename services/web/frontend/js/features/utils/{format-date.js => format-date.ts} (71%)
 create mode 100644 services/web/frontend/js/shared/components/format-time-based-on-year.tsx

diff --git a/services/web/frontend/js/features/history/components/change-list/label-list-item.tsx b/services/web/frontend/js/features/history/components/change-list/label-list-item.tsx
index c1223d7ec7..fbf291113c 100644
--- a/services/web/frontend/js/features/history/components/change-list/label-list-item.tsx
+++ b/services/web/frontend/js/features/history/components/change-list/label-list-item.tsx
@@ -1,7 +1,7 @@
 import { memo, useCallback } from 'react'
 import { UpdateRange, Version } from '../../services/types/update'
 import TagTooltip from './tag-tooltip'
-import { formatTimeBasedOnYear } from '../../../utils/format-date'
+import { FormatTimeBasedOnYear } from '@/shared/components/format-time-based-on-year'
 import HistoryDropdown from './dropdown/history-dropdown'
 import HistoryVersionDetails from './history-version-details'
 import { LoadedLabel } from '../../services/types/label'
@@ -145,7 +145,7 @@ function LabelListItem({
                 data-testid="history-version-metadata-time"
               >
                 {t('last_edit')}{' '}
-                {formatTimeBasedOnYear(label.lastUpdatedTimestamp)}
+                <FormatTimeBasedOnYear date={label.lastUpdatedTimestamp} />
               </time>
             )}
           </div>
diff --git a/services/web/frontend/js/features/history/components/change-list/tag-tooltip.tsx b/services/web/frontend/js/features/history/components/change-list/tag-tooltip.tsx
index 19b9c547ce..ffc6ae208a 100644
--- a/services/web/frontend/js/features/history/components/change-list/tag-tooltip.tsx
+++ b/services/web/frontend/js/features/history/components/change-list/tag-tooltip.tsx
@@ -16,7 +16,7 @@ import { deleteLabel } from '../../services/api'
 import { isPseudoLabel } from '../../utils/label'
 import { LoadedLabel } from '../../services/types/label'
 import { debugConsole } from '@/utils/debugging'
-import { formatTimeBasedOnYear } from '@/features/utils/format-date'
+import { FormatTimeBasedOnYear } from '@/shared/components/format-time-based-on-year'
 import { useEditorContext } from '@/shared/context/editor-context'
 import OLTag from '@/features/ui/components/ol/ol-tag'
 import OLButton from '@/features/ui/components/ol/ol-button'
@@ -172,7 +172,9 @@ function TagTooltip({ label, currentUserId, showTooltip }: LabelBadgesProps) {
             {t('history_label_created_by')} {labelOwnerName}
           </div>
           <div className="history-version-label-tooltip-row">
-            <time>{formatTimeBasedOnYear(label.created_at)}</time>
+            <time>
+              <FormatTimeBasedOnYear date={label.created_at} />
+            </time>
           </div>
         </div>
       }
diff --git a/services/web/frontend/js/features/review-panel-new/components/review-panel-change.tsx b/services/web/frontend/js/features/review-panel-new/components/review-panel-change.tsx
index 4343a72e10..3aee7effe8 100644
--- a/services/web/frontend/js/features/review-panel-new/components/review-panel-change.tsx
+++ b/services/web/frontend/js/features/review-panel-new/components/review-panel-change.tsx
@@ -10,7 +10,7 @@ import classnames from 'classnames'
 import { usePermissionsContext } from '@/features/ide-react/context/permissions-context'
 import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
 import MaterialIcon from '@/shared/components/material-icon'
-import { formatTimeBasedOnYear } from '@/features/utils/format-date'
+import { FormatTimeBasedOnYear } from '@/shared/components/format-time-based-on-year'
 import { useChangesUsersContext } from '../context/changes-users-context'
 import { ReviewPanelChangeUser } from './review-panel-change-user'
 import { ReviewPanelEntry } from './review-panel-entry'
@@ -100,9 +100,11 @@ export const ReviewPanelChange = memo<{
           <div className="review-panel-entry-header">
             <div>
               <ReviewPanelChangeUser change={change} />
-              <div className="review-panel-entry-time">
-                {formatTimeBasedOnYear(change.metadata?.ts)}
-              </div>
+              {change.metadata?.ts && (
+                <div className="review-panel-entry-time">
+                  <FormatTimeBasedOnYear date={change.metadata.ts} />
+                </div>
+              )}
             </div>
             {editable && (
               <div className="review-panel-entry-actions">
diff --git a/services/web/frontend/js/features/review-panel-new/components/review-panel-message.tsx b/services/web/frontend/js/features/review-panel-new/components/review-panel-message.tsx
index 34cb336be9..028b2afd38 100644
--- a/services/web/frontend/js/features/review-panel-new/components/review-panel-message.tsx
+++ b/services/web/frontend/js/features/review-panel-new/components/review-panel-message.tsx
@@ -4,7 +4,7 @@ import {
   ReviewPanelCommentThreadMessage,
 } from '../../../../../types/review-panel/review-panel'
 import { useTranslation } from 'react-i18next'
-import { formatTimeBasedOnYear } from '@/features/utils/format-date'
+import { FormatTimeBasedOnYear } from '@/shared/components/format-time-based-on-year'
 import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
 import MaterialIcon from '@/shared/components/material-icon'
 import AutoExpandingTextArea from '@/shared/components/auto-expanding-text-area'
@@ -64,7 +64,7 @@ export const ReviewPanelMessage: FC<{
         <div>
           <ReviewPanelEntryUser user={message.user} />
           <div className="review-panel-entry-time">
-            {formatTimeBasedOnYear(message.timestamp)}
+            <FormatTimeBasedOnYear date={message.timestamp} />
           </div>
         </div>
 
diff --git a/services/web/frontend/js/features/review-panel-new/components/review-panel-resolved-message.tsx b/services/web/frontend/js/features/review-panel-new/components/review-panel-resolved-message.tsx
index 6c207f71bc..c7f0d96167 100644
--- a/services/web/frontend/js/features/review-panel-new/components/review-panel-resolved-message.tsx
+++ b/services/web/frontend/js/features/review-panel-new/components/review-panel-resolved-message.tsx
@@ -1,5 +1,5 @@
 import { FC } from 'react'
-import { formatTimeBasedOnYear } from '@/features/utils/format-date'
+import { FormatTimeBasedOnYear } from '@/shared/components/format-time-based-on-year'
 import { ReviewPanelResolvedCommentThread } from '../../../../../types/review-panel/comment-thread'
 import { useTranslation } from 'react-i18next'
 import ReviewPanelEntryUser from './review-panel-entry-user'
@@ -15,7 +15,7 @@ const ReviewPanelResolvedMessage: FC<{
         <div>
           <ReviewPanelEntryUser user={thread.resolved_by_user} />
           <div className="review-panel-entry-time">
-            {formatTimeBasedOnYear(thread.resolved_at)}
+            <FormatTimeBasedOnYear date={thread.resolved_at} />
           </div>
         </div>
       </div>
diff --git a/services/web/frontend/js/features/utils/format-date.js b/services/web/frontend/js/features/utils/format-date.ts
similarity index 71%
rename from services/web/frontend/js/features/utils/format-date.js
rename to services/web/frontend/js/features/utils/format-date.ts
index 8d748ae291..5210bf6962 100644
--- a/services/web/frontend/js/features/utils/format-date.js
+++ b/services/web/frontend/js/features/utils/format-date.ts
@@ -11,15 +11,15 @@ moment.updateLocale('en', {
   },
 })
 
-export function formatTime(date, format = 'h:mm a') {
+export function formatTime(date: moment.MomentInput, format = 'h:mm a') {
   return moment(date).format(format)
 }
 
-export function relativeDate(date) {
+export function relativeDate(date: moment.MomentInput) {
   return moment(date).calendar()
 }
 
-export function formatTimeBasedOnYear(date) {
+export function formatTimeBasedOnYear(date: moment.MomentInput) {
   const currentDate = moment()
 
   return currentDate.diff(date, 'years') > 0
diff --git a/services/web/frontend/js/shared/components/format-time-based-on-year.tsx b/services/web/frontend/js/shared/components/format-time-based-on-year.tsx
new file mode 100644
index 0000000000..86a105a6d0
--- /dev/null
+++ b/services/web/frontend/js/shared/components/format-time-based-on-year.tsx
@@ -0,0 +1,8 @@
+import { memo } from 'react'
+import { formatTimeBasedOnYear } from '@/features/utils/format-date'
+
+export const FormatTimeBasedOnYear = memo<{ date: string | number | Date }>(
+  function FormatTimeBasedOnYear({ date }) {
+    return <>{formatTimeBasedOnYear(date)}</>
+  }
+)
diff --git a/services/web/test/frontend/features/history/components/change-list-bs5.spec.tsx b/services/web/test/frontend/features/history/components/change-list-bs5.spec.tsx
index c950bb41ad..391ca667d4 100644
--- a/services/web/test/frontend/features/history/components/change-list-bs5.spec.tsx
+++ b/services/web/test/frontend/features/history/components/change-list-bs5.spec.tsx
@@ -10,10 +10,7 @@ import {
 import { HistoryProvider } from '../../../../../frontend/js/features/history/context/history-context'
 import { updates } from '../fixtures/updates'
 import { labels } from '../fixtures/labels'
-import {
-  formatTime,
-  relativeDate,
-} from '../../../../../frontend/js/features/utils/format-date'
+import { formatTime, relativeDate } from '@/features/utils/format-date'
 
 const mountWithEditorProviders = (
   component: React.ReactNode,
diff --git a/services/web/test/frontend/features/history/components/change-list.spec.tsx b/services/web/test/frontend/features/history/components/change-list.spec.tsx
index 051a5b63bf..56f598ef8b 100644
--- a/services/web/test/frontend/features/history/components/change-list.spec.tsx
+++ b/services/web/test/frontend/features/history/components/change-list.spec.tsx
@@ -10,10 +10,7 @@ import {
 import { HistoryProvider } from '../../../../../frontend/js/features/history/context/history-context'
 import { updates } from '../fixtures/updates'
 import { labels } from '../fixtures/labels'
-import {
-  formatTime,
-  relativeDate,
-} from '../../../../../frontend/js/features/utils/format-date'
+import { formatTime, relativeDate } from '@/features/utils/format-date'
 
 const mountWithEditorProviders = (
   component: React.ReactNode,