From 62e71dfa5b187927e58a32fbb7e3430494cff404 Mon Sep 17 00:00:00 2001
From: Patrick Fic <patrick@thinkimex.com>
Date: Mon, 6 Jan 2020 19:55:58 -0800
Subject: [PATCH] Update actions menu for jobs list.

---
 .../jobs-list/jobs-list.component.jsx         | 46 +++++++++++++++----
 .../white-board-card.component.jsx            | 12 ++---
 client/src/graphql/apollo-error-handling.js   |  8 ++--
 client/src/translations/en_us/common.json     | 21 +++++----
 4 files changed, 59 insertions(+), 28 deletions(-)

diff --git a/client/src/components/jobs-list/jobs-list.component.jsx b/client/src/components/jobs-list/jobs-list.component.jsx
index f69a65087..c6220b4a2 100644
--- a/client/src/components/jobs-list/jobs-list.component.jsx
+++ b/client/src/components/jobs-list/jobs-list.component.jsx
@@ -1,13 +1,44 @@
 import React, { useState } from "react";
 import { Link } from "react-router-dom";
-import { Table, Divider, Icon, Input } from "antd";
+import { Table, Icon, Input, Dropdown, Menu } from "antd";
 import { alphaSort } from "../../utils/sorters";
+import { useTranslation } from "react-i18next";
 
 export default function JobsPage({ loading, jobs }) {
   const [state, setState] = useState({
     sortedInfo: {},
     filteredInfo: { text: "" }
   });
+  const { t } = useTranslation();
+
+  const actionMenu = (
+    <Menu>
+      <Menu.Item key="images">
+        <Icon type="file-image" />
+        {t("jobs.actions.viewJobImages")}
+      </Menu.Item>
+      <Menu.Item key="printing">
+        <Icon type="printer" />
+        {t("jobs.actions.printCenter")}
+      </Menu.Item>
+      <Menu.Item key="notes">
+        <Icon type="edit" />
+        {t("jobs.actions.notes")}
+      </Menu.Item>
+      <Menu.Item key="postinvoices">
+        <Icon type="shopping-cart" />
+        {t("jobs.actions.postInvoices")}
+      </Menu.Item>
+      <Menu.Item key="receiveparts">
+        <Icon type="inbox" />
+        {t("jobs.actions.receiveParts")}
+      </Menu.Item>
+      <Menu.Item key="partstatus">
+        <Icon type="tool" />
+        {t("jobs.actions.partStatus")}
+      </Menu.Item>
+    </Menu>
+  );
 
   const columns = [
     {
@@ -76,12 +107,9 @@ export default function JobsPage({ loading, jobs }) {
       title: "Action",
       key: "action",
       render: (text, record) => (
-        <span>
-          Action 一 {record.ro_number}
-          <Divider type='vertical' />
-          <Divider type='vertical' />
-          More actions <Icon type='down' />
-        </span>
+        <Dropdown overlay={actionMenu} trigger={["click"]}>
+          <Icon type="ellipsis" />
+        </Dropdown>
       )
     }
   ];
@@ -97,12 +125,12 @@ export default function JobsPage({ loading, jobs }) {
 
   return (
     <div>
-      <Input name='searchCriteria' onChange={handleChange} />
+      <Input name="searchCriteria" onChange={handleChange} />
       <Table
         loading={loading}
         pagination={{ position: "bottom" }}
         columns={columns.map(item => ({ ...item }))}
-        rowKey='id'
+        rowKey="id"
         dataSource={jobs}
         onChange={handleTableChange}
       />
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 9c0a6fa42..fbbcfa358 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
@@ -33,27 +33,27 @@ export default function WhiteBoardCard({ metadata }) {
     <Menu>
       <Menu.Item key="images">
         <Icon type="file-image" />
-        {t("whiteboard.viewJobImages")}
+        {t("jobs.actions.viewJobImages")}
       </Menu.Item>
       <Menu.Item key="printing">
         <Icon type="printer" />
-        {t("whiteboard.printCenter")}
+        {t("jobs.actions.printCenter")}
       </Menu.Item>
       <Menu.Item key="notes">
         <Icon type="edit" />
-        {t("whiteboard.notes")}
+        {t("jobs.actions.notes")}
       </Menu.Item>
       <Menu.Item key="postinvoices">
         <Icon type="shopping-cart" />
-        {t("whiteboard.postInvoices")}
+        {t("jobs.actions.postInvoices")}
       </Menu.Item>
       <Menu.Item key="receiveparts">
         <Icon type="inbox" />
-        {t("whiteboard.receiveParts")}
+        {t("jobs.actions.receiveParts")}
       </Menu.Item>
       <Menu.Item key="partstatus">
         <Icon type="tool" />
-        {t("whiteboard.partStatus")}
+        {t("jobs.actions.partStatus")}
       </Menu.Item>
     </Menu>
   );
diff --git a/client/src/graphql/apollo-error-handling.js b/client/src/graphql/apollo-error-handling.js
index 59d992097..4e82df059 100644
--- a/client/src/graphql/apollo-error-handling.js
+++ b/client/src/graphql/apollo-error-handling.js
@@ -4,11 +4,11 @@ import { auth } from "../firebase/firebase.utils";
 //https://stackoverflow.com/questions/57163454/refreshing-a-token-with-apollo-client-firebase-auth
 const errorLink = onError(
   ({ graphQLErrors, networkError, operation, forward }) => {
-    console.log("In gql error")
     let access_token = window.localStorage.getItem("token");
     if (graphQLErrors) {
       // User access token has expired
       if (graphQLErrors[0].message.includes("JWTExpired")) {
+        console.log("Got to the error check.");
         if (access_token && access_token !== "undefined") {
           // Let's refresh token through async request
           return new Observable(observer => {
@@ -19,7 +19,7 @@ const errorLink = onError(
                   window.localStorage.removeItem("token");
                   return console.log("Refresh token has expired");
                 }
-
+                console.log("Got a new token", idToken);
                 window.localStorage.setItem("token", idToken);
 
                 // reset the headers
@@ -31,17 +31,19 @@ const errorLink = onError(
                     authorization: idToken ? `Bearer ${idToken}` : ""
                   }
                 }));
+
                 const subscriber = {
                   next: observer.next.bind(observer),
                   error: observer.error.bind(observer),
                   complete: observer.complete.bind(observer)
                 };
-
+                console.log("About to resend the request.");
                 // Retry last failed request
                 forward(operation).subscribe(subscriber);
               })
               .catch(error => {
                 // No refresh or client token available, we force user to login
+                console.log("Hit an error.");
                 observer.error(error);
               });
           });
diff --git a/client/src/translations/en_us/common.json b/client/src/translations/en_us/common.json
index cf205f62a..19d33ed55 100644
--- a/client/src/translations/en_us/common.json
+++ b/client/src/translations/en_us/common.json
@@ -58,17 +58,18 @@
         "validationtitle": "Validation Error",
         "validation": "Please ensure all fields are entered correctly.",
         "saving": "Error encountered while saving record."
+      },
+      "actions": {
+        "viewJobImages": "View Job Images",
+        "printCenter": "Print Center",
+        "postInvoices": "Post Invoices",
+        "notes": "Job Notes",
+        "partStatus": "Part Status",
+        "receiveParts": "Receive Parts",
+        "card": {}
       }
-    },
-
-    "whiteboard": {
-      "viewJobImages": "View Job Images",
-      "printCenter": "Print Center",
-      "postInvoices": "Post Invoices",
-      "notes": "Job Notes",
-      "partStatus": "Part Status",
-      "receiveParts": "Receive Parts",
-      "card": {}
     }
+
+
   }
 }