bodyshop/client/src/components/jobs-documents-gallery/jobs-document-gallery.reassign.component.jsx

import { useApolloClient, useMutation } from "@apollo/client";
import { Button, Form, notification, Popover, Space } from "antd";
import axios from "axios";
import React, { useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import {
  GET_DOC_SIZE_BY_JOB,
  UPDATE_DOCUMENT,
} from "../../graphql/documents.queries";
import { selectBodyshop } from "../../redux/user/user.selectors";
import JobSearchSelect from "../job-search-select/job-search-select.component";

const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
});
const mapDispatchToProps = (dispatch) => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
});
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(JobsDocumentsGalleryReassign);

export function JobsDocumentsGalleryReassign({ bodyshop, galleryImages }) {
  const { t } = useTranslation();
  const [form] = Form.useForm();

  const selectedImages = useMemo(() => {
    return [
      ...galleryImages.images.filter((image) => image.isSelected),
      ...galleryImages.other.filter((image) => image.isSelected),
    ];
  }, [galleryImages]);
  const client = useApolloClient();
  const [visible, setVisible] = useState(false);
  const [loading, setLoading] = useState(false);
  const [updateDocument] = useMutation(UPDATE_DOCUMENT);

  const updateImage = async (i, jobid) => {
    //Move the cloudinary image

    //Update it in the database.
    const result = await updateDocument({
      variables: {
        id: i.id,
        document: {
          key: i.public_id,
          jobid: jobid,
        },
      },
    });

    if (!!result.errors) {
      notification["error"]({
        message: t("documents.errors.updating", {
          message: JSON.stringify(result.errors),
        }),
      });
    } else {
      notification["success"]({
        message: t("documents.successes.updated"),
      });
    }
  };

  const handleFinish = async ({ jobid }) => {
    setLoading(true);

    //Check to see if the space remaining on the new job is sufficient. If it isn't cancel this.
    const newJobData = await client.query({
      query: GET_DOC_SIZE_BY_JOB,
      variables: { jobId: jobid },
    });

    const transferedDocSizeTotal = selectedImages.reduce(
      (acc, val) => acc + val.size,
      0
    );

    const shouldPreventTransfer =
      bodyshop.jobsizelimit -
        newJobData.data.documents_aggregate.aggregate.sum.size <
      transferedDocSizeTotal;

    if (shouldPreventTransfer) {
      notification.open({
        key: "cannotuploaddocuments",
        type: "error",
        message: t("documents.labels.reassign_limitexceeded_title"),
        description: t("documents.labels.reassign_limitexceeded"),
      });
      setLoading(false);
      return;
    }

    const res = await axios.post("/media/rename", {
      documents: selectedImages.map((i) => {
        //Need to check if the current key folder is null, or another job.
        const currentKeys = i.key.split("/");
        currentKeys[1] = jobid;
        currentKeys.join("/");
        return {
          id: i.id,
          from: i.key,
          to: currentKeys.join("/"),
          extension: i.extension,
          type: i.type,
        };
      }),
    });

    res.data
      .filter((d) => d.error)
      .forEach((d) => {
        notification["error"]({ message: t("documents.errors.updating") });
        console.error("Error updating job document", d);
      });

    const proms = [];

    res.data
      .filter((d) => !d.error)
      .forEach((d) => {
        proms.push(updateImage(d, jobid));
      });

    await Promise.all(proms);

    setVisible(false);
    setLoading(false);
  };

  const popContent = (
    <div>
      <Form onFinish={handleFinish} layout="vertical" form={form}>
        <Form.Item
          label={t("documents.labels.newjobid")}
          style={{ width: "20rem" }}
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
          ]}
          name={"jobid"}
        >
          <JobSearchSelect />
        </Form.Item>
      </Form>
      <Space>
        <Button type="primary" onClick={() => form.submit()}>
          {t("general.actions.submit")}
        </Button>
        <Button onClick={() => setVisible(false)}>
          {t("general.actions.cancel")}
        </Button>
      </Space>
    </div>
  );

  return (
    <Popover content={popContent} visible={visible}>
      <Button
        disabled={selectedImages.length < 1}
        onClick={() => setVisible(true)}
        loading={loading}
      >
        {t("documents.actions.reassign")}
      </Button>
    </Popover>
  );
}