fix timer expiring sometimes missing a sec

js/expiring_messages.js

@@ -34,11 +34,10 @@
             Message: Whisper.Message,
           });
 
-          Whisper.events.trigger(
+          Whisper.events.trigger('messageExpired', {
-            'messageExpired',
+            conversationKey: message.attributes.conversationId,
-            message.id,
+            messageId: message.id,
-            message.conversationId
+          });
-          );
 
           const conversation = message.getConversation();
           if (conversation) {

ts/components/conversation/ExpireTimer.tsx

@@ -1,50 +1,32 @@
-import React from 'react';
+import React, { useState } from 'react';
 import classNames from 'classnames';
 
 import { getIncrement, getTimerBucket } from '../../util/timer';
+import { useInterval } from '../../hooks/useInterval';
 
-interface Props {
+type Props = {
   withImageNoCaption: boolean;
   expirationLength: number;
   expirationTimestamp: number;
   direction: 'incoming' | 'outgoing';
-}
+};
-
-export class ExpireTimer extends React.Component<Props> {
-  private interval: any;
-
-  constructor(props: Props) {
-    super(props);
-
-    this.interval = null;
-  }
-
-  public componentDidMount() {
-    const { expirationLength } = this.props;
-    const increment = getIncrement(expirationLength);
-    const updateFrequency = Math.max(increment, 500);
 
+export const ExpireTimer = (props: Props) => {
+  const [lastUpdated, setLastUpdated] = useState(Date.now());
   const update = () => {
-      this.setState({
+    setLastUpdated(Date.now());
-        lastUpdated: Date.now(),
-      });
   };
-    this.interval = setInterval(update, updateFrequency);
-  }
-
-  public componentWillUnmount() {
-    if (this.interval) {
-      clearInterval(this.interval);
-    }
-  }
-
-  public render() {
   const {
     direction,
     expirationLength,
     expirationTimestamp,
     withImageNoCaption,
-    } = this.props;
+  } = props;
+
+  const increment = getIncrement(expirationLength);
+  const updateFrequency = Math.max(increment, 500);
+
+  useInterval(update, updateFrequency);
 
   const bucket = getTimerBucket(expirationTimestamp, expirationLength);
   let timeLeft = Math.round((expirationTimestamp - Date.now()) / 1000);
@@ -70,11 +52,8 @@ export class ExpireTimer extends React.Component<Props> {
         'module-expire-timer-margin',
         `module-expire-timer--${bucket}`,
         `module-expire-timer--${direction}`,
-          withImageNoCaption
+        withImageNoCaption ? 'module-expire-timer--with-image-no-caption' : null
-            ? 'module-expire-timer--with-image-no-caption'
-            : null
       )}
     />
   );
-  }
+};
-}

ts/state/ducks/conversations.ts

@@ -189,8 +189,8 @@ export type RemoveAllConversationsActionType = {
 export type MessageExpiredActionType = {
   type: 'MESSAGE_EXPIRED';
   payload: {
-    id: string;
+    messageId: string;
-    conversationId: string;
+    conversationKey: string;
   };
 };
 export type MessageChangedActionType = {
@@ -294,15 +294,18 @@ function removeAllConversations(): RemoveAllConversationsActionType {
   };
 }
 
-function messageExpired(
+function messageExpired({
-  id: string,
+  conversationKey,
-  conversationId: string
+  messageId,
-): MessageExpiredActionType {
+}: {
+  conversationKey: string;
+  messageId: string;
+}): MessageExpiredActionType {
   return {
     type: 'MESSAGE_EXPIRED',
     payload: {
-      id,
+      conversationKey,
-      conversationId,
+      messageId,
     },
   };
 }
@@ -445,9 +448,7 @@ export function reducer(
   if (action.type === 'CONVERSATIONS_REMOVE_ALL') {
     return getEmptyState();
   }
-  if (action.type === 'MESSAGE_EXPIRED') {
+
-    // nothing to do here
-  }
   if (action.type === 'SELECTED_CONVERSATION_CHANGED') {
     const { payload } = action;
     const { id } = payload;
@@ -527,8 +528,7 @@ export function reducer(
     }
     return state;
   }
-
+  if (action.type === 'MESSAGE_EXPIRED' || action.type === 'MESSAGE_DELETED') {
-  if (action.type === 'MESSAGE_DELETED') {
     const { conversationKey, messageId } = action.payload;
     if (conversationKey === state.selectedConversation) {
       // search if we find this message id.

ts/state/ducks/search.ts

@@ -391,11 +391,11 @@ export function reducer(
     }
 
     const { payload } = action;
-    const { id } = payload;
+    const { messageId } = payload;
 
     return {
       ...state,
-      messages: reject(messages, message => id === message.id),
+      messages: reject(messages, message => messageId === message.id),
       messageLookup: omit(messageLookup, ['id']),
     };
   }

ts/util/timer.ts

@@ -4,6 +4,10 @@ export function getIncrement(length: number): number {
   if (length < 0) {
     return 1000;
   }
+  // if less than one minute, default to 500 ms so that UI counter is accurate
+  if (length <= 60000) {
+    return 500;
+  }
 
   return Math.ceil(length / 12);
 }