LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

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

Browse source 
## 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
1 changed files with 3 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
ui/component/claimList/view.jsx
View file

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