Migrate most React class components to function components

ts/components/conversation/InlineNotificationWrapper.tsx

@@ -1,69 +1,51 @@
 // Copyright 2019 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import React from 'react';
+import type { ReactNode } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import { getInteractionMode } from '../../services/InteractionMode';
 
-export type PropsType = {
+type PropsType = {
   id: string;
   conversationId: string;
   isTargeted: boolean;
-  targetMessage?: (messageId: string, conversationId: string) => unknown;
+  targetMessage: (messageId: string, conversationId: string) => unknown;
+  children: ReactNode;
 };
 
-export class InlineNotificationWrapper extends React.Component<PropsType> {
-  public focusRef: React.RefObject<HTMLDivElement> = React.createRef();
+export function InlineNotificationWrapper({
+  id,
+  conversationId,
+  isTargeted,
+  targetMessage,
+  children,
+}: PropsType): JSX.Element {
+  const focusRef = useRef<HTMLDivElement>(null);
 
-  public setFocus = (): void => {
-    const container = this.focusRef.current;
-
-    if (container && !container.contains(document.activeElement)) {
-      container.focus();
+  useEffect(() => {
+    if (isTargeted) {
+      const container = focusRef.current;
+      if (container && !container.contains(document.activeElement)) {
+        container.focus();
+      }
     }
-  };
+  }, [isTargeted]);
 
-  public handleFocus = (): void => {
+  const handleFocus = useCallback(() => {
     if (getInteractionMode() === 'keyboard') {
-      this.setTargeted();
-    }
-  };
-
-  public setTargeted = (): void => {
-    const { id, conversationId, targetMessage } = this.props;
-
-    if (targetMessage) {
       targetMessage(id, conversationId);
     }
-  };
+  }, [id, conversationId, targetMessage]);
 
-  public override componentDidMount(): void {
-    const { isTargeted } = this.props;
-    if (isTargeted) {
-      this.setFocus();
-    }
-  }
-
-  public override componentDidUpdate(prevProps: PropsType): void {
-    const { isTargeted } = this.props;
-
-    if (!prevProps.isTargeted && isTargeted) {
-      this.setFocus();
-    }
-  }
-
-  public override render(): JSX.Element {
-    const { children } = this.props;
-
-    return (
-      <div
-        className="module-inline-notification-wrapper"
-        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-        tabIndex={0}
-        ref={this.focusRef}
-        onFocus={this.handleFocus}
-      >
-        {children}
-      </div>
-    );
-  }
+  return (
+    <div
+      className="module-inline-notification-wrapper"
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+      tabIndex={0}
+      ref={focusRef}
+      onFocus={handleFocus}
+    >
+      {children}
+    </div>
+  );
 }