Fixed scaling of images. Fixed server.js issues for production

client/src/components/job-detail-cards/job-detail-cards.customer.component.jsx

@@ -10,8 +10,7 @@ export default function JobDetailCardsCustomerComponent({ loading, data }) {
     <CardTemplate
       loading={loading}
       title={t("jobs.labels.cards.customer")}
-      extraLink={data?.owner ? `/manage/owners/${data?.owner?.id}` : null}
-    >
+      extraLink={data?.owner ? `/manage/owners/${data?.owner?.id}` : null}>
       {data ? (
         <span>
           <div>{`${data?.pit_owner_first_name ??
@@ -25,7 +24,7 @@ export default function JobDetailCardsCustomerComponent({ loading, data }) {
             </a>
           ) : null}
 
-          <div>{`${data?.owner.preferred_contact ?? ""}`}</div>
+          <div>{`${data?.owner?.preferred_contact ?? ""}`}</div>
         </span>
       ) : null}
     </CardTemplate>

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

@@ -23,7 +23,7 @@ export default function JobsDocumentsContainer({ jobId }) {
 
   return (
     <JobDocuments
-      data={data}
+      data={data.documents}
       jobId={jobId}
       shopId={
         shopData.data?.bodyshops[0]?.id

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

@@ -1,10 +1,11 @@
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Upload, Modal, Icon, Button } from "antd";
+import { Upload, Modal, Icon, notification } from "antd";
 import axios from "axios";
 import "./jobs-documents.styles.scss";
 import Resizer from "react-image-file-resizer";
-//import { Resizer } from "../../utils/resizer";
+import { useMutation } from "react-apollo";
+import { INSERT_NEW_DOCUMENT } from "../../graphql/documents.queries";
 
 function getBase64(file) {
   return new Promise((resolve, reject) => {
@@ -16,11 +17,25 @@ function getBase64(file) {
 }
 
 function JobsDetailPage({ shopId, jobId, loading, data }) {
-  //const { t } = useTranslation();
+  const { t } = useTranslation();
+  const [insertNewDocument] = useMutation(INSERT_NEW_DOCUMENT);
+
+  console.log("data", data);
 
   const [state, setState] = useState({
     previewVisible: false,
     previewImage: "",
+
+    fl: data.reduce((acc, value) => {
+      acc.push({
+        uid: value.id,
+        url: value.url,
+        name: value.name,
+        status: "done"
+      });
+      return acc;
+    }, []),
+
     fileList: [
       {
         uid: "-1",
@@ -41,24 +56,22 @@ function JobsDetailPage({ shopId, jobId, loading, data }) {
     console.log("handleUpload Props:", ev);
     Resizer.imageFileResizer(
       ev.file,
-      3000,
-      3000,
+      3500,
+      3500,
       "JPEG",
-      85,
+      75,
       0,
       uri => {
-        let file = new File([uri], ev.file.name, {
-          //type: ev.file.type,
-          uid: ev.file.uid
-        });
-
+        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;
-        console.log("Preparing the upload ");
+        let key = `${shopId}/${jobId}/${fileName}`;
+        //URL is using the proxy set in pacakges.json.
         axios
           .post("/sign_s3", {
-            fileName: `${shopId}/${jobId}/${fileName}`,
+            fileName: key,
             fileType
           })
           .then(response => {
@@ -66,8 +79,6 @@ function JobsDetailPage({ shopId, jobId, loading, data }) {
             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: {
@@ -79,16 +90,40 @@ function JobsDetailPage({ shopId, jobId, loading, data }) {
               .put(signedRequest, file, options)
               .then(result => {
                 console.log("Response from s3", result);
+
+                insertNewDocument({
+                  variables: {
+                    docInput: [
+                      {
+                        jobid: jobId,
+                        uploaded_by: "patrick@bodyshop.app",
+                        url,
+                        thumb_url: url
+                      }
+                    ]
+                  }
+                }).then(r => {
+                  console.log(r);
+                  notification["success"]({
+                    message: t("documents.successes.insert")
+                  });
+                });
+
                 setState({ ...state, success: true });
               })
               .catch(error => {
-                console.log("Inside Error here.", error);
-                alert("ERROR " + JSON.stringify(error));
+                console.log("Error uploading to S3", error);
+                notification["error"]({
+                  message: t("documents.errors.insert") + JSON.stringify(error)
+                });
               });
           })
           .catch(error => {
             console.log("Outside Error here.", error);
-            alert(JSON.stringify(error));
+            notification["error"]({
+              message:
+                t("documents.errors.getpresignurl") + JSON.stringify(error)
+            });
           });
       },
       "blob"
@@ -115,7 +150,7 @@ function JobsDetailPage({ shopId, jobId, loading, data }) {
   const uploadButton = (
     <div>
       <Icon type='plus' />
-      <div className='ant-upload-text'>Upload</div>
+      <div className='ant-upload-text'>{t("documents.labels.upload")}</div>
     </div>
   );
 
@@ -123,11 +158,6 @@ function JobsDetailPage({ shopId, jobId, loading, data }) {
     <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}