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

import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { Upload, Modal, Icon, notification } from "antd";
import axios from "axios";
import "./jobs-documents.styles.scss";
import Resizer from "react-image-file-resizer";
import { useMutation } from "react-apollo";
import { INSERT_NEW_DOCUMENT } from "../../graphql/documents.queries";

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 [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",
        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,
      3500,
      3500,
      "JPEG",
      75,
      0,
      uri => {
        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;
        let key = `${shopId}/${jobId}/${fileName}`;
        //URL is using the proxy set in pacakges.json.
        axios
          .post("/sign_s3", {
            fileName: key,
            fileType
          })
          .then(response => {
            var returnData = response.data.data.returnData;
            var signedRequest = returnData.signedRequest;
            var url = returnData.url;
            setState({ ...state, url: url });
            // 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);

                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("Error uploading to S3", error);
                notification["error"]({
                  message: t("documents.errors.insert") + JSON.stringify(error)
                });
              });
          })
          .catch(error => {
            console.log("Outside Error here.", error);
            notification["error"]({
              message:
                t("documents.errors.getpresignurl") + 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'>{t("documents.labels.upload")}</div>
    </div>
  );

  return (
    <div className='clearfix'>
      <Upload
        customRequest={handleUpload}
        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;