Language selection menu

app/src/App.js

@@ -59,7 +59,7 @@ class App extends React.Component {
     this.state = {
       initializing: true,
       newServiceWorkerDetected: false,
-      language: available.hasOwnProperty(languageNav) ? languageNav : 'ca-es',
+      language: available.find(language => language.key === languageNav) ? languageNav : 'ca-es',
       theme: false, // Use defined by user in browser
       tutorialSeen: false,
     };
@@ -94,7 +94,7 @@ class App extends React.Component {
 
   render() {
     const { newServiceWorkerDetected, language, theme, tutorialSeen } = this.state;
-    const translations = available[language];
+    const translations = available.find(_language => _language.key === language).value;
 
     return (
       <AppProviders { ...{

app/src/Dashboard.jsx

@@ -25,6 +25,7 @@ import Menu from './Menu';
 import ModalRouter from './ModalRouter';
 import ErrorCatcher from './ErrorCatcher';
 import About from './About';
+import Language from './Language';
 
 const withErrorCatcher = (origin, component) => <ErrorCatcher {...{ origin , key: origin }}>{ component }</ErrorCatcher>;
 
@@ -117,13 +118,24 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 const RoutesModal = (props) => {
+  const { language, onLanguageChange } = props.routeProps;
   return (
     <ModalRouter force={ false } >
       <Route
         exact
         path='about'
         render={ props => withErrorCatcher('About', <About />) }
       />
+      <Route
+        exact
+        path="language"
+        render={(props) =>
+          withErrorCatcher(
+            "Language",
+            <Language language={language} onLanguageChange={onLanguageChange} />
+          )
+        }
+      />
     </ModalRouter>
   )
 };
@@ -142,7 +154,7 @@ const Dashboard = (props) => {
 
   return (
     <AppThemeProvider type={ theme } >
-      <RoutesModal />
+      <RoutesModal routeProps={props} />
       <div id="root" className={classes.root}>
         <AppBar position="absolute" className={clsx(classes.appBar, open && classes.appBarShift)}>
           <Toolbar className={classes.toolbar}>

app/src/Language.jsx

@@ -0,0 +1,54 @@
+import React from "react";
+
+import { translate } from "react-translate";
+import Radio from "@material-ui/core/Radio";
+import RadioGroup from "@material-ui/core/RadioGroup";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import FormControl from "@material-ui/core/FormControl";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faLanguage } from "@fortawesome/free-solid-svg-icons";
+import available from "./i18n/available";
+
+class Language extends React.Component {
+  render() {
+    const { t, language, onLanguageChange } = this.props;
+
+    const filteredLanguages = available.reduce((languages, current) => {
+      if (!languages.find((item) => item.label === current.label)) {
+        return languages.concat([current]);
+      } else {
+        return languages;
+      }
+    }, []);
+
+    return (
+      <>
+        <h1 id="modal_heading">
+          <FontAwesomeIcon icon={faLanguage} style={{ marginRight: ".5em" }} />
+          {t("Language")}
+        </h1>
+        <div>
+          <FormControl component="fieldset">
+            <RadioGroup
+              aria-label="language"
+              name="language"
+              value={language}
+              onChange={(e) => onLanguageChange(e.target.value)}
+            >
+              {filteredLanguages.map((ele, index) => (
+                <FormControlLabel
+                  key={index}
+                  value={ele.key}
+                  control={<Radio />}
+                  label={ele.label}
+                />
+              ))}
+            </RadioGroup>
+          </FormControl>
+        </div>
+      </>
+    );
+  }
+}
+
+export default translate("Language")(Language);

app/src/MenuItems.jsx

@@ -17,7 +17,7 @@ import AssignmentIcon from '@material-ui/icons/Assignment';
 */
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faInfoCircle as faAbout } from '@fortawesome/free-solid-svg-icons'
+import { faInfoCircle as faAbout, faLanguage } from '@fortawesome/free-solid-svg-icons'
 
 const ListItemLink = (props) => {
   const { icon, primary, to } = props;
@@ -49,6 +49,7 @@ const MainMenuItems = translate('Menu')((props) => {
     <div>
       {/* <ListItemLink to="/" primary={ "Dashboard" } icon={ <DashboardIcon /> } /> */}
       <ListItemLink to="#about" primary={ t("About") } icon={ <FontAwesomeIcon style={{ fontSize: '1.5rem' }} icon={ faAbout } /> } />
+      <ListItemLink to="#language" primary={ t("Language") } icon={ <FontAwesomeIcon style={{ fontSize: '1.5rem' }} icon={ faLanguage } /> } />
     </div>
   )
 });

app/src/i18n/available.js

@@ -4,15 +4,15 @@ import en_en from "./en-en.lang.js";
 import pl_pl from "./pl-pl.lang.js";
 
 // Exports each language with more locale codes
-export default {
-  'en'   : en_en,
-  'en-en': en_en,
-  'en-us': en_en,
-  'en-au': en_en,
-  'ca'   : ca_es,
-  'ca-es': ca_es,
-  'es'   : es_es,
-  'es-es': es_es,
-  'pl'   : pl_pl,
-  'pl-pl': pl_pl,
-};
+export default [
+  { key: "en", label: en_en.name, value: en_en },
+  { key: "en-en", label: en_en.name, value: en_en },
+  { key: "en-us", label: en_en.name, value: en_en },
+  { key: "en-au", label: en_en.name, value: en_en },
+  { key: "ca", label: ca_es.name, value: ca_es },
+  { key: "ca-es", label: ca_es.name, value: ca_es },
+  { key: "es", label: es_es.name, value: es_es },
+  { key: "es-es", label: es_es.name, value: es_es },
+  { key: "pl", label: pl_pl.name, value: pl_pl },
+  { key: "pl-pl", label: pl_pl.name, value: pl_pl },
+];

app/src/i18n/ca-es.lang.js

@@ -4,6 +4,7 @@ const common = {
     "Refactored": "Refactoritzada",
     "Close": "Tanca",
     "About": "Quant a...",
+    "Language": "Idioma",
     "Help": "Ajuda",
     "Yes": "Si",
     "No": "No",
@@ -12,6 +13,7 @@ const common = {
 
 export default {
   locale: "fr", // :(
+  name: "Català",
 
   App: {
     ...common,
@@ -62,6 +64,10 @@ export default {
     "dataset API documentation": "documentació de l'API del dataset",
   },
 
+  Language :{
+    ...common,
+  },
+
   Help: {
     ...common,
   },

app/src/i18n/en-en.lang.js

@@ -4,6 +4,7 @@ const common = {
     "Refactored": "Refactored",
     "Close": "Close",
     "About": "About...",
+    "Language": "Language",
     "Help": "Help",
     "Yes": "Yes",
     "No": "No",
@@ -12,6 +13,7 @@ const common = {
 
 export default {
   locale: "en",
+  name: "English",
 
   App: {
     ...common,
@@ -62,6 +64,10 @@ export default {
     "dataset API documentation": "dataset API documentation",
   },
 
+  Language :{
+    ...common,
+  },
+
   Help: {
     ...common,
   },

app/src/i18n/es-es.lang.js

@@ -4,6 +4,7 @@ const common = {
     "Refactored": "Refactorizada",
     "Close": "Cerrar",
     "About": "Sobre...",
+    "Language": "Idioma",
     "Help": "Ayuda",
     "Yes": "Sí",
     "No": "No",
@@ -12,6 +13,7 @@ const common = {
 
 export default {
   locale: "es",
+  name: "Castellano",
 
   App: {
     ...common,
@@ -62,6 +64,10 @@ export default {
     "dataset API documentation": "documentación de la API del dataset",
   },
 
+  Language: {
+    ...common,
+  },
+
   Help: {
     ...common,
   },

app/src/i18n/pl-pl.lang.js

@@ -4,6 +4,7 @@ const common = {
     "Refactored": "Refactored",
     "Close": "Zamknij",
     "About": "O Covid Data...",
+    "Language": "Język",
     "Help": "Pomoc",
     "Yes": "Tak",
     "No": "Nie",
@@ -12,6 +13,7 @@ const common = {
 
 export default {
   locale: "pl",
+  name: "Polish",
 
   App: {
     ...common,
@@ -62,6 +64,10 @@ export default {
     "dataset API documentation": "dokumentacja źródła API",
   },
 
+  Language: {
+    ...common,
+  },
+
   Help: {
     ...common,
   },