Rewrite <CallScreen> component with hooks

ts/components/CallScreen.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import { noop } from 'lodash';
 import classNames from 'classnames';
 import {
   CallDetailsType,
@@ -29,150 +30,7 @@ export type PropsType = {
   toggleSettings: () => void;
 };
 
-type StateType = {
+export const CallScreen: React.FC<PropsType> = ({
-  acceptedDuration: number | null;
-  showControls: boolean;
-};
-
-export class CallScreen extends React.Component<PropsType, StateType> {
-  private interval: NodeJS.Timeout | null;
-
-  private controlsFadeTimer: NodeJS.Timeout | null;
-
-  private readonly localVideoRef: React.RefObject<HTMLVideoElement>;
-
-  private readonly remoteVideoRef: React.RefObject<HTMLCanvasElement>;
-
-  constructor(props: PropsType) {
-    super(props);
-
-    this.state = {
-      acceptedDuration: null,
-      showControls: true,
-    };
-
-    this.interval = null;
-    this.controlsFadeTimer = null;
-    this.localVideoRef = React.createRef();
-    this.remoteVideoRef = React.createRef();
-  }
-
-  public componentDidMount(): void {
-    const { setLocalPreview, setRendererCanvas } = this.props;
-
-    // It's really jump with a value of 500ms.
-    this.interval = setInterval(this.updateAcceptedTimer, 100);
-    this.fadeControls();
-
-    document.addEventListener('keydown', this.handleKeyDown);
-
-    setLocalPreview({ element: this.localVideoRef });
-    setRendererCanvas({ element: this.remoteVideoRef });
-  }
-
-  public componentWillUnmount(): void {
-    const { setLocalPreview, setRendererCanvas } = this.props;
-
-    document.removeEventListener('keydown', this.handleKeyDown);
-
-    if (this.interval) {
-      clearInterval(this.interval);
-    }
-    if (this.controlsFadeTimer) {
-      clearTimeout(this.controlsFadeTimer);
-    }
-
-    setLocalPreview({ element: undefined });
-    setRendererCanvas({ element: undefined });
-  }
-
-  updateAcceptedTimer = (): void => {
-    const { callDetails } = this.props;
-
-    if (!callDetails) {
-      return;
-    }
-
-    if (callDetails.acceptedTime) {
-      this.setState({
-        acceptedDuration: Date.now() - callDetails.acceptedTime,
-      });
-    }
-  };
-
-  handleKeyDown = (event: KeyboardEvent): void => {
-    const { callDetails } = this.props;
-
-    if (!callDetails) {
-      return;
-    }
-
-    let eventHandled = false;
-
-    if (event.shiftKey && (event.key === 'V' || event.key === 'v')) {
-      this.toggleVideo();
-      eventHandled = true;
-    } else if (event.shiftKey && (event.key === 'M' || event.key === 'm')) {
-      this.toggleAudio();
-      eventHandled = true;
-    }
-
-    if (eventHandled) {
-      event.preventDefault();
-      event.stopPropagation();
-      this.showControls();
-    }
-  };
-
-  showControls = (): void => {
-    const { showControls } = this.state;
-
-    if (!showControls) {
-      this.setState({
-        showControls: true,
-      });
-    }
-
-    this.fadeControls();
-  };
-
-  fadeControls = (): void => {
-    if (this.controlsFadeTimer) {
-      clearTimeout(this.controlsFadeTimer);
-    }
-
-    this.controlsFadeTimer = setTimeout(() => {
-      this.setState({
-        showControls: false,
-      });
-    }, 5000);
-  };
-
-  toggleAudio = (): void => {
-    const { callDetails, hasLocalAudio, setLocalAudio } = this.props;
-
-    if (!callDetails) {
-      return;
-    }
-
-    setLocalAudio({
-      callId: callDetails.callId,
-      enabled: !hasLocalAudio,
-    });
-  };
-
-  toggleVideo = (): void => {
-    const { callDetails, hasLocalVideo, setLocalVideo } = this.props;
-
-    if (!callDetails) {
-      return;
-    }
-
-    setLocalVideo({ callId: callDetails.callId, enabled: !hasLocalVideo });
-  };
-
-  public render(): JSX.Element | null {
-    const {
   callDetails,
   callState,
   hangUp,
@@ -180,10 +38,99 @@ export class CallScreen extends React.Component<PropsType, StateType> {
   hasLocalVideo,
   hasRemoteVideo,
   i18n,
+  setLocalAudio,
+  setLocalVideo,
+  setLocalPreview,
+  setRendererCanvas,
   togglePip,
   toggleSettings,
-    } = this.props;
+}) => {
-    const { showControls } = this.state;
+  const { acceptedTime, callId } = callDetails || {};
+
+  const toggleAudio = useCallback(() => {
+    if (!callId) {
+      return;
+    }
+
+    setLocalAudio({
+      callId,
+      enabled: !hasLocalAudio,
+    });
+  }, [callId, setLocalAudio, hasLocalAudio]);
+
+  const toggleVideo = useCallback(() => {
+    if (!callId) {
+      return;
+    }
+
+    setLocalVideo({
+      callId,
+      enabled: !hasLocalVideo,
+    });
+  }, [callId, setLocalVideo, hasLocalVideo]);
+
+  const [acceptedDuration, setAcceptedDuration] = useState<number | null>(null);
+  const [showControls, setShowControls] = useState(true);
+
+  const localVideoRef = useRef<HTMLVideoElement | null>(null);
+  const remoteVideoRef = useRef<HTMLCanvasElement | null>(null);
+
+  useEffect(() => {
+    setLocalPreview({ element: localVideoRef });
+    setRendererCanvas({ element: remoteVideoRef });
+
+    return () => {
+      setLocalPreview({ element: undefined });
+      setRendererCanvas({ element: undefined });
+    };
+  }, [setLocalPreview, setRendererCanvas]);
+
+  useEffect(() => {
+    if (!acceptedTime) {
+      return noop;
+    }
+    // It's really jumpy with a value of 500ms.
+    const interval = setInterval(() => {
+      setAcceptedDuration(Date.now() - acceptedTime);
+    }, 100);
+    return clearInterval.bind(null, interval);
+  }, [acceptedTime]);
+
+  useEffect(() => {
+    if (!showControls) {
+      return noop;
+    }
+    const timer = setTimeout(() => {
+      setShowControls(false);
+    }, 5000);
+    return clearInterval.bind(null, timer);
+  }, [showControls]);
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent): void => {
+      let eventHandled = false;
+
+      if (event.shiftKey && (event.key === 'V' || event.key === 'v')) {
+        toggleVideo();
+        eventHandled = true;
+      } else if (event.shiftKey && (event.key === 'M' || event.key === 'm')) {
+        toggleAudio();
+        eventHandled = true;
+      }
+
+      if (eventHandled) {
+        event.preventDefault();
+        event.stopPropagation();
+        setShowControls(true);
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [toggleAudio, toggleVideo]);
+
   const isAudioOnly = !hasLocalVideo && !hasRemoteVideo;
 
   if (!callDetails || !callState) {
@@ -207,7 +154,9 @@ export class CallScreen extends React.Component<PropsType, StateType> {
   return (
     <div
       className="module-calling__container"
-        onMouseMove={this.showControls}
+      onMouseMove={() => {
+        setShowControls(true);
+      }}
       role="group"
     >
       <div
@@ -220,7 +169,7 @@ export class CallScreen extends React.Component<PropsType, StateType> {
         <div className="module-calling__header--header-name">
           {callDetails.title}
         </div>
-          {this.renderMessage(callState)}
+        {renderHeaderMessage(i18n, callState, acceptedDuration)}
         <div className="module-calling-tools">
           <button
             type="button"
@@ -236,10 +185,21 @@ export class CallScreen extends React.Component<PropsType, StateType> {
           />
         </div>
       </div>
-        {hasRemoteVideo
+      {hasRemoteVideo ? (
-          ? this.renderRemoteVideo()
+        <canvas
-          : this.renderAvatar(callDetails)}
+          className="module-ongoing-call__remote-video-enabled"
-        {hasLocalVideo ? this.renderLocalVideo() : null}
+          ref={remoteVideoRef}
+        />
+      ) : (
+        renderAvatar(i18n, callDetails)
+      )}
+      {hasLocalVideo && (
+        <video
+          className="module-ongoing-call__local-video"
+          ref={localVideoRef}
+          autoPlay
+        />
+      )}
       <div
         className={classNames(
           'module-ongoing-call__actions',
@@ -249,30 +209,32 @@ export class CallScreen extends React.Component<PropsType, StateType> {
         <CallingButton
           buttonType={videoButtonType}
           i18n={i18n}
-            onClick={this.toggleVideo}
+          onClick={toggleVideo}
           tooltipDistance={24}
         />
         <CallingButton
           buttonType={audioButtonType}
           i18n={i18n}
-            onClick={this.toggleAudio}
+          onClick={toggleAudio}
           tooltipDistance={24}
         />
         <CallingButton
           buttonType={CallingButtonType.HANG_UP}
           i18n={i18n}
           onClick={() => {
-              hangUp({ callId: callDetails.callId });
+            hangUp({ callId });
           }}
           tooltipDistance={24}
         />
       </div>
     </div>
   );
-  }
+};
 
-  private renderAvatar(callDetails: CallDetailsType) {
+function renderAvatar(
-    const { i18n } = this.props;
+  i18n: LocalizerType,
+  callDetails: CallDetailsType
+): JSX.Element {
   const {
     avatarPath,
     color,
@@ -299,29 +261,11 @@ export class CallScreen extends React.Component<PropsType, StateType> {
   );
 }
 
-  private renderLocalVideo() {
+function renderHeaderMessage(
-    return (
+  i18n: LocalizerType,
-      <video
+  callState: CallState,
-        className="module-ongoing-call__local-video"
+  acceptedDuration: null | number
-        ref={this.localVideoRef}
+): JSX.Element | null {
-        autoPlay
-      />
-    );
-  }
-
-  private renderRemoteVideo() {
-    return (
-      <canvas
-        className="module-ongoing-call__remote-video-enabled"
-        ref={this.remoteVideoRef}
-      />
-    );
-  }
-
-  private renderMessage(callState: CallState) {
-    const { i18n } = this.props;
-    const { acceptedDuration } = this.state;
-
   let message = null;
   if (callState === CallState.Prering) {
     message = i18n('outgoingCallPrering');
@@ -330,9 +274,7 @@ export class CallScreen extends React.Component<PropsType, StateType> {
   } else if (callState === CallState.Reconnecting) {
     message = i18n('callReconnecting');
   } else if (callState === CallState.Accepted && acceptedDuration) {
-      message = i18n('callDuration', [
+    message = i18n('callDuration', [renderDuration(acceptedDuration)]);
-        CallScreen.renderDuration(acceptedDuration),
-      ]);
   }
 
   if (!message) {
@@ -341,7 +283,7 @@ export class CallScreen extends React.Component<PropsType, StateType> {
   return <div className="module-ongoing-call__header-message">{message}</div>;
 }
 
-  static renderDuration(ms: number): string {
+function renderDuration(ms: number): string {
   const secs = Math.floor((ms / 1000) % 60)
     .toString()
     .padStart(2, '0');
@@ -354,4 +296,3 @@ export class CallScreen extends React.Component<PropsType, StateType> {
   }
   return `${mins}:${secs}`;
 }
-}

ts/util/lint/exceptions.json

@@ -14388,37 +14388,22 @@
     "reasonDetail": "Doesn't touch the DOM."
   },
   {
-    "rule": "React-createRef",
+    "rule": "React-useRef",
     "path": "ts/components/CallScreen.js",
-    "line": "        this.localVideoRef = react_1.default.createRef();",
+    "line": "    const localVideoRef = react_1.useRef(null);",
-    "lineNumber": 87,
+    "lineNumber": 41,
     "reasonCategory": "usageTrusted",
-    "updated": "2020-09-14T23:03:44.863Z"
+    "updated": "2020-10-26T21:35:52.858Z",
+    "reasonDetail": "Used to get the local video element for rendering."
   },
   {
-    "rule": "React-createRef",
+    "rule": "React-useRef",
     "path": "ts/components/CallScreen.js",
-    "line": "        this.remoteVideoRef = react_1.default.createRef();",
+    "line": "    const remoteVideoRef = react_1.useRef(null);",
-    "lineNumber": 88,
+    "lineNumber": 42,
     "reasonCategory": "usageTrusted",
-    "updated": "2020-09-14T23:03:44.863Z"
+    "updated": "2020-10-26T21:35:52.858Z",
-  },
+    "reasonDetail": "Used to get the remote video element for rendering."
-  {
-    "rule": "React-createRef",
-    "path": "ts/components/CallScreen.tsx",
-    "line": "    this.localVideoRef = React.createRef();",
-    "lineNumber": 56,
-    "reasonCategory": "usageTrusted",
-    "updated": "2020-06-02T21:51:34.813Z",
-    "reasonDetail": "Used to render local preview video"
-  },
-  {
-    "rule": "React-createRef",
-    "path": "ts/components/CallScreen.tsx",
-    "line": "    this.remoteVideoRef = React.createRef();",
-    "lineNumber": 57,
-    "reasonCategory": "usageTrusted",
-    "updated": "2020-09-14T23:03:44.863Z"
   },
   {
     "rule": "React-useRef",