WIP refactoring message component.

ts/components/conversation/Message.tsx

@@ -93,6 +93,7 @@ import {
 } from '../../interactions/messageInteractions';
 import { updateUserDetailsModal } from '../../state/ducks/modalDialog';
 import { MessageInteraction } from '../../interactions';
+import { useState } from 'react';
 
 // Same as MIN_WIDTH in ImageGrid.tsx
 const MINIMUM_LINK_PREVIEW_IMAGE_WIDTH = 200;
@@ -107,90 +108,98 @@ interface State {
 const EXPIRATION_CHECK_MINIMUM = 2000;
 const EXPIRED_DELAY = 600;
 
-class MessageInner extends React.PureComponent<MessageRegularProps, State> {
+const MessageInner = (props: MessageRegularProps) => {
-  public handleImageErrorBound: () => void;
 
-  public expirationCheckInterval: any;
+  let handleImageErrorBound: () => void;
-  public expiredTimeout: any;
-  public ctxMenuID: string;
 
-  public constructor(props: MessageRegularProps) {
+  let expirationCheckInterval: any;
-    super(props);
+  let expiredTimeout: any;
+  let ctxMenuID: string;
 
-    this.handleImageErrorBound = this.handleImageError.bind(this);
+  // public constructor(props: MessageRegularProps) {
-    this.onReplyPrivate = this.onReplyPrivate.bind(this);
+  //   super(props);
-    this.handleContextMenu = this.handleContextMenu.bind(this);
+
-    this.onAddModerator = this.onAddModerator.bind(this);
+  //   this.handleImageErrorBound = this.handleImageError.bind(this);
-    this.onRemoveFromModerator = this.onRemoveFromModerator.bind(this);
+  //   this.onReplyPrivate = this.onReplyPrivate.bind(this);
-    this.updatePlaybackSpeed = this.updatePlaybackSpeed.bind(this);
+  //   this.handleContextMenu = this.handleContextMenu.bind(this);
+  //   this.onAddModerator = this.onAddModerator.bind(this);
+  //   this.onRemoveFromModerator = this.onRemoveFromModerator.bind(this);
+  //   this.updatePlaybackSpeed = this.updatePlaybackSpeed.bind(this);
+
+  //   this.state = {
+  //     expiring: false,
+  //     expired: false,
+  //     imageBroken: false,
+  //     playbackSpeed: 1,
+  //   };
+  //   this.ctxMenuID = `ctx-menu-message-${uuid()}`;
+  // }
+
+  const [expiring, setExpiring] = useState(false);
+  const [expired, setExpired] = useState(false);
+  const [image, setImageBroken] = useState(false);
+  const [playbackSpeed, setPlaybackSpeed] = useState(1);
+
+  ctxMenuID = `ctx-menu-message-${uuid()}`;
 
-    this.state = {
-      expiring: false,
-      expired: false,
-      imageBroken: false,
-      playbackSpeed: 1,
-    };
-    this.ctxMenuID = `ctx-menu-message-${uuid()}`;
-  }
 
-  public componentDidMount() {
+  useEffect(() => {
-    const { expirationLength } = this.props;
+    if (!props.expirationLength) {
-    if (!expirationLength) {
       return;
     }
 
+    const { expirationLength } = props;
+
     const increment = getIncrement(expirationLength);
     const checkFrequency = Math.max(EXPIRATION_CHECK_MINIMUM, increment);
 
-    this.checkExpired();
+    checkExpired();
 
-    this.expirationCheckInterval = setInterval(() => {
+    expirationCheckInterval = setInterval(() => {
-      this.checkExpired();
+      checkExpired();
     }, checkFrequency);
-  }
 
-  public componentWillUnmount() {
+  }, [])
-    if (this.expirationCheckInterval) {
+
-      clearInterval(this.expirationCheckInterval);
+
-    }
+  // equivalent to componentWillUpdate
-    if (this.expiredTimeout) {
+  useEffect(() => {
-      clearTimeout(this.expiredTimeout);
+    checkExpired();
+
+    // return occurs on unmount equivalent to componentWillUnmount
+    return () => {
+      if (expirationCheckInterval) {
+        clearInterval(expirationCheckInterval);
       }
+      if (expiredTimeout) {
+        clearTimeout(expiredTimeout);
       }
-
-  public componentDidUpdate() {
-    this.checkExpired();
     }
+  })
 
-  public checkExpired() {
+  const checkExpired = () => {
     const now = Date.now();
-    const { isExpired, expirationTimestamp, expirationLength } = this.props;
+    const { isExpired, expirationTimestamp, expirationLength } = props;
 
     if (!expirationTimestamp || !expirationLength) {
       return;
     }
-    if (this.expiredTimeout) {
+    if (expiredTimeout) {
       return;
     }
 
     if (isExpired || now >= expirationTimestamp) {
-      this.setState({
+      setExpiring(true);
-        expiring: true,
-      });
 
-      const setExpired = () => {
+      const triggerSetExpired = () => {
-        this.setState({
+        setExpired(true)
-          expired: true,
-        });
       };
-      this.expiredTimeout = setTimeout(setExpired, EXPIRED_DELAY);
+      expiredTimeout = setTimeout(triggerSetExpired(), EXPIRED_DELAY);
     }
   }
 
-  public handleImageError() {
+  const handleImageError = () => {
-    this.setState({
+  setImageBroken(true);
-      imageBroken: true,
-    });
 }
 
   // tslint:disable-next-line max-func-body-length cyclomatic-complexity