Added CDN resized thumb retrieval.

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

@@ -1,11 +1,11 @@
-import React, { useState } from "react";
+import { Button, Icon, Modal, notification, Upload } from "antd";
-import { useTranslation } from "react-i18next";
-import { Upload, Modal, Icon, notification } from "antd";
 import axios from "axios";
-import "./jobs-documents.styles.scss";
+import React, { useState } from "react";
-import Resizer from "react-image-file-resizer";
 import { useMutation } from "react-apollo";
+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";
 
 function getBase64(file) {
   return new Promise((resolve, reject) => {
@@ -148,8 +148,34 @@ function JobsDocumentsComponent({ shopId, jobId, loading, data }) {
   //   </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)}`;
+
   return (
     <div className='clearfix'>
+      <Button
+        onClick={() => {
+          console.log("btn click");
+          console.log("data", data);
+        }}>
+        Test Request
+      </Button>
+      <img src={url} alt='test' />
       <Upload.Dragger
         customRequest={handleUpload}
         accept='.pdf,.jpg,.jpeg'