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

bodyshop_translations.babel

@@ -1,4 +1,4 @@
-<babeledit_project version="1.2" be_version="2.6.1">
+<babeledit_project be_version="2.6.1" version="1.2">
     <!--
 
     BabelEdit project file
@@ -18,6 +18,110 @@
             <folder_node>
                 <name>translation</name>
                 <children>
+                    <folder_node>
+                        <name>documents</name>
+                        <children>
+                            <folder_node>
+                                <name>errors</name>
+                                <children>
+                                    <concept_node>
+                                        <name>getpresignurl</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                    <concept_node>
+                                        <name>insert</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                </children>
+                            </folder_node>
+                            <folder_node>
+                                <name>labels</name>
+                                <children>
+                                    <concept_node>
+                                        <name>upload</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                </children>
+                            </folder_node>
+                            <folder_node>
+                                <name>successes</name>
+                                <children>
+                                    <concept_node>
+                                        <name>insert</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                </children>
+                            </folder_node>
+                        </children>
+                    </folder_node>
                     <folder_node>
                         <name>general</name>
                         <children>

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,
+      3500,
-      3000,
+      3500,
       "JPEG",
-      85,
+      75,
       0,
       uri => {
-        let file = new File([uri], ev.file.name, {
+        let file = new File([uri], ev.file.name, {});
-          //type: ev.file.type,
+        file.uid = ev.file.uid;
-          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);
+                console.log("Error uploading to S3", error);
-                alert("ERROR " + JSON.stringify(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}

client/src/graphql/documents.queries.js

@@ -13,7 +13,7 @@ export const GET_DOCUMENTS_BY_JOB = gql`
 
 export const INSERT_NEW_DOCUMENT = gql`
   mutation INSERT_NEW_DOCUMENT($docInput: [documents_insert_input!]!) {
-    insert_ducments(objects: $docInput) {
+    insert_documents(objects: $docInput) {
       returning {
         id
       }

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

@@ -29,7 +29,6 @@ function JobsDetailPage({ match, location }) {
   const [selectedTab, setSelectedTab] = useState(hash ? hash : "#lines");
   if (loading) return <SpinComponent />;
   if (error) return <AlertComponent message={error.message} type='error' />;
-  console.log("selectedTab", selectedTab);
   return (
     <div>
       <Row>

client/src/translations/en_us/common.json

@@ -1,5 +1,17 @@
 {
 	"translation": {
+		"documents": {
+			"errors": {
+				"getpresignurl": "Error obtaining presigned URL for document. ",
+				"insert": "Unable to upload file."
+			},
+			"labels": {
+				"upload": "Upload"
+			},
+			"successes": {
+				"insert": "Uploaded document successfully. "
+			}
+		},
 		"general": {
 			"labels": {
 				"in": "In",

client/src/translations/es/common.json

@@ -1,5 +1,17 @@
 {
 	"translation": {
+		"documents": {
+			"errors": {
+				"getpresignurl": "Error al obtener la URL prescrita para el documento.",
+				"insert": "Incapaz de cargar el archivo."
+			},
+			"labels": {
+				"upload": "Subir"
+			},
+			"successes": {
+				"insert": "Documento cargado con éxito."
+			}
+		},
 		"general": {
 			"labels": {
 				"in": "en",

client/src/translations/fr/common.json

@@ -1,5 +1,17 @@
 {
 	"translation": {
+		"documents": {
+			"errors": {
+				"getpresignurl": "Erreur lors de l'obtention de l'URL présignée pour le document.",
+				"insert": "Incapable de télécharger le fichier."
+			},
+			"labels": {
+				"upload": "Télécharger"
+			},
+			"successes": {
+				"insert": "Document téléchargé avec succès."
+			}
+		},
 		"general": {
 			"labels": {
 				"in": "dans",

s3upload.js

@@ -45,3 +45,29 @@ exports.sign_s3 = (req, res) => {
     res.json({ success: true, data: { returnData } });
   });
 };
+
+exports.get_s3 = (req, res) => {
+  const s3 = new aws.S3(); // Create a new instance of S3
+  const fileName = req.body.fileName;
+  //const fileType = req.body.fileType;
+  // Set up the payload of what we are sending to the S3 api
+  const s3Params = {
+    Bucket: S3_BUCKET,
+    Key: fileName,
+    Expires: 500
+  };
+  // Make a request to the S3 API to get a signed URL which we can use to upload our file
+  s3.getSignedUrl("getObject", s3Params, (err, data) => {
+    if (err) {
+      console.log(err);
+      res.json({ success: false, error: err });
+    }
+    // Data payload of what we are sending back, the url of the signedRequest and a URL where we can access the content after its saved.
+    const returnData = {
+      signedRequest: data,
+      url: `https://${S3_BUCKET}.s3.amazonaws.com/${fileName}`
+    };
+    // Send it all back
+    res.json({ success: true, data: { returnData } });
+  });
+};

server.js

@@ -6,8 +6,8 @@ const compression = require("compression");
 var enforce = require("express-sslify");
 if (process.env.NODE_ENV !== "production") require("dotenv").config();
 
-const https = require('https');
+const https = require("https");
-const fs = require('fs');
+const fs = require("fs");
 
 const app = express();
 const port = process.env.PORT || 5000;
@@ -32,17 +32,29 @@ if (process.env.NODE_ENV === "production") {
 
 var s3upload = require("./s3upload");
 app.post("/sign_s3", s3upload.sign_s3);
+app.get("/sign_s3", s3upload.get_s3);
 
 app.get("/test", function(req, res) {
   res.json({ success: true });
 });
 
-https.createServer({
+if (process.env.NODE_ENV === "production") {
-  key: fs.readFileSync('./key.pem'),
+  app.listen(port, error => {
-  cert: fs.readFileSync('./cert.pem'),
+    if (error) throw error;
-  passphrase: 'Wl0d8k@!'
+    console.log("Server running on port " + port);
-}, app)
+  });
-.listen(5000);
+} else {
+  https
+    .createServer(
+      {
+        key: fs.readFileSync("./key.pem"),
+        cert: fs.readFileSync("./cert.pem"),
+        passphrase: "Wl0d8k@!"
+      },
+      app
+    )
+    .listen(port);
+}
 
 // app.listen(port, error => {
 //   if (error) throw error;