Added CDN thumb generation.

2020-01-24 11:03:33 -08:00
parent 32ce90ec9c
commit 5f256c204d
4 changed files with 130 additions and 105 deletions
--- a/client/src/components/jobs-documents/jobs-documents.component.jsx
+++ b/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,98 +30,108 @@ 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",
-        thumUrl:
-          "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        status: "done"
      });
      return acc;
    }, [])
  );

-  const handleUpload = ev => {
-    const { onError, onSuccess, onProgress } = ev;
+  const uploadToS3 = (
+    fileName,
+    fileType,
+    file,
+    onError,
+    onSuccess,
+    onProgress
+  ) => {
+    axios
+      .post("/sign_s3", {
+        fileName,
+        fileType
+      })
+      .then(response => {
+        var returnData = response.data.data.returnData;
+        var signedRequest = returnData.signedRequest;
+        var url = returnData.url;
+        setState({ ...state, url: url });
+        // Put the fileType in the headers for the upload
+        var options = {
+          headers: {
+            "Content-Type": fileType
+          },
+          onUploadProgress: e => {
+            onProgress({ percent: (e.loaded / e.total) * 100 });
+          }
+        };

-    Resizer.imageFileResizer(
-      ev.file,
-      3000,
-      3000,
-      "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,
-            fileType
-          })
+          .put(signedRequest, file, options)
          .then(response => {
-            var returnData = response.data.data.returnData;
-            var signedRequest = returnData.signedRequest;
-            var url = returnData.url;
-            setState({ ...state, url: url });
-            // Put the fileType in the headers for the upload
-            var options = {
-              headers: {
-                "Content-Type": fileType
-              },
-              onUploadProgress: e => {
-                onProgress({ percent: (e.loaded / e.total) * 100 });
-              }
-            };
-
-            axios
-              .put(signedRequest, file, options)
-              .then(response => {
-                onSuccess(response.body);
-                insertNewDocument({
-                  variables: {
-                    docInput: [
-                      {
-                        jobid: jobId,
-                        uploaded_by: "patrick@bodyshop.app",
-                        url,
-                        thumb_url: url
-                      }
-                    ]
+            onSuccess(response.body);
+            insertNewDocument({
+              variables: {
+                docInput: [
+                  {
+                    jobid: jobId,
+                    uploaded_by: currentUser.email,
+                    url,
+                    thumb_url: generateCdnThumb(fileName),
+                    key: fileName
                  }
-                }).then(r => {
-                  console.log(r);
-                  notification["success"]({
-                    message: t("documents.successes.insert")
-                  });
-                });
-
-                setState({ ...state, success: true });
-              })
-              .catch(error => {
-                console.log("Error uploading to S3", error);
-                onError(error);
-                notification["error"]({
-                  message: t("documents.errors.insert") + JSON.stringify(error)
-                });
+                ]
+              }
+            }).then(r => {
+              console.log(r);
+              notification["success"]({
+                message: t("documents.successes.insert")
              });
+            });
+
+            setState({ ...state, success: true });
          })
          .catch(error => {
-            console.log("Outside Error here.", error);
+            console.log("Error uploading to S3", error);
+            onError(error);
            notification["error"]({
-              message:
-                t("documents.errors.getpresignurl") + JSON.stringify(error)
+              message: t("documents.errors.insert") + JSON.stringify(error)
            });
          });
-      },
-      "blob"
-    );
+      })
+      .catch(error => {
+        console.log("Outside Error here.", error);
+        notification["error"]({
+          message: 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,38 +147,32 @@ 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(
-    "process.env.REACT_APP_S3_BUCKET",
-    process.env.REACT_APP_S3_BUCKET
-  );
-  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",
-    edits: {
-      resize: {
-        height: 100,
-        width: 100
-      }
-    }
-  });
-  const CloudFrontUrl = "https://d18fc493a0fm4o.cloudfront.net";
-  const url = `${CloudFrontUrl}/${btoa(imageRequest)}`;
-  console.log("url", url);
  return (
    <div className='clearfix'>
+      <button
+        onClick={() => {
+          const imageRequest = JSON.stringify({
+            bucket: process.env.REACT_APP_S3_BUCKET,
+            key:
+              "52b7357c-0edd-4c95-85c3-dfdbcdfad9ac/c8ca5761-681a-4bb3-ab76-34c447357be3/Invoice_353284489.pdf",
+            edits: {
+              resize: {
+                height: 100,
+                width: 100
+              }
+            }
+          });
+          const CloudFrontUrl = "https://d18fc493a0fm4o.cloudfront.net";
+          const url = `${CloudFrontUrl}/${btoa(imageRequest)}`;
+          console.log("url", url);
+        }}>
+        H
+      </button>
      <Upload.Dragger
        customRequest={handleUpload}
        accept='.pdf,.jpg,.jpeg'
--- a/client/src/components/jobs-documents/jobs-documents.container.jsx
+++ b/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 />;
-  if (error) return <AlertComponent type='error' message={error.message} />;
-  if (shopData.error)
-    return <AlertComponent type='error' message={shopData.error.message} />;
+  const user = useQuery(GET_CURRENT_USER);
+
+  if (loading || shopData.loading || user.loading) return <LoadingSpinner />;
+  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
--- a/client/src/pages/jobs-detail/jobs-detail.page.jsx
+++ b/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>
--- a/client/src/utils/DocHelpers.js
+++ b/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)}`;
+};