feat(check-language): add info bubble and store language in localStorage

src/scripts/actions/set-language.ts

@@ -4,8 +4,9 @@ import {unsafeSelectedStorySelector} from '../selectors/story/selected';
 import fetchLayers, {FetchLayersActions} from './fetch-layers';
 import fetchStories from './fetch-stories';
 import fetchStory from './fetch-story';
-
 import {State} from '../reducers/index';
+import config from '../config/main';
+
 import {Language} from '../types/language';
 
 export const SET_LANGUAGE = 'SET_LANGUAGE';
@@ -21,6 +22,8 @@ const setLanguageAction = (language: Language) => (
   dispatch: ThunkDispatch<State, void, AllThunkActions>,
   getState: () => State
 ) => {
+  localStorage.setItem(config.localStorageLanguage, language);
+
   dispatch({
     type: SET_LANGUAGE,
     language

src/scripts/components/main/app/app.tsx

@@ -22,10 +22,9 @@ import ShowcaseSelector from '../../stories/showcase-selector/showcase-selector'
 import Globes from '../globes/globes';
 
 import translations from '../../../i18n';
+import {useStoryMarkers} from '../../../hooks/use-story-markers';
 
 import styles from './app.styl';
-import {useStoryMarkers} from '../../../hooks/use-story-markers';
-import {Language} from '../../../types/language';
 
 // create redux store
 const store = createReduxStore();
@@ -39,19 +38,11 @@ const App: FunctionComponent = () => (
 const TranslatedApp: FunctionComponent = () => {
   const markers = useStoryMarkers();
   const language = useSelector(languageSelector);
-
-  const getLanguage = () => {
-    if (localStorage.getItem('language')) {
-      return localStorage.getItem('language') as Language;
-    }
-    return language;
-  };
+  localStorage.clear();
 
   return (
     <Router>
-      <IntlProvider
-        locale={getLanguage()}
-        messages={translations[getLanguage()]}>
+      <IntlProvider locale={language} messages={translations[language]}>
         <Switch>
           <Route
             path={[

src/scripts/components/main/info-bubble/info-bubble.styl → src/scripts/components/main/language-bubble/language-bubble.styl

@@ -1,6 +1,6 @@
 @require '../../../../variables.styl'
 
-.infoBubble
+.languageBubble
   position: absolute
   top: emCalc(50px)
   right: emCalc(-16px)

src/scripts/components/main/info-bubble/info-bubble.tsx → src/scripts/components/main/language-bubble/language-bubble.tsx

@@ -3,15 +3,15 @@ import {FormattedMessage} from 'react-intl';
 
 import Button from '../button/button';
 
-import styles from './info-bubble.styl';
+import styles from './language-bubble.styl';
 
 interface Props {
   onClose: () => void;
   onMenuOpen: () => void;
 }
 
-const InfoBubble: FunctionComponent<Props> = ({onClose, onMenuOpen}) => (
-  <div className={styles.infoBubble}>
+const LanguageBubble: FunctionComponent<Props> = ({onClose, onMenuOpen}) => (
+  <div className={styles.languageBubble}>
     <p className={styles.language}>
       <FormattedMessage id={'detectedLanguage'} />
     </p>
@@ -30,4 +30,4 @@ const InfoBubble: FunctionComponent<Props> = ({onClose, onMenuOpen}) => (
   </div>
 );
 
-export default InfoBubble;
+export default LanguageBubble;

src/scripts/components/main/language-selector/language-selector.tsx

@@ -21,14 +21,6 @@ const LanguageSelector: FunctionComponent<Props> = ({className = ''}) => {
   const selectedLanguage = useSelector(languageSelector);
   const dispatch = useDispatch();
 
-  const setLanguage = (language: Language) => {
-    localStorage.setItem('language', language);
-
-    if (localStorage.getItem('language')) {
-      dispatch(setLanguageAction(language));
-    }
-  };
-
   return (
     <ul className={styles.language}>
       {languages.map(language => {
@@ -42,7 +34,7 @@ const LanguageSelector: FunctionComponent<Props> = ({className = ''}) => {
             <Button
               className={buttonClasses}
               key={language}
-              onClick={() => setLanguage(language)}
+              onClick={() => dispatch(setLanguageAction(language))}
               label={`language.${language}`}
             />
           </li>

src/scripts/components/main/navigation/navigation.tsx

@@ -9,22 +9,18 @@ import {StoryIcon} from '../icons/story-icon';
 import showLayerSelectorAction from '../../../actions/show-layer-selector';
 import Share from '../share/share';
 import {MenuIcon} from '../icons/menu-icon';
+import setLanguageAction from '../../../actions/set-language';
+import {languageSelector} from '../../../selectors/language';
+import LanguageBubble from '../language-bubble/language-bubble';
 
 import styles from './navigation.styl';
-import InfoBubble from '../info-bubble/info-bubble';
-import {languageSelector} from '../../../selectors/language';
 
 const Navigation: FunctionComponent = () => {
   const dispatch = useDispatch();
   const [showMenu, setShowMenu] = useState(false);
-  const [showInfoBubble, setshowInfoBubble] = useState(true);
-  const language = useSelector(languageSelector);
+  const selectedLanguage = useSelector(languageSelector);
   const savedLanguage = localStorage.getItem('language');
-
-  const onSaveLanguage = () => {
-    localStorage.setItem('language', language);
-    setshowInfoBubble(false);
-  };
+  const [showLanguageBubble, setShowLanguageBubble] = useState(!savedLanguage);
 
   return (
     <div className={styles.navigation}>
@@ -49,10 +45,13 @@ const Navigation: FunctionComponent = () => {
         onClick={() => setShowMenu(true)}
         hideLabelOnMobile
       />
-      {showInfoBubble && !savedLanguage && (
-        <InfoBubble
+      {showLanguageBubble && (
+        <LanguageBubble
           onMenuOpen={() => setShowMenu(true)}
-          onClose={() => onSaveLanguage()}
+          onClose={() => {
+            setShowLanguageBubble(false);
+            dispatch(setLanguageAction(selectedLanguage));
+          }}
         />
       )}
       {showMenu && (

src/scripts/config/main.ts

@@ -78,5 +78,6 @@ export default {
       'http://twitter.com/intent/tweet?text=ESA%20Climate%20From%20Space&url={currentUrl}'
   },
   legendImage: `${baseUrlStorage}/legend-images/{variable}.png`,
-  downloadUrls
+  downloadUrls,
+  localStorageLanguage: 'language'
 };

src/scripts/libs/get-local-storage-language.ts

@@ -0,0 +1,18 @@
+import config from '../config/main';
+
+import {Language} from '../types/language';
+
+export default function getLocalStorageLanguage(): Language | null {
+  const storedLanguage = localStorage.getItem(config.localStorageLanguage);
+  const languages = Object.values(Language);
+
+  const availableLanguage =
+    storedLanguage &&
+    languages.find(
+      language =>
+        language.substr(0, 2).toLowerCase() ===
+        storedLanguage.substr(0, 2).toLowerCase()
+    );
+
+  return availableLanguage || null;
+}

src/scripts/reducers/language.ts

@@ -1,9 +1,11 @@
 import {SET_LANGUAGE, SetLanguageAction} from '../actions/set-language';
 import getBrowserLanguage from '../libs/get-browser-language';
+import getLocalStorageLanguage from '../libs/get-local-storage-language';
 
 import {Language} from '../types/language';
 
-const initialState: Language = getBrowserLanguage() || Language.EN;
+const initialState: Language =
+  getLocalStorageLanguage() || getBrowserLanguage() || Language.EN;
 
 function languageReducer(
   state: Language = initialState,