Changed error handling for expired tokens. Changed document upload component. Adjusted express server order.

client/src/components/jobs-documents/jobs-documents.page.jsx

@@ -16,48 +16,36 @@ function getBase64(file) {
   });
 }
 
-function JobsDetailPage({ shopId, jobId, loading, data }) {
+function JobsDocumentsComponent({ shopId, jobId, loading, data }) {
   const { t } = useTranslation();
   const [insertNewDocument] = useMutation(INSERT_NEW_DOCUMENT);
 
-  console.log("data", data);
-
   const [state, setState] = useState({
     previewVisible: false,
-    previewImage: "",
+    previewImage: ""
+  });
 
-    fl: data.reduce((acc, value) => {
+  const [fileList, setFileList] = useState(
+    data.reduce((acc, value) => {
       acc.push({
         uid: value.id,
         url: value.url,
         name: value.name,
-        status: "done"
+        status: "done",
+        thumUrl:
+          "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
       });
       return acc;
-    }, []),
+    }, [])
-
+  );
-    fileList: [
-      {
-        uid: "-1",
-        name: "image.png",
-        status: "done",
-        url:
-          "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
-      },
-      {
-        uid: "-2",
-        name: "image.png",
-        status: "error"
-      }
-    ]
-  });
 
   const handleUpload = ev => {
-    console.log("handleUpload Props:", ev);
+    const { onError, onSuccess, onProgress } = ev;
+
     Resizer.imageFileResizer(
       ev.file,
-      3500,
+      3000,
-      3500,
+      3000,
       "JPEG",
       75,
       0,
@@ -83,14 +71,16 @@ function JobsDetailPage({ shopId, jobId, loading, data }) {
             var options = {
               headers: {
                 "Content-Type": fileType
+              },
+              onUploadProgress: e => {
+                onProgress({ percent: (e.loaded / e.total) * 100 });
               }
             };
 
             axios
               .put(signedRequest, file, options)
-              .then(result => {
+              .then(response => {
-                console.log("Response from s3", result);
+                onSuccess(response.body);
-
                 insertNewDocument({
                   variables: {
                     docInput: [
@@ -113,6 +103,7 @@ function JobsDetailPage({ shopId, jobId, loading, data }) {
               })
               .catch(error => {
                 console.log("Error uploading to S3", error);
+                onError(error);
                 notification["error"]({
                   message: t("documents.errors.insert") + JSON.stringify(error)
                 });
@@ -143,20 +134,23 @@ function JobsDetailPage({ shopId, jobId, loading, data }) {
       previewVisible: true
     });
   };
+  const handleChange = props => {
+    const { fileList } = props;
+    console.log("New fileList", fileList);
+    setFileList(fileList);
+  };
 
-  const handleChange = ({ fileList }) => setState({ ...state, fileList });
+  const { previewVisible, previewImage } = state;
-
+  // const uploadButton = (
-  const { previewVisible, previewImage, fileList } = state;
+  //   <div>
-  const uploadButton = (
+  //     <Icon type='plus' />
-    <div>
+  //     <div className='ant-upload-text'>{t("documents.labels.upload")}</div>
-      <Icon type='plus' />
+  //   </div>
-      <div className='ant-upload-text'>{t("documents.labels.upload")}</div>
+  // );
-    </div>
-  );
 
   return (
     <div className='clearfix'>
-      <Upload
+      <Upload.Dragger
         customRequest={handleUpload}
         accept='.pdf,.jpg,.jpeg'
         listType='picture-card'
@@ -164,12 +158,21 @@ function JobsDetailPage({ shopId, jobId, loading, data }) {
         multiple={true}
         onPreview={handlePreview}
         onChange={handleChange}>
-        {uploadButton}
+        <p className='ant-upload-drag-icon'>
-      </Upload>
+          <Icon type='inbox' />
+        </p>
+        <p className='ant-upload-text'>
+          Click or drag file to this area to upload
+        </p>
+        <p className='ant-upload-hint'>
+          Support for a single or bulk upload. Strictly prohibit from uploading
+          company data or other band files
+        </p>
+      </Upload.Dragger>
       <Modal visible={previewVisible} footer={null} onCancel={handleCancel}>
         <img alt='example' style={{ width: "100%" }} src={previewImage} />
       </Modal>
     </div>
   );
 }
-export default JobsDetailPage;
+export default JobsDocumentsComponent;

client/src/graphql/apollo-error-handling.js

@@ -9,52 +9,51 @@ const errorLink = onError(
     console.log("networkError", networkError);
     console.log("operation", operation);
     console.log("forward", forward);
-    if (graphQLErrors[0]?.message.includes("JWTExpired") || networkError?.message.includes("JWTExpired")) {
+    if (
+      graphQLErrors[0]?.message.includes("JWTExpired") ||
+      networkError?.message.includes("JWTExpired")
+    ) {
       //User access token has expired
-      console.log("graphQLErrors", graphQLErrors);
-      console.log(`[Network error]: ${networkError}`);
       //props.history.push("/network-error");
-      if (networkError?.message?.includes("JWTExpired")) {
+      console.log("We need a new token!");
-        console.log("Got to the error check.");
+      if (access_token && access_token !== "undefined") {
-        if (access_token && access_token !== "undefined") {
+        // Let's refresh token through async request
-          // Let's refresh token through async request
+        return new Observable(observer => {
-          return new Observable(observer => {
+          auth.currentUser
-            auth.currentUser
+            .getIdToken(true)
-              .getIdToken(true)
+            .then(function(idToken) {
-              .then(function(idToken) {
+              if (!idToken) {
-                if (!idToken) {
+                window.localStorage.removeItem("token");
-                  window.localStorage.removeItem("token");
+                return console.log("Refresh token has expired");
-                  return console.log("Refresh token has expired");
+              }
+              console.log("Got a new token", idToken);
+              window.localStorage.setItem("token", idToken);
+
+              // reset the headers
+              operation.setContext(({ headers = {} }) => ({
+                headers: {
+                  // Re-add old headers
+                  ...headers,
+                  // Switch out old access token for new one
+                  authorization: idToken ? `Bearer ${idToken}` : ""
                 }
-                console.log("Got a new token", idToken);
+              }));
-                window.localStorage.setItem("token", idToken);
 
-                // reset the headers
+              // const subscriber = {
-                operation.setContext(({ headers = {} }) => ({
+              //   next: observer.next.bind(observer),
-                  headers: {
+              //   error: observer.error.bind(observer),
-                    // Re-add old headers
+              //   complete: observer.complete.bind(observer)
-                    ...headers,
+              // };
-                    // Switch out old access token for new one
+              console.log("About to resend the request.");
-                    authorization: idToken ? `Bearer ${idToken}` : ""
+              // Retry last failed request
-                  }
+              forward(operation); //.subscribe(subscriber);
-                }));
+            })
-
+            .catch(error => {
-                // const subscriber = {
+              // No refresh or client token available, we force user to login
-                //   next: observer.next.bind(observer),
+              console.log("Hit an error.");
-                //   error: observer.error.bind(observer),
+              observer.error(error);
-                //   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);
-              });
-          });
-        }
       }
     }
   }

client/src/pages/jobs-detail/jobs-detail.page.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 import { useQuery } from "@apollo/react-hooks";
 import SpinComponent from "../../components/loading-spinner/loading-spinner.component";
 import AlertComponent from "../../components/alert/alert.component";
@@ -26,7 +26,7 @@ function JobsDetailPage({ match, location }) {
         });
   }, [loading, data, t]);
 
-  const [selectedTab, setSelectedTab] = useState(hash ? hash : "#lines");
+  //const [selectedTab, setSelectedTab] = useState(hash ? hash : "#lines");
   if (loading) return <SpinComponent />;
   if (error) return <AlertComponent message={error.message} type='error' />;
   return (
@@ -35,7 +35,7 @@ function JobsDetailPage({ match, location }) {
         <JobTombstone job={data.jobs_by_pk} />
       </Row>
       <Row>
-        <Tabs defaultActiveKey={selectedTab}>
+        <Tabs defaultActiveKey={hash ? hash : "#lines"}>
           <Tabs.TabPane
             tab={
               <span>

server.js

@@ -18,6 +18,14 @@ app.use(bodyParser.urlencoded({ extended: true }));
 app.use(enforce.HTTPS({ trustProtoHeader: true }));
 app.use(cors());
 
+var s3upload = require("./s3upload");
+app.post("/sign_s3", s3upload.sign_s3);
+app.get("/sign_s3", s3upload.get_s3);
+
+app.get("/test", function(req, res) {
+  res.json({ success: true });
+});
+
 if (process.env.NODE_ENV === "production") {
   app.use(express.static(path.join(__dirname, "client/build")));
 
@@ -30,18 +38,10 @@ if (process.env.NODE_ENV === "production") {
   });
 }
 
-var s3upload = require("./s3upload");
-app.post("/sign_s3", s3upload.sign_s3);
-app.get("/sign_s3", s3upload.get_s3);
-
-app.get("/test", function(req, res) {
-  res.json({ success: true });
-});
-
 if (process.env.NODE_ENV === "production") {
   app.listen(port, error => {
     if (error) throw error;
-    console.log("Server running on port " + port);
+    console.log("[PRODUCTION] Server running on port " + port);
   });
 } else {
   https
@@ -53,7 +53,10 @@ if (process.env.NODE_ENV === "production") {
       },
       app
     )
-    .listen(port);
+    .listen(port, error => {
+      if (error) throw error;
+      console.log("[DEV/STAGING] Mock HTTPS Server running on port " + port);
+    });
 }
 
 // app.listen(port, error => {