Migrate most React class components to function components

ts/components/conversation/ExpireTimer.tsx

@@ -1,11 +1,10 @@
 // Copyright 2018 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import React from 'react';
+import React, { useEffect, useReducer } from 'react';
 import classNames from 'classnames';
 
 import { getIncrement, getTimerBucket } from '../../util/timer';
-import { clearTimeoutIfNecessary } from '../../util/clearTimeoutIfNecessary';
 
 export type Props = {
   deletedForEveryone?: boolean;
@@ -17,65 +16,43 @@ export type Props = {
   withTapToViewExpired?: boolean;
 };
 
-export class ExpireTimer extends React.Component<Props> {
-  private interval: NodeJS.Timeout | null;
+export function ExpireTimer({
+  deletedForEveryone,
+  direction,
+  expirationLength,
+  expirationTimestamp,
+  withImageNoCaption,
+  withSticker,
+  withTapToViewExpired,
+}: Props): JSX.Element {
+  const [, forceUpdate] = useReducer(() => ({}), {});
 
-  constructor(props: Props) {
-    super(props);
-
-    this.interval = null;
-  }
-
-  public override componentDidMount(): void {
-    const { expirationLength } = this.props;
+  useEffect(() => {
     const increment = getIncrement(expirationLength);
     const updateFrequency = Math.max(increment, 500);
-
-    const update = () => {
-      this.setState({
-        // Used to trigger renders
-        // eslint-disable-next-line react/no-unused-state
-        lastUpdated: Date.now(),
-      });
+    const interval = setInterval(forceUpdate, updateFrequency);
+    return () => {
+      clearInterval(interval);
     };
-    this.interval = setInterval(update, updateFrequency);
-  }
+  }, [expirationLength]);
 
-  public override componentWillUnmount(): void {
-    clearTimeoutIfNecessary(this.interval);
-  }
+  const bucket = getTimerBucket(expirationTimestamp, expirationLength);
 
-  public override render(): JSX.Element {
-    const {
-      deletedForEveryone,
-      direction,
-      expirationLength,
-      expirationTimestamp,
-      withImageNoCaption,
-      withSticker,
-      withTapToViewExpired,
-    } = this.props;
-
-    const bucket = getTimerBucket(expirationTimestamp, expirationLength);
-
-    return (
-      <div
-        className={classNames(
-          'module-expire-timer',
-          `module-expire-timer--${bucket}`,
-          direction ? `module-expire-timer--${direction}` : null,
-          deletedForEveryone
-            ? 'module-expire-timer--deleted-for-everyone'
-            : null,
-          withTapToViewExpired
-            ? `module-expire-timer--${direction}-with-tap-to-view-expired`
-            : null,
-          direction && withImageNoCaption
-            ? 'module-expire-timer--with-image-no-caption'
-            : null,
-          withSticker ? 'module-expire-timer--with-sticker' : null
-        )}
-      />
-    );
-  }
+  return (
+    <div
+      className={classNames(
+        'module-expire-timer',
+        `module-expire-timer--${bucket}`,
+        direction ? `module-expire-timer--${direction}` : null,
+        deletedForEveryone ? 'module-expire-timer--deleted-for-everyone' : null,
+        withTapToViewExpired
+          ? `module-expire-timer--${direction}-with-tap-to-view-expired`
+          : null,
+        direction && withImageNoCaption
+          ? 'module-expire-timer--with-image-no-caption'
+          : null,
+        withSticker ? 'module-expire-timer--with-sticker' : null
+      )}
+    />
+  );
 }