Merge branch 'clearnet' into reactions_fixes

ts/components/conversation/SessionLastSeenIndicator.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useLayoutEffect, useState } from 'react';
+import React, { useContext, useLayoutEffect } from 'react';
 import { useSelector } from 'react-redux';
 import styled from 'styled-components';
 import { getQuotedMessageToAnimate } from '../../state/selectors/conversations';
@@ -35,19 +35,28 @@ const LastSeenText = styled.div`
   color: var(--color-last-seen-indicator);
 `;
 
-export const SessionLastSeenIndicator = (props: { messageId: string }) => {
+export const SessionLastSeenIndicator = (props: {
+  messageId: string;
+  didScroll: boolean;
+  setDidScroll: (scroll: boolean) => void;
+}) => {
   // if this unread-indicator is not unique it's going to cause issues
-  const [didScroll, setDidScroll] = useState(false);
   const quotedMessageToAnimate = useSelector(getQuotedMessageToAnimate);
-
   const scrollToLoadedMessage = useContext(ScrollToLoadedMessageContext);
 
-  // if this unread-indicator is rendered,
+  const { messageId, didScroll, setDidScroll } = props;
-  // we want to scroll here only if the conversation was not opened to a specific message
+
+  /**
+   * If this unread-indicator is rendered, we want to scroll here only if:
+   * 1. the conversation was not opened to a specific message (quoted message)
+   * 2. we already scrolled to this unread banner once for this convo https://github.com/oxen-io/session-desktop/issues/2308
+   *
+   * To achieve 2. we store the didScroll state in the parent and track the last rendered conversation in it.
+   */
 
   useLayoutEffect(() => {
     if (!quotedMessageToAnimate && !didScroll) {
-      scrollToLoadedMessage(props.messageId, 'unread-indicator');
+      scrollToLoadedMessage(messageId, 'unread-indicator');
       setDidScroll(true);
     } else if (quotedMessageToAnimate) {
       setDidScroll(true);

ts/components/conversation/SessionMessagesList.tsx

@@ -1,4 +1,4 @@
-import React, { useLayoutEffect } from 'react';
+import React, { useLayoutEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 // tslint:disable-next-line: no-submodule-imports
 import useKey from 'react-use/lib/useKey';
@@ -15,6 +15,7 @@ import {
 import {
   getOldBottomMessageId,
   getOldTopMessageId,
+  getSelectedConversationKey,
   getSortedMessagesTypesOfSelectedConversation,
 } from '../../state/selectors/conversations';
 import { GroupUpdateMessage } from './message/message-item/GroupUpdateMessage';
@@ -32,6 +33,8 @@ function isNotTextboxEvent(e: KeyboardEvent) {
   return (e?.target as any)?.type === undefined;
 }
 
+let previousRenderedConvo: string | undefined;
+
 export const SessionMessagesList = (props: {
   scrollAfterLoadMore: (
     messageIdToScrollTo: string,
@@ -43,6 +46,9 @@ export const SessionMessagesList = (props: {
   onEndPressed: () => void;
 }) => {
   const messagesProps = useSelector(getSortedMessagesTypesOfSelectedConversation);
+  const convoKey = useSelector(getSelectedConversationKey);
+
+  const [didScroll, setDidScroll] = useState(false);
   const oldTopMessageId = useSelector(getOldTopMessageId);
   const oldBottomMessageId = useSelector(getOldBottomMessageId);
 
@@ -84,12 +90,22 @@ export const SessionMessagesList = (props: {
     }
   });
 
+  if (didScroll && previousRenderedConvo !== convoKey) {
+    setDidScroll(false);
+    previousRenderedConvo = convoKey;
+  }
+
   return (
     <>
       {messagesProps.map(messageProps => {
         const messageId = messageProps.message.props.messageId;
         const unreadIndicator = messageProps.showUnreadIndicator ? (
-          <SessionLastSeenIndicator key={`unread-indicator-${messageId}`} messageId={messageId} />
+          <SessionLastSeenIndicator
+            key={'unread-indicator'}
+            messageId={messageId}
+            didScroll={didScroll}
+            setDidScroll={setDidScroll}
+          />
         ) : null;
 
         const dateBreak =
@@ -100,24 +116,22 @@ export const SessionMessagesList = (props: {
               messageId={messageId}
             />
           ) : null;
+
+        const componentToMerge = [dateBreak, unreadIndicator];
         if (messageProps.message?.messageType === 'group-notification') {
           const msgProps = messageProps.message.props as PropsForGroupUpdate;
-          return [<GroupUpdateMessage key={messageId} {...msgProps} />, dateBreak, unreadIndicator];
+          return [<GroupUpdateMessage key={messageId} {...msgProps} />, ...componentToMerge];
         }
 
         if (messageProps.message?.messageType === 'group-invitation') {
           const msgProps = messageProps.message.props as PropsForGroupInvitation;
-          return [<GroupInvitation key={messageId} {...msgProps} />, dateBreak, unreadIndicator];
+          return [<GroupInvitation key={messageId} {...msgProps} />, ...componentToMerge];
         }
 
         if (messageProps.message?.messageType === 'message-request-response') {
           const msgProps = messageProps.message.props as PropsForMessageRequestResponse;
 
-          return [
+          return [<MessageRequestResponse key={messageId} {...msgProps} />, ...componentToMerge];
-            <MessageRequestResponse key={messageId} {...msgProps} />,
-            dateBreak,
-            unreadIndicator,
-          ];
         }
 
         if (messageProps.message?.messageType === 'data-extraction') {
@@ -125,28 +139,27 @@ export const SessionMessagesList = (props: {
 
           return [
             <DataExtractionNotification key={messageId} {...msgProps} />,
-            dateBreak,
+            ...componentToMerge,
-            unreadIndicator,
           ];
         }
 
         if (messageProps.message?.messageType === 'timer-notification') {
           const msgProps = messageProps.message.props as PropsForExpirationTimer;
 
-          return [<TimerNotification key={messageId} {...msgProps} />, dateBreak, unreadIndicator];
+          return [<TimerNotification key={messageId} {...msgProps} />, ...componentToMerge];
         }
 
         if (messageProps.message?.messageType === 'call-notification') {
           const msgProps = messageProps.message.props as PropsForCallNotification;
 
-          return [<CallNotification key={messageId} {...msgProps} />, dateBreak, unreadIndicator];
+          return [<CallNotification key={messageId} {...msgProps} />, ...componentToMerge];
         }
 
         if (!messageProps) {
           return null;
         }
 
-        return [<Message messageId={messageId} key={messageId} />, dateBreak, unreadIndicator];
+        return [<Message messageId={messageId} key={messageId} />, ...componentToMerge];
       })}
     </>
   );

ts/models/conversation.ts

@@ -477,10 +477,6 @@ export class ConversationModel extends Backbone.Model<ConversationAttributes> {
     );
   }
 
-  public async getUnread() {
-    return Data.getUnreadByConversation(this.id);
-  }
-
   public async getUnreadCount() {
     const unreadCount = await Data.getUnreadCountByConversation(this.id);
 
@@ -1891,6 +1887,10 @@ export class ConversationModel extends Backbone.Model<ConversationAttributes> {
       : null;
   }
 
+  private async getUnread() {
+    return Data.getUnreadByConversation(this.id);
+  }
+
   /**
    *
    * @returns The open group conversationId this conversation originated from

ts/models/message.ts

@@ -94,6 +94,7 @@ import {
 } from '../session/apis/open_group_api/sogsv3/knownBlindedkeys';
 import { QUOTED_TEXT_MAX_LENGTH } from '../session/constants';
 import { ReactionList } from '../types/Reaction';
+import { getAttachmentMetadata } from '../types/message/initializeAttachmentMetadata';
 // tslint:disable: cyclomatic-complexity
 
 /**
@@ -780,6 +781,12 @@ export class MessageModel extends Backbone.Model<MessageAttributes> {
     const quoteWithData = await loadQuoteData(this.get('quote'));
     const previewWithData = await loadPreviewData(this.get('preview'));
 
+    const { hasAttachments, hasVisualMediaAttachments, hasFileAttachments } = getAttachmentMetadata(
+      this
+    );
+    this.set({ hasAttachments, hasVisualMediaAttachments, hasFileAttachments });
+    await this.commit();
+
     const conversation = this.getConversation();
 
     let attachmentPromise;

ts/node/migration/sessionMigrations.ts

@@ -579,6 +579,12 @@ function updateToSessionSchemaVersion20(currentVersion: number, db: BetterSqlite
   console.log(`updateToSessionSchemaVersion${targetVersion}: starting...`);
 
   db.transaction(() => {
+    // First we want to drop the column friendRequestStatus if it is there, otherwise the transaction fails
+    const rows = db.pragma(`table_info(${CONVERSATIONS_TABLE});`);
+    if (rows.some((m: any) => m.name === 'friendRequestStatus')) {
+      console.info('found column friendRequestStatus. Dropping it');
+      db.exec(`ALTER TABLE ${CONVERSATIONS_TABLE} DROP COLUMN friendRequestStatus;`);
+    }
     // looking for all private conversations, with a nickname set
     const rowsToUpdate = db
       .prepare(
@@ -917,6 +923,13 @@ function updateToSessionSchemaVersion27(currentVersion: number, db: BetterSqlite
 
   // tslint:disable-next-line: max-func-body-length
   db.transaction(() => {
+    // First we want to drop the column friendRequestStatus if it is there, otherwise the transaction fails
+    const rows = db.pragma(`table_info(${CONVERSATIONS_TABLE});`);
+    if (rows.some((m: any) => m.name === 'friendRequestStatus')) {
+      console.info('found column friendRequestStatus. Dropping it');
+      db.exec(`ALTER TABLE ${CONVERSATIONS_TABLE} DROP COLUMN friendRequestStatus;`);
+    }
+
     // We want to replace all the occurrences of the sogs server ip url (116.203.70.33 || http://116.203.70.33 || https://116.203.70.33) by its hostname: https://open.getsession.org
     // This includes change the conversationTable, the openGroupRooms tables and every single message associated with them.
     // Because the conversationId is used to link messages to conversation includes the ip/url in it...
@@ -1157,17 +1170,12 @@ function updateToSessionSchemaVersion28(currentVersion: number, db: BetterSqlite
   if (currentVersion >= targetVersion) {
     return;
   }
+
   console.log(`updateToSessionSchemaVersion${targetVersion}: starting...`);
 
-  // some very old databases have the column friendRequestStatus still there but we are not using it anymore. So drop it if we find it.
   db.transaction(() => {
-    const rows = db.pragma(`table_info(${CONVERSATIONS_TABLE});`);
+    // Keeping this empty migration because some people updated to this already, even if it is not needed anymore
-    if (rows.some((m: any) => m.name === 'friendRequestStatus')) {
-      console.info('found column friendRequestStatus. Dropping it');
-      db.exec(`ALTER TABLE ${CONVERSATIONS_TABLE} DROP COLUMN friendRequestStatus;`);
-    }
     writeSessionSchemaVersion(targetVersion, db);
-    console.log('... done');
   })();
 
   console.log(`updateToSessionSchemaVersion${targetVersion}: success!`);

ts/node/sql.ts

@@ -420,6 +420,7 @@ function getConversationCount() {
 
 // tslint:disable-next-line: max-func-body-length
 // tslint:disable-next-line: cyclomatic-complexity
+// tslint:disable-next-line: max-func-body-length
 function saveConversation(data: ConversationAttributes, instance?: BetterSqlite3.Database) {
   const formatted = assertValidConversationAttributes(data);
 
@@ -458,10 +459,13 @@ function saveConversation(data: ConversationAttributes, instance?: BetterSqlite3
     conversationIdOrigin,
   } = formatted;
 
-  // shorten the last message as we never need more than 60 chars (and it bloats the redux/ipc calls uselessly
+  const maxLength = 300;
+  // shorten the last message as we never need more than `maxLength` chars (and it bloats the redux/ipc calls uselessly.
 
   const shortenedLastMessage =
-    isString(lastMessage) && lastMessage.length > 60 ? lastMessage.substring(60) : lastMessage;
+    isString(lastMessage) && lastMessage.length > maxLength
+      ? lastMessage.substring(0, maxLength)
+      : lastMessage;
   assertGlobalInstanceOrInstance(instance)
     .prepare(
       `INSERT OR REPLACE INTO ${CONVERSATIONS_TABLE} (
@@ -1090,7 +1094,7 @@ function getUnreadByConversation(conversationId: string) {
       conversationId,
     });
 
-  return rows;
+  return map(rows, row => jsonToObject(row.json));
 }
 
 function getUnreadCountByConversation(conversationId: string) {

ts/state/ducks/conversations.ts

@@ -366,6 +366,7 @@ type FetchedTopMessageResults = {
   conversationKey: string;
   messagesProps: Array<MessageModelPropsWithoutConvoProps>;
   oldTopMessageId: string | null;
+  newMostRecentMessageIdInConversation: string | null;
 } | null;
 
 export const fetchTopMessagesForConversation = createAsyncThunk(
@@ -379,6 +380,7 @@ export const fetchTopMessagesForConversation = createAsyncThunk(
   }): Promise<FetchedTopMessageResults> => {
     // no need to load more top if we are already at the top
     const oldestMessage = await Data.getOldestMessageInConversation(conversationKey);
+    const mostRecentMessage = await Data.getLastMessageInConversation(conversationKey);
 
     if (!oldestMessage || oldestMessage.id === oldTopMessageId) {
       window.log.info('fetchTopMessagesForConversation: we are already at the top');
@@ -393,6 +395,7 @@ export const fetchTopMessagesForConversation = createAsyncThunk(
       conversationKey,
       messagesProps,
       oldTopMessageId,
+      newMostRecentMessageIdInConversation: mostRecentMessage?.id || null,
     };
   }
 );
@@ -845,7 +848,12 @@ const conversationsSlice = createSlice({
           return { ...state, areMoreMessagesBeingFetched: false };
         }
         // this is called once the messages are loaded from the db for the currently selected conversation
-        const { messagesProps, conversationKey, oldTopMessageId } = action.payload;
+        const {
+          messagesProps,
+          conversationKey,
+          oldTopMessageId,
+          newMostRecentMessageIdInConversation,
+        } = action.payload;
         // double check that this update is for the shown convo
         if (conversationKey === state.selectedConversation) {
           return {
@@ -853,6 +861,7 @@ const conversationsSlice = createSlice({
             oldTopMessageId,
             messages: messagesProps,
             areMoreMessagesBeingFetched: false,
+            mostRecentMessageId: newMostRecentMessageIdInConversation,
           };
         }
         return state;

ts/state/selectors/conversations.ts

@@ -172,11 +172,12 @@ export const hasSelectedConversationIncomingMessages = createSelector(
   }
 );
 
-const getFirstUnreadMessageId = createSelector(getConversations, (state: ConversationsStateType):
+export const getFirstUnreadMessageId = createSelector(
-  | string
+  getConversations,
-  | undefined => {
+  (state: ConversationsStateType): string | undefined => {
-  return state.firstUnreadMessageId;
+    return state.firstUnreadMessageId;
-});
+  }
+);
 
 export const getConversationHasUnread = createSelector(getFirstUnreadMessageId, unreadId => {
   return Boolean(unreadId);
@@ -215,10 +216,11 @@ export const getSortedMessagesTypesOfSelectedConversation = createSelector(
           ? messageTimestamp
           : undefined;
 
+      const common = { showUnreadIndicator: isFirstUnread, showDateBreak };
+
       if (msg.propsForDataExtractionNotification) {
         return {
-          showUnreadIndicator: isFirstUnread,
+          ...common,
-          showDateBreak,
           message: {
             messageType: 'data-extraction',
             props: { ...msg.propsForDataExtractionNotification, messageId: msg.propsForMessage.id },
@@ -228,8 +230,7 @@ export const getSortedMessagesTypesOfSelectedConversation = createSelector(
 
       if (msg.propsForMessageRequestResponse) {
         return {
-          showUnreadIndicator: isFirstUnread,
+          ...common,
-          showDateBreak,
           message: {
             messageType: 'message-request-response',
             props: { ...msg.propsForMessageRequestResponse, messageId: msg.propsForMessage.id },
@@ -239,8 +240,7 @@ export const getSortedMessagesTypesOfSelectedConversation = createSelector(
 
       if (msg.propsForGroupInvitation) {
         return {
-          showUnreadIndicator: isFirstUnread,
+          ...common,
-          showDateBreak,
           message: {
             messageType: 'group-invitation',
             props: { ...msg.propsForGroupInvitation, messageId: msg.propsForMessage.id },
@@ -250,8 +250,7 @@ export const getSortedMessagesTypesOfSelectedConversation = createSelector(
 
       if (msg.propsForGroupUpdateMessage) {
         return {
-          showUnreadIndicator: isFirstUnread,
+          ...common,
-          showDateBreak,
           message: {
             messageType: 'group-notification',
             props: { ...msg.propsForGroupUpdateMessage, messageId: msg.propsForMessage.id },
@@ -261,8 +260,7 @@ export const getSortedMessagesTypesOfSelectedConversation = createSelector(
 
       if (msg.propsForTimerNotification) {
         return {
-          showUnreadIndicator: isFirstUnread,
+          ...common,
-          showDateBreak,
           message: {
             messageType: 'timer-notification',
             props: { ...msg.propsForTimerNotification, messageId: msg.propsForMessage.id },
@@ -272,8 +270,7 @@ export const getSortedMessagesTypesOfSelectedConversation = createSelector(
 
       if (msg.propsForCallNotification) {
         return {
-          showUnreadIndicator: isFirstUnread,
+          ...common,
-          showDateBreak,
           message: {
             messageType: 'call-notification',
             props: {