WildWest: fix livestream expansion resetting y-pos (#923)

## Root-cause?
It doesn't happen on the commit before the Theme change. However, it's possible that the y-pos is reset since we are indeed unmounting the dual list and re-mounting the single list.

Maybe the css got more efficient and we ended up painting more frames than before.

## Fix
Fix by stashing and restoring the the y-position during the expansion.
This commit is contained in:
infinite-persistence 2022-02-21 04:44:26 -08:00 committed by GitHub
parent 5b81346e59
commit 4314fcd6be
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -20,12 +20,7 @@ import moment from 'moment';
import { getLivestreamUris } from 'util/livestream';
const DEFAULT_LIVESTREAM_TILE_LIMIT = 8;
const SECTION = {
HIDDEN: 0,
LESS: 1,
MORE: 2,
};
const SECTION = Object.freeze({ HIDDEN: 0, LESS: 1, MORE: 2 });
type Props = {
dynamicRouteProps: RowDataItem,
@ -58,6 +53,7 @@ function DiscoverPage(props: Props) {
} = props;
const [liveSectionStore, setLiveSectionStore] = usePersistedState('discover:liveSection', SECTION.LESS);
const [expandedYPos, setExpandedYPos] = useState(null);
const buttonRef = useRef();
const isHovering = useHover(buttonRef);
@ -209,6 +205,14 @@ function DiscoverPage(props: Props) {
// eslint-disable-next-line react-hooks/exhaustive-deps, (on mount only)
}, []);
// Maintain y-position when expanding livestreams section:
React.useEffect(() => {
if (liveSection === SECTION.MORE && expandedYPos !== null) {
window.scrollTo(0, expandedYPos);
setExpandedYPos(null);
}
}, [liveSection, expandedYPos]);
return (
<Page noFooter fullWidthPage={tileLayout}>
{useDualList && (
@ -232,6 +236,7 @@ function DiscoverPage(props: Props) {
className="claim-grid__title--secondary"
onClick={() => {
doFetchActiveLivestreams();
setExpandedYPos(window.scrollY);
setLiveSection(SECTION.MORE);
}}
/>