fix: add some debugging messageinfo (not released)

_locales/en/messages.json

@@ -197,6 +197,11 @@
   "timerModeRead": "read",
   "timerModeSent": "sent",
   "confirm": "Confirm",
+  "messageHash": "Message Hash",
+  "serverId": "Server ID",
+  "expirationType": "Expiration Type",
+  "expirationDuration": "Expiration Duration",
+  "disappears": "Disappears",
   "followSetting": "Follow Setting",
   "followSettingDisabled": "Messages you send will no longer disappear. Are you sure you want to turn off disappearing messages?",
   "followSettingTimeAndType": "Set your messages to disappear <b>$time$</b> after they have been <b>$type$</b>?",

package.json

@@ -85,6 +85,7 @@
     "config": "1.28.1",
     "country-code-lookup": "^0.0.19",
     "curve25519-js": "https://github.com/oxen-io/curve25519-js",
+    "date-fns": "^3.3.1",
     "dompurify": "^2.0.7",
     "electron-localshortcut": "^3.2.1",
     "electron-updater": "^4.2.2",

ts/components/conversation/message/message-content/MessageReactBar.tsx

@@ -3,7 +3,10 @@ import styled from 'styled-components';
 
 import { isEmpty } from 'lodash';
 import moment from 'moment';
+import useBoolean from 'react-use/lib/useBoolean';
+import useInterval from 'react-use/lib/useInterval';
 import { useMessageExpirationPropsById } from '../../../../hooks/useParamSelector';
+import { DURATION } from '../../../../session/constants';
 import { nativeEmojiData } from '../../../../util/emoji';
 import { getRecentReactions } from '../../../../util/storage';
 import { SpacerSM } from '../../../basic/Text';
@@ -91,8 +94,7 @@ function useIsRenderedExpiresInItem(messageId: string) {
   return expiryDetails.expirationTimestamp;
 }
 
