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

Chat List: Fix missing chats on page load

Browse Source
This commit is contained in:
Alexander Zinchuk 2023-06-18 12:04:08 +02:00
parent 9108a030a0
commit 7ab5d3bc17
1 changed files with 23 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/hooks/useInfiniteScroll.ts
View File

@ -23,15 +23,14 @@ const useInfiniteScroll = <ListId extends string | number>(
offsetId?: ListId; offsetId?: ListId;
}>(); }>();
const viewportIdsRef = useRef<ListId[] | undefined>((() => { const currentStateRef = useRef<{ viewportIds: ListId[]; isOnTop: boolean } | undefined>();
// Only run once to initialize if (!currentStateRef.current && listIds && !isDisabled) {
if (!listIds || requestParamsRef.current) { const {
return undefined; newViewportIds,
} newIsOnTop,
} = getViewportSlice(listIds, LoadMoreDirection.Forwards, listSlice, listIds[0]);
const { newViewportIds } = getViewportSlice(listIds, LoadMoreDirection.Forwards, listSlice, listIds[0]); currentStateRef.current = { viewportIds: newViewportIds, isOnTop: newIsOnTop };
return newViewportIds; }
})());
const forceUpdate = useForceUpdate(); const forceUpdate = useForceUpdate();
@ -42,27 +41,26 @@ const useInfiniteScroll = <ListId extends string | number>(
const prevListIds = usePrevious(listIds); const prevListIds = usePrevious(listIds);
const prevIsDisabled = usePrevious(isDisabled); const prevIsDisabled = usePrevious(isDisabled);
if (listIds && !isDisabled && (listIds !== prevListIds || isDisabled !== prevIsDisabled)) { if (listIds && !isDisabled && (listIds !== prevListIds || isDisabled !== prevIsDisabled)) {
const viewportIds = viewportIdsRef.current; const { viewportIds, isOnTop } = currentStateRef.current || {};
const isOnTop = viewportIds && viewportIds[0] === listIds[0]; const currentMiddleId = viewportIds && !isOnTop ? viewportIds[Math.round(viewportIds.length / 2)] : undefined;
const currentMiddleId = !isOnTop && viewportIds ? viewportIds[Math.round(viewportIds.length / 2)] : undefined;
const defaultOffsetId = currentMiddleId && listIds.includes(currentMiddleId) ? currentMiddleId : listIds[0]; const defaultOffsetId = currentMiddleId && listIds.includes(currentMiddleId) ? currentMiddleId : listIds[0];
const { offsetId = defaultOffsetId, direction = LoadMoreDirection.Forwards } = requestParamsRef.current || {}; const { offsetId = defaultOffsetId, direction = LoadMoreDirection.Forwards } = requestParamsRef.current || {};
const { newViewportIds } = getViewportSlice(listIds, direction, listSlice, offsetId); const { newViewportIds, newIsOnTop } = getViewportSlice(listIds, direction, listSlice, offsetId);
requestParamsRef.current = {}; requestParamsRef.current = {};
if (!viewportIds || !areSortedArraysEqual(viewportIds, newViewportIds)) { if (!viewportIds || !areSortedArraysEqual(viewportIds, newViewportIds)) {
viewportIdsRef.current = newViewportIds; currentStateRef.current = { viewportIds: newViewportIds, isOnTop: newIsOnTop };
} }
} else if (!listIds) { } else if (!listIds) {
viewportIdsRef.current = undefined; currentStateRef.current = undefined;
} }
const getMore: GetMore = useLastCallback(({ const getMore: GetMore = useLastCallback(({
direction, direction,
noScroll, noScroll,
}: { direction: LoadMoreDirection; noScroll?: boolean }) => { }: { direction: LoadMoreDirection; noScroll?: boolean }) => {
const viewportIds = viewportIdsRef.current; const { viewportIds } = currentStateRef.current || {};
const offsetId = viewportIds const offsetId = viewportIds
? direction === LoadMoreDirection.Backwards ? viewportIds[viewportIds.length - 1] : viewportIds[0] ? direction === LoadMoreDirection.Backwards ? viewportIds[viewportIds.length - 1] : viewportIds[0]
@ -77,11 +75,11 @@ const useInfiniteScroll = <ListId extends string | number>(
} }
const { const {
newViewportIds, areSomeLocal, areAllLocal, newViewportIds, areSomeLocal, areAllLocal, newIsOnTop,
} = getViewportSlice(listIds, direction, listSlice, offsetId); } = getViewportSlice(listIds, direction, listSlice, offsetId);
if (areSomeLocal && !(viewportIds && areSortedArraysEqual(viewportIds, newViewportIds))) { if (areSomeLocal && !(viewportIds && areSortedArraysEqual(viewportIds, newViewportIds))) {
viewportIdsRef.current = newViewportIds; currentStateRef.current = { viewportIds: newViewportIds, isOnTop: newIsOnTop };
forceUpdate(); forceUpdate();
} }
@ -94,7 +92,7 @@ const useInfiniteScroll = <ListId extends string | number>(
} }
}); });
return isDisabled ? [listIds] : [viewportIdsRef.current, getMore]; return isDisabled ? [listIds] : [currentStateRef.current?.viewportIds, getMore];
}; };
function getViewportSlice<ListId extends string | number>( function getViewportSlice<ListId extends string | number>(
@ -124,7 +122,12 @@ function getViewportSlice<ListId extends string | number>(
break; break;
} }
return { newViewportIds, areSomeLocal, areAllLocal }; return {
newViewportIds,
areSomeLocal,
areAllLocal,
newIsOnTop: newViewportIds[0] === sourceIds[0],
};
} }
export default useInfiniteScroll; export default useInfiniteScroll;