Fix default channel changing with active channel on header

ui/component/channelSelector/index.js

@@ -1,23 +1,23 @@
 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 { selectDefaultChannelClaim } from 'redux/selectors/settings';
 import ChannelSelector from './view';
 
 const select = (state, props) => {
+  const { storeSelection } = props;
   const activeChannelClaim = selectActiveChannelClaim(state);
+  const defaultChannelClaim = selectDefaultChannelClaim(state);
 
   return {
     channels: selectMyChannelClaims(state),
-    activeChannelClaim,
+    activeChannelClaim: storeSelection ? defaultChannelClaim : activeChannelClaim,
     incognito: selectIncognito(state),
     odyseeMembershipByUri: (uri) => selectOdyseeMembershipForUri(state, uri),
     claimsByUri: selectClaimsByUri(state),
-    hasDefaultChannel: Boolean(selectClientSetting(state, SETTINGS.ACTIVE_CHANNEL_CLAIM)),
   };
 };
 

ui/component/headerProfileMenuButton/index.js

@@ -1,13 +1,13 @@
 import { connect } from 'react-redux';
 import { doSignOut } from 'redux/actions/app';
-import { selectActiveChannelClaim } from 'redux/selectors/app';
+import { selectDefaultChannelClaim } from 'redux/selectors/settings';
 import { selectMyChannelClaimIds } from 'redux/selectors/claims';
 import { selectUserEmail, selectUserVerifiedEmail } from 'redux/selectors/user';
 import HeaderProfileMenuButton from './view';
 
 const select = (state) => ({
   myChannelClaimIds: selectMyChannelClaimIds(state),
-  activeChannelClaim: selectActiveChannelClaim(state),
+  defaultChannelClaim: selectDefaultChannelClaim(state),
   authenticated: selectUserVerifiedEmail(state),
   email: selectUserEmail(state),
 });

ui/component/headerProfileMenuButton/view.jsx

@@ -18,21 +18,21 @@ import Button from 'component/button';
 
 type HeaderMenuButtonProps = {
   myChannelClaimIds: ?Array<string>,
-  activeChannelClaim: ?ChannelClaim,
+  defaultChannelClaim: ?ChannelClaim,
   authenticated: boolean,
   email: ?string,
   signOut: () => void,
 };
 
 export default function HeaderProfileMenuButton(props: HeaderMenuButtonProps) {
-  const { myChannelClaimIds, activeChannelClaim, authenticated, email, signOut } = props;
+  const { myChannelClaimIds, defaultChannelClaim, authenticated, email, signOut } = props;
 
   const [anchorEl, setAnchorEl] = React.useState(null);
   const open = Boolean(anchorEl);
   const handleClick = (event) => setAnchorEl(!anchorEl ? event.currentTarget : null);
   const handleClose = () => setAnchorEl(null);
 
-  const activeChannelUrl = activeChannelClaim && activeChannelClaim.permanent_url;
+  const activeChannelUrl = defaultChannelClaim && defaultChannelClaim.permanent_url;
   // activeChannel will be: undefined = fetching, null = nothing, or { channel claim }
   const noActiveChannel = activeChannelUrl === null;
   const pendingChannelFetch = !noActiveChannel && myChannelClaimIds === undefined;

ui/component/selectChannel/index.js

@@ -1,17 +1,17 @@
 import { connect } from 'react-redux';
 import SelectChannel from './view';
 import { selectMyChannelClaims, selectFetchingMyChannels } from 'redux/selectors/claims';
-import { selectActiveChannelClaim } from 'redux/selectors/app';
+import { selectActiveChannelClaimId } from 'redux/selectors/app';
 import { doSetActiveChannel } from 'redux/actions/app';
 
 const select = (state) => ({
   myChannelClaims: selectMyChannelClaims(state),
   fetchingChannels: selectFetchingMyChannels(state),
-  activeChannelClaimId: selectActiveChannelClaim(state)?.claim_id,
+  activeChannelClaimId: selectActiveChannelClaimId(state),
 });
 
-const perform = (dispatch) => ({
+const perform = {
-  setActiveChannel: (claimId, override) => dispatch(doSetActiveChannel(claimId, override)),
+  setActiveChannel: doSetActiveChannel,
-});
+};
 
 export default connect(select, perform)(SelectChannel);

ui/redux/selectors/app.js

@@ -1,8 +1,7 @@
 import { createSelector } from 'reselect';
-import * as SETTINGS from 'constants/settings';
 import { selectClaimWithId, selectMyChannelClaims, selectStakedLevelForChannelUri } from 'redux/selectors/claims';
 import { selectUserEmail } from 'redux/selectors/user';
-import { selectClientSetting } from 'redux/selectors/settings';
+import { selectDefaultChannelClaim } from 'redux/selectors/settings';
 
 export const selectState = (state) => state.app || {};
 
@@ -70,9 +69,9 @@ export const selectActiveChannelId = (state) => selectState(state).activeChannel
 export const selectActiveChannelClaim = createSelector(
   (state) => selectClaimWithId(state, selectActiveChannelId(state)), // i.e. 'byId[activeChannelId]' specifically, instead of just 'byId'.
   (state) => selectUserEmail(state),
-  (state) => selectClaimWithId(state, selectClientSetting(state, SETTINGS.ACTIVE_CHANNEL_CLAIM)),
+  selectDefaultChannelClaim,
   selectMyChannelClaims,
-  (activeChannelClaim, userEmail, storedChannel, myChannelClaims) => {
+  (activeChannelClaim, userEmail, defaultChannel, myChannelClaims) => {
     // Null: has none. Undefined: not resolved, default state, could have or not
     if (!userEmail || myChannelClaims === null) {
       return null;
@@ -82,7 +81,7 @@ export const selectActiveChannelClaim = createSelector(
 
     if (activeChannelClaim) return activeChannelClaim;
 
-    if (storedChannel) return storedChannel;
+    if (defaultChannel) return defaultChannel;
 
     const myChannelClaimsByEffectiveAmount = myChannelClaims.slice().sort((a, b) => {
       const effectiveAmountA = (a.meta && Number(a.meta.effective_amount)) || 0;
@@ -100,6 +99,11 @@ export const selectActiveChannelClaim = createSelector(
   }
 );
 
+export const selectActiveChannelClaimId = createSelector(
+  selectActiveChannelClaim,
+  (activeChannelClaim) => activeChannelClaim?.claim_id
+);
+
 export const selectActiveChannelStakedLevel = (state) => {
   const activeChannelClaim = selectActiveChannelClaim(state);
   if (!activeChannelClaim) {

ui/redux/selectors/settings.js

@@ -5,6 +5,7 @@ import SUPPORTED_BROWSER_LANGUAGES from 'constants/supported_browser_languages';
 import { createSelector } from 'reselect';
 import { ENABLE_MATURE } from 'config';
 import { getDefaultHomepageKey, getDefaultLanguage } from 'util/default-languages';
+import { selectClaimWithId } from 'redux/selectors/claims';
 
 const selectState = (state) => state.settings || {};
 
@@ -81,3 +82,8 @@ export const selectWildWestDisabled = (state) => {
 };
 
 export const selectosNotificationsEnabled = (state) => selectClientSetting(state, SETTINGS.OS_NOTIFICATIONS_ENABLED);
+
+export const selectDefaultChannelClaim = createSelector(
+  (state) => selectClaimWithId(state, selectClientSetting(state, SETTINGS.ACTIVE_CHANNEL_CLAIM)),
+  (defaultChannelClaim) => defaultChannelClaim
+);