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