Inf-scroll: Remove history of whether we've serviced the bottom.

## Fixes:
4351: "Infinite load won't work if the same sort option clicked"

Test case:
1. Click Following
2. Click New
3. Scroll down to load at least 1 extra page.
4. Go up and click New again.

## The Issue:
`scrollBottomCbMap[page]` in this case did not reset since the `id` remained the same.

## The Fix:
I don't know how else to notify the effect to run. Perhaps "when `page=1`" is one criteria, but I found that removing `scrollBottomCbMap` can also fix it.

I don't know what scenario that `scrollBottomCbMap` was originally meant to handle, so will need to depend of reviewer to confirm I did not break something else. This fix assumes that recent inf-scroll fixes and debouncing would have addressed the "weird stuff happening with fast scrolling" problem mentioned in the comments.
This commit is contained in:
infiinte-persistence 2020-06-23 23:22:30 +08:00 committed by Sean Yesmunt
parent 9c7b882fbd
commit defcda519e

View file

@ -1,7 +1,7 @@
// @flow // @flow
import { MAIN_WRAPPER_CLASS } from 'component/app/view'; import { MAIN_WRAPPER_CLASS } from 'component/app/view';
import type { Node } from 'react'; import type { Node } from 'react';
import React, { useEffect, useState } from 'react'; import React, { useEffect } from 'react';
import classnames from 'classnames'; import classnames from 'classnames';
import ClaimPreview from 'component/claimPreview'; import ClaimPreview from 'component/claimPreview';
import Spinner from 'component/spinner'; import Spinner from 'component/spinner';
@ -50,7 +50,6 @@ export default function ClaimList(props: Props) {
onScrollBottom, onScrollBottom,
pageSize, pageSize,
page, page,
id,
showHiddenByUser, showHiddenByUser,
showUnresolvedClaims, showUnresolvedClaims,
renderProperties, renderProperties,
@ -60,7 +59,6 @@ export default function ClaimList(props: Props) {
timedOutMessage, timedOutMessage,
isCardBody = false, isCardBody = false,
} = props; } = props;
const [scrollBottomCbMap, setScrollBottomCbMap] = useState({});
const [currentSort, setCurrentSort] = usePersistedState(persistedStorageKey, SORT_NEW); const [currentSort, setCurrentSort] = usePersistedState(persistedStorageKey, SORT_NEW);
const timedOut = uris === null; const timedOut = uris === null;
const urisLength = (uris && uris.length) || 0; const urisLength = (uris && uris.length) || 0;
@ -70,13 +68,9 @@ export default function ClaimList(props: Props) {
setCurrentSort(currentSort === SORT_NEW ? SORT_OLD : SORT_NEW); setCurrentSort(currentSort === SORT_NEW ? SORT_OLD : SORT_NEW);
} }
useEffect(() => {
setScrollBottomCbMap({});
}, [id, setScrollBottomCbMap]);
useEffect(() => { useEffect(() => {
const handleScroll = debounce(e => { const handleScroll = debounce(e => {
if (page && pageSize && onScrollBottom && !scrollBottomCbMap[page]) { if (page && pageSize && onScrollBottom) {
const mainElWrapper = document.querySelector(`.${MAIN_WRAPPER_CLASS}`); const mainElWrapper = document.querySelector(`.${MAIN_WRAPPER_CLASS}`);
if (mainElWrapper && !loading && urisLength >= pageSize) { if (mainElWrapper && !loading && urisLength >= pageSize) {
@ -84,9 +78,6 @@ export default function ClaimList(props: Props) {
if (contentWrapperAtBottomOfPage) { if (contentWrapperAtBottomOfPage) {
onScrollBottom(); onScrollBottom();
// Save that we've fetched this page to avoid weird stuff happening with fast scrolling
setScrollBottomCbMap({ ...scrollBottomCbMap, [page]: true });
} }
} }
} }
@ -96,7 +87,7 @@ export default function ClaimList(props: Props) {
window.addEventListener('scroll', handleScroll); window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll); return () => window.removeEventListener('scroll', handleScroll);
} }
}, [loading, onScrollBottom, urisLength, pageSize, page, setScrollBottomCbMap]); }, [loading, onScrollBottom, urisLength, pageSize, page]);
return ( return (
<section <section