Locale Nag Fixes
This commit is contained in:
parent
3900d9a049
commit
bc3c56b84b
6 changed files with 37 additions and 17 deletions
|
@ -2,7 +2,13 @@ import { hot } from 'react-hot-loader/root';
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import { selectGetSyncErrorMessage, selectSyncFatalError, selectSyncIsLocked } from 'redux/selectors/sync';
|
import { selectGetSyncErrorMessage, selectSyncFatalError, selectSyncIsLocked } from 'redux/selectors/sync';
|
||||||
import { doUserSetReferrer } from 'redux/actions/user';
|
import { doUserSetReferrer } from 'redux/actions/user';
|
||||||
import { selectOdyseeMembershipIsPremiumPlus, selectUser, selectUserLocale, selectUserVerifiedEmail } from 'redux/selectors/user';
|
import {
|
||||||
|
selectOdyseeMembershipIsPremiumPlus,
|
||||||
|
selectUser,
|
||||||
|
selectUserLocale,
|
||||||
|
selectUserVerifiedEmail,
|
||||||
|
selectHomepageFetched,
|
||||||
|
} from 'redux/selectors/user';
|
||||||
import { selectUnclaimedRewards } from 'redux/selectors/rewards';
|
import { selectUnclaimedRewards } from 'redux/selectors/rewards';
|
||||||
import { doFetchChannelListMine, doFetchCollectionListMine, doResolveUris } from 'redux/actions/claims';
|
import { doFetchChannelListMine, doFetchCollectionListMine, doResolveUris } from 'redux/actions/claims';
|
||||||
import { selectMyChannelClaimIds } from 'redux/selectors/claims';
|
import { selectMyChannelClaimIds } from 'redux/selectors/claims';
|
||||||
|
@ -42,6 +48,7 @@ const select = (state) => ({
|
||||||
myChannelClaimIds: selectMyChannelClaimIds(state),
|
myChannelClaimIds: selectMyChannelClaimIds(state),
|
||||||
subscriptions: selectSubscriptions(state),
|
subscriptions: selectSubscriptions(state),
|
||||||
hasPremiumPlus: selectOdyseeMembershipIsPremiumPlus(state),
|
hasPremiumPlus: selectOdyseeMembershipIsPremiumPlus(state),
|
||||||
|
homepageFetched: selectHomepageFetched(state),
|
||||||
});
|
});
|
||||||
|
|
||||||
const perform = (dispatch) => ({
|
const perform = (dispatch) => ({
|
||||||
|
|
|
@ -93,6 +93,7 @@ type Props = {
|
||||||
fetchModBlockedList: () => void,
|
fetchModBlockedList: () => void,
|
||||||
resolveUris: (Array<string>) => void,
|
resolveUris: (Array<string>) => void,
|
||||||
fetchModAmIList: () => void,
|
fetchModAmIList: () => void,
|
||||||
|
homepageFetched: boolean,
|
||||||
};
|
};
|
||||||
|
|
||||||
function App(props: Props) {
|
function App(props: Props) {
|
||||||
|
@ -129,6 +130,7 @@ function App(props: Props) {
|
||||||
subscriptions,
|
subscriptions,
|
||||||
hasPremiumPlus,
|
hasPremiumPlus,
|
||||||
fetchModAmIList,
|
fetchModAmIList,
|
||||||
|
homepageFetched,
|
||||||
} = props;
|
} = props;
|
||||||
|
|
||||||
const isMobile = useIsMobile();
|
const isMobile = useIsMobile();
|
||||||
|
@ -141,6 +143,7 @@ function App(props: Props) {
|
||||||
const previousRewardApproved = usePrevious(isRewardApproved);
|
const previousRewardApproved = usePrevious(isRewardApproved);
|
||||||
|
|
||||||
const [localeLangs, setLocaleLangs] = React.useState();
|
const [localeLangs, setLocaleLangs] = React.useState();
|
||||||
|
const [localeSwitchDismissed] = usePersistedState('locale-switch-dismissed', false);
|
||||||
const [showAnalyticsNag, setShowAnalyticsNag] = usePersistedState('analytics-nag', true);
|
const [showAnalyticsNag, setShowAnalyticsNag] = usePersistedState('analytics-nag', true);
|
||||||
const [lbryTvApiStatus, setLbryTvApiStatus] = useState(STATUS_OK);
|
const [lbryTvApiStatus, setLbryTvApiStatus] = useState(STATUS_OK);
|
||||||
|
|
||||||
|
@ -159,7 +162,8 @@ function App(props: Props) {
|
||||||
const rawReferrerParam = urlParams.get('r');
|
const rawReferrerParam = urlParams.get('r');
|
||||||
const fromLbrytvParam = urlParams.get('sunset');
|
const fromLbrytvParam = urlParams.get('sunset');
|
||||||
const sanitizedReferrerParam = rawReferrerParam && rawReferrerParam.replace(':', '#');
|
const sanitizedReferrerParam = rawReferrerParam && rawReferrerParam.replace(':', '#');
|
||||||
const shouldHideNag = pathname.startsWith(`/$/${PAGES.EMBED}`) || pathname.startsWith(`/$/${PAGES.AUTH_VERIFY}`);
|
const embedPath = pathname.startsWith(`/$/${PAGES.EMBED}`);
|
||||||
|
const shouldHideNag = embedPath || pathname.startsWith(`/$/${PAGES.AUTH_VERIFY}`);
|
||||||
const userId = user && user.id;
|
const userId = user && user.id;
|
||||||
const hasMyChannels = myChannelClaimIds && myChannelClaimIds.length > 0;
|
const hasMyChannels = myChannelClaimIds && myChannelClaimIds.length > 0;
|
||||||
const hasNoChannels = myChannelClaimIds && myChannelClaimIds.length === 0;
|
const hasNoChannels = myChannelClaimIds && myChannelClaimIds.length === 0;
|
||||||
|
@ -222,9 +226,9 @@ function App(props: Props) {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (localeLangs) {
|
if (localeLangs && !embedPath && !localeSwitchDismissed && homepageFetched) {
|
||||||
const noLanguageSet = language === 'en' && languages.length === 1;
|
const noLanguageSet = language === 'en' && languages.length === 1;
|
||||||
return <NagLocaleSwitch localeLangs={localeLangs} noLanguageSet={noLanguageSet} />;
|
return <NagLocaleSwitch localeLangs={localeLangs} noLanguageSet={noLanguageSet} onFrontPage={pathname === '/'} />;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -16,6 +16,7 @@ const LOCALE_OPTIONS = {
|
||||||
type Props = {
|
type Props = {
|
||||||
localeLangs: Array<string>,
|
localeLangs: Array<string>,
|
||||||
noLanguageSet: boolean,
|
noLanguageSet: boolean,
|
||||||
|
onFrontPage: boolean,
|
||||||
// redux
|
// redux
|
||||||
homepageCode: string,
|
homepageCode: string,
|
||||||
doSetLanguage: (string) => void,
|
doSetLanguage: (string) => void,
|
||||||
|
@ -24,20 +25,24 @@ type Props = {
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function NagLocaleSwitch(props: Props) {
|
export default function NagLocaleSwitch(props: Props) {
|
||||||
const { localeLangs, noLanguageSet, homepageCode, doSetLanguage, doSetHomepage, doOpenModal } = props;
|
const { localeLangs, noLanguageSet, onFrontPage, homepageCode, doSetLanguage, doSetHomepage, doOpenModal } = props;
|
||||||
|
|
||||||
const [localeSwitchDismissed, setLocaleSwitchDismissed] = usePersistedState('locale-switch-dismissed', false);
|
const [localeSwitchDismissed, setLocaleSwitchDismissed] = usePersistedState('locale-switch-dismissed', false);
|
||||||
|
|
||||||
const hasHomepageForLang = localeLangs.some((lang) => getHomepageLanguage(lang));
|
const hasHomepageForLang = localeLangs.some((lang) => getHomepageLanguage(lang));
|
||||||
const hasHomepageSet = homepageCode !== 'en';
|
const hasHomepageSet = homepageCode !== 'en';
|
||||||
|
const canSwitchHome = hasHomepageForLang && !hasHomepageSet;
|
||||||
|
const canSwitchLang = noLanguageSet;
|
||||||
|
const showHomeSwitch = canSwitchHome && onFrontPage;
|
||||||
|
|
||||||
const optionToSwitch =
|
const optionToSwitch =
|
||||||
(!hasHomepageForLang || hasHomepageSet) && !noLanguageSet
|
showHomeSwitch && canSwitchLang
|
||||||
? undefined
|
? LOCALE_OPTIONS.BOTH
|
||||||
: !hasHomepageForLang || hasHomepageSet
|
: showHomeSwitch
|
||||||
? LOCALE_OPTIONS.LANG
|
|
||||||
: !noLanguageSet
|
|
||||||
? LOCALE_OPTIONS.HOME
|
? LOCALE_OPTIONS.HOME
|
||||||
: LOCALE_OPTIONS.BOTH;
|
: canSwitchLang
|
||||||
|
? LOCALE_OPTIONS.LANG
|
||||||
|
: undefined;
|
||||||
|
|
||||||
const [switchOption, setSwitchOption] = React.useState(optionToSwitch);
|
const [switchOption, setSwitchOption] = React.useState(optionToSwitch);
|
||||||
|
|
||||||
|
|
|
@ -336,12 +336,8 @@ export function doFetchHomepages() {
|
||||||
|
|
||||||
export function doSetHomepage(code) {
|
export function doSetHomepage(code) {
|
||||||
return (dispatch, getState) => {
|
return (dispatch, getState) => {
|
||||||
let languageCode;
|
const languageCode = code === getDefaultLanguage() ? null : code;
|
||||||
if (code === getDefaultLanguage()) {
|
|
||||||
languageCode = null;
|
|
||||||
} else {
|
|
||||||
languageCode = code;
|
|
||||||
}
|
|
||||||
dispatch(doSetClientSetting(SETTINGS.HOMEPAGE, languageCode));
|
dispatch(doSetClientSetting(SETTINGS.HOMEPAGE, languageCode));
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
|
@ -32,6 +32,7 @@ const defaultState: UserState = {
|
||||||
referrerSetError: '',
|
referrerSetError: '',
|
||||||
odyseeMembershipsPerClaimIds: undefined,
|
odyseeMembershipsPerClaimIds: undefined,
|
||||||
locale: undefined,
|
locale: undefined,
|
||||||
|
homepageFetched: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
reducers[ACTIONS.AUTHENTICATION_STARTED] = (state) =>
|
reducers[ACTIONS.AUTHENTICATION_STARTED] = (state) =>
|
||||||
|
@ -393,6 +394,11 @@ reducers[ACTIONS.ADD_CLAIMIDS_MEMBERSHIP_DATA] = (state, action) => {
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
reducers[ACTIONS.FETCH_HOMEPAGES_DONE] = (state) =>
|
||||||
|
Object.assign({}, state, {
|
||||||
|
homepageFetched: true,
|
||||||
|
});
|
||||||
|
|
||||||
export default function userReducer(state: UserState = defaultState, action: any) {
|
export default function userReducer(state: UserState = defaultState, action: any) {
|
||||||
const handler = reducers[action.type];
|
const handler = reducers[action.type];
|
||||||
if (handler) return handler(state, action);
|
if (handler) return handler(state, action);
|
||||||
|
|
|
@ -9,6 +9,8 @@ export const selectEmailAlreadyExists = (state) => selectState(state).emailAlrea
|
||||||
export const selectEmailDoesNotExist = (state) => selectState(state).emailDoesNotExist;
|
export const selectEmailDoesNotExist = (state) => selectState(state).emailDoesNotExist;
|
||||||
export const selectResendingVerificationEmail = (state) => selectState(state).resendingVerificationEmail;
|
export const selectResendingVerificationEmail = (state) => selectState(state).resendingVerificationEmail;
|
||||||
|
|
||||||
|
export const selectHomepageFetched = (state) => selectState(state).homepageFetched;
|
||||||
|
|
||||||
export const selectUserEmail = createSelector(selectUser, (user) =>
|
export const selectUserEmail = createSelector(selectUser, (user) =>
|
||||||
user ? user.primary_email || user.latest_claimed_email : null
|
user ? user.primary_email || user.latest_claimed_email : null
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in a new issue