adição botão mudar linguagem

public/locales/en/translation.json

@@ -1,22 +1,27 @@
 {
-  "title": "Testando o store do Redux",
+  "title": "Testing the Redux store",
   "buttons": {
-    "1": "Diminuir",
-    "2": "Adicionar"
+    "1": "Decrease",
+    "2": "Add"
   },
   "menu": {
-    "map": "Brasil",
-    "cities": "Cidades",
-    "area": "Sua área",
-    "help": "Ajuda",
-    "news": "Conteúdos"
+    "map": "Brazil",
+    "cities": "Cities",
+    "area": "You area",
+    "help": "Help",
+    "news": "News"
   },
   "header": {
-    "map": "Brasil em tempo real",
-    "cities": "Cidades",
-    "area": "Sua área",
-    "help": "Ajuda",
-    "news": "Conteúdos relevantes"
+    "map": "Brazil in real time",
+    "cities": "Cities",
+    "area": "You area",
+    "help": "Help",
+    "news": "News"
   },
-  "searchGithub": "Pesquisar suas informações do Github"
-}
+  "pages": {
+    "confirmed": "Confirmed",
+    "deaths": "Deaths",
+    "updatedAt": "Updated at"
+  },
+  "searchGithub": "Search your Github information"
+}

public/locales/pt/translation.json

@@ -18,5 +18,10 @@
     "help": "Ajuda",
     "news": "Conteúdos relevantes"
   },
+  "pages": {
+    "confirmed": "Confirmados",
+    "deaths": "Óbitos",
+    "updatedAt": "Atualizado as"
+  },
   "searchGithub": "Pesquisar suas informações do Github"
 }

src/App.js

@@ -1,19 +1,12 @@
 import React from "react";
-import { useTranslation } from "react-i18next";
 
 import "@material/react-layout-grid/index.scss";
 
 import Layout from "~/layout";
 import Routes from "./Router";
 