-function formatExpiry({ expirationTimestamp }: { expirationTimestamp: number }) {
+function formatExpiry({ diffMs }: { diffMs: number }) {
-  const diffMs = expirationTimestamp - Date.now();
   const diff = moment(diffMs).utc();
 
   if (diffMs <= 0) {
@@ -132,7 +134,17 @@ function formatExpiry({ expirationTimestamp }: { expirationTimestamp: number })
 }
 
 const ExpiresInItem = ({ expirationTimestamp }: { expirationTimestamp?: number | null }) => {
-  if (!expirationTimestamp) {
+  // this boolean is just used to forceRefresh the state when we get to display seconds in the contextmenu
+  const [refresh, setRefresh] = useBoolean(false);
+  const diffMs = (expirationTimestamp || 0) - Date.now();
+
+  useInterval(
+    () => {
+      setRefresh(!refresh);
+    },
+    diffMs > 0 && diffMs <= 2 * DURATION.MINUTES ? 500 : null
+  );
+  if (!expirationTimestamp || diffMs < 0) {
     return null;
   }
 
@@ -140,7 +152,7 @@ const ExpiresInItem = ({ expirationTimestamp }: { expirationTimestamp?: number |
     <StyledExpiresIn>
       <SessionIcon iconSize={'small'} iconType="stopwatch" />
       <SpacerSM />
-      <span>{formatExpiry({ expirationTimestamp })}</span>
+      <span>{formatExpiry({ diffMs })}</span>
     </StyledExpiresIn>
   );
 };

ts/components/conversation/right-panel/overlay/message-info/components/MessageInfo.tsx

@@ -1,13 +1,20 @@
+import { format, formatDistanceStrict } from 'date-fns';
 import { ipcRenderer } from 'electron';
 import { isEmpty } from 'lodash';
 import moment from 'moment';
+
 import React from 'react';
 import styled from 'styled-components';
 import { MessageFrom } from '.';
 import {
   useMessageDirection,
+  useMessageExpirationDurationMs,
+  useMessageExpirationTimestamp,
+  useMessageExpirationType,
+  useMessageHash,
   useMessageReceivedAt,
   useMessageSender,
+  useMessageServerId,
   useMessageServerTimestamp,
   useMessageTimestamp,
 } from '../../../../../../state/selectors';
@@ -57,6 +64,48 @@ const showDebugLog = () => {
   ipcRenderer.send('show-debug-log');
 };
 
+const showDebugMessageInfo = false;
+
+const DebugMessageInfo = ({ messageId }: { messageId: string }) => {
+  const messageHash = useMessageHash(messageId);
+  const serverId = useMessageServerId(messageId);
+  const expirationType = useMessageExpirationType(messageId);
+  const expirationDurationMs = useMessageExpirationDurationMs(messageId);
+  const expirationTimestamp = useMessageExpirationTimestamp(messageId);
+
+  if (!showDebugMessageInfo) {
+    return null;
+  }
+
+  return (
+    <>
+      {messageHash ? (
+        <LabelWithInfo label={`${window.i18n('messageHash')}:`} info={messageHash} />
+      ) : null}
+      {serverId ? (
+        <LabelWithInfo label={`${window.i18n('serverId')}:`} info={`${serverId}`} />
+      ) : null}
+      {expirationType ? (
+        <LabelWithInfo label={`${window.i18n('expirationType')}:`} info={expirationType} />
+      ) : null}
+      {expirationDurationMs ? (
+        <LabelWithInfo
+          label={`${window.i18n('expirationDuration')}:`}
+          // formatDistanceStrict (date-fns) is not localized yet
+          info={`${formatDistanceStrict(0, Math.floor(expirationDurationMs / 1000))}`}
+        />
+      ) : null}
+      {expirationTimestamp ? (
+        <LabelWithInfo
+          label={`${window.i18n('disappears')}:`}
+          // format (date-fns) is not localized yet
+          info={`${format(expirationTimestamp, 'PPpp')}`}
+        />
+      ) : null}
+    </>
+  );
+};
+
 export const MessageInfo = ({ messageId, errors }: { messageId: string; errors: Array<Error> }) => {
   const sender = useMessageSender(messageId);
   const direction = useMessageDirection(messageId);
@@ -83,6 +132,8 @@ export const MessageInfo = ({ messageId, errors }: { messageId: string; errors:
   return (
     <Flex container={true} flexDirection="column">
       <LabelWithInfo label={`${window.i18n('sent')}:`} info={sentAtStr} />
+      <DebugMessageInfo messageId={messageId} />
+
       {direction === 'incoming' ? (
         <LabelWithInfo label={`${window.i18n('received')}:`} info={receivedAtStr} />
       ) : null}

ts/models/conversation.ts

@@ -2616,7 +2616,7 @@ async function cleanUpExpireHistoryFromConvo(conversationId: string, isPrivate:
     conversationId,
     isPrivate
   );
-  window.inboxStore.dispatch(
+  window?.inboxStore?.dispatch(
     messagesDeleted(updateIdsRemoved.map(m => ({ conversationKey: conversationId, messageId: m })))
   );
 }

ts/state/selectors/messages.ts

@@ -136,6 +136,26 @@ export const useMessageQuote = (messageId: string | undefined): PropsForQuote |
   return useMessagePropsByMessageId(messageId)?.propsForMessage.quote;
 };
 
+export const useMessageHash = (messageId: string | undefined) => {
+  return useMessagePropsByMessageId(messageId)?.propsForMessage.messageHash;
+};
+
+export const useMessageExpirationType = (messageId: string | undefined) => {
+  return useMessagePropsByMessageId(messageId)?.propsForMessage.expirationType;
+};
+
+export const useMessageExpirationDurationMs = (messageId: string | undefined) => {
+  return useMessagePropsByMessageId(messageId)?.propsForMessage.expirationDurationMs;
+};
+
+export const useMessageExpirationTimestamp = (messageId: string | undefined) => {
+  return useMessagePropsByMessageId(messageId)?.propsForMessage.expirationTimestamp;
+};
+
+export const useMessageServerId = (messageId: string | undefined) => {
+  return useMessagePropsByMessageId(messageId)?.propsForMessage.serverId;
+};
+
 export const useMessageText = (messageId: string | undefined): string | undefined => {
   return useMessagePropsByMessageId(messageId)?.propsForMessage.text;
 };

ts/types/LocalizerKeys.ts

@@ -159,6 +159,7 @@ export type LocalizerKeys =
   | 'disappearingMessagesModeLegacySubtitle'
   | 'disappearingMessagesModeOff'
   | 'disappearingMessagesModeOutdated'
+  | 'disappears'
   | 'displayName'
   | 'displayNameEmpty'
   | 'displayNameTooLong'
@@ -198,6 +199,8 @@ export type LocalizerKeys =
   | 'error'
   | 'establishingConnection'
   | 'expandedReactionsText'
+  | 'expirationDuration'
+  | 'expirationType'
   | 'failed'
   | 'failedResolveOns'
   | 'failedToAddAsModerator'
@@ -296,6 +299,7 @@ export type LocalizerKeys =
   | 'messageBodyMissing'
   | 'messageDeletedPlaceholder'
   | 'messageDeletionForbidden'
+  | 'messageHash'
   | 'messageInfo'
   | 'messageRequestAccepted'
   | 'messageRequestAcceptedOurs'
@@ -444,6 +448,7 @@ export type LocalizerKeys =
   | 'sendRecoveryPhraseTitle'
   | 'sending'
   | 'sent'
+  | 'serverId'
   | 'sessionMessenger'
   | 'set'
   | 'setAccountPasswordDescription'

yarn.lock

@@ -2641,6 +2641,11 @@ data-urls@^4.0.0:
     whatwg-mimetype "^3.0.0"
     whatwg-url "^12.0.0"
 
+date-fns@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-3.3.1.tgz#7581daca0892d139736697717a168afbb908cfed"
+  integrity sha512-y8e109LYGgoQDveiEBD3DYXKba1jWf5BA8YU1FL5Tvm0BTdEfy54WLCwnuYWZNnzzvALy/QQ4Hov+Q9RVRv+Zw==
+
 debug@4, debug@4.3.4, debug@^4, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"