Locale Nag Fixes

ui/component/app/index.js

@@ -2,7 +2,13 @@ import { hot } from 'react-hot-loader/root';
 import { connect } from 'react-redux';
 import { selectGetSyncErrorMessage, selectSyncFatalError, selectSyncIsLocked } from 'redux/selectors/sync';
 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 { doFetchChannelListMine, doFetchCollectionListMine, doResolveUris } from 'redux/actions/claims';
 import { selectMyChannelClaimIds } from 'redux/selectors/claims';
@@ -42,6 +48,7 @@ const select = (state) => ({
   myChannelClaimIds: selectMyChannelClaimIds(state),
   subscriptions: selectSubscriptions(state),
   hasPremiumPlus: selectOdyseeMembershipIsPremiumPlus(state),
+  homepageFetched: selectHomepageFetched(state),
 });
 
 const perform = (dispatch) => ({

ui/component/app/view.jsx

@@ -93,6 +93,7 @@ type Props = {
   fetchModBlockedList: () => void,
   resolveUris: (Array<string>) => void,
   fetchModAmIList: () => void,
+  homepageFetched: boolean,
 };
 
 function App(props: Props) {
@@ -129,6 +130,7 @@ function App(props: Props) {
     subscriptions,
     hasPremiumPlus,
     fetchModAmIList,
+    homepageFetched,
   } = props;
 
   const isMobile = useIsMobile();
@@ -141,6 +143,7 @@ function App(props: Props) {
   const previousRewardApproved = usePrevious(isRewardApproved);
 
   const [localeLangs, setLocaleLangs] = React.useState();
+  const [localeSwitchDismissed] = usePersistedState('locale-switch-dismissed', false);
   const [showAnalyticsNag, setShowAnalyticsNag] = usePersistedState('analytics-nag', true);
   const [lbryTvApiStatus, setLbryTvApiStatus] = useState(STATUS_OK);
 
@@ -159,7 +162,8 @@ function App(props: Props) {
   const rawReferrerParam = urlParams.get('r');
   const fromLbrytvParam = urlParams.get('sunset');
   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 hasMyChannels = 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;
-      return <NagLocaleSwitch localeLangs={localeLangs} noLanguageSet={noLanguageSet} />;
+      return <NagLocaleSwitch localeLangs={localeLangs} noLanguageSet={noLanguageSet} onFrontPage={pathname === '/'} />;
     }
   }
 

ui/component/nagLocaleSwitch/view.jsx

@@ -16,6 +16,7 @@ const LOCALE_OPTIONS = {
 type Props = {
   localeLangs: Array<string>,
   noLanguageSet: boolean,
+  onFrontPage: boolean,
   // redux
   homepageCode: string,
   doSetLanguage: (string) => void,
@@ -24,20 +25,24 @@ type 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 hasHomepageForLang = localeLangs.some((lang) => getHomepageLanguage(lang));
   const hasHomepageSet = homepageCode !== 'en';
+  const canSwitchHome = hasHomepageForLang && !hasHomepageSet;
+  const canSwitchLang = noLanguageSet;
+  const showHomeSwitch = canSwitchHome && onFrontPage;
+
   const optionToSwitch =
-    (!hasHomepageForLang || hasHomepageSet) && !noLanguageSet
-      ? undefined
-      : !hasHomepageForLang || hasHomepageSet
-      ? LOCALE_OPTIONS.LANG
-      : !noLanguageSet
+    showHomeSwitch && canSwitchLang
+      ? LOCALE_OPTIONS.BOTH
+      : showHomeSwitch
       ? LOCALE_OPTIONS.HOME
-      : LOCALE_OPTIONS.BOTH;
+      : canSwitchLang
+      ? LOCALE_OPTIONS.LANG
+      : undefined;
 
   const [switchOption, setSwitchOption] = React.useState(optionToSwitch);
 

ui/redux/actions/settings.js

@@ -336,12 +336,8 @@ export function doFetchHomepages() {
 
 export function doSetHomepage(code) {
   return (dispatch, getState) => {
-    let languageCode;
-    if (code === getDefaultLanguage()) {
-      languageCode = null;
-    } else {
-      languageCode = code;
-    }
+    const languageCode = code === getDefaultLanguage() ? null : code;
+
     dispatch(doSetClientSetting(SETTINGS.HOMEPAGE, languageCode));
   };
 }

ui/redux/reducers/user.js

@@ -32,6 +32,7 @@ const defaultState: UserState = {
   referrerSetError: '',
   odyseeMembershipsPerClaimIds: undefined,
   locale: undefined,
+  homepageFetched: false,
 };
 
 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) {
   const handler = reducers[action.type];
   if (handler) return handler(state, action);

ui/redux/selectors/user.js

@@ -9,6 +9,8 @@ export const selectEmailAlreadyExists = (state) => selectState(state).emailAlrea
 export const selectEmailDoesNotExist = (state) => selectState(state).emailDoesNotExist;
 export const selectResendingVerificationEmail = (state) => selectState(state).resendingVerificationEmail;
 
+export const selectHomepageFetched = (state) => selectState(state).homepageFetched;
+
 export const selectUserEmail = createSelector(selectUser, (user) =>
   user ? user.primary_email || user.latest_claimed_email : null
 );