BOD-17 Added Contracts list page + updates and bugfixes on other pages.

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

@@ -8,7 +8,7 @@ import { Form, notification } from "antd";
 import { useTranslation } from "react-i18next";
 import { INSERT_NEW_CONTRACT } from "../../graphql/cccontracts.queries";
 import { useMutation } from "@apollo/react-hooks";
-import { useHistory } from "react-router-dom";
+import { useHistory, useLocation } from "react-router-dom";
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
 });
@@ -16,10 +16,15 @@ 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 history = useHistory();
+  const location = useLocation();
+  const selectedCarState = useState(null);
+  const selectedJobState = useState(
+    (location.state && location.state.jobId) || null
+  );
+  const [insertContract] = useMutation(INSERT_NEW_CONTRACT);
+
+  console.log("location", location);
 
   const handleFinish = values => {
     if (!!selectedCarState[0] && !!selectedJobState[0]) {

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

@@ -36,7 +36,7 @@ export default function ContractDetailPageContainer() {
       variables: { cccontract: { ...values }, contractId: contractId }
     })
       .then(response => {
-        notification["success"]({ message: t("contracts.successess.saved") });
+        notification["success"]({ message: t("contracts.successes.saved") });
       })
       .catch(error =>
         notification["error"]({

client/src/pages/contracts/contracts.page.component.jsx

@@ -0,0 +1,10 @@
+import React from "react";
+import ContractsList from "../../components/contracts-list/contracts-list.component";
+
+export default function ContractsPageComponent({ loading, data }) {
+  return (
+    <div>
+      <ContractsList loading={loading} contracts={data} />
+    </div>
+  );
+}

client/src/pages/contracts/contracts.page.container.jsx

@@ -0,0 +1,19 @@
+import React from "react";
+import ContractsPageComponent from "./contracts.page.component";
+import { useQuery } from "@apollo/react-hooks";
+import { QUERY_ACTIVE_CONTRACTS } from "../../graphql/cccontracts.queries";
+import AlertComponent from "../../components/alert/alert.component";
+
+export default function ContractsPageContainer() {
+  const { loading, error, data } = useQuery(QUERY_ACTIVE_CONTRACTS);
+
+  if (error) return <AlertComponent message={error.message} type="error" />;
+  return (
+    <div>
+      <ContractsPageComponent
+        loading={loading}
+        data={data ? data.cccontracts : []}
+      />
+    </div>
+  );
+}

client/src/pages/manage/manage.page.component.jsx

@@ -61,7 +61,9 @@ const ContractCreatePage = lazy(() =>
 const ContractDetailPage = lazy(() =>
   import("../contract-detail/contract-detail.page.container")
 );
-
+const ContractsList = lazy(() =>
+  import("../contracts/contracts.page.container")
+);
 const { Header, Content, Footer } = Layout;
 
 export default function Manage({ match }) {
@@ -117,7 +119,7 @@ export default function Manage({ match }) {
                 <Route
                   exact
                   path={`${match.path}/courtesycars/contracts`}
-                  component={() => <div>HOLD</div>}
+                  component={ContractsList}
                 />
 
                 <Route