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