Implement Language Select UI #490 (#492)

* translation functionality configured. code review requested

* code refactored to use proper event information when updating translations and state in TranslationSelect.tsx

* fixed styling which was causing the Temperature component to rest on top of the translationSelect component. With this commit the components are now sitting side by sidde.

* chaned spanish translation from Spanish to Español

* added new key:value in the en and es library under glossary that handles the values needed for the aria-label language change. added an aria-label html property to the mui Select component used within Translation Select. when the webpage language is english the aria label reads 'Select language' and when the webpage is in spanish the aria-label reads 'Seleccionar idioma'. refactored TranslationSelect to import the i18 module directly rather than it requiring the changeTranslation function as a prop from the Header component.

Co-authored-by: Jacob <[email protected]>

Author: Sunset05

packages/common/src/i18n/en.ts

@@ -66,6 +66,7 @@ export default {
       saturday: "Saturday",
     },
     close: "Close",
+    selectLanguage: "Select language",
   },
   hotlines: {
     nationalSuicidePreventionLifeline: {

packages/common/src/i18n/es.ts

@@ -66,6 +66,7 @@ export default {
       saturday: "Sábado",
     },
     close: "Final",
+    selectLanguage: "Seleccionar idioma",
   },
   hotlines: {
     nationalSuicidePreventionLifeline: {

packages/web/src/components/Header.tsx

@@ -10,7 +10,9 @@ import MenuDrawer from "./MenuDrawer";
 import MenuIcon from "@material-ui/icons/Menu";
 import Temperature from "./Temperature";
 import Toolbar from "@material-ui/core/Toolbar";
+import TranslationSelect from "./TranslationSelect";
 import Typography from "@material-ui/core/Typography";
+
 import { useTranslation } from "react-i18next";
 
 const Header = () => {
@@ -29,14 +31,19 @@ const Header = () => {
                   <MenuIcon />
                 </IconButton>
               </Grid>
-              <Grid alignItems="center" justify="flex-end" container item>
-                <Grid item component={Temperature} />
+              <Grid alignItems="center" justify="flex-start" container item>
                 <Grid item>
                   <Link to="/">
                     <Box component={Logo} height={40} width="auto" />
                   </Link>
                 </Grid>
               </Grid>
+              <Grid alignItems="center" justify="flex-end" container item>
+                <Grid item component={Temperature} xs={6} />
+                <Grid item xs={6}>
+                  <TranslationSelect />
+                </Grid>
+              </Grid>
             </Grid>
           </Container>
         </Toolbar>

packages/web/src/components/ResourceCard.tsx

@@ -12,7 +12,6 @@ import { TResource } from "@upswyng/types";
 import { Theme } from "@material-ui/core/styles/createMuiTheme";
 import Typography from "@material-ui/core/Typography";
 import { getNextOpenText } from "../utils/schedule";
-
 import makeStyles from "@material-ui/styles/makeStyles";
 import { useHistory } from "react-router-dom";
 import { useTranslation } from "react-i18next";

packages/web/src/components/TranslationSelect.tsx

@@ -0,0 +1,53 @@
+import { createStyles, makeStyles } from "@material-ui/core/styles";
+import FormControl from "@material-ui/core/FormControl";
+import MenuItem from "@material-ui/core/MenuItem";
+import React from "react";
+import Select from "@material-ui/core/Select";
+import { Theme } from "@material-ui/core/styles";
+import i18n from "../i18n";
+import { useTranslation } from "react-i18next";
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    formControl: {
+      margin: theme.spacing(1),
+      minWidth: 120,
+    },
+    selectEmpty: {
+      marginTop: theme.spacing(2),
+    },
+  })
+);
+
+const TranslationSelect = () => {
+  const { t } = useTranslation("glossary");
+  const classes = useStyles();
+  const [translationUsed, setTranslationUsed] = React.useState("en");
+
+  const changeTranslation = (translation: string) => {
+    i18n.changeLanguage(translation);
+  };
+
+  const handleChange = (event: React.ChangeEvent<{ value: unknown }>) => {
+    const translationLanguage = event.target.value as string;
+    setTranslationUsed(translationLanguage);
+    changeTranslation(translationLanguage);
+  };
+
+  return (
+    <div>
+      <FormControl className={classes.formControl}>
+        <Select
+          value={translationUsed}
+          onChange={handleChange}
+          aria-label={t("selectLanguage")}
+        >
+          <MenuItem value="en">English</MenuItem>
+          <MenuItem value="es">Español</MenuItem>
+        </Select>
+      </FormControl>
+    </div>
+  );
+};
+
+export default TranslationSelect;