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,91 +108,99 @@ 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.onRemoveFromModerator = this.onRemoveFromModerator.bind(this);
-    this.updatePlaybackSpeed = this.updatePlaybackSpeed.bind(this);
 
-    this.state = {
+  //   this.handleImageErrorBound = this.handleImageError.bind(this);
-      expiring: false,
+  //   this.onReplyPrivate = this.onReplyPrivate.bind(this);
-      expired: false,
+  //   this.handleContextMenu = this.handleContextMenu.bind(this);
-      imageBroken: false,
+  //   this.onAddModerator = this.onAddModerator.bind(this);
-      playbackSpeed: 1,
+  //   this.onRemoveFromModerator = this.onRemoveFromModerator.bind(this);
-    };
+  //   this.updatePlaybackSpeed = this.updatePlaybackSpeed.bind(this);
-    this.ctxMenuID = `ctx-menu-message-${uuid()}`;
+
-  }
+  //   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);
 
-  public componentDidMount() {
+  ctxMenuID = `ctx-menu-message-${uuid()}`;
-    const { expirationLength } = this.props;
+
-    if (!expirationLength) {
+
+  useEffect(() => {
+    if (!props.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
   public renderAttachment() {
@@ -328,7 +337,7 @@ class MessageInner extends React.PureComponent<MessageRegularProps, State> {
       </div>
     );
   }
-  }
+}
 
   // tslint:disable-next-line cyclomatic-complexity
   public renderPreview() {
@@ -419,7 +428,7 @@ class MessageInner extends React.PureComponent<MessageRegularProps, State> {
       </div>
     </div>
   );
-  }
+}
 
   public renderQuote() {
   const {
@@ -472,7 +481,7 @@ class MessageInner extends React.PureComponent<MessageRegularProps, State> {
       withContentAbove={withContentAbove}
     />
   );
-  }
+}
 
   public renderAvatar() {
   const {
@@ -521,7 +530,7 @@ class MessageInner extends React.PureComponent<MessageRegularProps, State> {
       )}
     </div>
   );
-  }
+}
 
   public renderText() {
   const { text, direction, status, conversationType, convoId, multiSelectMode } = this.props;
@@ -550,7 +559,7 @@ class MessageInner extends React.PureComponent<MessageRegularProps, State> {
       />
     </div>
   );
-  }
+}
 
   public renderError(isCorrectSide: boolean) {
   const { status, direction } = this.props;
@@ -566,7 +575,7 @@ class MessageInner extends React.PureComponent<MessageRegularProps, State> {
       />
     </div>
   );
-  }
+}
 
   public renderContextMenu() {
   const {
@@ -680,7 +689,7 @@ class MessageInner extends React.PureComponent<MessageRegularProps, State> {
       ) : null}
     </Menu>
   );
-  }
+}
 
   public getWidth(): number | undefined {
   const { attachments, previews } = this.props;
@@ -709,7 +718,7 @@ class MessageInner extends React.PureComponent<MessageRegularProps, State> {
   }
 
   return;
-  }
+}
 
   public isShowingImage(): boolean {
   const { attachments, previews } = this.props;
@@ -741,7 +750,7 @@ class MessageInner extends React.PureComponent<MessageRegularProps, State> {
   }
 
   return false;
-  }
+}
 
   // tslint:disable-next-line: cyclomatic-complexity
   public render() {
@@ -870,7 +879,7 @@ class MessageInner extends React.PureComponent<MessageRegularProps, State> {
       </div>
     </InView>
   );
-  }
+}
 
   /**
    * Doubles / halves the playback speed based on the current playback speed.
@@ -880,7 +889,7 @@ class MessageInner extends React.PureComponent<MessageRegularProps, State> {
     ...this.state,
     playbackSpeed: this.state.playbackSpeed === 1 ? 2 : 1,
   });
-  }
+}
 
   private handleContextMenu(e: any) {
   e.preventDefault();
@@ -896,7 +905,7 @@ class MessageInner extends React.PureComponent<MessageRegularProps, State> {
       event: e,
     });
   }
-  }
+}
 
   private renderAuthor() {
   const {
@@ -930,21 +939,21 @@ class MessageInner extends React.PureComponent<MessageRegularProps, State> {
       />
     </div>
   );
-  }
+}
 
   private onReplyPrivate(e: any) {
   if (this.props && this.props.onReply) {
     this.props.onReply(this.props.timestamp);
   }
-  }
+}
 
   private async onAddModerator() {
   await addSenderAsModerator(this.props.authorPhoneNumber, this.props.convoId);
-  }
+}
 
   private async onRemoveFromModerator() {
   await removeSenderFromModerator(this.props.authorPhoneNumber, this.props.convoId);
-  }
+}
 }
 
 export const Message = withTheme(MessageInner);