Merge branch 'FE-Pagination' into testing

dm3-org · Jul 1, 2024 · 41e1897 · 41e1897
2 parents 70d6fa2 + 404c224
commit 41e1897
Show file tree

Hide file tree

Showing 34 changed files with 1,109 additions and 432 deletions.
diff --git a/packages/backend/src/persistence/storage/postgres/getMessages.ts b/packages/backend/src/persistence/storage/postgres/getMessages.ts
@@ -39,6 +39,9 @@ export const getMessages =
                     ownerId: account.id,
                     encryptedContactName,
                 },
+                orderBy: {
+                    createdAt: 'desc',
+                },
             });
             if (messageRecord.length === 0) {
                 return [];

diff --git a/packages/lib/shared/src/IBackendConnector.ts b/packages/lib/shared/src/IBackendConnector.ts
@@ -4,7 +4,12 @@ export interface IBackendConnector {
         ensName: string,
         size: number,
         offset: number,
-    ): Promise<string[]>;
+    ): Promise<
+        {
+            contact: string;
+            previewMessage: string;
+        }[]
+    >;
     toggleHideConversation(
         ensName: string,
         encryptedContactName: string,
@@ -13,12 +18,14 @@ export interface IBackendConnector {
     getMessagesFromStorage(
         ensName: string,
         encryptedContactName: string,
-        pageNumber: number,
+        pageSize: number,
+        offset: number,
     ): Promise<any>;
     addMessage(
         ensName: string,
         encryptedContactName: string,
         messageId: string,
+        createdAt: number,
         encryptedEnvelopContainer: string,
     ): Promise<void>;
     addMessageBatch(

diff --git a/packages/lib/storage/src/migrate-storage.test.ts b/packages/lib/storage/src/migrate-storage.test.ts
@@ -70,11 +70,11 @@ describe('MigrateStorage', () => {
             const conversations = new Map<string, any[]>();
 
             return {
-                getConversationList: async (page: number) =>
+                getConversations: async (page: number) =>
                     Array.from(conversations.keys()).map((contactEnsName) => ({
                         contactEnsName,
                         isHidden: false,
-                        messageCounter: 0,
+                        previewMessage: undefined,
                     })),
                 getMessages: async (contactEnsName: string, page: number) => [],
                 addMessageBatch: async (
@@ -125,7 +125,7 @@ describe('MigrateStorage', () => {
 
         await migrageStorage(db, newStorage, tldResolver);
 
-        const newConversations = await newStorage.getConversationList(0);
+        const newConversations = await newStorage.getConversations(100, 0);
         0.45;
         expect(newConversations.length).toBe(2);
         expect(newConversations[0].contactEnsName).toBe(
@@ -153,7 +153,7 @@ describe('MigrateStorage', () => {
 
         await migrageStorage(db, newStorage, tldResolver);
 
-        const newConversations = await newStorage.getConversationList(0);
+        const newConversations = await newStorage.getConversations(100, 0);
         0.45;
         expect(newConversations.length).toBe(2);
         expect(newConversations[0].contactEnsName).toBe(

diff --git a/packages/lib/storage/src/new/cloudStorage/getCloudStorage.ts b/packages/lib/storage/src/new/cloudStorage/getCloudStorage.ts
@@ -1,6 +1,8 @@
 import { IBackendConnector } from '@dm3-org/dm3-lib-shared';
 import { MessageRecord } from '../chunkStorage/ChunkStorageTypes';
 import { Encryption, StorageAPI, StorageEnvelopContainer } from '../types';
+//getCloudStorages is the interface to the cloud storage.
+//It encrypts and decrypts the data before sending/reciving it to/from the cloud storage of the DM3 backend
 export const getCloudStorage = (
     backendConnector: IBackendConnector,
     ensName: string,
@@ -10,41 +12,54 @@ export const getCloudStorage = (
         const encryptedContactName = await encryption.encryptSync(
             contactEnsName,
         );
-        console.log('store new contact ', encryptedContactName);
         return await backendConnector.addConversation(
             ensName,
             encryptedContactName,
         );
     };
 
     const getConversations = async (size: number, offset: number) => {
-        const encryptedConversations = await backendConnector.getConversations(
+        const conversations = await backendConnector.getConversations(
             ensName,
             size,
             offset,
         );
 
         return await Promise.all(
-            encryptedConversations.map(
-                async (encryptedContactName: string) => ({
-                    contactEnsName: await encryption.decryptSync(
-                        encryptedContactName,
-                    ),
+            conversations.map(
+                async ({
+                    contact,
+                    previewMessage,
+                }: {
+                    contact: string;
+                    previewMessage: string | null;
+                }) => ({
+                    contactEnsName: await encryption.decryptSync(contact),
                     isHidden: false,
                     messageCounter: 0,
+                    previewMessage: previewMessage
+                        ? JSON.parse(
+                              await encryption.decryptAsync(previewMessage),
+                          )
+                        : null,
                 }),
             ),
         );
     };
-    const getMessages = async (contactEnsName: string, page: number) => {
+    const getMessages = async (
+        contactEnsName: string,
+        pageSize: number,
+        offset: number,
+    ) => {
         const encryptedContactName = await encryption.encryptSync(
             contactEnsName,
         );
 
         const messageRecords = await backendConnector.getMessagesFromStorage(
             ensName,
             encryptedContactName,
-            page,
+            pageSize,
+            offset,
         );
         const decryptedMessageRecords = await Promise.all(
             messageRecords.map(async (messageRecord: MessageRecord) => {
@@ -55,7 +70,6 @@ export const getCloudStorage = (
             }),
         );
 
-        //TODO make type right
         return decryptedMessageRecords as StorageEnvelopContainer[];
     };
 
@@ -70,11 +84,15 @@ export const getCloudStorage = (
             JSON.stringify(envelop),
         );
 
+        //The client defines the createdAt timestamp for the message so it can be used to sort the messages
+        const createdAt = Date.now();
+
         await backendConnector.addMessage(
             ensName,
             encryptedContactName,
             envelop.envelop.metadata?.encryptedMessageHash! ??
                 envelop.envelop.id,
+            createdAt,
             encryptedEnvelopContainer,
         );
 
@@ -95,8 +113,11 @@ export const getCloudStorage = (
                         await encryption.encryptAsync(
                             JSON.stringify(storageEnvelopContainer),
                         );
+                    //The client defines the createdAt timestamp for the message so it can be used to sort the messages
+                    const createdAt = Date.now();
                     return {
                         encryptedEnvelopContainer,
+                        createdAt,
                         messageId:
                             storageEnvelopContainer.envelop.metadata
                                 ?.encryptedMessageHash! ??
@@ -122,6 +143,8 @@ export const getCloudStorage = (
         const encryptedContactName = await encryption.encryptSync(
             contactEnsName,
         );
+        //The client defines the createdAt timestamp for the message so it can be used to sort the messages
+        const createdAt = Date.now();
         const encryptedMessages: MessageRecord[] = await Promise.all(
             batch.map(
                 async (storageEnvelopContainer: StorageEnvelopContainer) => {
@@ -134,6 +157,7 @@ export const getCloudStorage = (
                         messageId:
                             storageEnvelopContainer.envelop.metadata
                                 ?.encryptedMessageHash!,
+                        createdAt,
                     };
                 },
             ),

diff --git a/packages/lib/storage/src/new/types.ts b/packages/lib/storage/src/new/types.ts
@@ -4,7 +4,8 @@ export interface StorageAPI {
     getConversations: (size: number, offset: number) => Promise<Conversation[]>;
     getMessages: (
         contactEnsName: string,
-        page: number,
+        pageSize: number,
+        offset: number,
     ) => Promise<StorageEnvelopContainer[]>;
     addMessageBatch: (
         contactEnsName: string,
@@ -33,9 +34,12 @@ export interface StorageEnvelopContainer {
 }
 
 export interface Conversation {
+    //the contactEnsName is the ensName of the contact
     contactEnsName: string;
+    //the previewMessage is the last message of the conversation
+    previewMessage?: Envelop;
+    //isHidden is a flag to hide the conversation from the conversation list
     isHidden: boolean;
-    messageCounter: number;
 }
 
 export type Encryption = {

diff --git a/packages/messenger-widget/package.json b/packages/messenger-widget/package.json
@@ -34,6 +34,7 @@
     "jsonwebtoken": "^9.0.2",
     "localforage": "^1.10.0",
     "nacl": "^0.1.3",
+    "react-infinite-scroll-component": "^6.1.0",
     "react-scripts": "5.0.0",
     "rimraf": "^5.0.5",
     "socket.io-client": "^4.7.5",

diff --git a/packages/messenger-widget/src/components/Chat/Chat.css b/packages/messenger-widget/src/components/Chat/Chat.css
@@ -53,6 +53,9 @@
     flex-direction: column;
 }
 
+.infinite-scroll-component__outerdiv{
+    height: auto;
+}
 
 /* =================== Mobile Responsive CSS =================== */