WIP Download Images + Invoice Tables

client/src/components/jobs-detail-pli/jobs-detail-pli.component.jsx

@@ -1,17 +1,15 @@
+import { Button } from "antd";
 import React from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import {
-  toggleModalVisible,
-  setModalContext
-} from "../../redux/modals/modals.actions";
-import { Button } from "antd";
+import { setModalContext } from "../../redux/modals/modals.actions";
+import InvoicesListTableComponent from "../invoices-list-table/invoices-list-table.component";
+import AlertComponent from "../alert/alert.component";
 
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
 });
 const mapDispatchToProps = dispatch => ({
-  toggleModalVisible: () => dispatch(toggleModalVisible("invoiceEnter")),
   setInvoiceEnterContext: context =>
     dispatch(setModalContext({ context: context, modal: "invoiceEnter" }))
 });
@@ -19,9 +17,9 @@ export default connect(
   mapStateToProps,
   mapDispatchToProps
 )(function JobsDetailPliComponent({
-  toggleModalVisible,
   setInvoiceEnterContext,
-  job
+  job,
+  invoicesQuery
 }) {
   return (
     <div>
@@ -37,6 +35,13 @@ export default connect(
       >
         Enter Invoice
       </Button>
+      {invoicesQuery.error ? (
+        <AlertComponent message={invoicesQuery.error.message} type="error" />
+      ) : null}
+      <InvoicesListTableComponent
+        loading={invoicesQuery.loading}
+        invoices={invoicesQuery.data ? invoicesQuery.data.invoices : null}
+      />
     </div>
   );
 });

client/src/components/jobs-detail-pli/jobs-detail-pli.container.jsx

@@ -1,7 +1,12 @@
 import React from "react";
+import { useQuery } from "react-apollo";
 import JobsDetailPliComponent from "./jobs-detail-pli.component";
-
+import { QUERY_INVOICES_BY_JOBID } from "../../graphql/invoices.queries";
 export default function JobsDetailPliContainer({ job }) {
-  console.log("job", job);
-  return <JobsDetailPliComponent job={job} />;
+  const invoicesQuery = useQuery(QUERY_INVOICES_BY_JOBID, {
+    variables: { jobid: job.id },
+    fetchPolicy: "network-only"
+  });
+
+  return <JobsDetailPliComponent job={job} invoicesQuery={invoicesQuery} />;
 }