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:
parent
4314fcd6be
commit
79f1b1242d
7 changed files with 38 additions and 5 deletions
|
@ -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()),
|
||||
|
|
|
@ -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 />
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue