Locale Nag Fixes

This commit is contained in:
Rafael 2022-03-21 10:25:14 -03:00 committed by Thomas Zarebczan
parent 3900d9a049
commit bc3c56b84b
6 changed files with 37 additions and 17 deletions

View file

@ -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) => ({

View file

@ -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 === '/'} />;
} }
} }

View file

@ -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);

View file

@ -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));
}; };
} }

View file

@ -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);

View file

@ -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
); );