From 26d56caf4e5a382679fc6d91db53c75ec5e30cad Mon Sep 17 00:00:00 2001 From: Patrick Fic Date: Thu, 16 Jan 2020 09:55:16 -0800 Subject: [PATCH] Changed error handling for expired tokens. Changed document upload component. Adjusted express server order. --- .../jobs-documents/jobs-documents.page.jsx | 87 ++++++++++--------- client/src/graphql/apollo-error-handling.js | 83 +++++++++--------- .../pages/jobs-detail/jobs-detail.page.jsx | 6 +- server.js | 23 ++--- 4 files changed, 102 insertions(+), 97 deletions(-) diff --git a/client/src/components/jobs-documents/jobs-documents.page.jsx b/client/src/components/jobs-documents/jobs-documents.page.jsx index e936447a8..f520ae6aa 100644 --- a/client/src/components/jobs-documents/jobs-documents.page.jsx +++ b/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, - 3500, + 3000, + 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 => { - console.log("Response from s3", result); - + .then(response => { + 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, fileList } = state; - const uploadButton = ( -
- -
{t("documents.labels.upload")}
-
- ); + const { previewVisible, previewImage } = state; + // const uploadButton = ( + //
+ // + //
{t("documents.labels.upload")}
+ //
+ // ); return (
- - {uploadButton} - +

+ +

+

+ Click or drag file to this area to upload +

+

+ Support for a single or bulk upload. Strictly prohibit from uploading + company data or other band files +

+ example
); } -export default JobsDetailPage; +export default JobsDocumentsComponent; diff --git a/client/src/graphql/apollo-error-handling.js b/client/src/graphql/apollo-error-handling.js index 7770dfc7c..7c6ebcc53 100644 --- a/client/src/graphql/apollo-error-handling.js +++ b/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("Got to the error check."); - if (access_token && access_token !== "undefined") { - // Let's refresh token through async request - return new Observable(observer => { - auth.currentUser - .getIdToken(true) - .then(function(idToken) { - if (!idToken) { - window.localStorage.removeItem("token"); - return console.log("Refresh token has expired"); + console.log("We need a new token!"); + if (access_token && access_token !== "undefined") { + // Let's refresh token through async request + return new Observable(observer => { + auth.currentUser + .getIdToken(true) + .then(function(idToken) { + if (!idToken) { + 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 + 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 - operation.setContext(({ headers = {} }) => ({ - headers: { - // Re-add old headers - ...headers, - // Switch out old access token for new one - 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); - }); - }); - } + // 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/pages/jobs-detail/jobs-detail.page.jsx b/client/src/pages/jobs-detail/jobs-detail.page.jsx index 2c3b954c9..710cc4077 100644 --- a/client/src/pages/jobs-detail/jobs-detail.page.jsx +++ b/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 ; if (error) return ; return ( @@ -35,7 +35,7 @@ function JobsDetailPage({ match, location }) { - + diff --git a/server.js b/server.js index 3809dcba9..2648a0659 100644 --- a/server.js +++ b/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 => {