Render disappearing message timers generically

ts/components/conversation/TimerNotification.tsx

@@ -1,12 +1,13 @@
-// Copyright 2018-2020 Signal Messenger, LLC
+// Copyright 2018-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import React from 'react';
+import React, { FunctionComponent, ReactNode } from 'react';
 import classNames from 'classnames';
 
 import { ContactName } from './ContactName';
 import { Intl } from '../Intl';
 import { LocalizerType } from '../../types/Util';
+import * as expirationTimer from '../../util/expirationTimer';
 
 export type TimerNotificationType =
   | 'fromOther'
@@ -14,15 +15,22 @@ export type TimerNotificationType =
   | 'fromSync'
   | 'fromMember';
 
+// We can't always use destructuring assignment because of the complexity of this props
+//   type.
+/* eslint-disable react/destructuring-assignment */
 export type PropsData = {
   type: TimerNotificationType;
   phoneNumber?: string;
   profileName?: string;
   title: string;
   name?: string;
-  disabled: boolean;
-  timespan: string;
-};
+} & (
+  | { disabled: true }
+  | {
+      disabled: false;
+      expireTimer: number;
+    }
+);
 
 type PropsHousekeeping = {
   i18n: LocalizerType;
@@ -30,82 +38,74 @@ type PropsHousekeeping = {
 
 export type Props = PropsData & PropsHousekeeping;
 
-export class TimerNotification extends React.Component<Props> {
-  public renderContents(): JSX.Element | string | null {
-    const {
-      i18n,
-      name,
-      phoneNumber,
-      profileName,
-      title,
-      timespan,
-      type,
-      disabled,
-    } = this.props;
-    const changeKey = disabled
-      ? 'disabledDisappearingMessages'
-      : 'theyChangedTheTimer';
+export const TimerNotification: FunctionComponent<Props> = props => {
+  const { disabled, i18n, name, phoneNumber, profileName, title, type } = props;
 
-    switch (type) {
-      case 'fromOther':
-        return (
-          <Intl
-            i18n={i18n}
-            id={changeKey}
-            components={{
-              name: (
-                <ContactName
-                  key="external-1"
-                  phoneNumber={phoneNumber}
-                  profileName={profileName}
-                  title={title}
-                  name={name}
-                  i18n={i18n}
-                />
-              ),
-              time: timespan,
-            }}
-          />
-        );
-      case 'fromMe':
-        return disabled
-          ? i18n('youDisabledDisappearingMessages')
-          : i18n('youChangedTheTimer', [timespan]);
-      case 'fromSync':
-        return disabled
-          ? i18n('disappearingMessagesDisabled')
-          : i18n('timerSetOnSync', [timespan]);
-      case 'fromMember':
-        return disabled
-          ? i18n('disappearingMessagesDisabledByMember')
-          : i18n('timerSetByMember', [timespan]);
-      default:
-        window.log.warn('TimerNotification: unsupported type provided:', type);
-
-        return null;
-    }
+  let changeKey: string;
+  let timespan: string;
+  if (props.disabled) {
+    changeKey = 'disabledDisappearingMessages';
+    timespan = ''; // Set to the empty string to satisfy types
+  } else {
+    changeKey = 'theyChangedTheTimer';
+    timespan = expirationTimer.format(i18n, props.expireTimer);
   }
 
-  public render(): JSX.Element {
-    const { timespan, disabled } = this.props;
+  let message: ReactNode;
+  switch (type) {
+    case 'fromOther':
+      message = (
+        <Intl
+          i18n={i18n}
+          id={changeKey}
+          components={{
+            name: (
+              <ContactName
+                key="external-1"
+                phoneNumber={phoneNumber}
+                profileName={profileName}
+                title={title}
+                name={name}
+                i18n={i18n}
+              />
+            ),
+            time: timespan,
+          }}
+        />
+      );
+      break;
+    case 'fromMe':
+      message = disabled
+        ? i18n('youDisabledDisappearingMessages')
+        : i18n('youChangedTheTimer', [timespan]);
+      break;
+    case 'fromSync':
+      message = disabled
+        ? i18n('disappearingMessagesDisabled')
+        : i18n('timerSetOnSync', [timespan]);
+      break;
+    case 'fromMember':
+      message = disabled
+        ? i18n('disappearingMessagesDisabledByMember')
+        : i18n('timerSetByMember', [timespan]);
+      break;
+    default:
+      window.log.warn('TimerNotification: unsupported type provided:', type);
+      break;
+  }
 
-    return (
-      <div className="module-timer-notification">
-        <div className="module-timer-notification__icon-container">
-          <div
-            className={classNames(
-              'module-timer-notification__icon',
-              disabled ? 'module-timer-notification__icon--disabled' : null
-            )}
-          />
-          <div className="module-timer-notification__icon-label">
-            {timespan}
-          </div>
-        </div>
-        <div className="module-timer-notification__message">
-          {this.renderContents()}
-        </div>
+  return (
+    <div className="module-timer-notification">
+      <div className="module-timer-notification__icon-container">
+        <div
+          className={classNames(
+            'module-timer-notification__icon',
+            disabled ? 'module-timer-notification__icon--disabled' : null
+          )}
+        />
+        <div className="module-timer-notification__icon-label">{timespan}</div>
       </div>
-    );
-  }
-}
+      <div className="module-timer-notification__message">{message}</div>
+    </div>
+  );
+};