IO-2206 WIP Time Ticket Approval Queue.

client/src/components/tt-approvals-list/tt-approvals-list.container.jsx

@@ -0,0 +1,66 @@
+import { useQuery } from "@apollo/client";
+import React from "react";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import AlertComponent from "../alert/alert.component";
+import { QUERY_TIME_TICKETS_IN_RANGE } from "../../graphql/timetickets.queries";
+import {
+  setBreadcrumbs,
+  setSelectedHeader,
+} from "../../redux/application/application.actions";
+import TtApprovalsListComponent from "./tt-approvals-list.component";
+import { useLocation } from "react-router-dom";
+import queryString from "query-string";
+import { QUERY_ALL_TT_APPROVALS_PAGINATED } from "../../graphql/tt-approvals.queries";
+
+const mapStateToProps = createStructuredSelector({});
+
+const mapDispatchToProps = (dispatch) => ({
+  setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
+  setSelectedHeader: (key) => dispatch(setSelectedHeader(key)),
+});
+
+export function TimeTicketsContainer({
+  bodyshop,
+  setBreadcrumbs,
+  setSelectedHeader,
+}) {
+  const searchParams = queryString.parse(useLocation().search);
+  const { page, sortcolumn, sortorder, search, searchObj } = searchParams;
+
+  const { loading, error, data } = useQuery(QUERY_ALL_TT_APPROVALS_PAGINATED, {
+    fetchPolicy: "network-only",
+    nextFetchPolicy: "network-only",
+    variables: {
+      search: search || "",
+      offset: page ? (page - 1) * 25 : 0,
+      limit: 25,
+      order: [
+        searchObj
+          ? JSON.parse(searchObj)
+          : {
+              [sortcolumn || "date"]: sortorder
+                ? sortorder === "descend"
+                  ? "desc"
+                  : "asc"
+                : "desc",
+            },
+      ],
+    },
+  });
+
+  if (error) return <AlertComponent message={error.message} type="error" />;
+
+  return (
+    <TtApprovalsListComponent
+      loading={loading}
+      tt_approval_queue={data ? data.tt_approval_queue : []}
+      total={data ? data.tt_approval_queue_aggregate.aggregate.count : 0}
+    />
+  );
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(TimeTicketsContainer);