bodyshop/client/src/components/time-ticket-task-modal/time-ticket-task-modal.container.jsx

import React, { useCallback, useEffect, useState } from "react";

import { Form, Modal, notification } from "antd";
import axios from "axios";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { toggleModalVisible } from "../../redux/modals/modals.actions";
import { selectTimeTicketTasks } from "../../redux/modals/modals.selectors";
import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
import TimeTicketTaskModalComponent from "./time-ticket-task-modal.component";
import { useApolloClient } from "@apollo/client";
import { QUERY_COMPLETED_TASKS } from "../../graphql/jobs.queries";
import "./time-ticket-task-modal.styles.scss";
import { selectTechnician } from "../../redux/tech/tech.selectors";

const mapStateToProps = createStructuredSelector({
  timeTicketTasksModal: selectTimeTicketTasks,
  bodyshop: selectBodyshop,
  currentUser: selectCurrentUser,
  technician: selectTechnician
});
const mapDispatchToProps = (dispatch) => ({
  toggleModalVisible: () => dispatch(toggleModalVisible("timeTicketTask"))
});
export default connect(mapStateToProps, mapDispatchToProps)(TimeTickeTaskModalContainer);

export function TimeTickeTaskModalContainer({
  bodyshop,
  currentUser,
  technician,
  timeTicketTasksModal,
  toggleModalVisible
}) {
  const [form] = Form.useForm();
  const { context, open, actions } = timeTicketTasksModal;
  const [completedTasks, setCompletedTasks] = useState([]);
  const [unassignedHours, setUnassignedHours] = useState(0);
  const { t } = useTranslation();
  const [loading, setLoading] = useState(false);
  const client = useApolloClient();

  async function handleFinish(values) {
    calculateTickets({ values, handleFinish: true });
  }

  const getCompletedTasks = useCallback(
    async (jobid) => {
      setLoading(true);

      const { data } = await client.query({
        query: QUERY_COMPLETED_TASKS,
        variables: { jobid }
      });

      setCompletedTasks(data.jobs_by_pk.completed_tasks || []);
      setLoading(false);
    },
    [client]
  );
  useEffect(() => {
    if (open) {
      form.setFieldsValue({ ...context, task: null, timetickets: null });
      if (context.jobid) {
        getCompletedTasks(context.jobid);
      }
    }
  }, [context.jobid, open, getCompletedTasks, form, context]);

  async function handleValueChange(changedValues, allValues) {
    if (changedValues.jobid) {
      getCompletedTasks(changedValues.jobid);
    }
    if (allValues.jobid && allValues.task) {
      calculateTickets({ values: allValues, handleFinish: false });
    }
  }

  const calculateTickets = async ({ values, handleFinish }) => {
    setLoading(true);
    try {
      const { data, ...response } = await axios.post("/payroll/claimtask", {
        jobid: values.jobid,
        task: values.task,
        calculateOnly: !handleFinish,
        employee: technician
          ? {
              name: `${technician.first_name} ${technician.last_name}`.trim(),
              employeeid: technician.id
            }
          : { name: currentUser.displayName, email: currentUser.email }
      });
      if (response.status === 200 && handleFinish) {
        //Close the modal
        if (actions?.refetch) actions.refetch();
        toggleModalVisible();
      } else if (handleFinish === false) {
        form.setFieldsValue({ timetickets: data.ticketsToInsert });
        setUnassignedHours(data.unassignedHours);
      } else {
        notification.open({
          type: "error",
          message: t("timetickets.errors.creating", {
            message: JSON.stringify(data)
          })
        });
      }
    } catch (error) {
      notification.open({
        type: "error",
        message: t("timetickets.errors.creating", { message: error.message })
      });
    } finally {
      setLoading(false);
    }
  };

  return (
    <Modal
      destroyOnClose
      open={open}
      onCancel={() => {
        toggleModalVisible();
        form.resetFields();
      }}
      width="80%"
      onOk={() => form.submit()}
    >
      <Form
        autoComplete={"off"}
        form={form}
        layout="vertical"
        onFinish={handleFinish}
        initialValues={context}
        onValuesChange={handleValueChange}
      >
        <TimeTicketTaskModalComponent
          form={form}
          loading={loading}
          completedTasks={completedTasks}
          unassignedHours={unassignedHours}
        />
      </Form>
    </Modal>
  );
}