From 4e84c433801dc3f9363feba830e7b636cab9d3fe Mon Sep 17 00:00:00 2001
From: Liam Fitzgerald <liam.fitzgerald@tlon.io>
Date: Mon, 16 Nov 2020 13:53:57 +1000
Subject: [PATCH] interface: fix loading on scroll

---
 pkg/interface/src/logic/api/hark.ts               | 15 +++++++++------
 .../src/views/apps/notifications/inbox.tsx        | 13 +++++++++----
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/pkg/interface/src/logic/api/hark.ts b/pkg/interface/src/logic/api/hark.ts
index 4ab0356d5d..8f33fc4804 100644
--- a/pkg/interface/src/logic/api/hark.ts
+++ b/pkg/interface/src/logic/api/hark.ts
@@ -155,14 +155,17 @@ export class HarkApi extends BaseApi<StoreState> {
     });
   }
 
-  getMore() {
-    const offset = this.store.state.notifications.size;
-    const count = 10;
-    return this.getSubset(offset,count);
+  getMore(archive = false) {
+    const offset = this.store.state[
+      archive ? 'archivedNotifications' : 'notifications'
+    ].size;
+    const count = 3;
+    return this.getSubset(offset,count, archive);
   }
 
-  async getSubset(offset:number, count:number) {
-    const data = await this.scry("hark-store", `/recent/${offset}/${count}`);
+  async getSubset(offset:number, count:number, isArchive: boolean) {
+    const where = isArchive ? 'archive' : 'inbox';
+    const data = await this.scry("hark-store", `/recent/${where}/${offset}/${count}`);
     this.store.handleEvent({ data });
   }
 
diff --git a/pkg/interface/src/views/apps/notifications/inbox.tsx b/pkg/interface/src/views/apps/notifications/inbox.tsx
index 2f81b052ee..e321efa2c0 100644
--- a/pkg/interface/src/views/apps/notifications/inbox.tsx
+++ b/pkg/interface/src/views/apps/notifications/inbox.tsx
@@ -69,12 +69,17 @@ export default function Inbox(props: {
     f.values
   )(notifications);
 
+  useEffect(() => {
+    api.hark.getMore(props.showArchive);
+  }, [props.showArchive]);
+
   const onScroll = useCallback((e) => {
     let container = e.target;
-    if(!props.showArchive && (container.scrollHeight - container.scrollTop === container.clientHeight)) {
-      api.hark.getMore();
+    const { scrollHeight, scrollTop, clientHeight } = container;
+    if((scrollHeight - scrollTop - clientHeight) < 20) {
+      api.hark.getMore(props.showArchive);
     }
-  }, [api]);
+  }, [props.showArchive]);
 
   const incomingGroups = Object.values(invites?.['contacts'] || {});
 
@@ -93,7 +98,7 @@ export default function Inbox(props: {
   };
 
   return (
-    <Col onScroll={onScroll} overflowY="auto" flexGrow="1" minHeight='0' flexShrink='0'>
+    <Col onScroll={onScroll} overflowY="auto" height="100%" minHeight='0'>
       {incomingGroups.map((invite) => (
         <Box
           bg='white'