🛠 Fix infinite calls when scrolling down

Author: Romaric Mourgues

twake/frontend/src/app/views/applications/messages/list-builder.tsx

@@ -63,11 +63,14 @@ export default React.memo(
       useEffect(() => {
         // Detect append or prepend or full replace items
         const ids = items.map(i => itemId(i));
+        //Find the first index in props _items that is already in displayed items
         const first = _items.findIndex(i => ids.includes(itemId(i)));
-        const last =
-          _items.length -
-          1 -
-          _items.findIndex((_, i) => ids.includes(itemId(_items[_items.length - 1 - i])));
+        //Find the last index in props _items that is already in displayed items
+        const lastIndex = _items
+          .slice()
+          .reverse()
+          .findIndex(i => ids.includes(itemId(i)));
+        const last = lastIndex >= 0 ? _items.length - 1 - lastIndex : lastIndex;
         if (first == -1) {
           //Replacement
           setFirstItemIndex(START_INDEX);

twake/frontend/src/app/views/applications/messages/messages-list.tsx

@@ -20,6 +20,7 @@ import RouterServices from 'app/features/router/services/router-service';
 import GoToBottom from './parts/go-to-bottom';
 import { MessagesPlaceholder } from './placeholder';
 import { cleanFrontMessagesFromListOfMessages } from 'app/features/messages/hooks/use-message-editor';
+import { getMessage } from 'app/features/messages/hooks/use-message';
 
 type Props = {
   companyId: string;
@@ -177,7 +178,7 @@ export default ({ channelId, companyId, workspaceId, threadId }: Props) => {
           filterOnAppend={messages => {
             return cleanFrontMessagesFromListOfMessages(messages);
           }}
-          itemId={m => m.type + m.threadId}
+          itemId={m => m.type + (getMessage(m.id)?.context?._front_id || m.threadId)}
           emptyListComponent={<FirstMessage />}
           itemContent={row}
           followOutput={!!window.reachedEnd && 'smooth'}

twake/frontend/src/app/views/applications/messages/thread-messages-list.tsx

@@ -14,6 +14,7 @@ import { VirtuosoHandle } from 'react-virtuoso';
 import GoToBottom from './parts/go-to-bottom';
 import { MessagesPlaceholder } from './placeholder';
 import { cleanFrontMessagesFromListOfMessages } from 'app/features/messages/hooks/use-message-editor';
+import { getMessage } from 'app/features/messages/hooks/use-message';
 
 type Props = {
   companyId: string;
@@ -111,7 +112,7 @@ export default ({ companyId, threadId }: Props) => {
             cancelHighlight();
           }}
           items={messages}
-          itemId={m => m.type + m.id}
+          itemId={m => m.type + (getMessage(m.id)?.context?._front_id || m.id)}
           emptyListComponent={<FirstThreadMessage noReplies />}
           filterOnAppend={messages => {
             return cleanFrontMessagesFromListOfMessages(messages);