diff --git a/ui/component/channelSelector/index.js b/ui/component/channelSelector/index.js index 50d3d014f..0de8f395c 100644 --- a/ui/component/channelSelector/index.js +++ b/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)), }; }; diff --git a/ui/component/channelSelector/view.jsx b/ui/component/channelSelector/view.jsx index ea3a156a9..de3569c1b 100644 --- a/ui/component/channelSelector/view.jsx +++ b/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 (
diff --git a/ui/component/selectChannel/index.js b/ui/component/selectChannel/index.js index a23791ffa..5c09726c6 100644 --- a/ui/component/selectChannel/index.js +++ b/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); diff --git a/ui/component/selectChannel/view.jsx b/ui/component/selectChannel/view.jsx index 0b887925e..5fc8b7ed0 100644 --- a/ui/component/selectChannel/view.jsx +++ b/ui/component/selectChannel/view.jsx @@ -10,8 +10,9 @@ type Props = { // --- Redux --- myChannelClaims: ?Array, fetchingChannels: boolean, - activeChannelId: ?string, - setActiveChannel: (string) => void, + activeChannelClaimId: ?string, + 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 ( <> {fetchingChannels ? ( diff --git a/ui/redux/actions/app.js b/ui/redux/actions/app.js index a5ad7ad3e..173534144 100644 --- a/ui/redux/actions/app.js +++ b/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, - }, - }); }; }