fix: reset back to top of infinite list on refresh (but keep scroll state on back navigation

This commit is contained in:
Sean Yesmunt 2019-09-11 14:29:20 -04:00
parent 22648b9117
commit 322005223e
2 changed files with 23 additions and 9 deletions

View file

@ -1,6 +1,6 @@
// @flow // @flow
import type { Node } from 'react'; import type { Node } from 'react';
import React, { Fragment, useEffect } from 'react'; import React, { Fragment, useEffect, useState } from 'react';
import { withRouter } from 'react-router'; import { withRouter } from 'react-router';
import { createNormalizedClaimSearchKey, MATURE_TAGS } from 'lbry-redux'; import { createNormalizedClaimSearchKey, MATURE_TAGS } from 'lbry-redux';
import { FormField } from 'component/common/form'; import { FormField } from 'component/common/form';
@ -9,7 +9,6 @@ import moment from 'moment';
import ClaimList from 'component/claimList'; import ClaimList from 'component/claimList';
import Tag from 'component/tag'; import Tag from 'component/tag';
import ClaimPreview from 'component/claimPreview'; import ClaimPreview from 'component/claimPreview';
import { updateQueryParam } from 'util/query-params';
import { toCapitalCase } from 'util/string'; import { toCapitalCase } from 'util/string';
const PAGE_SIZE = 20; const PAGE_SIZE = 20;
@ -64,14 +63,13 @@ function ClaimListDiscover(props: Props) {
hiddenUris, hiddenUris,
} = props; } = props;
const didNavigateForward = history.action === 'PUSH'; const didNavigateForward = history.action === 'PUSH';
const { search, pathname } = location; const { search } = location;
const urlParams = new URLSearchParams(search); const urlParams = new URLSearchParams(search);
const personalSort = urlParams.get('sort') || SEARCH_SORT_YOU; const personalSort = urlParams.get('sort') || SEARCH_SORT_YOU;
const typeSort = urlParams.get('type') || TYPE_TRENDING; const typeSort = urlParams.get('type') || TYPE_TRENDING;
const timeSort = urlParams.get('time') || TIME_WEEK; const timeSort = urlParams.get('time') || TIME_WEEK;
const page = Number(urlParams.get('page')) || 1; const [page, setPage] = useState(1);
const tagsInUrl = urlParams.get('t') || ''; const tagsInUrl = urlParams.get('t') || '';
const url = `${pathname}${search}`;
const options: { const options: {
page_size: number, page_size: number,
page: number, page: number,
@ -163,8 +161,7 @@ function ClaimListDiscover(props: Props) {
function handleScrollBottom() { function handleScrollBottom() {
if (!loading) { if (!loading) {
const uri = updateQueryParam(url, 'page', page + 1); setPage(page + 1);
history.replace(uri);
} }
} }

View file

@ -684,5 +684,22 @@
"The viewer doesn't support this file type. See more info below.": "The viewer doesn't support this file type. See more info below.", "The viewer doesn't support this file type. See more info below.": "The viewer doesn't support this file type. See more info below.",
"Catching up...": "Catching up...", "Catching up...": "Catching up...",
"%s blocks behind": "%s blocks behind", "%s blocks behind": "%s blocks behind",
"Support this creator": "Support this creator" "Support this creator": "Support this creator",
} "Network and Data Settings": "Network and Data Settings",
"Save all viewed content to your downloads directory": "Save all viewed content to your downloads directory",
"Paid content and some file types are saved by default. Changing this setting will not affect previously downloaded content.": "Paid content and some file types are saved by default. Changing this setting will not affect previously downloaded content.",
"Save hosting data to help the LBRY network": "Save hosting data to help the LBRY network",
"If disabled, LBRY will be very sad and you won't be helping improve the network.": "If disabled, LBRY will be very sad and you won't be helping improve the network.",
"Floating video player": "Floating video player",
"Keep content playing in the corner when navigating to a different page.": "Keep content playing in the corner when navigating to a different page.",
"Blocked Channels": "Blocked Channels",
"blocked": "blocked",
"channels": "channels",
"Manage": "Manage",
"Automatic dark mode": "Automatic dark mode",
"Hide wallet balance in header": "Hide wallet balance in header",
"Max Connections": "Max Connections",
"For users with good bandwidth, try a higher value to improve streaming and download speeds. Low bandwidth users may benefit from a lower setting. Default is 4.": "For users with good bandwidth, try a higher value to improve streaming and download speeds. Low bandwidth users may benefit from a lower setting. Default is 4.",
"This will clear the application cache. Your wallet will not be affected. Currently, followed tags and blocked channels will be cleared.": "This will clear the application cache. Your wallet will not be affected. Currently, followed tags and blocked channels will be cleared.",
"Show All": "Show All"
}