[Glitch] Refactor: Relative timestamp component

Port cffa8de626 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/components/account/index.tsx

@@ -276,7 +276,7 @@ export const Account: React.FC<AccountProps> = ({
   if (account?.mute_expires_at) {
     muteTimeRemaining = (
       <>
-        · <RelativeTimestamp timestamp={account.mute_expires_at} futureDate />
+        · <RelativeTimestamp timestamp={account.mute_expires_at} />
       </>
     );
   }

app/javascript/flavours/glitch/components/edited_timestamp/index.tsx

@@ -60,10 +60,7 @@ export const EditedTimestamp: React.FC<{
   const renderItem = useCallback(
     (item: HistoryItem, index: number, onClick: React.MouseEventHandler) => {
       const formattedDate = (
-        <RelativeTimestamp
+        <RelativeTimestamp timestamp={item.get('created_at') as string} long />
-          timestamp={item.get('created_at') as string}
-          short={false}
-        />
       );
       const formattedName = (
         <InlineAccount accountId={item.get('account') as string} />

app/javascript/flavours/glitch/components/poll.tsx

@@ -70,7 +70,7 @@ export const Poll: React.FC<PollProps> = ({ pollId, disabled, status }) => {
     if (expired) {
       return intl.formatMessage(messages.closed);
     }
-    return <RelativeTimestamp timestamp={poll.expires_at} futureDate />;
+    return <RelativeTimestamp timestamp={poll.expires_at} />;
   }, [expired, intl, poll]);
   const votesCount = useMemo(() => {
     if (!poll) {

app/javascript/flavours/glitch/components/relative_timestamp.tsx

@@ -1,288 +0,0 @@
-import { Component } from 'react';
-
-import type { MessageDescriptor, PrimitiveType, IntlShape } from 'react-intl';
-import { injectIntl, defineMessages } from 'react-intl';
-
-const messages = defineMessages({
-  today: { id: 'relative_time.today', defaultMessage: 'today' },
-  just_now: { id: 'relative_time.just_now', defaultMessage: 'now' },
-  just_now_full: {
-    id: 'relative_time.full.just_now',
-    defaultMessage: 'just now',
-  },
-  seconds: { id: 'relative_time.seconds', defaultMessage: '{number}s' },
-  seconds_full: {
-    id: 'relative_time.full.seconds',
-    defaultMessage: '{number, plural, one {# second} other {# seconds}} ago',
-  },
-  minutes: { id: 'relative_time.minutes', defaultMessage: '{number}m' },
-  minutes_full: {
-    id: 'relative_time.full.minutes',
-    defaultMessage: '{number, plural, one {# minute} other {# minutes}} ago',
-  },
-  hours: { id: 'relative_time.hours', defaultMessage: '{number}h' },
-  hours_full: {
-    id: 'relative_time.full.hours',
-    defaultMessage: '{number, plural, one {# hour} other {# hours}} ago',
-  },
-  days: { id: 'relative_time.days', defaultMessage: '{number}d' },
-  days_full: {
-    id: 'relative_time.full.days',
-    defaultMessage: '{number, plural, one {# day} other {# days}} ago',
-  },
-  moments_remaining: {
-    id: 'time_remaining.moments',
-    defaultMessage: 'Moments remaining',
-  },
-  seconds_remaining: {
-    id: 'time_remaining.seconds',
-    defaultMessage: '{number, plural, one {# second} other {# seconds}} left',
-  },
-  minutes_remaining: {
-    id: 'time_remaining.minutes',
-    defaultMessage: '{number, plural, one {# minute} other {# minutes}} left',
-  },
-  hours_remaining: {
-    id: 'time_remaining.hours',
-    defaultMessage: '{number, plural, one {# hour} other {# hours}} left',
-  },
-  days_remaining: {
-    id: 'time_remaining.days',
-    defaultMessage: '{number, plural, one {# day} other {# days}} left',
-  },
-});
-
-const dateFormatOptions = {
-  year: 'numeric',
-  month: 'short',
-  day: '2-digit',
-  hour: '2-digit',
-  minute: '2-digit',
-} as const;
-
-const shortDateFormatOptions = {
-  month: 'short',
-  day: 'numeric',
-} as const;
-
-const SECOND = 1000;
-const MINUTE = 1000 * 60;
-const HOUR = 1000 * 60 * 60;
-const DAY = 1000 * 60 * 60 * 24;
-
-const MAX_DELAY = 2147483647;
-
-const selectUnits = (delta: number) => {
-  const absDelta = Math.abs(delta);
-
-  if (absDelta < MINUTE) {
-    return 'second';
-  } else if (absDelta < HOUR) {
-    return 'minute';
-  } else if (absDelta < DAY) {
-    return 'hour';
-  }
-
-  return 'day';
-};
-
-const getUnitDelay = (units: string) => {
-  switch (units) {
-    case 'second':
-      return SECOND;
-    case 'minute':
-      return MINUTE;
-    case 'hour':
-      return HOUR;
-    case 'day':
-      return DAY;
-    default:
-      return MAX_DELAY;
-  }
-};
-
-export const timeAgoString = (
-  intl: {
-    formatDate: IntlShape['formatDate'];
-    formatMessage: (
-      { id, defaultMessage }: MessageDescriptor,
-      values?: Record<string, PrimitiveType>,
-    ) => string;
-  },
-  date: Date,
-  now: number,
-  year: number,
-  timeGiven: boolean,
-  short?: boolean,
-) => {
-  const delta = now - date.getTime();
-
-  let relativeTime;
-
-  if (delta < DAY && !timeGiven) {
-    relativeTime = intl.formatMessage(messages.today);
-  } else if (delta < 10 * SECOND) {
-    relativeTime = intl.formatMessage(
-      short ? messages.just_now : messages.just_now_full,
-    );
-  } else if (delta < 7 * DAY) {
-    if (delta < MINUTE) {
-      relativeTime = intl.formatMessage(
-        short ? messages.seconds : messages.seconds_full,
-        { number: Math.floor(delta / SECOND) },
-      );
-    } else if (delta < HOUR) {
-      relativeTime = intl.formatMessage(
-        short ? messages.minutes : messages.minutes_full,
-        { number: Math.floor(delta / MINUTE) },
-      );
-    } else if (delta < DAY) {
-      relativeTime = intl.formatMessage(
-        short ? messages.hours : messages.hours_full,
-        { number: Math.floor(delta / HOUR) },
-      );
-    } else {
-      relativeTime = intl.formatMessage(
-        short ? messages.days : messages.days_full,
-        { number: Math.floor(delta / DAY) },
-      );
-    }
-  } else if (date.getFullYear() === year) {
-    relativeTime = intl.formatDate(date, shortDateFormatOptions);
-  } else {
-    relativeTime = intl.formatDate(date, {
-      ...shortDateFormatOptions,
-      year: 'numeric',
-    });
-  }
-
-  return relativeTime;
-};
-
-const timeRemainingString = (
-  intl: IntlShape,
-  date: Date,
-  now: number,
-  timeGiven = true,
-) => {
-  const delta = date.getTime() - now;
-
-  let relativeTime;
-
-  if (delta < DAY && !timeGiven) {
-    relativeTime = intl.formatMessage(messages.today);
-  } else if (delta < 10 * SECOND) {
-    relativeTime = intl.formatMessage(messages.moments_remaining);
-  } else if (delta < MINUTE) {
-    relativeTime = intl.formatMessage(messages.seconds_remaining, {
-      number: Math.floor(delta / SECOND),
-    });
-  } else if (delta < HOUR) {
-    relativeTime = intl.formatMessage(messages.minutes_remaining, {
-      number: Math.floor(delta / MINUTE),
-    });
-  } else if (delta < DAY) {
-    relativeTime = intl.formatMessage(messages.hours_remaining, {
-      number: Math.floor(delta / HOUR),
-    });
-  } else {
-    relativeTime = intl.formatMessage(messages.days_remaining, {
-      number: Math.floor(delta / DAY),
-    });
-  }
-
-  return relativeTime;
-};
-
-interface Props {
-  intl: IntlShape;
-  timestamp: string;
-  year?: number;
-  futureDate?: boolean;
-  short?: boolean;
-}
-interface States {
-  now: number;
-}
-class RelativeTimestamp extends Component<Props, States> {
-  state = {
-    now: Date.now(),
-  };
-
-  _timer: number | undefined;
-
-  shouldComponentUpdate(nextProps: Props, nextState: States) {
-    // As of right now the locale doesn't change without a new page load,
-    // but we might as well check in case that ever changes.
-    return (
-      this.props.timestamp !== nextProps.timestamp ||
-      this.props.intl.locale !== nextProps.intl.locale ||
-      this.state.now !== nextState.now
-    );
-  }
-
-  UNSAFE_componentWillReceiveProps(nextProps: Props) {
-    if (this.props.timestamp !== nextProps.timestamp) {
-      this.setState({ now: Date.now() });
-    }
-  }
-
-  componentDidMount() {
-    this._scheduleNextUpdate(this.props, this.state);
-  }
-
-  UNSAFE_componentWillUpdate(nextProps: Props, nextState: States) {
-    this._scheduleNextUpdate(nextProps, nextState);
-  }
-
-  componentWillUnmount() {
-    window.clearTimeout(this._timer);
-  }
-
-  _scheduleNextUpdate(props: Props, state: States) {
-    window.clearTimeout(this._timer);
-
-    const { timestamp } = props;
-    const delta = new Date(timestamp).getTime() - state.now;
-    const unitDelay = getUnitDelay(selectUnits(delta));
-    const unitRemainder = Math.abs(delta % unitDelay);
-    const updateInterval = 1000 * 10;
-    const delay =
-      delta < 0
-        ? Math.max(updateInterval, unitDelay - unitRemainder)
-        : Math.max(updateInterval, unitRemainder);
-
-    this._timer = window.setTimeout(() => {
-      this.setState({ now: Date.now() });
-    }, delay);
-  }
-
-  render() {
-    const {
-      timestamp,
-      intl,
-      futureDate,
-      year = new Date().getFullYear(),
-      short = true,
-    } = this.props;
-
-    const timeGiven = timestamp.includes('T');
-    const date = new Date(timestamp);
-    const relativeTime = futureDate
-      ? timeRemainingString(intl, date, this.state.now, timeGiven)
-      : timeAgoString(intl, date, this.state.now, year, timeGiven, short);
-
-    return (
-      <time
-        dateTime={timestamp}
-        title={intl.formatDate(date, dateFormatOptions)}
-      >
-        {relativeTime}
-      </time>
-    );
-  }
-}
-
-const RelativeTimestampWithIntl = injectIntl(RelativeTimestamp);
-
-export { RelativeTimestampWithIntl as RelativeTimestamp };

app/javascript/flavours/glitch/components/relative_timestamp/index.tsx

@@ -0,0 +1,83 @@
+import { useEffect, useMemo, useState } from 'react';
+import type { FC } from 'react';
+
+import { useIntl } from 'react-intl';
+
+import {
+  formatTime,
+  MAX_TIMEOUT,
+  relativeTimeParts,
+  SECOND,
+  unitToTime,
+} from '@/flavours/glitch/utils/time';
+
+const dateFormatOptions = {
+  year: 'numeric',
+  month: 'short',
+  day: '2-digit',
+  hour: '2-digit',
+  minute: '2-digit',
+} as const;
+
+export const RelativeTimestamp: FC<{
+  timestamp: string;
+  long?: boolean;
+  noTime?: boolean;
+  noFuture?: boolean;
+}> = ({ timestamp, long = false, noTime = false, noFuture = false }) => {
+  const intl = useIntl();
+
+  const [now, setNow] = useState(() => Date.now());
+
+  const date = useMemo(() => {
+    const date = new Date(timestamp);
+    return noFuture ? new Date(Math.min(date.getTime(), now)) : date;
+  }, [noFuture, now, timestamp]);
+  const ts = date.getTime();
+
+  useEffect(() => {
+    let timeoutId = 0;
+    const scheduleNextUpdate = () => {
+      const { unit, delta } = relativeTimeParts(ts);
+      const unitDelay = unitToTime(unit);
+      const remainder = Math.abs(delta % unitDelay);
+      const minDelay = 10 * SECOND;
+      const delay = Math.min(
+        Math.max(delta < 0 ? unitDelay - remainder : remainder, minDelay),
+        MAX_TIMEOUT,
+      );
+
+      timeoutId = window.setTimeout(() => {
+        setNow(Date.now());
+        scheduleNextUpdate();
+      }, delay);
+    };
+
+    scheduleNextUpdate();
+
+    return () => {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+    };
+  }, [ts]);
+
+  const daysOnly = !timestamp.includes('T') || noTime;
+  const relativeTime = useMemo(
+    () =>
+      formatTime({
+        timestamp: ts,
+        intl,
+        short: !long,
+        noTime: daysOnly,
+        now,
+      }),
+    [ts, intl, long, daysOnly, now],
+  );
+
+  return (
+    <time dateTime={timestamp} title={intl.formatDate(date, dateFormatOptions)}>
+      {relativeTime}
+    </time>
+  );
+};

app/javascript/flavours/glitch/components/relative_timestamp/relative_timestamp.stories.tsx

@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { DAY } from '@/flavours/glitch/utils/time';
+
+import { RelativeTimestamp } from './index';
+
+const meta = {
+  title: 'Components/RelativeTimestamp',
+  component: RelativeTimestamp,
+  args: {
+    timestamp: new Date(Date.now() - DAY * 3).toISOString(),
+    long: false,
+    noTime: false,
+    noFuture: false,
+  },
+  argTypes: {
+    timestamp: {
+      control: 'date',
+    },
+  },
+  render(props) {
+    const { timestamp } = props;
+    const dateString = toDateString(timestamp);
+
+    return <RelativeTimestamp {...props} timestamp={dateString} />;
+  },
+} satisfies Meta<typeof RelativeTimestamp>;
+
+export default meta;
+
+type Story = StoryObj<typeof RelativeTimestamp>;
+
+export const Plain: Story = {};
+
+export const Long: Story = {
+  args: {
+    long: true,
+  },
+};
+
+export const DateOnly: Story = {
+  args: {
+    noTime: true,
+  },
+};
+
+export const NoFuture: Story = {
+  args: {
+    timestamp: new Date(Date.now() + DAY * 3).toISOString(),
+    noFuture: true,
+  },
+};
+
+// Storybook has a known bug with changing a date control from a string to number.
+function toDateString(timestamp?: number | string) {
+  if (!timestamp) {
+    return new Date().toISOString();
+  }
+
+  if (typeof timestamp === 'number') {
+    return new Date(timestamp).toISOString();
+  }
+
+  return timestamp;
+}

app/javascript/flavours/glitch/entrypoints/public.tsx

@@ -1,14 +1,19 @@
 import { createRoot } from 'react-dom/client';
 
 import { IntlMessageFormat } from 'intl-messageformat';
-import type { MessageDescriptor, PrimitiveType } from 'react-intl';
+import type {
+  FormatDateOptions,
+  IntlShape,
+  MessageDescriptor,
+  PrimitiveType,
+} from 'react-intl';
 import { defineMessages } from 'react-intl';
 
 import axios from 'axios';
 import { on } from 'delegated-events';
 import { throttle } from 'lodash';
 
-import { timeAgoString } from 'flavours/glitch/components/relative_timestamp';
+import { formatTime } from '@/flavours/glitch/utils/time';
 import emojify from 'flavours/glitch/features/emoji/emoji';
 import loadKeyboardExtensions from 'flavours/glitch/load_keyboard_extensions';
 import { loadLocale, getLocale } from 'flavours/glitch/locales';
@@ -58,7 +63,7 @@ function loaded() {
   const formatMessage = (
     { id, defaultMessage }: MessageDescriptor,
     values?: Record<string, PrimitiveType>,
-  ) => {
+  ): string => {
     let message: string | undefined = undefined;
 
     if (id) message = localeData[id];
@@ -126,23 +131,23 @@ function loaded() {
     .querySelectorAll<HTMLTimeElement>('time.time-ago')
     .forEach((content) => {
       const datetime = new Date(content.dateTime);
-      const now = new Date();
 
       const timeGiven = content.dateTime.includes('T');
       content.title = timeGiven
         ? dateTimeFormat.format(datetime)
         : dateFormat.format(datetime);
-      content.textContent = timeAgoString(
+      const now = Date.now();
-        {
+      content.textContent = formatTime({
-          formatMessage,
+        // We don't want to show future dates.
-          formatDate: (date: Date, options) =>
+        timestamp: Math.min(datetime.getTime(), now),
+        now,
+        intl: {
+          formatMessage: formatMessage as IntlShape['formatMessage'],
+          formatDate: (date: Date, options: FormatDateOptions) =>
             new Intl.DateTimeFormat(locale, options).format(date),
         },
-        datetime,
+        noTime: !timeGiven,
-        now.getTime(),
+      });
-        now.getFullYear(),
-        timeGiven,
-      );
     });
 
   updateDefaultQuotePrivacyFromPrivacy(

app/javascript/flavours/glitch/features/collections/detail/collection_list_item.tsx

@@ -53,12 +53,7 @@ export const CollectionMetaData: React.FC<{
         id='collections.last_updated_at'
         defaultMessage='Last updated: {date}'
         values={{
-          date: (
+          date: <RelativeTimestamp timestamp={collection.updated_at} long />,
-            <RelativeTimestamp
-              timestamp={collection.updated_at}
-              short={false}
-            />
-          ),
         }}
         tagName='li'
       />

app/javascript/flavours/glitch/features/notifications/components/report.jsx

@@ -49,7 +49,7 @@ class Report extends ImmutablePureComponent {
 
         <div className='notification__report__details'>
           <div>
-            <RelativeTimestamp timestamp={report.get('created_at')} short={false} /> · <FormattedMessage id='report_notification.attached_statuses' defaultMessage='{count, plural, one {# post} other {# posts}} attached' values={{ count: report.get('status_ids').size }} />
+            <RelativeTimestamp timestamp={report.get('created_at')} long /> · <FormattedMessage id='report_notification.attached_statuses' defaultMessage='{count, plural, one {# post} other {# posts}} attached' values={{ count: report.get('status_ids').size }} />
             <br />
             <strong>{intl.formatMessage(messages[report.get('category')])}</strong>
           </div>

app/javascript/flavours/glitch/features/ui/components/compare_history_modal.jsx

@@ -50,7 +50,7 @@ class CompareHistoryModal extends PureComponent {
     const content = currentVersion.get('content');
     const spoilerContent = escapeTextContentForBrowser(currentVersion.get('spoiler_text'));
 
-    const formattedDate = <RelativeTimestamp timestamp={currentVersion.get('created_at')} short={false} />;
+    const formattedDate = <RelativeTimestamp timestamp={currentVersion.get('created_at')} long />;
     const formattedName = <InlineAccount accountId={currentVersion.get('account')} />;
 
     const label = currentVersion.get('original') ? (

app/javascript/flavours/glitch/utils/time.test.ts

@@ -0,0 +1,36 @@
+import { DAY, HOUR, MINUTE, relativeTimeParts, SECOND } from './time';
+
+describe('relativeTimeParts', () => {
+  const now = Date.now();
+
+  test.concurrent.each([
+    // Now
+    [0, { value: 0, unit: 'second' }],
+
+    // Past
+    [-30 * SECOND, { value: -30, unit: 'second' }],
+    [-90 * SECOND, { value: -2, unit: 'minute' }],
+    [-30 * MINUTE, { value: -30, unit: 'minute' }],
+    [-90 * MINUTE, { value: -2, unit: 'hour' }],
+    [-5 * HOUR, { value: -5, unit: 'hour' }],
+    [-24 * HOUR, { value: -1, unit: 'day' }],
+    [-36 * HOUR, { value: -1, unit: 'day' }],
+    [-47 * HOUR, { value: -2, unit: 'day' }],
+    [-3 * DAY, { value: -3, unit: 'day' }],
+
+    // Future
+    [SECOND, { value: 1, unit: 'second' }],
+    [59 * SECOND, { value: 59, unit: 'second' }],
+    [MINUTE, { value: 1, unit: 'minute' }],
+    [MINUTE + SECOND, { value: 1, unit: 'minute' }],
+    [59 * MINUTE, { value: 59, unit: 'minute' }],
+    [HOUR, { value: 1, unit: 'hour' }],
+    [HOUR + MINUTE, { value: 1, unit: 'hour' }],
+    [23 * HOUR, { value: 23, unit: 'hour' }],
+    [DAY, { value: 1, unit: 'day' }],
+    [DAY + HOUR, { value: 1, unit: 'day' }],
+    [2 * DAY, { value: 2, unit: 'day' }],
+  ])('should return correct value and unit for %d ms', (input, expected) => {
+    expect(relativeTimeParts(now + input, now)).toMatchObject(expected);
+  });
+});

app/javascript/flavours/glitch/utils/time.ts

@@ -0,0 +1,246 @@
+import type { IntlShape } from 'react-intl';
+import { defineMessages } from 'react-intl';
+
+export const SECOND = 1000;
+export const MINUTE = SECOND * 60;
+export const HOUR = MINUTE * 60;
+export const DAY = HOUR * 24;
+
+export const MAX_TIMEOUT = 2147483647; // Maximum delay for setTimeout in browsers (approximately 24.8 days)
+
+export type TimeUnit = 'second' | 'minute' | 'hour' | 'day';
+
+export function relativeTimeParts(
+  ts: number,
+  now = Date.now(),
+): { value: number; unit: TimeUnit; delta: number } {
+  const delta = ts - now;
+  const absDelta = Math.abs(delta);
+
+  if (absDelta < MINUTE) {
+    return { value: Math.floor(delta / SECOND), unit: 'second', delta };
+  }
+
+  if (absDelta < HOUR) {
+    return { value: Math.floor(delta / MINUTE), unit: 'minute', delta };
+  }
+
+  if (absDelta < DAY) {
+    return { value: Math.floor(delta / HOUR), unit: 'hour', delta };
+  }
+
+  // Round instead of use floor as days are big enough that the value is usually off by a few hours.
+  return { value: Math.round(delta / DAY), unit: 'day', delta };
+}
+
+export function isToday(ts: number, now = Date.now()): boolean {
+  const date = new Date(ts);
+  const nowDate = new Date(now);
+  return (
+    date.getDate() === nowDate.getDate() &&
+    date.getMonth() === nowDate.getMonth() &&
+    date.getFullYear() === nowDate.getFullYear()
+  );
+}
+
+export function isSameYear(ts: number, now = Date.now()): boolean {
+  const date = new Date(ts);
+  const nowDate = new Date(now);
+  return date.getFullYear() === nowDate.getFullYear();
+}
+
+export function unitToTime(unit: TimeUnit): number {
+  switch (unit) {
+    case 'second':
+      return SECOND;
+    case 'minute':
+      return MINUTE;
+    case 'hour':
+      return HOUR;
+    case 'day':
+      return DAY;
+  }
+}
+
+const timeMessages = defineMessages({
+  today: { id: 'relative_time.today', defaultMessage: 'today' },
+  just_now: { id: 'relative_time.just_now', defaultMessage: 'now' },
+  just_now_full: {
+    id: 'relative_time.full.just_now',
+    defaultMessage: 'just now',
+  },
+  seconds: { id: 'relative_time.seconds', defaultMessage: '{number}s' },
+  seconds_full: {
+    id: 'relative_time.full.seconds',
+    defaultMessage: '{number, plural, one {# second} other {# seconds}} ago',
+  },
+  minutes: { id: 'relative_time.minutes', defaultMessage: '{number}m' },
+  minutes_full: {
+    id: 'relative_time.full.minutes',
+    defaultMessage: '{number, plural, one {# minute} other {# minutes}} ago',
+  },
+  hours: { id: 'relative_time.hours', defaultMessage: '{number}h' },
+  hours_full: {
+    id: 'relative_time.full.hours',
+    defaultMessage: '{number, plural, one {# hour} other {# hours}} ago',
+  },
+  days: { id: 'relative_time.days', defaultMessage: '{number}d' },
+  days_full: {
+    id: 'relative_time.full.days',
+    defaultMessage: '{number, plural, one {# day} other {# days}} ago',
+  },
+  moments_remaining: {
+    id: 'time_remaining.moments',
+    defaultMessage: 'Moments remaining',
+  },
+  seconds_remaining: {
+    id: 'time_remaining.seconds',
+    defaultMessage: '{number, plural, one {# second} other {# seconds}} left',
+  },
+  minutes_remaining: {
+    id: 'time_remaining.minutes',
+    defaultMessage: '{number, plural, one {# minute} other {# minutes}} left',
+  },
+  hours_remaining: {
+    id: 'time_remaining.hours',
+    defaultMessage: '{number, plural, one {# hour} other {# hours}} left',
+  },
+  days_remaining: {
+    id: 'time_remaining.days',
+    defaultMessage: '{number, plural, one {# day} other {# days}} left',
+  },
+});
+
+const DAYS_LIMIT = 7;
+const NOW_SECONDS = 10;
+
+export function formatTime({
+  timestamp,
+  intl,
+  now = Date.now(),
+  noTime = false,
+  short = false,
+}: {
+  timestamp: number;
+  intl: Pick<IntlShape, 'formatDate' | 'formatMessage'>;
+  now?: number;
+  noTime?: boolean;
+  short?: boolean;
+}) {
+  const { value, unit } = relativeTimeParts(timestamp, now);
+
+  // If we're only showing days, show "today" for the current day.
+  if (noTime && isToday(timestamp, now)) {
+    return intl.formatMessage(timeMessages.today);
+  }
+
+  if (value > 0) {
+    return formatFuture({ value, unit, intl });
+  }
+
+  if (unit === 'day' && value < -DAYS_LIMIT) {
+    return formatAbsoluteTime({ timestamp, intl, now });
+  }
+
+  return formatRelativePastTime({ value, unit, intl, short });
+}
+
+export function formatAbsoluteTime({
+  timestamp,
+  intl,
+  now = Date.now(),
+}: {
+  timestamp: number;
+  intl: Pick<IntlShape, 'formatDate'>;
+  now?: number;
+}) {
+  return intl.formatDate(timestamp, {
+    month: 'short',
+    day: 'numeric',
+    // Only show the year if it's different from the current year.
+    year: isSameYear(timestamp, now) ? undefined : 'numeric',
+  });
+}
+
+export function formatFuture({
+  unit,
+  value,
+  intl,
+}: {
+  value: number;
+  unit: TimeUnit;
+  intl: Pick<IntlShape, 'formatMessage'>;
+}) {
+  if (unit === 'day') {
+    return intl.formatMessage(timeMessages.days_remaining, { number: value });
+  }
+
+  if (unit === 'hour') {
+    return intl.formatMessage(timeMessages.hours_remaining, {
+      number: value,
+    });
+  }
+
+  if (unit === 'minute') {
+    return intl.formatMessage(timeMessages.minutes_remaining, {
+      number: value,
+    });
+  }
+
+  if (value > NOW_SECONDS) {
+    return intl.formatMessage(timeMessages.seconds_remaining, {
+      number: value,
+    });
+  }
+
+  return intl.formatMessage(timeMessages.moments_remaining);
+}
+
+export function formatRelativePastTime({
+  value,
+  unit,
+  intl,
+  short = false,
+}: {
+  value: number;
+  unit: TimeUnit;
+  intl: Pick<IntlShape, 'formatMessage'>;
+  short?: boolean;
+}) {
+  const absValue = Math.abs(value);
+  if (unit === 'day') {
+    return intl.formatMessage(
+      short ? timeMessages.days : timeMessages.days_full,
+      {
+        number: absValue,
+      },
+    );
+  }
+
+  if (unit === 'hour') {
+    return intl.formatMessage(
+      short ? timeMessages.hours : timeMessages.hours_full,
+      {
+        number: absValue,
+      },
+    );
+  }
+
+  if (unit === 'minute') {
+    return intl.formatMessage(
+      short ? timeMessages.minutes : timeMessages.minutes_full,
+      { number: absValue },
+    );
+  }
+
+  if (absValue >= NOW_SECONDS) {
+    return intl.formatMessage(
+      short ? timeMessages.seconds : timeMessages.seconds_full,
+      { number: absValue },
+    );
+  }
+
+  return intl.formatMessage(
+    short ? timeMessages.just_now : timeMessages.just_now_full,
+  );
+}