Clear search cache instead of full reload on homepage 2nd-click (#930)

## Ticket
lbry-desktop 6841

## Issue
If you are already at the homepage and you click the "Home" or "Odysee" logo again, the entire page reloads, causing the whole startup sequence to re-run (lots of fetches).

This can be annoying when not intended (e.g. clicked too many times), as startup is slow for some and we also lose non-persistent Redux data (for debugging).

I believe the requirement was just to reload the homepage tiles, as they might be showing stale ones after a while. A full reload was the quick-and-easy fix.

## Approach
Best not to touch the complicated `ClaimTilesDiscover`, so just clear the search cache key in this scenario. `ClaimTilesDiscover` will then pick this up and perform a new `claim_search`.
This commit is contained in:
infinite-persistence 2022-02-21 04:54:23 -08:00 committed by GitHub
parent 4314fcd6be
commit 79f1b1242d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 38 additions and 5 deletions

View file

@ -1,6 +1,7 @@
import { connect } from 'react-redux';
import { doClearEmailEntry, doClearPasswordEntry } from 'redux/actions/user';
import { doSignOut, doOpenModal } from 'redux/actions/app';
import { doClearClaimSearch } from 'redux/actions/claims';
import { selectClientSetting } from 'redux/selectors/settings';
import { selectGetSyncErrorMessage } from 'redux/selectors/sync';
import { selectHasNavigated } from 'redux/selectors/app';
@ -22,6 +23,7 @@ const select = (state) => ({
});
const perform = (dispatch) => ({
doClearClaimSearch: () => dispatch(doClearClaimSearch()),
clearEmailEntry: () => dispatch(doClearEmailEntry()),
clearPasswordEntry: () => dispatch(doClearPasswordEntry()),
signOut: () => dispatch(doSignOut()),

View file

@ -43,6 +43,7 @@ type Props = {
syncError: ?string,
totalBalance?: number,
user: ?User,
doClearClaimSearch: () => void,
clearEmailEntry: () => void,
clearPasswordEntry: () => void,
openChangelog: ({}) => void,
@ -65,6 +66,7 @@ const Header = (props: Props) => {
syncError,
totalBalance,
user,
doClearClaimSearch,
clearEmailEntry,
clearPasswordEntry,
openChangelog,
@ -210,7 +212,12 @@ const Header = (props: Props) => {
<Button
aria-label={__('Home')}
className="header__navigationItem--logo"
onClick={() => pathname === '/' && window.location.reload()}
onClick={() => {
if (pathname === '/') {
window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
doClearClaimSearch();
}
}}
{...homeButtonNavigationProps}
>
<Logo />

View file

@ -1,6 +1,7 @@
import { connect } from 'react-redux';
import { selectActiveChannelStakedLevel } from 'redux/selectors/app';
import { selectSubscriptions } from 'redux/selectors/subscriptions';
import { doClearClaimSearch } from 'redux/actions/claims';
import { doClearPurchasedUriSuccess } from 'redux/actions/file';
import { selectFollowedTags } from 'redux/selectors/tags';
import { selectUserVerifiedEmail, selectUser } from 'redux/selectors/user';
@ -25,6 +26,7 @@ const select = (state) => ({
});
export default connect(select, {
doClearClaimSearch,
doSignOut,
doClearPurchasedUriSuccess,
})(SideNavigation);

View file

@ -34,14 +34,19 @@ const GO_LIVE = {
icon: ICONS.VIDEO,
};
const HOME = {
const getHomeButton = (additionalAction) => ({
title: 'Home',
link: `/`,
icon: ICONS.HOME,
onClick: () => {
if (window.location.pathname === '/') window.location.reload();
if (window.location.pathname === '/') {
window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
if (additionalAction) {
additionalAction();
}
}
},
};
});
const RECENT_FROM_FOLLOWING = {
title: 'Following --[sidebar button]--',
@ -113,6 +118,7 @@ type Props = {
homepageData: any,
activeChannelStakedLevel: number,
wildWestDisabled: boolean,
doClearClaimSearch: () => void,
};
function SideNavigation(props: Props) {
@ -132,6 +138,7 @@ function SideNavigation(props: Props) {
followedTags,
activeChannelStakedLevel,
wildWestDisabled,
doClearClaimSearch,
} = props;
const isLargeScreen = useIsLargeScreen();
@ -473,7 +480,7 @@ function SideNavigation(props: Props) {
'navigation-links--absolute': shouldRenderLargeMenu,
})}
>
{getLink(HOME)}
{getLink(getHomeButton(doClearClaimSearch))}
{getLink(RECENT_FROM_FOLLOWING)}
{getLink(PLAYLISTS)}
</ul>

View file

@ -158,6 +158,7 @@ export const IMPORT_CHANNEL_STARTED = 'IMPORT_CHANNEL_STARTED';
export const IMPORT_CHANNEL_COMPLETED = 'IMPORT_CHANNEL_COMPLETED';
export const IMPORT_CHANNEL_FAILED = 'IMPORT_CHANNEL_FAILED';
export const CLEAR_CHANNEL_ERRORS = 'CLEAR_CHANNEL_ERRORS';
export const CLEAR_CLAIM_SEARCH_HISTORY = 'CLEAR_CLAIM_SEARCH_HISTORY';
export const CLAIM_SEARCH_STARTED = 'CLAIM_SEARCH_STARTED';
export const CLAIM_SEARCH_COMPLETED = 'CLAIM_SEARCH_COMPLETED';
export const CLAIM_SEARCH_FAILED = 'CLAIM_SEARCH_FAILED';

View file

@ -617,6 +617,12 @@ export function doFetchCollectionListMine(page: number = 1, pageSize: number = 9
};
}
export function doClearClaimSearch() {
return (dispatch: Dispatch) => {
dispatch({ type: ACTIONS.CLEAR_CLAIM_SEARCH_HISTORY });
};
}
export function doClaimSearch(
options: {
page_size?: number,

View file

@ -770,6 +770,14 @@ reducers[ACTIONS.IMPORT_CHANNEL_STARTED] = (state: State): State =>
reducers[ACTIONS.IMPORT_CHANNEL_COMPLETED] = (state: State): State =>
Object.assign({}, state, { pendingChannelImports: false });
reducers[ACTIONS.CLEAR_CLAIM_SEARCH_HISTORY] = (state: State): State => {
return {
...state,
claimSearchByQuery: {},
claimSearchByQueryLastPageReached: {},
};
};
reducers[ACTIONS.CLAIM_SEARCH_STARTED] = (state: State, action: any): State => {
const fetchingClaimSearchByQuery = Object.assign({}, state.fetchingClaimSearchByQuery);
fetchingClaimSearchByQuery[action.data.query] = true;