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

…age (#526)

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

* refactor(check-language): store localStorage language in state

* refactor(language): sort imports

* feat(check-language): rename variable, remove substr

i18n/de.json

@@ -21,6 +21,9 @@
   "showcaseMode": "Show Case Modus",
   "play": "Abspielen",
   "language": "Sprache wechseln",
+  "detectedLanguage": "Deutsche Sprache erkannt",
+  "changeLanguage": "Sprache ändern",
+  "keepLanguage": "Behalten",
   "modes": "Modi",
   "offline": "Desktop Version",
   "download": "Anwendung herunterladen",

i18n/en.json

@@ -21,6 +21,9 @@
   "showcaseMode": "Showcase Mode",
   "play": "Play",
   "language": "Change language",
+  "detectedLanguage": "English language detected",
+  "changeLanguage": "Change language",
+  "keepLanguage": "Keep",
   "modes": "Modes",
   "offline": "Standalone Version",
   "download": "Download App",

i18n/es.json

@@ -21,6 +21,9 @@
   "showcaseMode": "Modo escaparate",
   "play": "Reproducir",
   "language": "Cambiar idioma",
+  "detectedLanguage": "Spanish language detected",
+  "changeLanguage": "Change language",
+  "keepLanguage": "Keep",
   "modes": "Modos",
   "offline": "Versión de escritorio",
   "download": "Descargar app",

i18n/fr.json

@@ -21,6 +21,9 @@
   "showcaseMode": "Showcase Mode",
   "play": "Play",
   "language": "Change language",
+  "detectedLanguage": "French language detected",
+  "changeLanguage": "Change language",
+  "keepLanguage": "Keep",
   "modes": "Modes",
   "offline": "Offline Mode",
   "download": "Download App",

i18n/nl.json

@@ -21,6 +21,9 @@
   "showcaseMode": "Showcase mode",
   "play": "Afspelen",
   "language": "Wijzig taal",
+  "detectedLanguage": "Dutch language detected",
+  "changeLanguage": "Change language",
+  "keepLanguage": "Keep",
   "modes": "Modes",
   "offline": "Offline mode",
   "download": "App downloaden",

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.localStorageLanguageKey, language);
+
   dispatch({
     type: SET_LANGUAGE,
     language

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

@@ -36,8 +36,8 @@ const App: FunctionComponent = () => (
 );
 
 const TranslatedApp: FunctionComponent = () => {
-  const language = useSelector(languageSelector);
   const markers = useStoryMarkers();
+  const language = useSelector(languageSelector);
 
   return (
     <Router>

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

@@ -0,0 +1,46 @@
+@require '../../../../variables.styl'
+
+.languageBubble
+  position: absolute
+  top: emCalc(50px)
+  right: emCalc(-16px)
+  display: flex
+  flex-direction: column
+  padding: emCalc(16px)
+  width: fit-content
+  height: fit-content
+  border-radius: 4px
+  background-color: $darkGrey4
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.14), 0px 3px 4px rgba(0, 0, 0, 0.12), 0px 1px 5px rgba(0, 0, 0, 0.2)
+
+.infoBubble:before
+  position: absolute
+  right: emCalc(20px)
+  bottom: 100%
+  border-top-color: inherit
+  border-right: 8px solid transparent
+  border-bottom: 10px solid $darkGrey4
+  border-left: 8px solid transparent
+  content: ''
+
+.language
+  margin: 0
+  color: $textWhite
+  font-size: emCalc(16px)
+  font-family: Arial
+
+.buttons
+  display: flex
+  flex-direction: row
+  justify-content: space-between
+  padding-top: emCalc(16px)
+
+.keepLanguage, .changeLanguage
+  color: $textColor
+  text-align: left
+  text-transform: uppercase
+  font-size: emCalc(11px)
+  font-family: NotesEsaBold
+
+.changeLanguage
+  color: $textDefault

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

@@ -0,0 +1,33 @@
+import React, {FunctionComponent} from 'react';
+import {FormattedMessage} from 'react-intl';
+
+import Button from '../button/button';
+
+import styles from './language-bubble.styl';
+
+interface Props {
+  onClose: () => void;
+  onMenuOpen: () => void;
+}
+
+const LanguageBubble: FunctionComponent<Props> = ({onClose, onMenuOpen}) => (
+  <div className={styles.languageBubble}>
+    <p className={styles.language}>
+      <FormattedMessage id={'detectedLanguage'} />
+    </p>
+    <div className={styles.buttons}>
+      <Button
+        className={styles.changeLanguage}
+        label="changeLanguage"
+        onClick={() => onMenuOpen()}
+      />
+      <Button
+        className={styles.keepLanguage}
+        label="keepLanguage"
+        onClick={() => onClose()}
+      />
+    </div>
+  </div>
+);
+
+export default LanguageBubble;

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

@@ -1,5 +1,5 @@
 import React, {FunctionComponent, useState} from 'react';
-import {useDispatch} from 'react-redux';
+import {useDispatch, useSelector} from 'react-redux';
 
 import Button from '../button/button';
 import Overlay from '../overlay/overlay';
@@ -9,12 +9,19 @@ 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 config from '../../../config/main';
 
 import styles from './navigation.styl';
 
 const Navigation: FunctionComponent = () => {
   const dispatch = useDispatch();
   const [showMenu, setShowMenu] = useState(false);
+  const selectedLanguage = useSelector(languageSelector);
+  const savedLanguage = localStorage.getItem(config.localStorageLanguageKey);
+  const [showLanguageBubble, setShowLanguageBubble] = useState(!savedLanguage);
 
   return (
     <div className={styles.navigation}>
@@ -39,6 +46,15 @@ const Navigation: FunctionComponent = () => {
         onClick={() => setShowMenu(true)}
         hideLabelOnMobile
       />
+      {showLanguageBubble && (
+        <LanguageBubble
+          onMenuOpen={() => setShowMenu(true)}
+          onClose={() => {
+            setShowLanguageBubble(false);
+            dispatch(setLanguageAction(selectedLanguage));
+          }}
+        />
+      )}
       {showMenu && (
         <Overlay onClose={() => setShowMenu(false)}>
           <Menu />

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,
+  localStorageLanguageKey: 'language'
 };

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

@@ -0,0 +1,13 @@
+import config from '../config/main';
+
+import {Language} from '../types/language';
+
+export default function getLocalStorageLanguage(): Language | null {
+  const storedLanguage = localStorage.getItem(config.localStorageLanguageKey);
+  const languages = Object.values(Language);
+
+  const availableLanguage =
+    storedLanguage && languages.find(language => language === storedLanguage);
+
+  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,