Images upload as resized images. Added location hash for jobs detail page.

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

@@ -0,0 +1,35 @@
+import React from "react";
+import { useQuery } from "react-apollo";
+import { QUERY_SHOP_ID } from "../../graphql/bodyshop.queries";
+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.page";
+
+export default function JobsDocumentsContainer({ jobId }) {
+  const { loading, error, data } = useQuery(GET_DOCUMENTS_BY_JOB, {
+    variables: { jobId: jobId },
+    fetchPolicy: "network-only"
+  });
+
+  const shopData = useQuery(QUERY_SHOP_ID, {
+    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} />;
+
+  return (
+    <JobDocuments
+      data={data}
+      jobId={jobId}
+      shopId={
+        shopData.data?.bodyshops[0]?.id
+          ? shopData.data?.bodyshops[0]?.id
+          : "error"
+      }
+    />
+  );
+}

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

@@ -0,0 +1,145 @@
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Upload, Modal, Icon, Button } from "antd";
+import axios from "axios";
+import "./jobs-documents.styles.scss";
+import Resizer from "react-image-file-resizer";
+//import { Resizer } from "../../utils/resizer";
+
+function getBase64(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => resolve(reader.result);
+    reader.onerror = error => reject(error);
+  });
+}
+
+function JobsDetailPage({ shopId, jobId, loading, data }) {
+  //const { t } = useTranslation();
+
+  const [state, setState] = useState({
+    previewVisible: false,
+    previewImage: "",
+    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);
+    Resizer.imageFileResizer(
+      ev.file,
+      3000,
+      3000,
+      "JPEG",
+      85,
+      0,
+      uri => {
+        let file = new File([uri], ev.file.name, {
+          //type: ev.file.type,
+          uid: ev.file.uid
+        });
+
+        // Split the filename to get the name and type
+        let fileName = file.name;
+        let fileType = file.type;
+        console.log("Preparing the upload ");
+        axios
+          .post("/sign_s3", {
+            fileName: `${shopId}/${jobId}/${fileName}`,
+            fileType
+          })
+          .then(response => {
+            var returnData = response.data.data.returnData;
+            var signedRequest = returnData.signedRequest;
+            var url = returnData.url;
+            setState({ ...state, url: url });
+            console.log("Recieved a signed request " + signedRequest);
+
+            // Put the fileType in the headers for the upload
+            var options = {
+              headers: {
+                "Content-Type": fileType
+              }
+            };
+
+            axios
+              .put(signedRequest, file, options)
+              .then(result => {
+                console.log("Response from s3", result);
+                setState({ ...state, success: true });
+              })
+              .catch(error => {
+                console.log("Inside Error here.", error);
+                alert("ERROR " + JSON.stringify(error));
+              });
+          })
+          .catch(error => {
+            console.log("Outside Error here.", error);
+            alert(JSON.stringify(error));
+          });
+      },
+      "blob"
+    );
+  };
+
+  const handleCancel = () => setState({ ...state, previewVisible: false });
+
+  const handlePreview = async file => {
+    if (!file.url && !file.preview) {
+      file.preview = await getBase64(file.originFileObj);
+    }
+
+    setState({
+      ...state,
+      previewImage: file.url || file.preview,
+      previewVisible: true
+    });
+  };
+
+  const handleChange = ({ fileList }) => setState({ ...state, fileList });
+
+  const { previewVisible, previewImage, fileList } = state;
+  const uploadButton = (
+    <div>
+      <Icon type='plus' />
+      <div className='ant-upload-text'>Upload</div>
+    </div>
+  );
+
+  return (
+    <div className='clearfix'>
+      <Upload
+        customRequest={handleUpload}
+        data={file => ({
+          photoCotent: file, // file is currently uploading pictures
+          photoWidth: file.height, // Get the width and height of the picture by handleBeforeUpload
+          photoHeight: file.width
+        })}
+        accept='.pdf,.jpg,.jpeg'
+        listType='picture-card'
+        fileList={fileList}
+        multiple={true}
+        onPreview={handlePreview}
+        onChange={handleChange}>
+        {uploadButton}
+      </Upload>
+      <Modal visible={previewVisible} footer={null} onCancel={handleCancel}>
+        <img alt='example' style={{ width: "100%" }} src={previewImage} />
+      </Modal>
+    </div>
+  );
+}
+export default JobsDetailPage;

client/src/components/jobs-documents/jobs-documents.styles.scss

@@ -0,0 +1,10 @@
+/* you can make up upload button and sample style by using stylesheets */
+.ant-upload-select-picture-card i {
+  font-size: 32px;
+  color: #999;
+}
+
+.ant-upload-select-picture-card .ant-upload-text {
+  margin-top: 8px;
+  color: #666;
+}