bodyshop/client/src/pages/courtesy-car-detail/courtesy-car-detail.page.container.jsx

import { useMutation, useQuery } from "@apollo/react-hooks";
import { Form, notification } from "antd";
import moment from "moment";
import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { useParams } from "react-router-dom";
import AlertComponent from "../../components/alert/alert.component";
import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
import { QUERY_CC_BY_PK, UPDATE_CC } from "../../graphql/courtesy-car.queries";
import {
  addRecentItem,
  setBreadcrumbs,
} from "../../redux/application/application.actions";
import { CreateRecentItem } from "../../utils/create-recent-item";
import CourtesyCarDetailPageComponent from "./courtesy-car-detail.page.component";
import NotFound from "../../components/not-found/not-found.component";
import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
import queryString from "query-string";
import { useLocation } from "react-router-dom";

const mapDispatchToProps = (dispatch) => ({
  setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
  addRecentItem: (item) => dispatch(addRecentItem(item)),
});
export function CourtesyCarDetailPageContainer({
  setBreadcrumbs,
  addRecentItem,
}) {
  const searchParams = queryString.parse(useLocation().search);
  const { page, sortcolumn, sortorder } = searchParams;

  const { t } = useTranslation();
  const [insertCourtesyCar] = useMutation(UPDATE_CC);
  const [form] = Form.useForm();
  const { ccId } = useParams();
  const [saveLoading, setSaveLoading] = useState(false);
  const { loading, error, data } = useQuery(QUERY_CC_BY_PK, {
    variables: {
      id: ccId,
      offset: page ? (page - 1) * 25 : 0,
      limit: 25,
      order: [
        {
          [sortcolumn || "start"]: sortorder
            ? sortorder === "descend"
              ? "desc"
              : "asc"
            : "desc",
        },
      ],
    },
  });

  useEffect(() => {
    document.title = loading
      ? t("titles.app")
      : error
      ? t("titles.app")
      : t("titles.courtesycars-detail", {
          id:
            (data &&
              data.courtesycars_by_pk &&
              data.courtesycars_by_pk.fleet_number) ||
            "",
        });
    setBreadcrumbs([
      { link: "/manage/courtesycars", label: t("titles.bc.courtesycars") },
      {
        link: `/manage/courtesycars/${
          (data && data.courtesycars_by_pk && data.courtesycars_by_pk.id) || ""
        }`,
        label: t("titles.bc.courtesycars-detail", {
          number:
            (data &&
              data.courtesycars_by_pk &&
              data.courtesycars_by_pk.fleetnumber) ||
            "",
        }),
      },
    ]);

    if (data && data.courtesycars_by_pk)
      addRecentItem(
        CreateRecentItem(
          ccId,
          "courtesycar",
          data.courtesycars_by_pk.fleet_number || data.courtesycars_by_pk.vin,
          `/manage/courtesycars/${ccId}`
        )
      );
  }, [t, data, error, loading, setBreadcrumbs, ccId, addRecentItem]);

  const handleFinish = async (values) => {
    setSaveLoading(true);

    const result = await insertCourtesyCar({
      variables: { cc: { ...values }, ccId: ccId },
    });

    if (!!result.errors) {
      notification["error"]({
        message: t("courtesycars.errors.saving", { error: error }),
      });
    }

    notification["success"]({
      message: t("courtesycars.successes.saved"),
    });

    setSaveLoading(false);
  };

  useEffect(() => {
    if (data && data.courtesycars_by_pk) form.resetFields();
  }, [data, form]);

  if (loading) return <LoadingSpinner />;
  if (error) return <AlertComponent message={error.message} type="error" />;

  if (!!!data.courtesycars_by_pk) return <NotFound />;

  return (
    <RbacWrapper action="courtesycar:detail">
      <Form
        form={form}
        autoComplete="no"
        onFinish={handleFinish}
        layout="vertical"
        initialValues={
          data
            ? {
                ...data.courtesycars_by_pk,
                purchasedate: data.courtesycars_by_pk.purchasedate
                  ? moment(data.courtesycars_by_pk.purchasedate)
                  : null,
                servicestartdate: data.courtesycars_by_pk.servicestartdate
                  ? moment(data.courtesycars_by_pk.servicestartdate)
                  : null,
                serviceenddate: data.courtesycars_by_pk.serviceenddate
                  ? moment(data.courtesycars_by_pk.serviceenddate)
                  : null,
                leaseenddate: data.courtesycars_by_pk.leaseenddate
                  ? moment(data.courtesycars_by_pk.leaseenddate)
                  : null,
                nextservicedate: data.courtesycars_by_pk.nextservicedate
                  ? moment(data.courtesycars_by_pk.nextservicedate)
                  : null,
                registrationexpires: data.courtesycars_by_pk.registrationexpires
                  ? moment(data.courtesycars_by_pk.registrationexpires)
                  : null,
                insuranceexpires: data.courtesycars_by_pk.insuranceexpires
                  ? moment(data.courtesycars_by_pk.insuranceexpires)
                  : null,
              }
            : {}
        }
      >
        <CourtesyCarDetailPageComponent
          contracts={data ? data.courtesycars_by_pk.cccontracts : []}
          form={form}
          saveLoading={saveLoading}
          totalContracts={
            data
              ? data.courtesycars_by_pk.cccontracts_aggregate.aggregate.count
              : 0
          }
        />
      </Form>
    </RbacWrapper>
  );
}
export default connect(
  null,
  mapDispatchToProps
)(CourtesyCarDetailPageContainer);