From 1356120339b23ed8121ae7a3aceb4c56631745de Mon Sep 17 00:00:00 2001 From: Amauri Dias Date: Wed, 15 Apr 2020 00:35:54 -0300 Subject: [PATCH] =?UTF-8?q?adi=C3=A7=C3=A3o=20bot=C3=A3o=20mudar=20linguag?= =?UTF-8?q?em?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/locales/en/translation.json | 35 ++++++++++++++----------- public/locales/pt/translation.json | 5 ++++ src/App.js | 9 +------ src/components/Header/index.js | 41 +++++++++++++++++++++++++----- src/components/Header/styles.js | 31 ++++++++++++++++++++++ src/i18n/index.js | 5 ++-- src/layout/Sidebar/index.js | 1 + src/pages/Brazil/index.js | 11 ++++---- 8 files changed, 102 insertions(+), 36 deletions(-) diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index 00f588a..12069f9 100644 --- a/public/locales/en/translation.json +++ b/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" + "map": "Brazil in real time", + "cities": "Cities", + "area": "You area", + "help": "Help", + "news": "News" }, - "searchGithub": "Pesquisar suas informações do Github" -} \ No newline at end of file + "pages": { + "confirmed": "Confirmed", + "deaths": "Deaths", + "updatedAt": "Updated at" + }, + "searchGithub": "Search your Github information" +} diff --git a/public/locales/pt/translation.json b/public/locales/pt/translation.json index ee1035d..25a07e1 100644 --- a/public/locales/pt/translation.json +++ b/public/locales/pt/translation.json @@ -18,5 +18,10 @@ "help": "Ajuda", "news": "Conteúdos" }, + "pages": { + "confirmed": "Confirmados", + "deaths": "Óbitos", + "updatedAt": "Atualizado as" + }, "searchGithub": "Pesquisar suas informações do Github" } diff --git a/src/App.js b/src/App.js index f92db7e..08d97d9 100644 --- a/src/App.js +++ b/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 ( diff --git a/src/components/Header/index.js b/src/components/Header/index.js index 0e53135..0f9b452 100644 --- a/src/components/Header/index.js +++ b/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 ( {title} - - - + + + + + {Languages && + + + } + ); }; diff --git a/src/components/Header/styles.js b/src/components/Header/styles.js index e7b5ce7..22e52b9 100644 --- a/src/components/Header/styles.js +++ b/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; + } + } +`; diff --git a/src/i18n/index.js b/src/i18n/index.js index eed0d40..80cbb1d 100644 --- a/src/i18n/index.js +++ b/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 diff --git a/src/layout/Sidebar/index.js b/src/layout/Sidebar/index.js index 7a72828..c423f27 100644 --- a/src/layout/Sidebar/index.js +++ b/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))} {t(route.title)} diff --git a/src/pages/Brazil/index.js b/src/pages/Brazil/index.js index de6b15b..c2ae857 100644 --- a/src/pages/Brazil/index.js +++ b/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 = () => {
- - + + {/**/} - Atualizado as: 18:30 + {t('pages.updatedAt')}: 18:30 @@ -72,10 +73,10 @@ const Brazil = () => { - + - + {/*