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`.

ui/component/header/index.js

@@ -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()),

ui/component/header/view.jsx

@@ -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 />

ui/component/sideNavigation/index.js

@@ -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);

ui/component/sideNavigation/view.jsx

@@ -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>

ui/constants/action_types.js

@@ -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';

ui/redux/actions/claims.js

@@ -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,

ui/redux/reducers/claims.js

@@ -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;