ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Infinite Scroll: Fix missing chats

Browse Source
This commit is contained in:
Alexander Zinchuk 2021-06-13 18:38:19 +03:00
parent a6e2ca32fd
commit 911f80cae1
2 changed files with 16 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/ui/InfiniteScroll.tsx
View File

@ -11,7 +11,7 @@ import resetScroll from '../../util/resetScroll';
type OwnProps = { type OwnProps = {
ref?: RefObject<HTMLDivElement>; ref?: RefObject<HTMLDivElement>;
className?: string; className?: string;
onLoadMore?: ({ direction }: { direction: LoadMoreDirection }) => void; onLoadMore?: ({ direction }: { direction: LoadMoreDirection; noScroll?: boolean }) => void;
onScroll?: (e: UIEvent<HTMLDivElement>) => void; onScroll?: (e: UIEvent<HTMLDivElement>) => void;
onKeyDown?: (e: React.KeyboardEvent<any>) => void; onKeyDown?: (e: React.KeyboardEvent<any>) => void;
items?: any[]; items?: any[];
@ -66,8 +66,12 @@ const InfiniteScroll: FC<OwnProps> = ({
} }
return [ return [
debounce(() => onLoadMore({ direction: LoadMoreDirection.Backwards }), 1000, true, false), debounce((noScroll = false) => {
debounce(() => onLoadMore({ direction: LoadMoreDirection.Forwards }), 1000, true, false), onLoadMore({ direction: LoadMoreDirection.Backwards, noScroll });
}, 1000, true, false),
debounce(() => {
onLoadMore({ direction: LoadMoreDirection.Forwards });
}, 1000, true, false),
]; ];
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [onLoadMore, items]); }, [onLoadMore, items]);
@ -79,7 +83,7 @@ const InfiniteScroll: FC<OwnProps> = ({
} }
if (preloadBackwards > 0 && (!items || items.length < preloadBackwards)) { if (preloadBackwards > 0 && (!items || items.length < preloadBackwards)) {
loadMoreBackwards(); loadMoreBackwards(true);
return; return;
} }

11
src/hooks/useInfiniteScroll.ts
View File

@ -52,7 +52,10 @@ export default (
} }
}, [listIds, isDisabled, loadMoreBackwards, forceFullPreload]); }, [listIds, isDisabled, loadMoreBackwards, forceFullPreload]);
const getMore: GetMore = useCallback(({ direction }: { direction: LoadMoreDirection }) => { const getMore: GetMore = useCallback(({
direction,
noScroll,
}: { direction: LoadMoreDirection; noScroll?: boolean }) => {
const viewportIds = viewportIdsRef.current; const viewportIds = viewportIdsRef.current;
const offsetId = viewportIds const offsetId = viewportIds
@ -67,8 +70,6 @@ export default (
return; return;
} }
lastParamsRef.current = { ...lastParamsRef.current, direction, offsetId };
const { const {
newViewportIds, areSomeLocal, areAllLocal, newViewportIds, areSomeLocal, areAllLocal,
} = getViewportSlice(listIds, offsetId, direction, listSlice); } = getViewportSlice(listIds, offsetId, direction, listSlice);
@ -79,6 +80,10 @@ export default (
} }
if (!areAllLocal && loadMoreBackwards) { if (!areAllLocal && loadMoreBackwards) {
if (!noScroll) {
lastParamsRef.current = { ...lastParamsRef.current, direction, offsetId };
}
loadMoreBackwards({ offsetId }); loadMoreBackwards({ offsetId });
} }
}, [listIds, listSlice, loadMoreBackwards, forceUpdate]); }, [listIds, listSlice, loadMoreBackwards, forceUpdate]);