Add a clear function when a channel selector component is used

- this way, you can choose an active channel for something like commenting but when that component is unmounted, you always go back to the default channel (like leaving page)

ui/component/channelSelector/index.js

@@ -1,9 +1,11 @@
 import { connect } from 'react-redux';
+import * as SETTINGS from 'constants/settings';
 import { selectMyChannelClaims, selectClaimsByUri, selectOdyseeMembershipForUri } from 'redux/selectors/claims';
 import { selectActiveChannelClaim, selectIncognito } from 'redux/selectors/app';
 import { doSetActiveChannel, doSetIncognito } from 'redux/actions/app';
 import { doFetchUserMemberships } from 'redux/actions/user';
 import { doSetClientSetting } from 'redux/actions/settings';
+import { selectClientSetting } from 'redux/selectors/settings';
 import ChannelSelector from './view';
 
 const select = (state, props) => {
@@ -15,6 +17,7 @@ const select = (state, props) => {
     incognito: selectIncognito(state),
     odyseeMembershipByUri: (uri) => selectOdyseeMembershipForUri(state, uri),
     claimsByUri: selectClaimsByUri(state),
+    hasDefaultChannel: Boolean(selectClientSetting(state, SETTINGS.ACTIVE_CHANNEL_CLAIM)),
   };
 };
 

ui/component/channelSelector/view.jsx

@@ -18,7 +18,7 @@ type Props = {
   onChannelSelect: (url: string) => void,
   hideAnon?: boolean,
   activeChannelClaim: ?ChannelClaim,
-  doSetActiveChannel: (string) => void,
+  doSetActiveChannel: (claimId: ?string, override?: boolean) => void,
   incognito: boolean,
   doSetIncognito: (boolean) => void,
   claimsByUri: { [string]: any },
@@ -27,6 +27,7 @@ type Props = {
   storeSelection?: boolean,
   doSetClientSetting: (key: string, value: string, pushPrefs: boolean) => void,
   isHeaderMenu: boolean,
+  hasDefaultChannel: boolean,
 };
 
 export default function ChannelSelector(props: Props) {
@@ -34,7 +35,6 @@ export default function ChannelSelector(props: Props) {
     channels,
     activeChannelClaim,
     doSetActiveChannel,
-    hideAnon = false,
     incognito,
     doSetIncognito,
     odyseeMembershipByUri,
@@ -43,8 +43,13 @@ 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 },
@@ -61,6 +66,20 @@ 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/selectChannel/index.js

@@ -1,17 +1,20 @@
 import { connect } from 'react-redux';
+import * as SETTINGS from 'constants/settings';
 import SelectChannel from './view';
 import { selectMyChannelClaims, selectFetchingMyChannels } from 'redux/selectors/claims';
-import { selectActiveChannelId } from 'redux/selectors/app';
+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),
-  activeChannelId: selectActiveChannelId(state),
+  activeChannelClaimId: selectActiveChannelClaim(state)?.claim_id,
+  hasDefaultChannel: Boolean(selectClientSetting(state, SETTINGS.ACTIVE_CHANNEL_CLAIM)),
 });
 
 const perform = (dispatch) => ({
-  setActiveChannel: (claimId) => dispatch(doSetActiveChannel(claimId)),
+  setActiveChannel: (claimId, override) => dispatch(doSetActiveChannel(claimId, override)),
 });
 
 export default connect(select, perform)(SelectChannel);

ui/component/selectChannel/view.jsx

@@ -10,8 +10,9 @@ type Props = {
   // --- Redux ---
   myChannelClaims: ?Array<ChannelClaim>,
   fetchingChannels: boolean,
-  activeChannelId: ?string,
+  activeChannelClaimId: ?string,
-  setActiveChannel: (string) => void,
+  hasDefaultChannel: boolean,
+  setActiveChannel: (claimId: ?string, override?: boolean) => void,
 };
 
 function SelectChannel(props: Props) {
@@ -22,10 +23,13 @@ function SelectChannel(props: Props) {
     label,
     injected = [],
     tiny,
-    activeChannelId,
+    activeChannelClaimId,
+    hasDefaultChannel,
     setActiveChannel,
   } = props;
 
+  const defaultChannelRef = React.useRef(hasDefaultChannel);
+
   function handleChannelChange(event: SyntheticInputEvent<*>) {
     const channelClaimId = event.target.value;
     setActiveChannel(channelClaimId);
@@ -36,6 +40,20 @@ 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
@@ -44,7 +62,7 @@ function SelectChannel(props: Props) {
         labelOnLeft={tiny}
         type={tiny ? 'select-tiny' : 'select'}
         onChange={handleChannelChange}
-        value={activeChannelId}
+        value={activeChannelClaimId}
         disabled={fetchingChannels}
       >
         {fetchingChannels ? (

ui/redux/actions/app.js

@@ -11,7 +11,7 @@ import * as DAEMON_SETTINGS from 'constants/daemon_settings';
 import * as SHARED_PREFERENCES from 'constants/shared_preferences';
 import Lbry from 'lbry';
 import { doFetchChannelListMine, doFetchCollectionListMine, doCheckPendingClaims } from 'redux/actions/claims';
-import { selectClaimForUri, selectClaimIsMineForUri, selectMyChannelClaims } from 'redux/selectors/claims';
+import { selectClaimForUri, selectClaimIsMineForUri } from 'redux/selectors/claims';
 import { doFetchFileInfos } from 'redux/actions/file_info';
 import { doClearSupport, doBalanceSubscribe } from 'redux/actions/wallet';
 import { doClearPublish } from 'redux/actions/publish';
@@ -686,9 +686,9 @@ export function doToggleSplashAnimation() {
   };
 }
 
-export function doSetActiveChannel(claimId) {
+export function doSetActiveChannel(claimId, override) {
   return (dispatch, getState) => {
-    if (claimId) {
+    if (claimId || override) {
       return dispatch({
         type: ACTIONS.SET_ACTIVE_CHANNEL,
         data: {
@@ -696,35 +696,6 @@ export function doSetActiveChannel(claimId) {
         },
       });
     }
-
-    // If no claimId is passed, set the active channel to the one with the highest effective_amount
-    const state = getState();
-    const myChannelClaims = selectMyChannelClaims(state);
-
-    if (!myChannelClaims || !myChannelClaims.length) {
-      return;
-    }
-
-    const myChannelClaimsByEffectiveAmount = myChannelClaims.slice().sort((a, b) => {
-      const effectiveAmountA = (a.meta && Number(a.meta.effective_amount)) || 0;
-      const effectiveAmountB = (b.meta && Number(b.meta.effective_amount)) || 0;
-      if (effectiveAmountA === effectiveAmountB) {
-        return 0;
-      } else if (effectiveAmountA > effectiveAmountB) {
-        return -1;
-      } else {
-        return 1;
-      }
-    });
-
-    const newActiveChannelClaim = myChannelClaimsByEffectiveAmount[0];
-
-    dispatch({
-      type: ACTIONS.SET_ACTIVE_CHANNEL,
-      data: {
-        claimId: newActiveChannelClaim.claim_id,
-      },
-    });
   };
 }