-function App() {
-  const [t, i18n] = useTranslation();
-
-  function handleChangeLang(lang) {
-    i18n.changeLanguage(lang);
-  }
 
-   
+function App() {
 
   return (
     <Layout>

src/components/Header/index.js

@@ -1,20 +1,49 @@
-import React from "react";
+import React,{ useEffect, useState } from "react";
 
 import LogoSvg from "~/assets/icons/small-log.svg";
 import Notification from "~/assets/icons/bell.svg";
-import { Container, AlignItem, Title, Icon, LeftIcon } from "./styles";
-import { Link } from 'react-router-dom';
+import { Languages } from "~/i18n";
+import { useTranslation } from 'react-i18next'
+
+import { ArrowIosDownwardOutline } from '@styled-icons/evaicons-outline'
+import { Container, AlignItem, Title, Icon, LeftIcon, AlignRight, SelectContainer } from "./styles";
+
+
 
 const Header = ({ leftIcon, title, rightIcon, actionLeftIcon }) => {
+  const [t, i18n] = useTranslation();
+  function handleChangeLanguage(event) {
+    const lang = event.target.value;
+    i18n.changeLanguage(lang);
+  }
+  const [language, setLanguage] = useState(i18n.language);
+
+  useEffect(() => {
+    i18n.on('languageChanged', (lng) => {
+      console.log('change', lng)
+      setLanguage(lng);
+    })
+  }, []);
+
   return (
     <Container>
       <AlignItem>
         <LeftIcon src={leftIcon || LogoSvg} onClick={actionLeftIcon} />
         <Title>{title}</Title>
       </AlignItem>
-      <a href="https://covidzero.com.br/sobre">
-        <Icon src={rightIcon || Notification} />
-      </a>
+      <AlignRight>
+        <a href="https://covidzero.com.br/sobre">
+          <Icon src={rightIcon || Notification} />
+        </a>
+        {Languages && <SelectContainer>
+          <select onChange={handleChangeLanguage} value={language}>
+            {Languages.map(lng => (
+              <option key={lng.value} value={lng.value}>{lng.label}</option>
+            ))}
+          </select>
+          <ArrowIosDownwardOutline color="white" size="20px" />
+        </SelectContainer>}
+      </AlignRight>
     </Container>
   );
 };

src/components/Header/styles.js

@@ -42,3 +42,34 @@ export const LeftIcon = styled(Icon)`
     display: none;
   }
 `;
+
+export const AlignRight = styled.div`
+  display: flex;
+  > * {
+    margin: 0 10px;
+  }
+`;
+
+export const SelectContainer = styled.div`
+  min-width: 100px;
+  min-height: 28px;
+  select {
+      width: 100%;
+      display: block;
+      background: none;
+      color: #fff;
+      font-size: 16px;
+      appearance: none;
+      border: 1px solid #fff;
+      padding: 5px 25px 5px 10px;
+    }
+    svg {
+      position: absolute;
+      right: 33px;
+      top: 30px;
+
+      @media all and (max-width: 600px) {
+        top: 16px;
+      }
+    }
+`;

src/i18n/index.js

@@ -5,7 +5,8 @@ import Backend from "i18next-xhr-backend";
 
 import LanguageDetector from "i18next-browser-languagedetector";
 
-const Languages = ["pt", "en"];
+export const Languages = [{ label: "Português", value: "pt" }, { label: "English", value: "en"}]
+
 const debugging = process.env.NODE_ENV === "development";
 i18n
   .use(Backend)
@@ -14,7 +15,7 @@ i18n
   .init({
     fallbackLng: "pt",
     debug: debugging,
-    whitelist: Languages,
+    whitelist: Languages.map(({ value }) => value),
 
     interpolation: {
       escapeValue: false

src/layout/Sidebar/index.js

@@ -69,6 +69,7 @@ const Sidebar = props => {
               className={`nav-link ${route.path === pathname && "-active"}`}
             >
               {route.icon}
+              {console.log(t(route.title))}
               <span className="link-text">{t(route.title)}</span>
             </Link>
           </li>

src/pages/Brazil/index.js

@@ -46,6 +46,7 @@ const Brazil = () => {
   useEffect(() => {
     (async () => {
       const stateCases = await API.cases.getStatesCases();
+      console.log('casos',stateCases)
       setTotalCases(sumStateCases(stateCases))
     }
     )()
@@ -56,10 +57,10 @@ const Brazil = () => {
       <Header title={t("header.map")} />
 
       <Styled.ContainerChips>
-        <Chips height="10" type="confirmed" text="Confirmados" />
-        <Chips height="10" text="Óbitos" />
+        <Chips height="10" type="confirmed" text={t('pages.confirmed')} />
+        <Chips height="10" text={t('pages.deaths')} />
         {/*<Chips height="10" type="hidden" text="Atualizado em: " lastUpdate={now.getHours()+':'+now.getMinutes()} />*/}
-        <Styled.ContainerDiv>Atualizado as: 18:30</Styled.ContainerDiv>
+        <Styled.ContainerDiv>{t('pages.updatedAt')}: 18:30</Styled.ContainerDiv>
       </Styled.ContainerChips>
 
       <Styled.Container>
@@ -72,10 +73,10 @@ const Brazil = () => {
           <Grid>
             <Row style={{ marginBottom: "1em" }}>
               <Cell desktopColumns={12} phoneColumns={2} tabletColumns={4}>
-                <CardStats status="confirmed" title="Confirmados" count={totalCases.confirmed.toLocaleString()} />
+                <CardStats status="confirmed" title={t('pages.confirmed')} count={totalCases.confirmed.toLocaleString()} />
               </Cell>
               <Cell desktopColumns={12} phoneColumns={2} tabletColumns={4}>
-                <CardStats status="death" title="Óbitos" count={totalCases.deaths.toLocaleString()} />
+                <CardStats status="death" title={t('pages.deaths')} count={totalCases.deaths.toLocaleString()} />
               </Cell>
             </Row>
             {/*<Row>