fix: screen does not glitch on last message deleted anymore

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

@@ -1,17 +1,17 @@
-import { useCallback, useState } from 'react';
+import { useCallback } from 'react';
 import { useDispatch } from 'react-redux';
 import useInterval from 'react-use/lib/useInterval';
 import useMount from 'react-use/lib/useMount';
 import styled from 'styled-components';
 import { useIsDetailMessageView } from '../../../../contexts/isDetailViewContext';
-import { Data } from '../../../../data/data';
 import { useMessageExpirationPropsById } from '../../../../hooks/useParamSelector';
 import { MessageModelType } from '../../../../models/messageType';
-import { ConvoHub } from '../../../../session/conversations';
+import { messagesExpired, PropsForExpiringMessage } from '../../../../state/ducks/conversations';
-import { PropsForExpiringMessage, messagesExpired } from '../../../../state/ducks/conversations';
 import { getIncrement } from '../../../../util/timer';
 import { ExpireTimer } from '../../ExpireTimer';
 import { ReadableMessage, ReadableMessageProps } from './ReadableMessage';
+import { Data } from '../../../../data/data';
+import { ConvoHub } from '../../../../session/conversations';
 
 const EXPIRATION_CHECK_MINIMUM = 2000;
 
@@ -21,18 +21,10 @@ function useIsExpired(
     direction: MessageModelType | undefined;
   }
 ) {
-  const {
+  const { convoId, messageId, expirationDurationMs, expirationTimestamp, isExpired } = props;
-    convoId,
-    messageId,
-    expirationDurationMs,
-    expirationTimestamp,
-    isExpired: isExpiredProps,
-  } = props;
 
   const dispatch = useDispatch();
 
-  const [isExpired] = useState(isExpiredProps);
-
   const checkExpired = useCallback(async () => {
     const now = Date.now();
 

ts/data/data.ts

@@ -263,7 +263,7 @@ async function removeMessage(id: string): Promise<void> {
   //   it needs to delete all associated on-disk files along with the database delete.
   if (message) {
     await channels.removeMessage(id);
-    await message.cleanup(true);
+    await message.cleanup();
   }
 }
 
@@ -554,7 +554,7 @@ async function removeAllMessagesInConversation(conversationId: string): Promise<
     for (let index = 0; index < messages.length; index++) {
       const message = messages.at(index);
       // eslint-disable-next-line no-await-in-loop
-      await message.cleanup(false); // not triggering UI updates, as we remove them from the store just below
+      await message.cleanup();
     }
     window.log.info(
       `removeAllMessagesInConversation messages.cleanup() ${conversationId} took ${

ts/models/message.ts

@@ -418,11 +418,16 @@ export class MessageModel extends Backbone.Model<MessageAttributes> {
     return '';
   }
 
-  public async cleanup(triggerUIUpdate: boolean) {
+  /**
-    const changed = await deleteExternalMessageFiles(this.attributes);
+   * Remove from the DB all the attachments linked to that message.
-    if (changed) {
+   * Note: does not commit the changes to the DB, on purpose.
-      await this.commit(triggerUIUpdate);
+   * When we cleanup(), we always want to remove the message afterwards. So no commit() are done at all.
-    }
+   *
+   */
+  public async cleanup() {
+    await deleteExternalMessageFiles(this.attributes);
+    // Note: we don't commit here, because when we do cleanup, we always
+    // want to cleanup right before deleting the message itself.
   }
 
   private getPropsForTimerNotification(): PropsForExpirationTimer | null {

ts/node/sql.ts

@@ -1513,12 +1513,18 @@ function getMessagesByConversation(
   const floorLoadAllMessagesInConvo = 70;
 
   let messages: Array<Record<string, any>> = [];
-  let quotes = [];
+  let quotes: Array<any> = [];
 
   if (messageId || firstUnread) {
     const messageFound = getMessageById(messageId || firstUnread);
 
-    if (messageFound && messageFound.conversationId === conversationId) {
+    if (!messageFound || messageFound.conversationId !== conversationId) {
+      console.info(
+        `getMessagesByConversation: Could not find messageId ${messageId} in db with conversationId: ${conversationId}. Just fetching the convo as usual. messageFound:`,
+        messageFound
+      );
+      return { messages, quotes };
+    }
     const start = Date.now();
     const msgTimestamp =
       messageFound.serverTimestamp || messageFound.sent_at || messageFound.received_at;
@@ -1561,10 +1567,6 @@ function getMessagesByConversation(
         );
       }
     );
-    }
-    console.info(
-      `getMessagesByConversation: Could not find messageId ${messageId} in db with conversationId: ${conversationId}. Just fetching the convo as usual.`
-    );
   } else {
     const limit =
       numberOfMessagesInConvo < floorLoadAllMessagesInConvo

ts/session/disappearing_messages/index.ts

@@ -46,7 +46,7 @@ export async function destroyMessagesAndUpdateRedux(
       // TODO make this use getMessagesById and not getMessageById
 
       const message = await Data.getMessageById(messageIds[i]);
-      await message?.cleanup(false); // not triggering UI updates, as we remove them from the store just below
+      await message?.cleanup();
       /* eslint-enable no-await-in-loop */
     }