Added CDN thumb generation.

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

@@ -6,6 +6,7 @@ import { useTranslation } from "react-i18next";
 import Resizer from "react-image-file-resizer";
 import { INSERT_NEW_DOCUMENT } from "../../graphql/documents.queries";
 import "./jobs-documents.styles.scss";
+import { generateCdnThumb } from "../../utils/DocHelpers";
 
 function getBase64(file) {
   return new Promise((resolve, reject) => {
@@ -16,7 +17,7 @@ function getBase64(file) {
   });
 }
 
-function JobsDocumentsComponent({ shopId, jobId, loading, data }) {
+function JobsDocumentsComponent({ shopId, jobId, loading, data, currentUser }) {
   const { t } = useTranslation();
   const [insertNewDocument] = useMutation(INSERT_NEW_DOCUMENT);
 
@@ -29,37 +30,25 @@ function JobsDocumentsComponent({ shopId, jobId, loading, data }) {
     data.reduce((acc, value) => {
       acc.push({
         uid: value.id,
-        url: value.url,
+        url: value.thumb_url,
         name: value.name,
-        status: "done",
+        status: "done"
-        thumUrl:
-          "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
       });
       return acc;
     }, [])
   );
 
-  const handleUpload = ev => {
+  const uploadToS3 = (
-    const { onError, onSuccess, onProgress } = ev;
+    fileName,
-
+    fileType,
-    Resizer.imageFileResizer(
+    file,
-      ev.file,
+    onError,
-      3000,
+    onSuccess,
-      3000,
+    onProgress
-      "JPEG",
+  ) => {
-      75,
-      0,
-      uri => {
-        let file = new File([uri], ev.file.name, {});
-        file.uid = ev.file.uid;
-        // Split the filename to get the name and type
-        let fileName = file.name;
-        let fileType = file.type;
-        let key = `${shopId}/${jobId}/${fileName}`;
-        //URL is using the proxy set in pacakges.json.
     axios
       .post("/sign_s3", {
-            fileName: key,
+        fileName,
         fileType
       })
       .then(response => {
@@ -86,9 +75,10 @@ function JobsDocumentsComponent({ shopId, jobId, loading, data }) {
                 docInput: [
                   {
                     jobid: jobId,
-                        uploaded_by: "patrick@bodyshop.app",
+                    uploaded_by: currentUser.email,
                     url,
-                        thumb_url: url
+                    thumb_url: generateCdnThumb(fileName),
+                    key: fileName
                   }
                 ]
               }
@@ -112,15 +102,36 @@ function JobsDocumentsComponent({ shopId, jobId, loading, data }) {
       .catch(error => {
         console.log("Outside Error here.", error);
         notification["error"]({
-              message:
+          message: t("documents.errors.getpresignurl") + JSON.stringify(error)
-                t("documents.errors.getpresignurl") + JSON.stringify(error)
         });
       });
+  };
+
+  const handleUpload = ev => {
+    const { onError, onSuccess, onProgress } = ev;
+    //If PDF, upload directly.
+    //If JPEG, resize and upload.
+    let key = `${shopId}/${jobId}/${ev.file.name}`;
+    if (ev.file.type === "application/pdf") {
+      console.log("It's a PDF.");
+      uploadToS3(key, ev.file.type, ev.file, onError, onSuccess, onProgress);
+    } else {
+      Resizer.imageFileResizer(
+        ev.file,
+        3000,
+        3000,
+        "JPEG",
+        75,
+        0,
+        uri => {
+          let file = new File([uri], ev.file.name, {});
+          file.uid = ev.file.uid;
+          uploadToS3(key, file.type, file, onError, onSuccess, onProgress);
         },
         "blob"
       );
+    }
   };
-
   const handleCancel = () => setState({ ...state, previewVisible: false });
 
   const handlePreview = async file => {
@@ -136,26 +147,19 @@ function JobsDocumentsComponent({ shopId, jobId, loading, data }) {
   };
   const handleChange = props => {
     const { fileList } = props;
-    console.log("New fileList", fileList);
     setFileList(fileList);
   };
 
   const { previewVisible, previewImage } = state;
-  // const uploadButton = (
-  //   <div>
-  //     <Icon type='plus' />
-  //     <div className='ant-upload-text'>{t("documents.labels.upload")}</div>
-  //   </div>
-  // );
 
-  console.log(
+  return (
-    "process.env.REACT_APP_S3_BUCKET",
+    <div className='clearfix'>
-    process.env.REACT_APP_S3_BUCKET
+      <button
-  );
+        onClick={() => {
           const imageRequest = JSON.stringify({
             bucket: process.env.REACT_APP_S3_BUCKET,
             key:
-      "52b7357c-0edd-4c95-85c3-dfdbcdfad9ac/f11e92a4-8a7d-4ec0-86ac-2f46b631e438/thumb-1920-459857.jpg",
+              "52b7357c-0edd-4c95-85c3-dfdbcdfad9ac/c8ca5761-681a-4bb3-ab76-34c447357be3/Invoice_353284489.pdf",
             edits: {
               resize: {
                 height: 100,
@@ -166,8 +170,9 @@ function JobsDocumentsComponent({ shopId, jobId, loading, data }) {
           const CloudFrontUrl = "https://d18fc493a0fm4o.cloudfront.net";
           const url = `${CloudFrontUrl}/${btoa(imageRequest)}`;
           console.log("url", url);
-  return (
+        }}>
-    <div className='clearfix'>
+        H
+      </button>
       <Upload.Dragger
         customRequest={handleUpload}
         accept='.pdf,.jpg,.jpeg'

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

@@ -5,6 +5,7 @@ import { GET_DOCUMENTS_BY_JOB } from "../../graphql/documents.queries";
 import AlertComponent from "../alert/alert.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 import JobDocuments from "./jobs-documents.component";
+import { GET_CURRENT_USER } from "../../graphql/local.queries";
 
 export default function JobsDocumentsContainer({ jobId }) {
   const { loading, error, data } = useQuery(GET_DOCUMENTS_BY_JOB, {
@@ -16,15 +17,22 @@ export default function JobsDocumentsContainer({ jobId }) {
     fetchPolicy: "network-only"
   });
 
-  if (loading || shopData.loading) return <LoadingSpinner />;
+  const user = useQuery(GET_CURRENT_USER);
-  if (error) return <AlertComponent type='error' message={error.message} />;
+
-  if (shopData.error)
+  if (loading || shopData.loading || user.loading) return <LoadingSpinner />;
-    return <AlertComponent type='error' message={shopData.error.message} />;
+  if (error || shopData.error || user.error)
+    return (
+      <AlertComponent
+        type='error'
+        message={error.message || shopData.error.message || user.error.message}
+      />
+    );
 
   return (
     <JobDocuments
       data={data.documents}
       jobId={jobId}
+      currentUser={user.data.currentUser}
       shopId={
         shopData.data?.bodyshops[0]?.id
           ? shopData.data?.bodyshops[0]?.id

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

@@ -10,7 +10,6 @@ import JobNotesContainer from "../../components/jobs-notes/jobs-notes.container"
 
 function JobsDetailPage({ jobId, hash, data, match, history }) {
   const { t } = useTranslation();
-  console.log("hash", hash);
   return (
     <div>
       <Row>

client/src/utils/DocHelpers.js

@@ -0,0 +1,13 @@
+export const generateCdnThumb = key => {
+  const imageRequest = JSON.stringify({
+    bucket: process.env.REACT_APP_S3_BUCKET,
+    key: key,
+    edits: {
+      resize: {
+        height: 100,
+        width: 100
+      }
+    }
+  });
+  return `${process.env.REACT_APP_S3_CDN}/${btoa(imageRequest)}`;
+};