Bring back default channel functionality

- consolidate cases that need to auto set an active channel (like edit page) into channelSelector component
- also for consistency since some components would do it with button click and others on page mount
- prevent clear function on those pages (kind of a manual process to insert each page into the router condition)

ui/component/channelSelector/view.jsx

@@ -27,6 +27,8 @@ type Props = {
   storeSelection?: boolean,
   doSetClientSetting: (key: string, value: string, pushPrefs: boolean) => void,
   isHeaderMenu?: boolean,
+  autoSet?: boolean,
+  channelToSet?: string,
 };
 
 export default function ChannelSelector(props: Props) {
@@ -42,6 +44,8 @@ export default function ChannelSelector(props: Props) {
     storeSelection,
     doSetClientSetting,
     isHeaderMenu,
+    autoSet,
+    channelToSet,
   } = props;
 
   const hideAnon = Boolean(props.hideAnon || storeSelection);
@@ -62,6 +66,20 @@ export default function ChannelSelector(props: Props) {
     }
   }
 
+  React.useEffect(() => {
+    if (!autoSet) return;
+
+    if (channelToSet) {
+      doSetActiveChannel(channelToSet);
+      doSetIncognito(false);
+    } else if (!channelToSet) {
+      doSetIncognito(true);
+    }
+
+    // on mount, if we get to autoSet a channel, set it.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   return (
     <div className="channel__selector">
       <Menu>

ui/component/claimMenuList/index.js

@@ -1,7 +1,7 @@
 import { connect } from 'react-redux';
 import { selectClaimForUri, selectClaimIsMine } from 'redux/selectors/claims';
 import { doCollectionEdit, doFetchItemsInCollection } from 'redux/actions/collections';
-import { doEditForChannel } from 'redux/actions/publish';
+import { doPrepareEdit } from 'redux/actions/publish';
 import { doRemovePersonalRecommendation } from 'redux/actions/search';
 import {
   makeSelectCollectionForId,
@@ -89,7 +89,7 @@ const select = (state, props) => {
 };
 
 const perform = (dispatch) => ({
-  prepareEdit: (publishData, uri, fileInfo) => dispatch(doEditForChannel(publishData, uri, fileInfo, fs)),
+  prepareEdit: (publishData, uri, fileInfo) => dispatch(doPrepareEdit(publishData, uri, fileInfo, fs)),
   doToast: (props) => dispatch(doToast(props)),
   openModal: (modal, props) => dispatch(doOpenModal(modal, props)),
   doChannelMute: (channelUri) => dispatch(doChannelMute(channelUri)),

ui/component/collectionEdit/index.js

@@ -21,7 +21,6 @@ import * as ACTIONS from 'constants/action_types';
 
 import CollectionForm from './view';
 import { selectActiveChannelClaim, selectIncognito } from 'redux/selectors/app';
-import { doSetActiveChannel, doSetIncognito } from 'redux/actions/app';
 import { doCollectionEdit } from 'redux/actions/collections';
 
 const select = (state, props) => ({
@@ -49,8 +48,6 @@ const perform = (dispatch, ownProps) => ({
   publishCollectionUpdate: (params) => dispatch(doCollectionPublishUpdate(params)),
   publishCollection: (params, collectionId) => dispatch(doCollectionPublish(params, collectionId)),
   clearCollectionErrors: () => dispatch({ type: ACTIONS.CLEAR_COLLECTION_ERRORS }),
-  setActiveChannel: (claimId) => dispatch(doSetActiveChannel(claimId)),
-  setIncognito: (incognito) => dispatch(doSetIncognito(incognito)),
   doCollectionEdit: (params) => dispatch(doCollectionEdit(ownProps.collectionId, params)),
 });
 

ui/component/collectionEdit/view.jsx

@@ -61,8 +61,6 @@ type Props = {
   publishCollection: (CollectionPublishParams, string) => Promise<any>,
   clearCollectionErrors: () => void,
   onDone: (string) => void,
-  setActiveChannel: (string) => void,
-  setIncognito: (boolean) => void,
   doCollectionEdit: (CollectionEditParams) => void,
 };
 
@@ -94,8 +92,6 @@ function CollectionForm(props: Props) {
     publishCollectionUpdate,
     publishCollection,
     clearCollectionErrors,
-    setActiveChannel,
-    setIncognito,
     onDone,
     doCollectionEdit,
   } = props;
@@ -108,7 +104,6 @@ function CollectionForm(props: Props) {
   const collectionName = (claim && claim.name) || (collection && collection.name);
   const collectionChannel = claim && claim.signing_channel ? claim.signing_channel.claim_id : undefined;
   const hasClaim = !!claim;
-  const [initialized, setInitialized] = React.useState(false);
   const [nameError, setNameError] = React.useState(undefined);
   const [bidError, setBidError] = React.useState('');
   const [thumbStatus, setThumbStatus] = React.useState('');
@@ -264,6 +259,7 @@ function CollectionForm(props: Props) {
     const collectionClaimIds = JSON.parse(collectionClaimIdsString);
     setParams({ ...params, claims: collectionClaimIds });
     clearCollectionErrors();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [collectionClaimIdsString, setParams]);
 
   React.useEffect(() => {
@@ -277,35 +273,22 @@ function CollectionForm(props: Props) {
     setNameError(nameError);
   }, [name]);
 
-  // on mount, if we get a collectionChannel, set it.
-  React.useEffect(() => {
-    if (hasClaim && !initialized) {
-      if (collectionChannel) {
-        setActiveChannel(collectionChannel);
-        setIncognito(false);
-      } else if (!collectionChannel && hasClaim) {
-        setIncognito(true);
-      }
-      setInitialized(true);
-    }
-  }, [setInitialized, setActiveChannel, collectionChannel, setIncognito, hasClaim, incognito, initialized]);
-
   // every time activechannel or incognito changes, set it.
   React.useEffect(() => {
-    if (initialized) {
-      if (activeChannelId) {
-        setParam({ channel_id: activeChannelId });
-      } else if (incognito) {
-        setParam({ channel_id: undefined });
-      }
+    if (activeChannelId) {
+      setParam({ channel_id: activeChannelId });
+    } else if (incognito) {
+      setParam({ channel_id: undefined });
     }
-  }, [activeChannelId, incognito, initialized]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [activeChannelId, incognito]);
 
   // setup initial params after we're sure if it's published or not
   React.useEffect(() => {
     if (!uri || (uri && hasClaim)) {
       updateParams(getCollectionParams());
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [uri, hasClaim]);
 
   return (
@@ -322,7 +305,7 @@ function CollectionForm(props: Props) {
           <TabPanels>
             <TabPanel>
               <div className={'card-stack'}>
-                <ChannelSelector disabled={disabled} />
+                <ChannelSelector disabled={disabled} autoSet channelToSet={collectionChannel} />
                 <Card
                   body={
                     <>

ui/component/fileActions/index.js

@@ -6,7 +6,7 @@ import {
   makeSelectTagInClaimOrChannelForUri,
 } from 'redux/selectors/claims';
 import { makeSelectStreamingUrlForUri } from 'redux/selectors/file_info';
-import { doEditForChannel } from 'redux/actions/publish';
+import { doPrepareEdit } from 'redux/actions/publish';
 import { selectCostInfoForUri } from 'lbryinc';
 import { doDownloadUri } from 'redux/actions/content';
 import { doToast } from 'redux/actions/notifications';
@@ -35,7 +35,7 @@ const select = (state, props) => {
 
 const perform = {
   doOpenModal,
-  doEditForChannel,
+  doPrepareEdit,
   doToast,
   doDownloadUri,
 };

ui/component/fileActions/view.jsx

@@ -31,7 +31,7 @@ type Props = {
   streamingUrl: ?string,
   disableDownloadButton: boolean,
   doOpenModal: (id: string, { uri: string, claimIsMine?: boolean, isSupport?: boolean }) => void,
-  doEditForChannel: (claim: Claim, uri: string) => void,
+  doPrepareEdit: (claim: Claim, uri: string) => void,
   doToast: (data: { message: string }) => void,
   doDownloadUri: (uri: string) => void,
 };
@@ -49,7 +49,7 @@ export default function FileActions(props: Props) {
     streamingUrl,
     disableDownloadButton,
     doOpenModal,
-    doEditForChannel,
+    doPrepareEdit,
     doToast,
     doDownloadUri,
   } = props;
@@ -150,7 +150,7 @@ export default function FileActions(props: Props) {
                 icon={ICONS.EDIT}
                 label={isLivestreamClaim ? __('Update or Publish Replay') : __('Edit')}
                 navigate={`/$/${PAGES.UPLOAD}`}
-                onClick={() => doEditForChannel(claim, editUri)}
+                onClick={() => doPrepareEdit(claim, editUri)}
               />
             </div>
           </Tooltip>
@@ -197,7 +197,7 @@ export default function FileActions(props: Props) {
                     <MenuItem
                       className="comment__menu-option"
                       onSelect={() => {
-                        doEditForChannel(claim, editUri);
+                        doPrepareEdit(claim, editUri);
                         push(`/$/${PAGES.UPLOAD}`);
                       }}
                     >

ui/component/publishForm/view.jsx

@@ -255,6 +255,7 @@ function PublishForm(props: Props) {
     if (claimChannelId) {
       fetchLivestreams(claimChannelId, activeChannelName);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [claimChannelId]);
 
   useEffect(() => {
@@ -352,6 +353,7 @@ function PublishForm(props: Props) {
     if (publishing || publishSuccess) {
       clearPublish();
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [clearPublish]);
 
   useEffect(() => {
@@ -466,6 +468,7 @@ function PublishForm(props: Props) {
     const newParams = new URLSearchParams();
     newParams.set(TYPE_PARAM, mode.toLowerCase());
     replace({ search: newParams.toString() });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [mode, _uploadType]);
 
   // @if TARGET='web'
@@ -589,7 +592,7 @@ function PublishForm(props: Props) {
   // Editing claim uri
   return (
     <div className="card-stack uploadPage-wraper">
-      <ChannelSelect hideAnon={isLivestreamMode} disabled={disabled} />
+      <ChannelSelect hideAnon={isLivestreamMode} disabled={disabled} autoSet channelToSet={claimChannelId} />
 
       <PublishFile
         inEditMode={inEditMode}

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';
@@ -46,6 +46,7 @@ const select = (state) => {
 const perform = {
   setHasNavigated: doSetHasNavigated,
   setReferrer: doUserSetReferrer,
+  doSetActiveChannel,
 };
 
 export default connect(select, perform)(Router);

ui/component/router/view.jsx

@@ -142,6 +142,7 @@ type Props = {
   unseenCount: number,
   hideTitleNotificationCount: boolean,
   hasDefaultChannel: boolean,
+  doSetActiveChannel: (claimId: ?string, override?: boolean) => void,
 };
 
 type PrivateRouteProps = Props & {
@@ -184,6 +185,7 @@ function AppRouter(props: Props) {
     unseenCount,
     hideTitleNotificationCount,
     hasDefaultChannel,
+    doSetActiveChannel,
   } = props;
 
   const defaultChannelRef = React.useRef(hasDefaultChannel);
@@ -263,7 +265,7 @@ function AppRouter(props: Props) {
     if (unseenCount > 0 && !hideTitleNotificationCount) {
       document.title = `(${buildUnseenCountStr(unseenCount)}) ${document.title}`;
     }
-  }, [pathname, entries, entryIndex, title, uri, unseenCount]);
+  }, [pathname, entries, entryIndex, title, uri, unseenCount, hideTitleNotificationCount]);
 
   useEffect(() => {
     if (!hasLinkedCommentInUrl) {
@@ -283,6 +285,21 @@ function AppRouter(props: Props) {
     defaultChannelRef.current = hasDefaultChannel;
   }, [hasDefaultChannel]);
 
+  React.useEffect(() => {
+    // has a default channel selected, clear the current active channel
+    if (
+      defaultChannelRef.current &&
+      pathname !== `/$/${PAGES.UPLOAD}` &&
+      !pathname.includes(`/$/${PAGES.LIST}/`) &&
+      pathname !== `/$/${PAGES.CREATOR_DASHBOARD}` &&
+      pathname !== `/$/${PAGES.LIVESTREAM}`
+    ) {
+      doSetActiveChannel(null, true);
+    }
+    // only on pathname change
+    // 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/redux/actions/publish.js

@@ -18,7 +18,7 @@ import { makeSelectPublishFormValue, selectPublishFormValues, selectMyClaimForUr
 import { doError, doToast } from 'redux/actions/notifications';
 import { push } from 'connected-react-router';
 import analytics from 'analytics';
-import { doOpenModal, doSetIncognito, doSetActiveChannel } from 'redux/actions/app';
+import { doOpenModal } from 'redux/actions/app';
 import { CC_LICENSES, COPYRIGHT, OTHER, NONE, PUBLIC_DOMAIN } from 'constants/licenses';
 import { IMG_CDN_PUBLISH_URL, IMG_CDN_STATUS_URL } from 'constants/cdn_urls';
 import * as THUMBNAIL_STATUSES from 'constants/thumbnail_upload_statuses';
@@ -547,19 +547,6 @@ export const doUploadThumbnail = (
   }
 };
 
-export const doEditForChannel = (publishData: any, uri: string, fileInfo: FileListItem, fs: any) => (
-  dispatch: Dispatch
-) => {
-  if (publishData.signing_channel) {
-    dispatch(doSetIncognito(false));
-    dispatch(doSetActiveChannel(publishData.signing_channel.claim_id));
-  } else {
-    dispatch(doSetIncognito(true));
-  }
-
-  dispatch(doPrepareEdit(publishData, uri, fileInfo, fs));
-};
-
 export const doPrepareEdit = (claim: StreamClaim, uri: string, fileInfo: FileListItem, fs: any) => (
   dispatch: Dispatch
 ) => {

ui/scss/component/_header.scss

@@ -131,6 +131,8 @@
   flex: 1;
   height: var(--header-height);
   padding: var(--spacing-s) var(--spacing-m);
+  margin-right: var(--body-scrollbar-width);
+  width: unset;
 
   @media (max-width: $breakpoint-small) {
     padding: var(--spacing-xs);