fix: Merge pull request #223 from UniversalDataTool/feature/language-switch

Language Selection on Starting Page

Author: seveibar

src/components/StartingPage/index.js

@@ -15,7 +15,8 @@ import usePosthog from "../../utils/use-posthog"
 import packageInfo from "../../../package.json"
 import useEventCallback from "use-event-callback"
 import DownloadIcon from "@material-ui/icons/GetApp"
-
+import Box from "@material-ui/core/Box"
+import Select from "react-select"
 import { useTranslation } from "react-i18next"
 
 const useStyles = makeStyles({
@@ -37,6 +38,11 @@ const useStyles = makeStyles({
     marginLeft: -6,
     color: colors.grey[700],
   },
+  languageSelectionWrapper: {
+    display: "flex",
+    flexDirection: "column",
+    textAlign: "center",
+  },
 })
 
 const ContentContainer = styled("div")(({ theme }) => ({
@@ -65,6 +71,25 @@ const Title = styled("div")({
   color: colors.grey[300],
 })
 
+const languageSelectionFormStyle = {
+  control: (base, state) => ({
+    ...base,
+    border: "1px solid #9e9e9e",
+    background: "transparent",
+    color: "#e0e0e0",
+  }),
+  menuList: (base) => ({
+    ...base,
+    padding: 0,
+    margin: 0,
+    color: "black",
+  }),
+  singleValue: (base) => ({
+    ...base,
+    color: "white",
+  }),
+}
+
 const Subtitle = styled("div")({
   fontSize: 18,
   // fontWeight: "bold",
@@ -97,8 +122,15 @@ const Actionless = styled("div")({
   color: colors.grey[600],
   paddingTop: 16,
 })
+
 const BottomSpacer = styled("div")({ height: 100 })
 
+const languageOptions = [
+  { label: "English", value: "en" },
+  { label: "French", value: "fr" },
+  { label: "Chinese", value: "cn" },
+]
+
 export default ({
   onFileDrop,
   onOpenTemplate,
@@ -111,7 +143,7 @@ export default ({
   const posthog = usePosthog()
 
   // internalization hook
-  const { t } = useTranslation()
+  const { t, i18n } = useTranslation()
 
   //const isDesktop = useIsDesktop()
   const [newVersionAvailable, changeNewVersionAvailable] = useState(false)
@@ -137,6 +169,10 @@ export default ({
     onFileDrop(acceptedFiles[0])
   })
 
+  const changeLanguage = (language) => {
+    i18n.changeLanguage(language)
+  }
+
   let { getRootProps, getInputProps } = useDropzone({ onDrop })
 
   return (
@@ -185,10 +221,22 @@ export default ({
       <ContentContainer>
         <Content>
           <Grid container>
-            <Grid xs={12} item>
+            <Grid xs={6} item>
               <Title>Universal Data Tool</Title>
               <Subtitle>{t("universaldatatool-description")}</Subtitle>
             </Grid>
+            <Grid xs={3} />
+            <Grid xs={3}>
+              <Box padding={3} className={c.languageSelectionWrapper}>
+                <ActionTitle>Select Language</ActionTitle>
+                <Select
+                  styles={languageSelectionFormStyle}
+                  defaultValue={languageOptions[0]}
+                  options={languageOptions}
+                  onChange={({ value }) => changeLanguage(value)}
+                />
+              </Box>
+            </Grid>
             <Grid xs={6} item>
               <ActionList>
                 <ActionTitle>Start</ActionTitle>

src/i18n/index.js

@@ -18,7 +18,7 @@ i18n
   // init i18next
   // for all options read: https://www.i18next.com/overview/configuration-options
   .init({
-    fallbackLng: "cn",
+    fallbackLng: "en",
     debug: true,
 
     interpolation: {