BOD-17 Basic creation of a contract functioning.

client/src/pages/contract-create/contract-create.page.component.jsx

@@ -1,9 +1,20 @@
 import React from "react";
 import ContractFormComponent from "../../components/contract-form/contract-form.component";
+import { Button } from "antd";
+import { useTranslation } from "react-i18next";
+import ContractJobsContainer from "../../components/contract-jobs/contract-jobs.container";
+import ContractCarsContainer from "../../components/contract-cars/contract-cars.container";
 
-export default function ContractCreatePageComponent() {
+export default function ContractCreatePageComponent({
+  selectedJobState,
+  selectedCarState
+}) {
+  const { t } = useTranslation();
   return (
     <div>
+      <Button htmlType="submit">{t("general.actions.create")}</Button>
+      <ContractJobsContainer selectedJobState={selectedJobState} />
+      <ContractCarsContainer selectedCarState={selectedCarState} />
       <ContractFormComponent />
     </div>
   );

client/src/pages/contract-create/contract-create.page.container.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 
 import ContractCreatePageComponent from "./contract-create.page.component";
 import { connect } from "react-redux";
@@ -6,7 +6,8 @@ import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import { Form, notification } from "antd";
 import { useTranslation } from "react-i18next";
-
+import { INSERT_NEW_CONTRACT } from "../../graphql/cccontracts.queries";
+import { useMutation } from "@apollo/react-hooks";
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
 });
@@ -14,15 +15,33 @@ const mapStateToProps = createStructuredSelector({
 export function ContractCreatePageContainer({ bodyshop }) {
   const [form] = Form.useForm();
   const { t } = useTranslation();
+  const selectedCarState = useState(null);
+  const selectedJobState = useState(null);
+
+  const [insertContract] = useMutation(INSERT_NEW_CONTRACT);
 
   const handleFinish = values => {
-    //   insertCourtesyCar({
-    //     variables: { courtesycar: { ...values, bodyshopid: bodyshop.id } }
-    //   })
-    //     .then(response => {
-    notification["success"]({ message: t("courtesycars.successes.saved") });
-    //     })
-    //     .catch(error => console.log("error", error));
+    if (!!selectedCarState[0] && !!selectedJobState[0]) {
+      insertContract({
+        variables: {
+          contract: {
+            ...values,
+            courtesycarid: selectedCarState[0],
+            jobid: selectedJobState[0]
+          }
+        }
+      })
+        .then(response => {
+          notification["success"]({
+            message: t("contracts.successes.saved")
+          });
+        })
+        .catch(error => console.log("error", error));
+    } else {
+      notification["error"]({
+        message: t("contracts.errors.selectjobandcar")
+      });
+    }
   };
 
   useEffect(() => {
@@ -31,7 +50,11 @@ export function ContractCreatePageContainer({ bodyshop }) {
 
   return (
     <Form form={form} autoComplete="no" onFinish={handleFinish}>
-      <ContractCreatePageComponent />
+      <button onClick={() => console.log(form.getFieldsValue())}>t</button>
+      <ContractCreatePageComponent
+        selectedJobState={selectedJobState}
+        selectedCarState={selectedCarState}
+      />
     </Form>
   );
 }