Move clear function to page switch

ui/component/channelSelector/view.jsx

@@ -27,7 +27,6 @@ type Props = {
   storeSelection?: boolean,
   doSetClientSetting: (key: string, value: string, pushPrefs: boolean) => void,
   isHeaderMenu: boolean,
-  hasDefaultChannel: boolean,
 };
 
 export default function ChannelSelector(props: Props) {
@@ -43,13 +42,10 @@ export default function ChannelSelector(props: Props) {
     storeSelection,
     doSetClientSetting,
     isHeaderMenu,
-    hasDefaultChannel,
   } = props;
 
   const hideAnon = Boolean(props.hideAnon || storeSelection);
 
-  const defaultChannelRef = React.useRef(hasDefaultChannel);
-
   const {
     push,
     location: { pathname },
@@ -66,20 +62,6 @@ export default function ChannelSelector(props: Props) {
     }
   }
 
-  React.useEffect(() => {
-    defaultChannelRef.current = hasDefaultChannel;
-  }, [hasDefaultChannel]);
-
-  React.useEffect(() => {
-    return () => {
-      // has a default channel selected, clear the current active channel
-      if (defaultChannelRef.current) {
-        doSetActiveChannel(null, true);
-      }
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   return (
     <div className="channel__selector">
       <Menu>

ui/component/router/index.js

@@ -6,7 +6,7 @@ import { selectClientSetting, selectHomepageData, selectWildWestDisabled } from
 import Router from './view';
 import { normalizeURI } from 'util/lbryURI';
 import { selectTitleForUri } from 'redux/selectors/claims';
-import { doSetHasNavigated } from 'redux/actions/app';
+import { doSetHasNavigated, doSetActiveChannel } from 'redux/actions/app';
 import { doUserSetReferrer } from 'redux/actions/user';
 import { selectHasUnclaimedRefereeReward } from 'redux/selectors/rewards';
 import { selectUnseenNotificationCount } from 'redux/selectors/notifications';
@@ -39,12 +39,14 @@ const select = (state) => {
     wildWestDisabled: selectWildWestDisabled(state),
     unseenCount: selectUnseenNotificationCount(state),
     hideTitleNotificationCount: selectClientSetting(state, SETTINGS.HIDE_TITLE_NOTIFICATION_COUNT),
+    hasDefaultChannel: Boolean(selectClientSetting(state, SETTINGS.ACTIVE_CHANNEL_CLAIM)),
   };
 };
 
-const perform = (dispatch) => ({
-  setHasNavigated: () => dispatch(doSetHasNavigated()),
-  setReferrer: (referrer) => dispatch(doUserSetReferrer(referrer)),
-});
+const perform = {
+  setHasNavigated: doSetHasNavigated,
+  setReferrer: doUserSetReferrer,
+  doSetActiveChannel,
+};
 
 export default connect(select, perform)(Router);

ui/component/router/view.jsx

@@ -141,6 +141,8 @@ type Props = {
   wildWestDisabled: boolean,
   unseenCount: number,
   hideTitleNotificationCount: boolean,
+  hasDefaultChannel: boolean,
+  doSetActiveChannel: (claimId: ?string, override?: boolean) => void,
 };
 
 type PrivateRouteProps = Props & {
@@ -182,8 +184,12 @@ function AppRouter(props: Props) {
     wildWestDisabled,
     unseenCount,
     hideTitleNotificationCount,
+    hasDefaultChannel,
+    doSetActiveChannel,
   } = props;
 
+  const defaultChannelRef = React.useRef(hasDefaultChannel);
+
   const { entries, listen, action: historyAction } = history;
   const entryIndex = history.index;
   const urlParams = new URLSearchParams(search);
@@ -275,6 +281,20 @@ function AppRouter(props: Props) {
     }
   }, [currentScroll, pathname, search, hash, resetScroll, hasLinkedCommentInUrl, historyAction]);
 
+  React.useEffect(() => {
+    defaultChannelRef.current = hasDefaultChannel;
+  }, [hasDefaultChannel]);
+
+  React.useEffect(() => {
+    return () => {
+      // has a default channel selected, clear the current active channel
+      if (defaultChannelRef.current) {
+        doSetActiveChannel(null, true);
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pathname]);
+
   // react-router doesn't decode pathanmes before doing the route matching check
   // We have to redirect here because if we redirect on the server, it might get encoded again
   // in the browser causing a redirect loop

ui/component/selectChannel/index.js

@@ -1,16 +1,13 @@
 import { connect } from 'react-redux';
-import * as SETTINGS from 'constants/settings';
 import SelectChannel from './view';
 import { selectMyChannelClaims, selectFetchingMyChannels } from 'redux/selectors/claims';
 import { selectActiveChannelClaim } from 'redux/selectors/app';
 import { doSetActiveChannel } from 'redux/actions/app';
-import { selectClientSetting } from 'redux/selectors/settings';
 
 const select = (state) => ({
   myChannelClaims: selectMyChannelClaims(state),
   fetchingChannels: selectFetchingMyChannels(state),
   activeChannelClaimId: selectActiveChannelClaim(state)?.claim_id,
-  hasDefaultChannel: Boolean(selectClientSetting(state, SETTINGS.ACTIVE_CHANNEL_CLAIM)),
 });
 
 const perform = (dispatch) => ({

ui/component/selectChannel/view.jsx

@@ -11,7 +11,6 @@ type Props = {
   myChannelClaims: ?Array<ChannelClaim>,
   fetchingChannels: boolean,
   activeChannelClaimId: ?string,
-  hasDefaultChannel: boolean,
   setActiveChannel: (claimId: ?string, override?: boolean) => void,
 };
 
@@ -24,12 +23,9 @@ function SelectChannel(props: Props) {
     injected = [],
     tiny,
     activeChannelClaimId,
-    hasDefaultChannel,
     setActiveChannel,
   } = props;
 
-  const defaultChannelRef = React.useRef(hasDefaultChannel);
-
   function handleChannelChange(event: SyntheticInputEvent<*>) {
     const channelClaimId = event.target.value;
     setActiveChannel(channelClaimId);
@@ -40,20 +36,6 @@ function SelectChannel(props: Props) {
     mine = myChannelClaims.filter((x) => channelIds.includes(x.claim_id));
   }
 
-  React.useEffect(() => {
-    defaultChannelRef.current = hasDefaultChannel;
-  }, [hasDefaultChannel]);
-
-  React.useEffect(() => {
-    return () => {
-      // has a default channel selected, clear the current active channel
-      if (defaultChannelRef.current) {
-        setActiveChannel(null, true);
-      }
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   return (
     <>
       <FormField