formatDate: update to named export and update format function to formatDateToString. Update import instances

Author: clairep94

client/modules/IDE/components/CollectionList/CollectionListRow.jsx

@@ -11,7 +11,7 @@ import * as ProjectActions from '../../actions/project';
 import * as CollectionsActions from '../../actions/collections';
 import * as IdeActions from '../../actions/ide';
 import * as ToastActions from '../../actions/toast';
-import dates from '../../../../utils/formatDate';
+import { formatDateToString } from '../../../../utils/formatDate';
 import { remSize, prop } from '../../../../theme';
 
 const SketchsTableRow = styled.tr`
@@ -93,7 +93,7 @@ const SketchlistDropdownColumn = styled.td`
   }
 `;
 const formatDateCell = (date, mobile = false) =>
-  dates.format(date, { showTime: !mobile });
+  formatDateToString(date, { showTime: !mobile });
 
 const CollectionListRowBase = (props) => {
   const [renameOpen, setRenameOpen] = useState(false);

client/modules/IDE/components/SketchListRowBase.jsx

@@ -8,13 +8,13 @@ import * as ProjectActions from '../actions/project';
 import * as IdeActions from '../actions/ide';
 import TableDropdown from '../../../components/Dropdown/TableDropdown';
 import MenuItem from '../../../components/Dropdown/MenuItem';
-import dates from '../../../utils/formatDate';
+import { formatDateToString } from '../../../utils/formatDate';
 import getConfig from '../../../utils/getConfig';
 
 const ROOT_URL = getConfig('API_URL', { nullishString: true });
 
 const formatDateCell = (date, mobile = false) =>
-  dates.format(date, { showTime: !mobile });
+  formatDateToString(date, { showTime: !mobile });
 
 const SketchListRowBase = ({
   sketch,

client/modules/IDE/components/Timer.jsx

@@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
-import dates from '../../../utils/formatDate';
+import { distanceInWordsToNow } from '../../../utils/formatDate';
 import useInterval from '../hooks/useInterval';
 import { getIsUserOwner } from '../selectors/users';
 
@@ -17,16 +17,14 @@ const Timer = () => {
 
   // Update immediately upon saving.
   useEffect(() => {
-    setTimeAgo(
-      projectSavedTime ? dates.distanceInWordsToNow(projectSavedTime) : ''
-    );
+    setTimeAgo(projectSavedTime ? distanceInWordsToNow(projectSavedTime) : '');
   }, [projectSavedTime]);
 
   // Update every 10 seconds.
   useInterval(
     () =>
       setTimeAgo(
-        projectSavedTime ? dates.distanceInWordsToNow(projectSavedTime) : ''
+        projectSavedTime ? distanceInWordsToNow(projectSavedTime) : ''
       ),
     10000
   );

client/modules/User/components/APIKeyList.jsx

@@ -5,7 +5,10 @@ import { useTranslation } from 'react-i18next';
 
 import { APIKeyPropType } from './APIKeyForm';
 
-import dates from '../../../utils/formatDate';
+import {
+  distanceInWordsToNow,
+  formatDateToString
+} from '../../../utils/formatDate';
 import TrashCanIcon from '../../../images/trash-can.svg';
 
 function APIKeyList({ apiKeys, onRemove }) {
@@ -23,13 +26,13 @@ function APIKeyList({ apiKeys, onRemove }) {
       <tbody>
         {orderBy(apiKeys, ['createdAt'], ['desc']).map((key) => {
           const lastUsed = key.lastUsedAt
-            ? dates.distanceInWordsToNow(new Date(key.lastUsedAt))
+            ? distanceInWordsToNow(new Date(key.lastUsedAt))
             : t('APIKeyList.Never');
 
           return (
             <tr key={key.id}>
               <td>{key.label}</td>
-              <td>{dates.format(key.createdAt)}</td>
+              <td>{formatDateToString(key.createdAt)}</td>
               <td>{lastUsed}</td>
               <td className="api-key-list__action">
                 <button

client/modules/User/components/CollectionItemRow.jsx

@@ -4,7 +4,7 @@ import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 import { removeFromCollection } from '../../IDE/actions/collections';
-import dates from '../../../utils/formatDate';
+import { formatDateToString } from '../../../utils/formatDate';
 import RemoveIcon from '../../../images/close.svg';
 
 const CollectionItemRow = ({ collection, item, isOwner }) => {
@@ -40,7 +40,7 @@ const CollectionItemRow = ({ collection, item, isOwner }) => {
       className={`sketches-table__row ${projectIsDeleted ? 'is-deleted' : ''}`}
     >
       <th scope="row">{name}</th>
-      <td>{dates.format(item.createdAt)}</td>
+      <td>{formatDateToString(item.createdAt)}</td>
       <td>{sketchOwnerUsername}</td>
       <td className="collection-row__action-column">
         {isOwner && (

client/utils/formatDate.test.ts

@@ -1,5 +1,5 @@
 import i18next from 'i18next';
-import dateUtils from './formatDate';
+import { distanceInWordsToNow, formatDateToString } from './formatDate';
 
 jest.mock('i18next', () => ({
   t: jest.fn((key: string) => key.split('.')[1])
@@ -20,7 +20,7 @@ describe('dateUtils', () => {
       const now = new Date();
       const recentDate = new Date(now.getTime() - 5000);
 
-      const result = dateUtils.distanceInWordsToNow(recentDate);
+      const result = distanceInWordsToNow(recentDate);
       expect(i18next.t).toHaveBeenCalledWith('formatDate.JustNow');
       expect(result).toBe('JustNow');
     });
@@ -29,7 +29,7 @@ describe('dateUtils', () => {
       const now = new Date();
       const recentDate = new Date(now.getTime() - 15000);
 
-      const result = dateUtils.distanceInWordsToNow(recentDate);
+      const result = distanceInWordsToNow(recentDate);
       expect(i18next.t).toHaveBeenCalledWith('formatDate.15Seconds');
       expect(result).toBe('15Seconds');
     });
@@ -42,7 +42,7 @@ describe('dateUtils', () => {
         t: jest.fn((key: string, { timeAgo }) => `${key}: ${timeAgo}`)
       }));
 
-      const result = dateUtils.distanceInWordsToNow(oldDate);
+      const result = distanceInWordsToNow(oldDate);
       expect(i18next.t).toHaveBeenCalledWith(
         'formatDate.Ago',
         expect.any(Object)
@@ -51,28 +51,28 @@ describe('dateUtils', () => {
     });
 
     it('returns empty string for invalid date', () => {
-      const result = dateUtils.distanceInWordsToNow('not a date');
+      const result = distanceInWordsToNow('not a date');
       expect(result).toBe('');
     });
   });
 
   describe('format', () => {
     it('formats with time by default', () => {
       const date = new Date('2025-07-16T12:34:56Z');
-      const formatted = dateUtils.format(date);
+      const formatted = formatDateToString(date);
 
       expect(formatted).toMatch(/(\d{1,2}:\d{2})/); // Contains time
     });
 
     it('formats without time when showTime is false', () => {
       const date = new Date('2025-07-16T12:34:56Z');
-      const formatted = dateUtils.format(date, { showTime: false });
+      const formatted = formatDateToString(date, { showTime: false });
 
       expect(formatted).not.toMatch(/(\d{1,2}:\d{2})/); // Contains time
     });
 
     it('returns empty string for invalid date', () => {
-      const formatted = dateUtils.format('invalid date');
+      const formatted = formatDateToString('invalid date');
       expect(formatted).toBe('');
     });
   });

client/utils/formatDate.ts

@@ -21,45 +21,46 @@ function parse(maybeDate: Date | string) {
   return null;
 }
 
-export default {
-  /**
-   * Returns a human-friendly relative time string from now.
-   * For very recent dates, returns specific labels (e.g., 'JustNow').
-   * @param date - Date or string to compare
-   * @returns Relative time string or empty string if invalid
-   */
-  distanceInWordsToNow(date: Date | string) {
-    const parsed = parse(date);
+/**
+ * Returns a human-friendly relative time string from now.
+ * For very recent dates, returns specific labels (e.g., 'JustNow').
+ * @param date - Date or string to compare
+ * @returns Relative time string or empty string if invalid
+ */
+export function distanceInWordsToNow(date: Date | string) {
+  const parsed = parse(date);
 
-    if (!parsed) return '';
+  if (!parsed) return '';
 
-    const diffInMs = Math.abs(differenceInMilliseconds(new Date(), parsed));
+  const diffInMs = Math.abs(differenceInMilliseconds(new Date(), parsed));
 
-    if (diffInMs < 10000) return i18next.t('formatDate.JustNow');
-    if (diffInMs < 20000) return i18next.t('formatDate.15Seconds');
-    if (diffInMs < 30000) return i18next.t('formatDate.25Seconds');
-    if (diffInMs < 46000) return i18next.t('formatDate.35Seconds');
+  if (diffInMs < 10000) return i18next.t('formatDate.JustNow');
+  if (diffInMs < 20000) return i18next.t('formatDate.15Seconds');
+  if (diffInMs < 30000) return i18next.t('formatDate.25Seconds');
+  if (diffInMs < 46000) return i18next.t('formatDate.35Seconds');
 
-    const timeAgo = formatDistanceToNow(parsed, {
-      includeSeconds: false,
-      locale: currentDateLocale()
-    });
+  const timeAgo = formatDistanceToNow(parsed, {
+    includeSeconds: false,
+    locale: currentDateLocale()
+  });
 
-    return i18next.t('formatDate.Ago', { timeAgo });
-  },
+  return i18next.t('formatDate.Ago', { timeAgo });
+}
 
-  /**
-   * Formats a date as a string. Includes time by default.
-   * @param date - Date or string to format
-   * @param options - Formatting options
-   * @param options.showTime - Whether to include time (default true)
-   * @returns Formatted date string or empty string if invalid
-   */
-  format(date: Date | string, { showTime = true } = {}): string {
-    const parsed = parse(date);
-    if (!parsed) return '';
+/**
+ * Formats a date as a string. Includes time by default.
+ * @param date - Date or string to format
+ * @param options - Formatting options
+ * @param options.showTime - Whether to include time (default true)
+ * @returns Formatted date string or empty string if invalid
+ */
+export function formatDateToString(
+  date: Date | string,
+  { showTime = true } = {}
+): string {
+  const parsed = parse(date);
+  if (!parsed) return '';
 
-    const formatType = showTime ? 'PPpp' : 'PP';
-    return format(parsed, formatType, { locale: currentDateLocale() });
-  }
-};
+  const formatType = showTime ? 'PPpp' : 'PP';
+  return format(parsed, formatType, { locale: currentDateLocale() });
+}