From 226933f2d76c215c93b3d0e4bbfff536935cfd05 Mon Sep 17 00:00:00 2001 From: Patrick Fic Date: Tue, 31 Dec 2019 12:57:17 -0800 Subject: [PATCH] Added langauge localization files to use masterdata and futureproof translations. --- .../global-search/global-search.component.jsx | 83 +++++++++---------- .../components/header/header.component.jsx | 15 ++-- .../langauge-selector.component.jsx | 29 +++++++ .../white-board-card.component.jsx | 18 ++-- client/src/index.js | 2 +- client/src/pages/jobs/jobs.page.jsx | 8 +- client/src/translations/en/common.json | 6 -- client/src/translations/en_us/common.json | 22 +++++ client/src/translations/es/common.json | 11 ++- client/src/translations/fr/common.json | 20 ++++- client/src/translations/i18n.js | 29 +++++++ 11 files changed, 170 insertions(+), 73 deletions(-) create mode 100644 client/src/components/language-selector/langauge-selector.component.jsx delete mode 100644 client/src/translations/en/common.json create mode 100644 client/src/translations/en_us/common.json create mode 100644 client/src/translations/i18n.js diff --git a/client/src/components/global-search/global-search.component.jsx b/client/src/components/global-search/global-search.component.jsx index 77a28d9db..b537b5f11 100644 --- a/client/src/components/global-search/global-search.component.jsx +++ b/client/src/components/global-search/global-search.component.jsx @@ -1,59 +1,58 @@ import React from "react"; -import { Icon, Button, Input, AutoComplete } from "antd"; +// import { Icon, Button, Input, AutoComplete } from "antd"; -const { Option } = AutoComplete; +// const { Option } = AutoComplete; -function onSelect(value) { - console.log("onSelect", value); -} +// function onSelect(value) { +// console.log("onSelect", value); +// } -function getRandomInt(max, min = 0) { - return Math.floor(Math.random() * (max - min + 1)) + min; // eslint-disable-line no-mixed-operators -} +// function getRandomInt(max, min = 0) { +// return Math.floor(Math.random() * (max - min + 1)) + min; // eslint-disable-line no-mixed-operators +// } -function searchResult(query) { - return new Array(getRandomInt(5)) - .join(".") - .split(".") - .map((item, idx) => ({ - query, - category: `${query}${idx}`, - count: getRandomInt(200, 100) - })); -} +// function searchResult(query) { +// return new Array(getRandomInt(5)) +// .join(".") +// .split(".") +// .map((item, idx) => ({ +// query, +// category: `${query}${idx}`, +// count: getRandomInt(200, 100) +// })); +// } -function renderOption(item) { - return ( - - ); -} +// function renderOption(item) { +// return ( +// +// ); +// } export default class GlobalSearch extends React.Component { state = { dataSource: [] }; - handleSearch = value => { - this.setState({ - dataSource: value ? searchResult(value) : [] - }); - }; + // handleSearch = value => { + // this.setState({ + // dataSource: value ? searchResult(value) : [] + // }); + // }; render() { - const { dataSource } = this.state; return (
//
diff --git a/client/src/components/header/header.component.jsx b/client/src/components/header/header.component.jsx index e54eeb34d..9d26d0de5 100644 --- a/client/src/components/header/header.component.jsx +++ b/client/src/components/header/header.component.jsx @@ -1,27 +1,28 @@ import React from "react"; import { Link } from "react-router-dom"; +import { useApolloClient } from "@apollo/react-hooks"; import { Menu, Icon } from "antd"; import "./header.styles.scss"; + import SignOut from "../sign-out/sign-out.component"; import ManageSignInButton from "../manage-sign-in-button/manage-sign-in-button.component"; -import { useApolloClient } from "@apollo/react-hooks"; import GlobalSearch from "../global-search/global-search.component"; +import LanguageSelector from "../language-selector/langauge-selector.component"; export default ({ landingHeader, navItems, selectedNavItem }) => { const apolloClient = useApolloClient(); + const handleClick = e => { apolloClient.writeData({ data: { selectedNavItem: e.key } }); }; - return ( + mode='horizontal'> @@ -43,6 +44,8 @@ export default ({ landingHeader, navItems, selectedNavItem }) => { )} + + {!landingHeader ? : null} ); }; diff --git a/client/src/components/language-selector/langauge-selector.component.jsx b/client/src/components/language-selector/langauge-selector.component.jsx new file mode 100644 index 000000000..139f3580e --- /dev/null +++ b/client/src/components/language-selector/langauge-selector.component.jsx @@ -0,0 +1,29 @@ +import React from "react"; +import { useTranslation } from "react-i18next"; +import i18next from "i18next"; +import { Dropdown, Menu, Icon } from "antd"; + +export default function LanguageSelector() { + const { t } = useTranslation(); + + const handleMenuClick = e => { + console.log("e", e); + + i18next.changeLanguage(e.key, (err, t) => { + if (err) + return console.log("Error encountered when changing languages.", err); + }); + }; + const menu = ( + + {t("general.languages.english")} + {t("general.languages.french")} + {t("general.languages.spanish")} + + ); + return ( + + + + ); +} diff --git a/client/src/components/white-board-card/white-board-card.component.jsx b/client/src/components/white-board-card/white-board-card.component.jsx index 7443bc84d..45610d6a0 100644 --- a/client/src/components/white-board-card/white-board-card.component.jsx +++ b/client/src/components/white-board-card/white-board-card.component.jsx @@ -1,7 +1,7 @@ import React from "react"; import { Link } from "react-router-dom"; -import { Menu, Dropdown, Card, Icon, Avatar, Button } from "antd"; - +import { Menu, Dropdown, Card, Icon, Avatar } from "antd"; +import { useTranslation } from "react-i18next"; export default function WhiteBoardCard({ metadata }) { // const { // onClick, @@ -18,31 +18,33 @@ export default function WhiteBoardCard({ metadata }) { // showDeleteButton, // onDelete // } = this.props; + const { t } = useTranslation(); + const menu = ( - View Job Images + {t("whiteboard.viewJobImages")} - Printing + {t("whiteboard.printCenter")} - Job Notes + {t("whiteboard.notes")} - Post Invoices + {t("whiteboard.postInvoices")} - Receive Parts + {t("whiteboard.receiveParts")} - Parts Status + {t("whiteboard.partStatus")} ); diff --git a/client/src/index.js b/client/src/index.js index 327cc1614..b29d04ea2 100644 --- a/client/src/index.js +++ b/client/src/index.js @@ -1,7 +1,7 @@ import React from "react"; import ReactDOM from "react-dom"; import { BrowserRouter } from "react-router-dom"; - +import "./translations/i18n"; import * as serviceWorker from "./serviceWorker"; import "./index.css"; diff --git a/client/src/pages/jobs/jobs.page.jsx b/client/src/pages/jobs/jobs.page.jsx index 3bcf197de..4a30fc3f5 100644 --- a/client/src/pages/jobs/jobs.page.jsx +++ b/client/src/pages/jobs/jobs.page.jsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useEffect } from "react"; import { useSubscription } from "@apollo/react-hooks"; import AlertComponent from "../../components/alert/alert.component"; import { Col } from "antd"; @@ -10,10 +10,10 @@ export default function JobsPage() { const { loading, error, data } = useSubscription(SUBSCRIPTION_ALL_OPEN_JOBS, { fetchPolicy: "network-only" }); - + useEffect(() => { - document.title = "new title" - }, []); + document.title = "new title"; + }, []); if (error) return ; diff --git a/client/src/translations/en/common.json b/client/src/translations/en/common.json deleted file mode 100644 index 7e0d476fb..000000000 --- a/client/src/translations/en/common.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "welcome": { - "title": "Welcome to {{framework}}", - "intro": "To get started, edit <1><0> and save to reload." - } -} \ No newline at end of file diff --git a/client/src/translations/en_us/common.json b/client/src/translations/en_us/common.json new file mode 100644 index 000000000..cf7790ade --- /dev/null +++ b/client/src/translations/en_us/common.json @@ -0,0 +1,22 @@ +{ + "translation": { + "general": { + "languages": { + "english": "English", + "french": "French", + "spanish": "Spanish" + }, + "title": "Welcome to {{framework}}", + "greetings": "Hello2!", + "intro": "To get started, edit <1><0> and save to reload." + }, + "whiteboard": { + "viewJobImages": "View Job Images", + "printCenter": "Print Center", + "postInvoices": "Post Invoices", + "notes": "Job Notes", + "partStatus": "Part Status", + "receiveParts": "Receive Parts" + } + } +} diff --git a/client/src/translations/es/common.json b/client/src/translations/es/common.json index 7e0d476fb..d9900b975 100644 --- a/client/src/translations/es/common.json +++ b/client/src/translations/es/common.json @@ -1,6 +1,9 @@ { - "welcome": { - "title": "Welcome to {{framework}}", - "intro": "To get started, edit <1><0> and save to reload." + "translation": { + "general": { + "title": "Hola a {{framework}}", + "greetings": "Hola!", + "intro": "To get started, edit <1><0> and save to reload." } -} \ No newline at end of file + } +} diff --git a/client/src/translations/fr/common.json b/client/src/translations/fr/common.json index 3f54dbcce..015f13867 100644 --- a/client/src/translations/fr/common.json +++ b/client/src/translations/fr/common.json @@ -1,6 +1,22 @@ { - "welcome": { + "translation": { + "general": { + "languages": { + "english": "Anglais", + "french": "Francais", + "spanish": "Espanol" + }, "title": "Welcome to {{framework}}", + "greetings": "Hello2!", "intro": "To get started, edit <1><0> and save to reload." + }, + "whiteboard": { + "viewJobImages": "Viewez le Job Images", + "printCenter": "Printez Centre", + "postInvoices": "Postez le Invoices", + "notes": "Le Job Notes", + "partStatus": "Status de Parts", + "receiveParts": "Receive Parts" + } } -} \ No newline at end of file +} diff --git a/client/src/translations/i18n.js b/client/src/translations/i18n.js new file mode 100644 index 000000000..3ddd99c33 --- /dev/null +++ b/client/src/translations/i18n.js @@ -0,0 +1,29 @@ +import i18n from "i18next"; +import { initReactI18next } from "react-i18next"; +import en_Translation from "./en_us/common.json"; +import fr_Translation from "./fr/common.json"; +import es_Translation from "./es/common.json"; + +// the translations +// (tip move them in a JSON file and import them) +const resources = { + en_us: en_Translation, + fr: fr_Translation, + es: es_Translation +}; +i18n + .use(initReactI18next) // passes i18n down to react-i18next + .init({ + resources, + lng: "en_us", + fallbackLng: "en-us", + debug: true, + + //keySeparator: false, // we do not use keys in form messages.welcome + + interpolation: { + escapeValue: false // react already safes from xss + } + }); + +export default i18n;