Refactored some of the job detail form to use context. Created claims component.

client/src/pages/jobs-detail/jobs-detail.page.component.jsx

@@ -1,24 +1,31 @@
-import { Form, Icon, Tabs } from "antd";
-import React from "react";
+import { Form, Icon, Tabs, Alert, Button } from "antd";
+import React, { useContext } from "react";
 import { useTranslation } from "react-i18next";
-import { FaRegStickyNote } from "react-icons/fa";
+import {
+  FaInfo,
+  FaRegStickyNote,
+  FaShieldAlt,
+  FaHardHat
+} from "react-icons/fa";
 import JobLinesContainer from "../../components/job-lines/job-lines.container.component";
+import JobsDetailClaims from "../../components/jobs-detail-claims/jobs-detail-claims.component";
 import JobsDetailHeader from "../../components/jobs-detail-header/jobs-detail-header.component";
 import JobsDocumentsContainer from "../../components/jobs-documents/jobs-documents.container";
 import JobNotesContainer from "../../components/jobs-notes/jobs-notes.container";
 import JobsRatesContainer from "../../components/jobs-rates/jobs-rates.container";
+import JobDetailFormContext from "./jobs-detail.page.context";
 
 export default function JobsDetailPage({
   job,
   mutationUpdateJob,
   mutationConvertJob,
   handleSubmit,
-  handleChange,
-  getFieldDecorator,
   refetch
 }) {
   const { t } = useTranslation();
 
+  const { isFieldsTouched, resetFields } = useContext(JobDetailFormContext);
+
   const formItemLayout = {
     labelCol: {
       xs: { span: 12 },
@@ -30,69 +37,44 @@ export default function JobsDetailPage({
     }
   };
 
-  // const TEMP = (
-  //   <div>
-  //     {" "}
-  //     <Form.Item label='Estimator Last Name'>
-  //       {getFieldDecorator("est_ct_ln", {
-  //         initialValue: jobContext.est_ct_ln
-  //       })(<Input name='est_ct_ln' onChange={handleChange} />)}
-  //     </Form.Item>
-  //     <Form.Item label='Estimator First Name'>
-  //       {getFieldDecorator("est_ct_fn", {
-  //         initialValue: jobContext.est_ct_fn
-  //       })(<Input name='est_ct_fn' onChange={handleChange} />)}
-  //     </Form.Item>
-  //     <Form.Item label='Estimator Phone #'>
-  //       {getFieldDecorator("est_ph1", {
-  //         initialValue: jobContext.est_ph1
-  //       })(
-  //         <FormItemPhone
-  //           customInput={Input}
-  //           name='est_ph1'
-  //           onValueChange={handleChange}
-  //         />
-  //       )}
-  //     </Form.Item>
-  //     <Form.Item label='Estimator Email'>
-  //       {getFieldDecorator("est_ea", {
-  //         initialValue: jobContext.est_ea,
-  //         rules: [
-  //           {
-  //             type: "email",
-  //             message: "This is not a valid email address."
-  //           }
-  //         ]
-  //       })(<Input name='est_ea' onChange={handleChange} />)}
-  //     </Form.Item>
-  //   </div>
-  // );
-
   return (
     <Form onSubmit={handleSubmit} {...formItemLayout}>
       <JobsDetailHeader
         job={job}
         mutationConvertJob={mutationConvertJob}
         refetch={refetch}
-        getFieldDecorator={getFieldDecorator}
       />
 
+      {isFieldsTouched() ? (
+        <Alert
+          message={
+            <div>
+              {t("general.messages.unsavedchanges")}
+              <Button onClick={() => resetFields()}>
+                {t("general.actions.reset")}
+              </Button>
+            </div>
+          }
+          closable
+        />
+      ) : null}
+
       <Tabs defaultActiveKey='claimdetail'>
         <Tabs.TabPane
           tab={
             <span>
-              <Icon type='bars' />
+              <Icon component={FaInfo} />
               {t("menus.jobsdetail.claimdetail")}
             </span>
           }
           key='claimdetail'>
-          Claim detail
+          <JobsDetailClaims job={job} />
         </Tabs.TabPane>
 
         <Tabs.TabPane
           tab={
             <span>
-              <Icon type='bars' />
+              <Icon component={FaShieldAlt} />
               {t("menus.jobsdetail.insurance")}
             </span>
           }
@@ -125,7 +107,7 @@ export default function JobsDetailPage({
         <Tabs.TabPane
           tab={
             <span>
-              <Icon type='bars' />
+              <Icon type='tool' />
               {t("menus.jobsdetail.partssublet")}
             </span>
           }
@@ -136,7 +118,7 @@ export default function JobsDetailPage({
         <Tabs.TabPane
           tab={
             <span>
-              <Icon type='bars' />
+              <Icon component={FaHardHat} />
               {t("menus.jobsdetail.labor")}
             </span>
           }
@@ -147,7 +129,7 @@ export default function JobsDetailPage({
         <Tabs.TabPane
           tab={
             <span>
-              <Icon type='bars' />
+              <Icon type='calendar' />
               {t("menus.jobsdetail.dates")}
             </span>
           }