Add memoized FormatTimeBasedOnYear component (#23199)

GitOrigin-RevId: 1f26ca9c0dbbda639939736f1e6a0c236e38a160

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>

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>
       }

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">

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>
 

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>

services/web/frontend/js/features/utils/format-date.js → 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

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)}</>
+  }
+)

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,

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,