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

ChatWindow: fix unread and gaps in scrollback

Browse Source
This commit is contained in:
Liam Fitzgerald 2021-03-12 11:26:02 +10:00
parent f20da46745
commit 0fe7a2c985
No known key found for this signature in database
GPG Key ID: D390E12C61D1CFFB
2 changed files with 18 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
pkg/interface/src/views/apps/chat/components/ChatWindow.tsx
View File

@ -60,9 +60,6 @@ class ChatWindow extends Component<
private virtualList: VirtualScroller | null;
private unreadMarkerRef: React.RefObject<HTMLDivElement>;
private prevSize = 0;
private loadedNewest = false;
private loadedOldest = false;
private fetchPending = false;
INITIALIZATION_MAX_TIME = 100;
@ -126,8 +123,11 @@ class ChatWindow extends Component<
componentDidUpdate(prevProps: ChatWindowProps, prevState) {
const { history, graph, unreadCount, station } = this.props;
if (graph.size !== prevProps.graph.size && this.fetchPending) {
this.fetchPending = false;
if (graph.size !== this.prevSize) {
this.prevSize = graph.size;
if(!this.state.unreadIndex && this.virtualList?.loaded.top) {
this.calculateUnreadIndex();
}
}
if (unreadCount > prevProps.unreadCount) {
@ -171,30 +171,28 @@ class ChatWindow extends Component<
fetchMessages = async (newer: boolean): Promise<boolean> => {
const { api, station, graph } = this.props;
if(this.fetchPending) {
return false;
}
this.fetchPending = true;
const pageSize = 100;
const [, , ship, name] = station.split('/');
const currSize = graph.size;
const expectedSize = graph.size + pageSize;
if (newer) {
const [index] = graph.peekLargest()!;
await api.graph.getYoungerSiblings(
ship,
name,
100,
pageSize,
`/${index.toString()}`
);
return expectedSize !== graph.size;
} else {
const [index] = graph.peekSmallest()!;
await api.graph.getOlderSiblings(ship, name, 100, `/${index.toString()}`);
this.calculateUnreadIndex();
await api.graph.getOlderSiblings(ship, name, pageSize, `/${index.toString()}`);
const done = expectedSize !== graph.size;
if(done) {
this.calculateUnreadIndex();
}
return done;
}
this.fetchPending = false;
return currSize === graph.size;
}
onScroll = ({ scrollTop, scrollHeight, windowHeight }) => {
@ -289,8 +287,7 @@ class ChatWindow extends Component<
api,
associations
};
const unreadIndex = graph.keys()[this.props.unreadCount];
const unreadMsg = unreadIndex && graph.get(unreadIndex);
const unreadMsg = graph.get(this.state.unreadIndex);
return (
<Col height='100%' overflow='hidden' position='relative'>
@ -332,4 +329,4 @@ export default withState(ChatWindow, [
[useGroupState, ['groups']],
[useMetadataState, ['associations']],
[useGraphState, ['pendingSize']]
]);
]);

7
pkg/interface/src/views/components/VirtualScroller.tsx
View File

@ -153,14 +153,10 @@ export default class VirtualScroller<T> extends Component<VirtualScrollerProps<T
}
componentDidMount() {
if(this.props.size < 100) {
this.loaded.top = true;
this.loaded.bottom = true;
}
this.updateVisible(0);
this.resetScroll();
this.loadRows(false);
this.loadRows(true);
}
// manipulate scrollbar manually, to dodge change detection
@ -485,7 +481,6 @@ export default class VirtualScroller<T> extends Component<VirtualScrollerProps<T
const transform = isTop ? 'scale3d(1, 1, 1)' : 'scale3d(1, -1, 1)';
const atStart = (this.props.data.peekLargest()?.[0] ?? bigInt.zero).eq(visibleItems.peekLargest()?.[0] || bigInt.zero);
const atEnd = this.loaded.top;