admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Patrick Fic
2020-01-16 09:55:16 -08:00
parent 2971c72f76
commit 26d56caf4e
4 changed files with 102 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
client/src/components/jobs-documents/jobs-documents.page.jsx
View File

@@ -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 = (
<div>
<Icon type='plus' />
<div className='ant-upload-text'>{t("documents.labels.upload")}</div>
</div>
);
const { previewVisible, previewImage } = state;
// const uploadButton = (
// <div>
// <Icon type='plus' />
// <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}
</Upload>
<p className='ant-upload-drag-icon'>
<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;

83
client/src/graphql/apollo-error-handling.js
View File

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

6
client/src/pages/jobs-detail/jobs-detail.page.jsx
View File

@@ -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>

23
server.js
View File

@@ -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 => {