Added invoice and invoice detail pages. Begin work on paginated invoices page.

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

@@ -0,0 +1,57 @@
+import { useQuery } from "@apollo/react-hooks";
+import React from "react";
+import { QUERY_ALL_INVOICES_PAGINATED } from "../../graphql/invoices.queries";
+import InvoicesPageComponent from "./invoices.page.component";
+import AlertComponent from "../../components/alert/alert.component";
+import queryString from "query-string";
+import { useHistory, useLocation } from "react-router-dom";
+
+export default function InvoicesPageContainer() {
+  const { loading, error, data, fetchMore } = useQuery(
+    QUERY_ALL_INVOICES_PAGINATED,
+    {
+      variables: { offset: 0, limit: 1 },
+    }
+  );
+  const search = queryString.parse(useLocation().search);
+  const history = useHistory();
+
+  const handleOnRowClick = (record) => {
+    if (record) {
+      if (record.id) {
+        search.invoiceid = record.id;
+        history.push({ search: queryString.stringify(search) });
+      }
+    } else {
+      delete search.invoiceid;
+      history.push({ search: queryString.stringify(search) });
+    }
+  };
+
+  const handleFetchMore = (offset) => {
+    fetchMore({
+      variables: {
+        offset: offset,
+      },
+      updateQuery: (prev, { fetchMoreResult }) => {
+        if (!fetchMoreResult) return prev;
+        return Object.assign({}, prev, {
+          invoices: [...prev.invoices, ...fetchMoreResult.invoices],
+        });
+      },
+    });
+  };
+
+  if (error) return <AlertComponent message={error.message} type="error" />;
+  return (
+    <div>
+      <InvoicesPageComponent
+        loading={loading}
+        invoices={data ? data.invoices : null}
+        selectedInvoice={search.invoiceid}
+        handleFetchMore={handleFetchMore}
+        handleOnRowClick={handleOnRowClick}
+      />
+    </div>
+  );
+}