Merge pull request #1062 from dm3-org/FE-Pagination

Fe pagination

.github/workflows/deploy.yml

@@ -151,4 +151,4 @@ jobs:
             - name: Start docker on server
               run: |
                   ssh -i ./ssh-key app@${{ vars.HOST_DOMAIN }} "\
-                  cd dm3 && docker compose --env-file .env up -d && docker system prune -af"
+                  cd dm3 && docker compose --env-file .env up -d && docker system prune -af"

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 [];

packages/lib/shared/src/IBackendConnector.ts

@@ -1,6 +1,15 @@
 export interface IBackendConnector {
     addConversation(ensName: string, encryptedContactName: string): void;
-    getConversations(ensName: string): Promise<string[]>;
+    getConversations(
+        ensName: string,
+        size: number,
+        offset: number,
+    ): Promise<
+        {
+            contact: string;
+            previewMessage: string;
+        }[]
+    >;
     toggleHideConversation(
         ensName: string,
         encryptedContactName: string,
@@ -9,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(

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(

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,39 +12,54 @@ export const getCloudStorage = (
         const encryptedContactName = await encryption.encryptSync(
             contactEnsName,
         );
-        console.log('store new contact ', encryptedContactName);
         return await backendConnector.addConversation(
             ensName,
             encryptedContactName,
         );
     };
 
-    const getConversationList = async (page: number) => {
-        const encryptedConversations = await backendConnector.getConversations(
+    const getConversations = async (size: number, offset: number) => {
+        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) => {
@@ -53,7 +70,6 @@ export const getCloudStorage = (
             }),
         );
 
-        //TODO make type right
         return decryptedMessageRecords as StorageEnvelopContainer[];
     };
 
@@ -68,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,
         );
 
@@ -93,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! ??
@@ -120,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) => {
@@ -132,6 +157,7 @@ export const getCloudStorage = (
                         messageId:
                             storageEnvelopContainer.envelop.metadata
                                 ?.encryptedMessageHash!,
+                        createdAt,
                     };
                 },
             ),
@@ -174,7 +200,7 @@ export const getCloudStorage = (
 
     return {
         addConversation: _addConversation,
-        getConversationList,
+        getConversations,
         getMessages,
         addMessage: _addMessage,
         addMessageBatch: _addMessageBatch,

packages/lib/storage/src/new/types.ts

@@ -1,10 +1,11 @@
 import { Envelop, MessageState } from '@dm3-org/dm3-lib-messaging';
 
 export interface StorageAPI {
-    getConversationList: (page: number) => Promise<Conversation[]>;
+    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?: StorageEnvelopContainer;
+    //isHidden is a flag to hide the conversation from the conversation list
     isHidden: boolean;
-    messageCounter: number;
 }
 
 export type Encryption = {

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",

packages/messenger-widget/src/components/Chat/Chat.css

@@ -53,6 +53,9 @@
     flex-direction: column;
 }
 
+.infinite-scroll-component__outerdiv{
+    height: auto;
+}
 
 /* =================== Mobile Responsive CSS =================== */