From cdc44535cbacb5fe1347313e356f7b4eeca96826 Mon Sep 17 00:00:00 2001
From: Leonardo Ferreira <mail@leonardoferreira.com.br>
Date: Mon, 25 Sep 2023 23:37:33 -0300
Subject: [PATCH 1/4] base

---
 src/components/MenuAppBar/MenuAppBar.js | 28 +++++++++++++++++++-
 src/i18n/en.js                          |  2 ++
 src/i18n/i18n.js                        | 35 +++++++++++++++++++++++++
 src/i18n/pt_BR.js                       | 21 +++++++++++++++
 src/pages/Board/ListBoard/ListBoard.js  | 14 +++++-----
 src/pages/Login/Login.js                | 29 +++++++++++---------
 src/services/HttpService.js             |  2 +-
 src/services/LocalStoreService.js       | 10 +++++--
 8 files changed, 119 insertions(+), 22 deletions(-)
 create mode 100644 src/i18n/en.js
 create mode 100644 src/i18n/i18n.js
 create mode 100644 src/i18n/pt_BR.js

diff --git a/src/components/MenuAppBar/MenuAppBar.js b/src/components/MenuAppBar/MenuAppBar.js
index 77c27b5..735a719 100644
--- a/src/components/MenuAppBar/MenuAppBar.js
+++ b/src/components/MenuAppBar/MenuAppBar.js
@@ -6,9 +6,12 @@ import { authActions } from "stores/ducks/auth";
 import M from "materialize-css";
 import { Link } from "react-router-dom";
 
