Added document delete + refined document upload

bodyshop_translations.babel

@@ -24,6 +24,27 @@
                             <folder_node>
                                 <name>errors</name>
                                 <children>
+                                    <concept_node>
+                                        <name>deletes3</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>getpresignurl</name>
                                         <definition_loaded>false</definition_loaded>
@@ -118,6 +139,27 @@
                             <folder_node>
                                 <name>successes</name>
                                 <children>
+                                    <concept_node>
+                                        <name>delete</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>

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

@@ -4,7 +4,10 @@ import React, { useState } from "react";
 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 {
+  INSERT_NEW_DOCUMENT,
+  DELETE_DOCUMENT
+} from "../../graphql/documents.queries";
 import "./jobs-documents.styles.scss";
 import { generateCdnThumb } from "../../utils/DocHelpers";
 
@@ -20,6 +23,7 @@ function getBase64(file) {
 function JobsDocumentsComponent({ shopId, jobId, loading, data, currentUser }) {
   const { t } = useTranslation();
   const [insertNewDocument] = useMutation(INSERT_NEW_DOCUMENT);
+  const [deleteDocument] = useMutation(DELETE_DOCUMENT);
 
   const [state, setState] = useState({
     previewVisible: false,
@@ -32,7 +36,9 @@ function JobsDocumentsComponent({ shopId, jobId, loading, data, currentUser }) {
         uid: value.id,
         url: value.thumb_url,
         name: value.name,
-        status: "done"
+        status: "done",
+        full_url: value.url,
+        key: value.key
       });
       return acc;
     }, [])
@@ -69,7 +75,7 @@ function JobsDocumentsComponent({ shopId, jobId, loading, data, currentUser }) {
         axios
           .put(signedRequest, file, options)
           .then(response => {
-            onSuccess(response.body);
+            console.log("response from axios", response);
             insertNewDocument({
               variables: {
                 docInput: [
@@ -83,7 +89,14 @@ function JobsDocumentsComponent({ shopId, jobId, loading, data, currentUser }) {
                 ]
               }
             }).then(r => {
-              console.log(r);
+              onSuccess({
+                uid: r.data.insert_documents.returning[0].id,
+                url: r.data.insert_documents.returning[0].thumb_url,
+                name: r.data.insert_documents.returning[0].name,
+                status: "done",
+                full_url: r.data.insert_documents.returning[0].url,
+                key: r.data.insert_documents.returning[0].key
+              });
               notification["success"]({
                 message: t("documents.successes.insert")
               });
@@ -135,23 +148,62 @@ function JobsDocumentsComponent({ shopId, jobId, loading, data, currentUser }) {
   const handleCancel = () => setState({ ...state, previewVisible: false });
 
   const handlePreview = async file => {
-    if (!file.url && !file.preview) {
+    if (!file.full_url && !file.url) {
       file.preview = await getBase64(file.originFileObj);
     }
 
     setState({
       ...state,
-      previewImage: file.url || file.preview,
+      previewImage: file.full_url || file.url,
       previewVisible: true
     });
   };
   const handleChange = props => {
-    const { fileList } = props;
+    const { event, fileList, file } = props;
-    setFileList(fileList);
+    //Required to ensure that the state accurately reflects new data and that images can be deleted in feeded.
+    if (!event) {
+      //SPread the new file in where the old one was.
+      const newFileList = fileList.map(i =>
+        i.uid === file.uid ? Object.assign({}, i, file.response) : i
+      );
+      setFileList(newFileList);
+    } else {
+      setFileList(fileList);
+    }
   };
 
   const { previewVisible, previewImage } = state;
 
+  const handleRemove = file => {
+    console.log("file", file);
+
+    //Remove the file on S3
+    axios
+      .post("/delete_s3", { fileName: file.key })
+      .then(response => {
+        //Delete the record in our database.
+        if (response.status === 200) {
+          deleteDocument({ variables: { id: file.uid } }).then(r => {
+            notification["success"]({
+              message: t("documents.successes.delete")
+            });
+          });
+        } else {
+          notification["error"]({
+            message:
+              1 +
+              t("documents.errors.deletes3") +
+              JSON.stringify(response.message)
+          });
+        }
+      })
+      .catch(error => {
+        notification["error"]({
+          message: "2" + t("documents.errors.deletes3") + JSON.stringify(error)
+        });
+      });
+  };
+
   return (
     <div className='clearfix'>
       <button
@@ -160,18 +212,13 @@ function JobsDocumentsComponent({ shopId, jobId, loading, data, currentUser }) {
             bucket: process.env.REACT_APP_S3_BUCKET,
             key:
               "52b7357c-0edd-4c95-85c3-dfdbcdfad9ac/c8ca5761-681a-4bb3-ab76-34c447357be3/Invoice_353284489.pdf",
-            edits: {
+            edits: { format: "jpeg" }
-              resize: {
-                height: 100,
-                width: 100
-              }
-            }
           });
           const CloudFrontUrl = "https://d18fc493a0fm4o.cloudfront.net";
           const url = `${CloudFrontUrl}/${btoa(imageRequest)}`;
           console.log("url", url);
         }}>
-        H
+        Test PDF
       </button>
       <Upload.Dragger
         customRequest={handleUpload}
@@ -180,6 +227,7 @@ function JobsDocumentsComponent({ shopId, jobId, loading, data, currentUser }) {
         fileList={fileList}
         multiple={true}
         onPreview={handlePreview}
+        onRemove={handleRemove}
         onChange={handleChange}>
         <p className='ant-upload-drag-icon'>
           <Icon type='inbox' />

client/src/graphql/documents.queries.js

@@ -7,6 +7,7 @@ export const GET_DOCUMENTS_BY_JOB = gql`
       url
       thumb_url
       name
+      key
     }
   }
 `;
@@ -14,6 +15,20 @@ export const GET_DOCUMENTS_BY_JOB = gql`
 export const INSERT_NEW_DOCUMENT = gql`
   mutation INSERT_NEW_DOCUMENT($docInput: [documents_insert_input!]!) {
     insert_documents(objects: $docInput) {
+      returning {
+        id
+        url
+        thumb_url
+        name
+        key
+      }
+    }
+  }
+`;
+
+export const DELETE_DOCUMENT = gql`
+  mutation DELETE_DOCUMENT($id: uuid) {
+    delete_documents(where: { id: { _eq: $id } }) {
       returning {
         id
       }

client/src/translations/en_us/common.json

@@ -2,6 +2,7 @@
 	"translation": {
 		"documents": {
 			"errors": {
+				"deletes3": "Error deleting document from storage. ",
 				"getpresignurl": "Error obtaining presigned URL for document. ",
 				"insert": "Unable to upload file.",
 				"nodocuments": "There are no documents."
@@ -10,6 +11,7 @@
 				"upload": "Upload"
 			},
 			"successes": {
+				"delete": "Document deleted successfully.",
 				"insert": "Uploaded document successfully. "
 			}
 		},

client/src/translations/es/common.json

@@ -2,6 +2,7 @@
 	"translation": {
 		"documents": {
 			"errors": {
+				"deletes3": "Error al eliminar el documento del almacenamiento.",
 				"getpresignurl": "Error al obtener la URL prescrita para el documento.",
 				"insert": "Incapaz de cargar el archivo.",
 				"nodocuments": "No hay documentos"
@@ -10,6 +11,7 @@
 				"upload": "Subir"
 			},
 			"successes": {
+				"delete": "Documento eliminado con éxito.",
 				"insert": "Documento cargado con éxito."
 			}
 		},

client/src/translations/fr/common.json

@@ -2,6 +2,7 @@
 	"translation": {
 		"documents": {
 			"errors": {
+				"deletes3": "Erreur lors de la suppression du document du stockage.",
 				"getpresignurl": "Erreur lors de l'obtention de l'URL présignée pour le document.",
 				"insert": "Incapable de télécharger le fichier.",
 				"nodocuments": "Il n'y a pas de documents."
@@ -10,6 +11,7 @@
 				"upload": "Télécharger"
 			},
 			"successes": {
+				"delete": "Le document a bien été supprimé.",
 				"insert": "Document téléchargé avec succès."
 			}
 		},

s3upload.js

@@ -71,3 +71,25 @@ exports.get_s3 = (req, res) => {
     res.json({ success: true, data: { returnData } });
   });
 };
+
+exports.delete_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
+  console.log("fileName", req.body);
+  const s3Params = {
+    Bucket: S3_BUCKET,
+    Key: fileName
+  };
+
+  s3.deleteObject(s3Params, function(err, data) {
+    if (err) {
+      res.json({ success: false, message: err.message });
+    }
+    // error
+    else {
+      res.json({ success: true, data });
+    } // deleted
+  });
+};

server.js

@@ -21,10 +21,11 @@ app.use(cors());
 var s3upload = require("./s3upload");
 app.post("/sign_s3", s3upload.sign_s3);
 app.get("/sign_s3", s3upload.get_s3);
+app.post("/delete_s3", s3upload.delete_s3);
 
-app.get("/test", function(req, res) {
+// app.get("/test", function(req, res) {
-  res.json({ success: true });
+//   res.json({ success: true });
-});
+// });
 
 if (process.env.NODE_ENV === "production") {
   app.use(express.static(path.join(__dirname, "client/build")));