Files
bodyshop/client/src/components/job-costing-modal/job-costing-modal.container.jsx
2021-11-22 23:20:13 -08:00

71 lines
2.0 KiB
JavaScript

import { Modal } from "antd";
import axios from "axios";
import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { toggleModalVisible } from "../../redux/modals/modals.actions";
import { selectJobCosting } from "../../redux/modals/modals.selectors";
import LoadingSpinner from "../loading-spinner/loading-spinner.component";
import JobCostingModalComponent from "./job-costing-modal.component";
const mapStateToProps = createStructuredSelector({
jobCostingModal: selectJobCosting,
});
const mapDispatchToProps = (dispatch) => ({
toggleModalVisible: () => dispatch(toggleModalVisible("jobCosting")),
});
export function JobCostingModalContainer({
jobCostingModal,
toggleModalVisible,
}) {
const { t } = useTranslation();
const [costingData, setCostingData] = useState(null);
const { visible, context } = jobCostingModal;
const { jobId } = context;
// const { loading, error, data } = useQuery(QUERY_JOB_COSTING_DETAILS, {
// variables: { id: jobId },
// skip: !jobId,
// });
useEffect(() => {
async function getData() {
if (jobId && visible) {
const { data } = await axios.post("/job/costing", { jobid: jobId });
setCostingData(data);
}
}
getData();
}, [jobId, visible]);
return (
<Modal
visible={visible}
title={t("jobs.labels.jobcosting")}
onOk={() => toggleModalVisible()}
onCancel={() => toggleModalVisible()}
cancelButtonProps={{ style: { display: "none" } }}
width="90%"
destroyOnClose
>
{!costingData ? (
<LoadingSpinner loading={true} />
) : (
<JobCostingModalComponent
costCenterData={costingData.costCenterData}
summaryData={costingData.summaryData}
/>
)}
</Modal>
);
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(JobCostingModalContainer);