Feature/lazy loading messages (#482)

* Setting loading slice added to chat components * Bumped nectar version * Lazy loading working with little problems * Replaced custom scrollbars with pure HTML implementation * Added auto-trimming messages * Fix for scrolling to bottom on new message * Lint and tests update * Removed messages count log * merge develop * Lint fix Co-authored-by: bartosz.chyra <[email protected]>
TryQuiet · Dec 13, 2021 · c481809 · c481809
1 parent 3e7404f
commit c481809
Show file tree

Hide file tree

Showing 8 changed files with 355 additions and 169 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -221,7 +221,7 @@
     "@types/ps-node": "^0.1.0",
     "@types/redux-debounced": "^0.2.19",
     "@zbayapp/identity": "^3.3.3",
-    "@zbayapp/nectar": "^1.20.0",
+    "@zbayapp/nectar": "^1.21.1",
     "asn1js": "^2.1.1",
     "async": "^3.1.0",
     "atob": "^2.1.2",

diff --git a/src/main/main.ts b/src/main/main.ts
@@ -354,3 +354,9 @@ app.on('activate', async () => {
     await createWindow()
   }
 })
+
+ipcMain.on('hello', async () => {
+  await waggleProcess.connectionsManager.closeAllServices()
+  await waggleProcess.dataServer.close()
+  waggleProcess = await runWaggle(mainWindow.webContents)
+})
diff --git a/src/renderer/components/pages/Channel.stories.tsx b/src/renderer/components/pages/Channel.stories.tsx
@@ -7,50 +7,160 @@ import ChannelComponent, { ChannelComponentProps } from './Channel'
 import { DisplayableMessage } from '@zbayapp/nectar'
 
 const Template: ComponentStory<typeof ChannelComponent> = args => {
-  const [messages, _setMessages] = useState<{ [day: string]: DisplayableMessage[][] }>({
-    '28 Oct': [
-      [
-        {
-          id: '1',
-          type: 1,
-          message: 'Hello',
-          createdAt: 0,
-          date: '28 Oct, 10:00',
-          nickname: 'holmes'
-        },
-        {
-          id: '2',
-          type: 1,
-          message:
-            "How are you? My day was awesome. I removed a lot of unused props from container and I simplified code a lot. I like coding, coding is like building things with LEGO. I could admit it's a little bit harder and there's a lot that can go wrong but I like it anyway.",
-          createdAt: 0,
-          date: '28 Oct, 10:01',
-          nickname: 'holmes'
-        }
+  const [messages, _setMessages] = useState<{
+    count: number
+    groups: { [day: string]: DisplayableMessage[][] }
+  }>({
+    count: 16,
+    groups: {
+      '28 Oct': [
+        [
+          {
+            id: '1',
+            type: 1,
+            message: 'Hello',
+            createdAt: 0,
+            date: '28 Oct, 10:00',
+            nickname: 'holmes'
+          },
+          {
+            id: '2',
+            type: 1,
+            message:
+              "How are you? My day was awesome. I removed a lot of unused props from container and I simplified code a lot. I like coding, coding is like building things with LEGO. I could admit it's a little bit harder and there's a lot that can go wrong but I like it anyway.",
+            createdAt: 0,
+            date: '28 Oct, 10:01',
+            nickname: 'holmes'
+          }
+        ],
+        [
+          {
+            id: '3',
+            type: 1,
+            message: 'Great, thanks!',
+            createdAt: 0,
+            date: '28 Oct, 10:02',
+            nickname: 'bartek'
+          }
+        ]
       ],
-      [
-        {
-          id: '3',
-          type: 1,
-          message: 'Great, thanks!',
-          createdAt: 0,
-          date: '28 Oct, 10:02',
-          nickname: 'bartek'
-        }
+      Today: [
+        [
+          {
+            id: '4',
+            type: 1,
+            message: 'Luck, I am your father!',
+            createdAt: 0,
+            date: '12:40',
+            nickname: 'wiktor'
+          },
+          {
+            id: '5',
+            type: 1,
+            message: 'That\'s impossible!',
+            createdAt: 0,
+            date: '12:41',
+            nickname: 'wiktor'
+          },
+          {
+            id: '6',
+            type: 1,
+            message: 'Nooo!',
+            createdAt: 0,
+            date: '12:45',
+            nickname: 'wiktor'
+          }
+        ],
+        [
+          {
+            id: '7',
+            type: 1,
+            message: 'Uhuhu!',
+            createdAt: 0,
+            date: '12:46',
+            nickname: 'anakin'
+          }
+        ],
+        [
+          {
+            id: '8',
+            type: 1,
+            message: 'Why?',
+            createdAt: 0,
+            date: '12:46',
+            nickname: 'anakin'
+          }
+        ],
+        [
+          {
+            id: '9',
+            type: 1,
+            message: 'Messages more there should be',
+            createdAt: 0,
+            date: '12:46',
+            nickname: 'yoda'
+          }
+        ],
+        [
+          {
+            id: '11',
+            type: 1,
+            message: 'I Agree',
+            createdAt: 0,
+            date: '12:46',
+            nickname: 'obi'
+          },
+          {
+            id: '12',
+            type: 1,
+            message: 'Of course, I Agree',
+            createdAt: 0,
+            date: '12:46',
+            nickname: 'obi'
+          }
+        ],
+        [
+          {
+            id: '13',
+            type: 1,
+            message: 'Wrough!',
+            createdAt: 0,
+            date: '12:46',
+            nickname: 'wookie'
+          }
+        ],
+        [
+          {
+            id: '14',
+            type: 1,
+            message: 'Yeah!',
+            createdAt: 0,
+            date: '12:46',
+            nickname: 'leah'
+          }
+        ],
+        [
+          {
+            id: '15',
+            type: 1,
+            message: 'The more messages the better',
+            createdAt: 0,
+            date: '12:46',
+            nickname: 'luke'
+          }
+        ],
+        [
+          {
+            id: '16',
+            type: 1,
+            message: 'We cannot grant you the rank of messager',
+            createdAt: 0,
+            date: '12:46',
+            nickname: 'windoo'
+          }
+        ]
       ]
-    ],
-    Today: [
-      [
-        {
-          id: '4',
-          type: 1,
-          message: 'Luck, I am your father!',
-          createdAt: 0,
-          date: '12:40',
-          nickname: 'wiktor'
-        }
-      ]
-    ]
+    }
   })
 
   const sendMessage = useCallback((_message: string) => {}, [])
@@ -109,7 +219,11 @@ const args: ChannelComponentProps = {
     handleOpen: function (_args?: any): any {},
     handleClose: function (): any {}
   },
-  messages: {},
+  messages: {
+    count: 0,
+    groups: {}
+  },
+  setChannelLoadingSlice: function (_value: number): void {},
   onDelete: function (): void {},
   onInputChange: function (_value: string): void {},
   onInputEnter: function (_message: string): void {},

diff --git a/src/renderer/components/pages/Channel.tsx b/src/renderer/components/pages/Channel.tsx
@@ -28,7 +28,11 @@ export interface ChannelComponentProps {
   channel: PublicChannel
   channelSettingsModal: ReturnType<typeof useModal>
   channelInfoModal: ReturnType<typeof useModal>
-  messages: { [date: string]: DisplayableMessage[][] }
+  messages: {
+    count: number
+    groups: { [date: string]: DisplayableMessage[][] }
+  }
+  setChannelLoadingSlice: (value: number) => void
   onDelete: () => void
   onInputChange: (value: string) => void
   onInputEnter: (message: string) => void
@@ -44,6 +48,7 @@ export const ChannelComponent: React.FC<ChannelComponentProps> = ({
   channelInfoModal,
   channelSettingsModal,
   messages,
+  setChannelLoadingSlice,
   onDelete,
   onInputChange,
   onInputEnter,
@@ -71,7 +76,11 @@ export const ChannelComponent: React.FC<ChannelComponentProps> = ({
         />
       </PageHeader>
       <Grid item xs className={classes.messages}>
-        <ChannelMessagesComponent channel={channel.address} messages={messages} />
+        <ChannelMessagesComponent
+          channel={channel.address}
+          messages={messages}
+          setChannelLoadingSlice={setChannelLoadingSlice}
+        />
       </Grid>
       <Grid item>
         <ChannelInputComponent