BOD-16 Added pages + routing for courtesy cars

client/src/pages/courtesy-car-detail/courtesy-car-detail.page.component.jsx

@@ -0,0 +1,6 @@
+import React from "react";
+import CourtesyCarCreateFormComponent from "../../components/courtesy-car-form/courtesy-car-form.component";
+
+export default function CourtesyCarDetailPageComponent() {
+  return <CourtesyCarCreateFormComponent />;
+}

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

@@ -0,0 +1,87 @@
+import { useMutation, useQuery } from "@apollo/react-hooks";
+import { Form, notification } from "antd";
+import moment from "moment";
+import React, { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { useParams } from "react-router-dom";
+import AlertComponent from "../../components/alert/alert.component";
+import { QUERY_CC_BY_PK, UPDATE_CC } from "../../graphql/courtesy-car.queries";
+import CourtesyCarDetailPageComponent from "./courtesy-car-detail.page.component";
+
+export default function CourtesyCarDetailPageContainer() {
+  const { t } = useTranslation();
+  const [insertCourtesyCar] = useMutation(UPDATE_CC);
+  const [form] = Form.useForm();
+  const { ccId } = useParams();
+
+  const { loading, error, data } = useQuery(QUERY_CC_BY_PK, {
+    variables: { id: ccId }
+  });
+
+  useEffect(() => {
+    document.title = loading
+      ? t("titles.app")
+      : error
+      ? t("titles.app")
+      : t("titles.courtesycars-detail", {
+          id: (data && data.courtesycars_by_pk.vin) || ""
+        });
+  }, [t, data, error, loading]);
+
+  const handleFinish = values => {
+    insertCourtesyCar({
+      variables: { cc: { ...values }, ccId: ccId }
+    })
+      .then(response => {
+        notification["success"]({ message: t("courtesycars.successes.saved") });
+      })
+      .catch(error =>
+        notification["error"]({
+          message: t("courtesycars.errors.saving", { error: error })
+        })
+      );
+  };
+
+  useEffect(() => {
+    if (data) form.resetFields();
+  }, [data, form]);
+
+  if (error) return <AlertComponent message={error.message} type="error" />;
+  return (
+    <Form
+      form={form}
+      autoComplete="no"
+      onFinish={handleFinish}
+      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 />
+    </Form>
+  );
+}