Added document delete + refined document upload

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;
-    setFileList(fileList);
+    const { event, fileList, file } = props;
+    //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: {
-              resize: {
-                height: 100,
-                width: 100
-              }
-            }
+            edits: { format: "jpeg" }
           });
           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' />