-import { AuthService, NotificationService } from "services";
+import { AuthService, NotificationService, LocalStoreService } from "services";
 
 class MenuAppBar extends Component {
+    state = {
+        lang: LocalStoreService.getI18n() || 'en'
+    }
 
     componentDidMount() {
         const dropdown = document.querySelectorAll(".dropdown-trigger");
@@ -22,6 +25,13 @@ class MenuAppBar extends Component {
         NotificationService.notifySuccess("Logout realizado com sucesso");
     };
 
+    handleLangChange = lang => {
+        LocalStoreService.setI18n(lang)
+        this.setState({
+            lang
+        })
+    }
+
     render() {
         const { userConfig } = this.props;
 
@@ -47,6 +57,22 @@ class MenuAppBar extends Component {
                             </ul>
                         </li>
                     </ul>
+                    <ul className="right hide-on-med-and-down">
+                        <li>
+                            <Link to="#" className="dropdown-trigger" data-target="language-dropdown">
+                                {this.state.lang}
+                                <i className="material-icons right">arrow_drop_down</i>
+                            </Link>
+                            <ul id="language-dropdown" className="dropdown-content">
+                                <li>
+                                    <Link onClick={() => this.handleLangChange('en')} to="#">EN</Link>
+                                </li>
+                                <li>
+                                    <Link onClick={() => this.handleLangChange('pt_BR')} to="#">PT-BR</Link>
+                                </li>
+                            </ul>
+                        </li>
+                    </ul>
                 </div>
             </nav>
         </header>;
diff --git a/src/i18n/en.js b/src/i18n/en.js
new file mode 100644
index 0000000..29b1ecf
--- /dev/null
+++ b/src/i18n/en.js
@@ -0,0 +1,2 @@
+export default {
+}
\ No newline at end of file
diff --git a/src/i18n/i18n.js b/src/i18n/i18n.js
new file mode 100644
index 0000000..424b439
--- /dev/null
+++ b/src/i18n/i18n.js
@@ -0,0 +1,35 @@
+import ptBr from './pt_BR'
+import en from './en'
+
+import LocalStoreService from "services/LocalStoreService";
+
+const langs = {
+    'pt_BR':ptBr,
+    'en': en
+}
+
+function _accessByString(o, s) {
+    s = s.replace(/\[(\w+)\]/g, '.$1');
+    s = s.replace(/^\./, '');
+    var a = s.split('.');
+    for (var i = 0, n = a.length; i < n; ++i) {
+        var k = a[i];
+        if (k in o) {
+            o = o[k];
+        } else {
+            return;
+        }
+    }
+    return o;
+}
+
+function t(key) {
+    const lang = langs[LocalStoreService.getI18n() || 'en']
+    const result = _accessByString(lang, key)
+    if (result) {
+        return result
+    }
+    return `{${key}}`;
+}
+
+export default t
\ No newline at end of file
diff --git a/src/i18n/pt_BR.js b/src/i18n/pt_BR.js
new file mode 100644
index 0000000..fbdfc71
--- /dev/null
+++ b/src/i18n/pt_BR.js
@@ -0,0 +1,21 @@
+export default {
+    unauthorized: "",
+    login: {
+        title: "Login",
+        submit: "Entrar",
+        usernameLabel: "Usuário",
+        passwordLabel: "Senha",
+        successMessage: "Login realizado com sucesso",
+        failureMessage: "Usuário e/ou senha inválido(s)"
+    },
+    boards: {
+        allOwners: "Todos",
+        new: "Novo Board",
+        filter: {
+            title: 'Filtro',
+            button: 'Filtrar'
+        },
+        nameLabel: "Nome",
+        ownerLabel: "Dono"
+    }
+}
\ No newline at end of file
diff --git a/src/pages/Board/ListBoard/ListBoard.js b/src/pages/Board/ListBoard/ListBoard.js
index ad71d74..5bce73e 100644
--- a/src/pages/Board/ListBoard/ListBoard.js
+++ b/src/pages/Board/ListBoard/ListBoard.js
@@ -9,6 +9,8 @@ import { Button, Col, InputField, Link, Pagination, Panel, Preloader, Row, Selec
 import CardBoard from "./CardBoard/CardBoard";
 import EmptyBoardAlert from "./EmptyBoardAlert/EmptyBoardAlert";
 
+import t from "i18n/i18n";
+
 class ListBoard extends Component {
     state = {
         boards: {
@@ -59,7 +61,7 @@ class ListBoard extends Component {
         const { data } = await HttpService.get("/boards/owners");
         const owners = [
             {
-                label: "Todos",
+                label: t('boards.allOwners'),
                 value: "all"
             },
             ...data.map(owner => ({
@@ -127,14 +129,14 @@ class ListBoard extends Component {
         return <Row>
             <Col s={12}>
                 <PageHeader title="Boards" action={
-                    <Link to="/boards/new">Novo board</Link>
+                    <Link to="/boards/new">{t('boards.new')}</Link>
                 }/>
             </Col>
 
             <Col s={12}>
-                <Panel collapsible defaultClose title="Filtro" actions={
+                <Panel collapsible defaultClose title={t('boards.filter.title')} actions={
                     <Button type="submit" onClick={this.handleFilter}>
-                        Filtrar
+                        {t('boards.filter.button')}
                     </Button>
                 }>
                     <Row>
@@ -142,12 +144,12 @@ class ListBoard extends Component {
                                     name="name"
                                     onChange={e => this.changeFilterValue("name", e.target.value)}
                                     value={filter.name}
-                                    label="Nome"/>
+                                    label={t('boards.nameLabel')}/>
 
                         <Col s={12} l={6}>
                             <Select withoutWrapper
                                     options={owners}
-                                    label="Dono"
+                                    label={t('boards.ownerLabel')}
                                     onChange={selected => this.changeFilterValue("owner", (selected || {}).value)}
                                     value={filter.owner || userConfig.username}/>
                         </Col>
diff --git a/src/pages/Login/Login.js b/src/pages/Login/Login.js
index 9b6d416..45b68bd 100644
--- a/src/pages/Login/Login.js
+++ b/src/pages/Login/Login.js
@@ -10,6 +10,8 @@ import { Button, Col, InputField, Panel, Row } from "components/ui";
 
 import "./Login.scss";
 
+import t from "i18n/i18n";
+
 class Login extends Component {
     state = {
         username: "",
@@ -35,16 +37,19 @@ class Login extends Component {
 
             this.redirect();
 
-            NotificationService.notifySuccess("Login realizado com sucesso");
+            NotificationService.notifySuccess(t('login.successMessage'));
         } catch (e) {
             const response = e.response;
-            const reason = response.headers['x-auth-fail-reason'];
-
-            if (reason) {
-                NotificationService.notifyError(reason);
-            } else {
-                NotificationService.notifyError("Usuário e/ou senha inválido(s)");
-            }
+            if (response) {
+                const reason = response.headers['x-auth-fail-reason'];
+
+                if (reason) {
+                    NotificationService.notifyError(reason);
+                    return;
+                } 
+            }            
+            
+            NotificationService.notifyError(t('login.failureMessage'));
         } finally {
             this.setState({
                 isLoading: false
@@ -71,14 +76,14 @@ class Login extends Component {
                 <Col s={12} l={6} offsetL={3}>
                     <Panel loading={isLoading}>
                         <div className="login-panel__header-container">
-                            <h4 className="login-panel__header center-align">Login</h4>
+                            <h4 className="login-panel__header center-align">{t('login.title')}</h4>
                         </div>
 
                         <Row>
                             <InputField s={12}
                                         name="username"
                                         onChange={this.handleChange}
-                                        label="Usuário"
+                                        label={t('login.usernameLabel')}
                                         value={username}
                             />
 
@@ -86,13 +91,13 @@ class Login extends Component {
                                         type="password"
                                         name="password"
                                         onChange={this.handleChange}
-                                        label="Senha"
+                                        label={t('login.passwordLabel')}
                                         value={password}
                             />
 
                             <Col s={12}>
                                 <Button type="submit" block onClick={this.handleSubmit}>
-                                    Entrar
+                                    {t('login.submit')}
                                 </Button>
                             </Col>
                         </Row>
diff --git a/src/services/HttpService.js b/src/services/HttpService.js
index ae51c56..5d7fb9d 100644
--- a/src/services/HttpService.js
+++ b/src/services/HttpService.js
@@ -12,7 +12,7 @@ const { REACT_APP_API_URL: API_URL } = process.env;
 const instance = axios.create({
     baseURL: API_URL,
     headers: {
-        "Accept-Language": "pt-BR"
+        "Accept-Language": LocalStoreService.getI18n() || 'en'
     },
     paramsSerializer: params => querystring.stringify(params)
 });
diff --git a/src/services/LocalStoreService.js b/src/services/LocalStoreService.js
index 60f3bd5..889774b 100644
--- a/src/services/LocalStoreService.js
+++ b/src/services/LocalStoreService.js
@@ -1,4 +1,5 @@
 let key = "persisted-state";
+let i18n_key = 'i18n-key'
 
 export default {
     loadState: () => {
@@ -21,8 +22,13 @@ export default {
     },
     cleanState: () => {
         try {
-            localStorage.clear();
+            localStorage.removeItem(key)
         } catch {
         }
-    }
+    },
+    setI18n: value => {
+        localStorage.setItem(i18n_key, value)
+    },
+    getI18n: () => 
+        localStorage.getItem(i18n_key),
 };

From 87e8bf2e652725823cdbc0cb113f32cc49c62520 Mon Sep 17 00:00:00 2001
From: Leonardo Ferreira <mail@leonardoferreira.com.br>
Date: Mon, 25 Sep 2023 23:43:53 -0300
Subject: [PATCH 2/4] base

---
 src/components/MenuAppBar/MenuAppBar.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/MenuAppBar/MenuAppBar.js b/src/components/MenuAppBar/MenuAppBar.js
index 735a719..8a066fe 100644
--- a/src/components/MenuAppBar/MenuAppBar.js
+++ b/src/components/MenuAppBar/MenuAppBar.js
@@ -29,7 +29,8 @@ class MenuAppBar extends Component {
         LocalStoreService.setI18n(lang)
         this.setState({
             lang
-        })
+        });
+        window.location.reload();
     }
 
     render() {

From e68f1f0c1d4ca7e743d12fd83e2de28720ef0f2c Mon Sep 17 00:00:00 2001
From: Leonardo Ferreira <mail@leonardoferreira.com.br>
Date: Mon, 25 Sep 2023 23:48:23 -0300
Subject: [PATCH 3/4] base

---
 src/components/MenuAppBar/MenuAppBar.js |  7 ++++---
 src/i18n/i18n.js                        | 10 +++++++++-
 src/services/HttpService.js             |  4 +++-
 3 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/components/MenuAppBar/MenuAppBar.js b/src/components/MenuAppBar/MenuAppBar.js
index 8a066fe..dfa660b 100644
--- a/src/components/MenuAppBar/MenuAppBar.js
+++ b/src/components/MenuAppBar/MenuAppBar.js
@@ -6,11 +6,12 @@ import { authActions } from "stores/ducks/auth";
 import M from "materialize-css";
 import { Link } from "react-router-dom";
 
-import { AuthService, NotificationService, LocalStoreService } from "services";
+import { AuthService, NotificationService } from "services";
+import { getLang, setLang } from "i18n/i18n";
 
 class MenuAppBar extends Component {
     state = {
-        lang: LocalStoreService.getI18n() || 'en'
+        lang: getLang()
     }
 
     componentDidMount() {
@@ -26,7 +27,7 @@ class MenuAppBar extends Component {
     };
 
     handleLangChange = lang => {
-        LocalStoreService.setI18n(lang)
+        setLang(lang)
         this.setState({
             lang
         });
diff --git a/src/i18n/i18n.js b/src/i18n/i18n.js
index 424b439..ab584b7 100644
--- a/src/i18n/i18n.js
+++ b/src/i18n/i18n.js
@@ -24,7 +24,7 @@ function _accessByString(o, s) {
 }
 
 function t(key) {
-    const lang = langs[LocalStoreService.getI18n() || 'en']
+    const lang = langs[getLang()]
     const result = _accessByString(lang, key)
     if (result) {
         return result
@@ -32,4 +32,12 @@ function t(key) {
     return `{${key}}`;
 }
 
+export function getLang() {
+    return LocalStoreService.getI18n() || 'en'
+}
+
+export function setLang(lang) {
+    LocalStoreService.setI18n(lang)
+}
+
 export default t
\ No newline at end of file
diff --git a/src/services/HttpService.js b/src/services/HttpService.js
index 5d7fb9d..e97503f 100644
--- a/src/services/HttpService.js
+++ b/src/services/HttpService.js
@@ -7,12 +7,14 @@ import store from "stores/store";
 import { authActions } from "stores/ducks/auth";
 import LocalStoreService from "services/LocalStoreService";
 
+import {getLang} from 'i18n/i18n'
+
 const { REACT_APP_API_URL: API_URL } = process.env;
 
 const instance = axios.create({
     baseURL: API_URL,
     headers: {
-        "Accept-Language": LocalStoreService.getI18n() || 'en'
+        "Accept-Language": getLang()
     },
     paramsSerializer: params => querystring.stringify(params)
 });

From b7feb949e117ba67773eab109748efaad12ce4f8 Mon Sep 17 00:00:00 2001
From: Leonardo Ferreira <mail@leonardoferreira.com.br>
Date: Mon, 25 Sep 2023 23:59:42 -0300
Subject: [PATCH 4/4] boards

---
 src/i18n/pt_BR.js                             | 26 ++++++++++-
 .../Board/ListBoard/CardBoard/CardBoard.js    | 46 +++++++++++++------
 .../EmptyBoardAlert/EmptyBoardAlert.js        |  4 +-
 3 files changed, 59 insertions(+), 17 deletions(-)

diff --git a/src/i18n/pt_BR.js b/src/i18n/pt_BR.js
index fbdfc71..c93f573 100644
--- a/src/i18n/pt_BR.js
+++ b/src/i18n/pt_BR.js
@@ -16,6 +16,30 @@ export default {
             button: 'Filtrar'
         },
         nameLabel: "Nome",
-        ownerLabel: "Dono"
+        ownerLabel: "Dono",
+        empytBoardList: 'Nenhum board encontrado',
+        remove: {
+            success: "Board removido com sucesso",
+            failure: "Falha ao remover o board"
+        },
+        clone: {
+            success: 'Board duplicado com sucesso',
+            failure: 'Falha ao duplicar o board'
+        },
+        dropdown: {
+            actions: {
+                edit: "Configurações",
+                dynamicFieldConfigs: "Campos Dinâmicos",
+                leadTimeConfigs: "Configurações de Lead Times",
+                holidays: "Feriados",
+                clone: "Duplicar",
+                remove: "Remover"
+            }
+        },
+        buttons: {
+            estimates: "Previsibilidade",
+            issues: "SandBox",
+            issuePeriods: "Períodos"
+        }
     }
 }
\ No newline at end of file
diff --git a/src/pages/Board/ListBoard/CardBoard/CardBoard.js b/src/pages/Board/ListBoard/CardBoard/CardBoard.js
index ee07804..cd4737d 100644
--- a/src/pages/Board/ListBoard/CardBoard/CardBoard.js
+++ b/src/pages/Board/ListBoard/CardBoard/CardBoard.js
@@ -8,6 +8,8 @@ import { AlertService, HttpService, NotificationService } from "services";
 import { Button, Col } from "components/ui";
 import { Link } from "react-router-dom";
 
+import t from 'i18n/i18n'
+
 import M from "materialize-css";
 
 import "./CardBoard.scss";
@@ -36,15 +38,15 @@ class CardBoard extends Component {
             const willDelete = await AlertService.confirmRemove();
             if (willDelete) {
                 await HttpService.delete(`/boards/${board.id}`);
-                NotificationService.notifySuccess("Board removido com sucesso");
+                NotificationService.notifySuccess(t('boards.remove.success'));
                 this.props.refreshBoards();
             }
         } catch (e) {
-            NotificationService.notifyError("Falha ao remover o board");
+            NotificationService.notifyError(t('boards.remove.failure'));
         }
     };
 
-    copyBoard = async () => {
+    cloneBoard = async () => {
         const { board } = this.props;
 
         try {
@@ -54,10 +56,10 @@ class CardBoard extends Component {
                 }
             });
 
-            NotificationService.notifySuccess("Board duplicado com sucesso");
+            NotificationService.notifySuccess(t('boards.clone.success'));
             this.props.refreshBoards();
         } catch (e) {
-            NotificationService.notifyError("Falha ao duplicar o board");
+            NotificationService.notifyError(t('boards.clone.failure'));
         }
     };
 
@@ -73,33 +75,47 @@ class CardBoard extends Component {
                     </Link>
                     <ul id={"board-dropdown-" + board.id} className="dropdown-content">
                         <li>
-                            <Link to={`/boards/${board.id}/edit`}>Configurações</Link>
+                            <Link to={`/boards/${board.id}/edit`}>
+                                {t('boards.dropdown.actions.edit')}
+                            </Link>
                         </li>
                         <li>
-                            <Link to={`/boards/${board.id}/dynamic-field-configs`}>Campos Dinâmicos</Link>
+                            <Link to={`/boards/${board.id}/dynamic-field-configs`}>
+                                {t('boards.dropdown.actions.dynamicFieldConfigs')}
+                            </Link>
                         </li>
                         <li>
-                            <Link to={`/boards/${board.id}/lead-time-configs`}>Configurações de Lead Times</Link>
+                            <Link to={`/boards/${board.id}/lead-time-configs`}>
+                                {t('boards.dropdown.actions.leadTimeConfigs')}
+                            </Link>
                         </li>
                         <li>
-                            <Link to={`/boards/${board.id}/holidays`}>Feriados</Link>
+                            <Link to={`/boards/${board.id}/holidays`}>
+                                {t('boards.dropdown.actions.holidays')}
+                            </Link>
                         </li>
                         <li>
-                            <Button link onClick={this.copyBoard}>
-                                Duplicar
+                            <Button link onClick={this.cloneBoard}>
+                                {t('boards.dropdown.actions.clone')}
                             </Button>
                         </li>
                         {userConfig.username === board.owner && <li>
                             <Button link onClick={this.deleteBoard}>
-                                Remover
+                                {t('boards.dropdown.actions.remove')}
                             </Button>
                         </li>}
                     </ul>
                 </div>
                 <div className="card-action right-align">
-                    <Link to={`/boards/${board.id}/estimates`}>Previsibilidade</Link>
-                    <Link to={`/boards/${board.id}/issues`}>SandBox</Link>
-                    <Link to={`/boards/${board.id}/issue-periods`}>Períodos</Link>
+                    <Link to={`/boards/${board.id}/estimates`}>
+                        {t('boards.buttons.estimates')}
+                    </Link>
+                    <Link to={`/boards/${board.id}/issues`}>
+                        {t('boards.buttons.issues')}
+                    </Link>
+                    <Link to={`/boards/${board.id}/issue-periods`}>
+                        {t('boards.buttons.issuePeriods')}
+                    </Link>
                 </div>
             </div>
         </Col>;
diff --git a/src/pages/Board/ListBoard/EmptyBoardAlert/EmptyBoardAlert.js b/src/pages/Board/ListBoard/EmptyBoardAlert/EmptyBoardAlert.js
index 969b119..63507ee 100644
--- a/src/pages/Board/ListBoard/EmptyBoardAlert/EmptyBoardAlert.js
+++ b/src/pages/Board/ListBoard/EmptyBoardAlert/EmptyBoardAlert.js
@@ -4,7 +4,9 @@ import { Col } from "components/ui";
 
 import "./EmptyBoardAlert.scss";
 
+import t from 'i18n/i18n';
+
 export default () =>
     <Col s={12} className="center-align empty-board-alert__container">
-        <h5>Nenhum board encontrado</h5>
+        <h5>{t('boards.empytBoardList')}</h5>
     </Col>;