@wenn/onb/hoc/workInformationHOC/index.js

onb-core

import React from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { reduxForm, change } from "redux-form";

import {
  saveCamunda,
  sendToCamunda
} from "../../redux/actions/camunda.actions";

import axios from "axios";

const WorkInformationHOC = Component => {
  class WorkInformation extends React.Component {
    constructor() {
      super();
      this.state = {
        file: "",
        windowSize: false,
        response: {
          header: "",
          message: "",
          validFile: null
        },
        loader: false,
        fileType: ""
      };
    }

    componentDidMount() {
      window.scrollTo({
        top: 0,
        behavior: "smooth"
      });
    }

    handleOnSend = e => {
      e.preventDefault();
      const {
        formData: { values },
        saveCamunda,
        sendToCamunda,
        viewName
      } = this.props;

      const data = {
        workPhoneNumber: values.workPhone,
        company_name: values.company,
        payment_receipt: values.fileInput
      };

      saveCamunda(data);
      sendToCamunda(viewName);
    };

    setImageUrl = url => {
      this.props.dispatch(change("WorkInformation", "fileInput", url));
    };

    limitLength(v, max) {
      return v && v.substring(0, max);
    }

    fileUpload = file => {
      if (file) {
        const formData = new FormData();
        formData.append("image", file);
        formData.append("userId", this.props.userId);
        const reader = new FileReader();

        this.setState({
          loader: true,
          response: {
            header: "",
            message: "",
            validFile: ""
          }
        });

        reader.onload = e =>
          this.setState({
            imageURL: e.target.result,
            file,
            fileType: file.type === "application/pdf" ? "pdf" : "image"
          });
        reader.readAsDataURL(file);
        const imagesApiUrl = this.props.IMAGES_API[process.env.REACT_APP_ENV];
        axios
          .post(imagesApiUrl, formData, {
            headers: {
              "content-type": "multipart/form-data"
            }
          })
          .then(response => {
            this.setImageUrl(response.data.url);
            this.setState({
              response: {
                header: this.props.wording.paymentReceipt.post.success.header,
                message: this.props.wording.paymentReceipt.post.success.message,
                validFile: true
              },
              loader: false
            });
          })
          .catch(error => {
            // eslint-disable-next-line no-console
            console.error("ERROR", error);
            this.setState({
              response: {
                header: this.props.wording.paymentReceipt.post.error.header,
                message: this.props.wording.paymentReceipt.post.error.message,
                validFile: false
              },
              loader: false,
              imageURL: ""
            });
          });
      }
    };

    render() {
      return (
        <div>
          <Component
            {...this.props}
            {...this.state}
            onHandleOnSend={this.handleOnSend}
            setImageUrl={this.setImageUrl}
            onHandleChange={this.handleChange}
            limitLength={this.limitLength}
            fileUpload={this.fileUpload}
            width={this.props.width}
          />
        </div>
      );
    }
  }

  WorkInformation.propTypes = {
    wording: PropTypes.object.isRequired
  };

  WorkInformation = reduxForm({
    form: "WorkInformation",
    destroyOnUnmount: false,
    forceUnregisterOnUnmount: true
  })(WorkInformation);

  const mapState = (
    {
      settings: {
        wording,
        config,
        width,
        userId,
        utils: {
          urls: { IMAGES_API }
        },
        assets: { loading, successImg, errorImg }
      },
      form,
      taskId
    },
    { viewName }
  ) => ({
    formData: form.WorkInformation ? form.WorkInformation : {},
    wording: wording[viewName],
    config,
    width,
    loading,
    taskId,
    userId,
    successImg,
    errorImg,
    IMAGES_API
  });

  const mapDispatch = {
    saveCamunda,
    sendToCamunda
  };

  return connect(
    mapState,
    mapDispatch
  )(WorkInformation);
};

export default WorkInformationHOC;