Added langauge localization files to use masterdata and futureproof translations.

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 (
-    <Option key={item.category} text={item.category}>
-      <div className='global-search-item'>
-        <span className='global-search-item-desc'>
-          Found {item.query} on
-          <a
-            href={`https://s.taobao.com/search?q=${item.query}`}
-            target='_blank'
-            rel='noopener noreferrer'>
-            {item.category}
-          </a>
-        </span>
-        <span className='global-search-item-count'>{item.count} results</span>
-      </div>
-    </Option>
-  );
-}
+// function renderOption(item) {
+//   return (
+//     <Option key={item.category} text={item.category}>
+//       <div className='global-search-item'>
+//         <span className='global-search-item-desc'>
+//           Found {item.query} on
+//           <a
+//             href={`https://s.taobao.com/search?q=${item.query}`}
+//             target='_blank'
+//             rel='noopener noreferrer'>
+//             {item.category}
+//           </a>
+//         </span>
+//         <span className='global-search-item-count'>{item.count} results</span>
+//       </div>
+//     </Option>
+//   );
+// }
 
 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 (
       <div />
       // <div style={{ width: 300 }}>

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 (
     <Menu
-      theme="dark"
-      className="header"
+      theme='dark'
+      className='header'
       onClick={handleClick}
       selectedKeys={selectedNavItem}
-      mode="horizontal"
-    >
+      mode='horizontal'>
       <Menu.Item>
         <GlobalSearch />
       </Menu.Item>
@@ -43,6 +44,8 @@ export default ({ landingHeader, navItems, selectedNavItem }) => {
           <ManageSignInButton />
         </Menu.Item>
       )}
+
+      {!landingHeader ? <LanguageSelector /> : null}
     </Menu>
   );
 };

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 = (
+    <Menu onClick={handleMenuClick}>
+      <Menu.Item key='en_us'>{t("general.languages.english")}</Menu.Item>
+      <Menu.Item key='fr'>{t("general.languages.french")}</Menu.Item>
+      <Menu.Item key='es'>{t("general.languages.spanish")}</Menu.Item>
+    </Menu>
+  );
+  return (
+    <Dropdown overlay={menu}>
+      <Icon type='global' />
+    </Dropdown>
+  );
+}

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 = (
     <Menu>
       <Menu.Item key='images'>
         <Icon type='file-image' />
-        View Job Images
+        {t("whiteboard.viewJobImages")}
       </Menu.Item>
       <Menu.Item key='printing'>
         <Icon type='printer' />
-        Printing
+        {t("whiteboard.printCenter")}
       </Menu.Item>
       <Menu.Item key='notes'>
         <Icon type='edit' />
-        Job Notes
+        {t("whiteboard.notes")}
       </Menu.Item>
       <Menu.Item key='postinvoices'>
         <Icon type='shopping-cart' />
-        Post Invoices
+        {t("whiteboard.postInvoices")}
       </Menu.Item>
       <Menu.Item key='receiveparts'>
         <Icon type='inbox' />
-        Receive Parts
+        {t("whiteboard.receiveParts")}
       </Menu.Item>
       <Menu.Item key='partstatus'>
         <Icon type='tool' />
-        Parts Status
+        {t("whiteboard.partStatus")}
       </Menu.Item>
     </Menu>
   );

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";

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 <AlertComponent message={error.message} />;
 

client/src/translations/en/common.json

@@ -1,6 +0,0 @@
-{
-    "welcome": {
-        "title": "Welcome to {{framework}}",
-        "intro": "To get started, edit <1><0></0></1> and save to reload."
-    }
-}

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></0></1> and save to reload."
+    },
+    "whiteboard": {
+      "viewJobImages": "View Job Images",
+      "printCenter": "Print Center",
+      "postInvoices": "Post Invoices",
+      "notes": "Job Notes",
+      "partStatus": "Part Status",
+      "receiveParts": "Receive Parts"
+    }
+  }
+}

client/src/translations/es/common.json

@@ -1,6 +1,9 @@
 {
-    "welcome": {
-        "title": "Welcome to {{framework}}",
-        "intro": "To get started, edit <1><0></0></1> and save to reload."
+  "translation": {
+    "general": {
+      "title": "Hola a {{framework}}",
+      "greetings": "Hola!",
+      "intro": "To get started, edit <1><0></0></1> and save to reload."
     }
-}
+  }
+}

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></0></1> 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"
+    }
   }
-}
+}

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;