Allow selecting an active channel by default

ui/component/channelSelector/index.js

@@ -3,6 +3,7 @@ import { selectMyChannelClaims, selectClaimsByUri, selectOdyseeMembershipForUri
 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 ChannelSelector from './view';
 
 const select = (state, props) => {
@@ -17,8 +18,11 @@ const select = (state, props) => {
   };
 };
 
-export default connect(select, {
+const perform = {
   doSetActiveChannel,
   doSetIncognito,
   doFetchUserMemberships,
-})(ChannelSelector);
+  doSetClientSetting,
+};
+
+export default connect(select, perform)(ChannelSelector);

ui/component/channelSelector/view.jsx

@@ -1,6 +1,7 @@
 // @flow
 import * as ICONS from 'constants/icons';
 import * as PAGES from 'constants/pages';
+import * as SETTINGS from 'constants/settings';
 import classnames from 'classnames';
 import React from 'react';
 import ChannelThumbnail from 'component/channelThumbnail';
@@ -23,6 +24,8 @@ type Props = {
   claimsByUri: { [string]: any },
   doFetchUserMemberships: (claimIdCsv: string) => void,
   odyseeMembershipByUri: (uri: string) => string,
+  storeSelection?: boolean,
+  doSetClientSetting: (key: string, value: string, pushPrefs: boolean) => void,
 };
 
 type ListItemProps = {
@@ -76,6 +79,8 @@ function ChannelSelector(props: Props) {
     odyseeMembershipByUri,
     claimsByUri,
     doFetchUserMemberships,
+    storeSelection,
+    doSetClientSetting,
   } = props;
 
   const {
@@ -88,6 +93,10 @@ function ChannelSelector(props: Props) {
   function handleChannelSelect(channelClaim) {
     doSetIncognito(false);
     doSetActiveChannel(channelClaim.claim_id);
+
+    if (storeSelection) {
+      doSetClientSetting(SETTINGS.ACTIVE_CHANNEL_CLAIM, channelClaim.claim_id, true);
+    }
   }
 
   return (

ui/constants/settings.js

@@ -44,6 +44,7 @@ export const VIDEO_THEATER_MODE = 'video_theater_mode';
 export const VIDEO_PLAYBACK_RATE = 'video_playback_rate';
 export const PREFERRED_CURRENCY = 'preferred_currency';
 export const DEFAULT_VIDEO_QUALITY = 'default_video_quality';
+export const ACTIVE_CHANNEL_CLAIM = 'active_channel_claim';
 
 export const SETTINGS_GRP = {
   APPEARANCE: 'appearance',

ui/constants/shared_preferences.js

@@ -33,4 +33,5 @@ export const CLIENT_SYNC_KEYS = [
   SETTINGS.LANGUAGE,
   SETTINGS.HOMEPAGE_ORDER,
   SETTINGS.PREFERRED_CURRENCY,
+  SETTINGS.ACTIVE_CHANNEL_CLAIM,
 ];

ui/page/channels/view.jsx

@@ -56,7 +56,8 @@ export default function ChannelsPage(props: Props) {
   return (
     <Page className="channelsPage-wrapper">
       <h1 className="section__title section__title--margin-bottom">{__('Active channel')}</h1>
-      <ChannelSelector />
+      <span className="section__subtitle ">{__('You can select a new active channel by default')}</span>
+      <ChannelSelector storeSelection />
 
       <div className="card-stack">
         {hasYoutubeChannels && <YoutubeTransferStatus hideChannelLink />}

ui/redux/reducers/settings.js

@@ -37,6 +37,7 @@ const defaultState = {
     [SETTINGS.TAGS_ACKNOWLEDGED]: false,
     [SETTINGS.ENABLE_SYNC]: IS_WEB,
     [SETTINGS.ENABLE_PUBLISH_PREVIEW]: true,
+    [SETTINGS.ACTIVE_CHANNEL_CLAIM]: undefined,
 
     // UI
     [SETTINGS.LANGUAGE]: null,

ui/redux/selectors/app.js

@@ -1,6 +1,8 @@
 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';
 
 export const selectState = (state) => state.app || {};
 
@@ -68,8 +70,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)),
   selectMyChannelClaims,
-  (activeChannelClaim, userEmail, myChannelClaims) => {
+  (activeChannelClaim, userEmail, storedChannel, myChannelClaims) => {
     // Null: has none. Undefined: not resolved, default state, could have or not
     if (!userEmail || myChannelClaims === null) {
       return null;
@@ -79,6 +82,8 @@ export const selectActiveChannelClaim = createSelector(
 
     if (activeChannelClaim) return activeChannelClaim;
 
+    if (storedChannel) return storedChannel;
+
     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;