make sure we do not useInterval if not expiring for expiretimer

js/wall_clock_listener.js

@@ -7,7 +7,7 @@
   window.Whisper = window.Whisper || {};
 
   let lastTime;
-  const interval = 1000;
+  const interval = 10000;
   let events;
   function checkTime() {
     const currentTime = Date.now();

package.json

@@ -17,7 +17,7 @@
     "postinstall": "electron-builder install-app-deps && rimraf node_modules/dtrace-provider",
     "start": "cross-env NODE_APP_INSTANCE=$MULTI electron .",
     "start-prod": "cross-env NODE_ENV=production NODE_APP_INSTANCE=devprod$MULTI electron .",
-    "grunt": "grunt",
+    "grunt": "yarn clean-transpile; grunt",
     "grunt:dev": "yarn clean-transpile; yarn grunt dev --force",
     "generate": "yarn grunt --force",
     "build-release": "run-script-os",

ts/components/conversation/ExpireTimer.tsx

@@ -1,7 +1,9 @@
 import React, { useCallback, useState } from 'react';
 
 import { getTimerBucketIcon } from '../../util/timer';
-import { useInterval } from '../../hooks/useInterval';
+
+// tslint:disable-next-line: no-submodule-imports
+import useInterval from 'react-use/lib/useInterval';
 import styled from 'styled-components';
 import { SessionIcon } from '../icon/SessionIcon';
 

ts/components/conversation/Timestamp.tsx

@@ -2,7 +2,9 @@ import React, { useCallback, useState } from 'react';
 import moment from 'moment';
 
 import { formatRelativeTime } from '../../util/formatRelativeTime';
-import { useInterval } from '../../hooks/useInterval';
+
+// tslint:disable-next-line: no-submodule-imports
+import useInterval from 'react-use/lib/useInterval';
 import styled from 'styled-components';
 
 type Props = {

ts/components/conversation/message/message-item/GenericReadableMessage.tsx

@@ -56,7 +56,8 @@ function useIsExpired(props: ExpiringProps) {
   const dispatch = useDispatch();
 
   const [isExpired] = useState(isExpiredProps);
-  async function checkExpired() {
+
+  const checkExpired = useCallback(async () => {
     const now = Date.now();
 
     if (!expirationTimestamp || !expirationLength) {
@@ -76,10 +77,13 @@ function useIsExpired(props: ExpiringProps) {
         convo?.updateLastMessage();
       }
     }
-  }
+  }, [expirationTimestamp, expirationLength, isExpired, messageId, convoId]);
 
-  const increment = getIncrement(expirationLength || EXPIRATION_CHECK_MINIMUM);
-  const checkFrequency = Math.max(EXPIRATION_CHECK_MINIMUM, increment);
+  let checkFrequency: number | null = null;
+  if (expirationLength) {
+    const increment = getIncrement(expirationLength || EXPIRATION_CHECK_MINIMUM);
+    checkFrequency = Math.max(EXPIRATION_CHECK_MINIMUM, increment);
+  }
 
   useEffect(() => {
     void checkExpired();
@@ -171,22 +175,26 @@ export const GenericReadableMessage = (props: Props) => {
       key={`readable-message-${messageId}`}
     >
       <MessageAvatar messageId={messageId} />
-      <ExpireTimer
-        isCorrectSide={!isIncoming}
-        expirationLength={expirationLength || 0}
-        expirationTimestamp={expirationTimestamp || null}
-      />
+      {expirationLength && expirationTimestamp && (
+        <ExpireTimer
+          isCorrectSide={!isIncoming}
+          expirationLength={expirationLength}
+          expirationTimestamp={expirationTimestamp}
+        />
+      )}
       <MessageContentWithStatuses
         ctxMenuID={props.ctxMenuID}
         messageId={messageId}
         onQuoteClick={props.onQuoteClick}
         isDetailView={isDetailView}
       />
-      <ExpireTimer
-        isCorrectSide={isIncoming}
-        expirationLength={expirationLength || 0}
-        expirationTimestamp={expirationTimestamp || null}
-      />
+      {expirationLength && expirationTimestamp && (
+        <ExpireTimer
+          isCorrectSide={isIncoming}
+          expirationLength={expirationLength}
+          expirationTimestamp={expirationTimestamp}
+        />
+      )}
     </ReadableMessage>
   );
 };

ts/hooks/useInterval.ts

@@ -1,25 +0,0 @@
-import React from 'react';
-
-export const useInterval = (callback: any, delay: number | null) => {
-  const savedCallback = React.useRef<any>();
-
-  React.useEffect(() => {
-    savedCallback.current = callback;
-  }, [callback]);
-
-  React.useEffect(() => {
-    function tick() {
-      if (savedCallback && savedCallback.current && savedCallback.current) {
-        savedCallback.current();
-      }
-    }
-    if (delay !== null) {
-      const id = global.setInterval(tick, delay);
-      tick();
-      return () => {
-        global.clearInterval(id);
-      };
-    }
-    return;
-  }, [delay]);
-};