urbit/shrub
1
1
Fork 0
mirror of https://github.com/urbit/shrub.git synced 2024-12-25 04:52:06 +03:00
Code Issues Packages Projects Releases Wiki Activity

interface: fix loading on scroll

Browse Source
This commit is contained in:
Liam Fitzgerald 2020-11-16 13:53:57 +10:00
parent 6ec8037be8
commit 4e84c43380
No known key found for this signature in database
GPG Key ID: D390E12C61D1CFFB
2 changed files with 18 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
pkg/interface/src/logic/api/hark.ts
View File

@ -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 });
}

13
pkg/interface/src/views/apps/notifications/inbox.tsx
View File

@ -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'