Added owners search + owner pagination page BOD-115

client/src/components/owners-list/owners-list.container.jsx

@@ -1,19 +1,40 @@
 import { useQuery } from "@apollo/react-hooks";
 import React from "react";
-import { QUERY_ALL_OWNERS } from "../../graphql/owners.queries";
+import { QUERY_ALL_OWNERS_PAGINATED } from "../../graphql/owners.queries";
 import AlertComponent from "../alert/alert.component";
 import OwnersListComponent from "./owners-list.component";
+import queryString from "query-string";
+import { useLocation } from "react-router-dom";
 
 export default function OwnersListContainer() {
-  const { loading, error, data, refetch } = useQuery(QUERY_ALL_OWNERS, {
-    fetchPolicy: "network-only",
-  });
+  const searchParams = queryString.parse(useLocation().search);
+  const { page, sortcolumn, sortorder, search } = searchParams;
+  const { loading, error, data, refetch } = useQuery(
+    QUERY_ALL_OWNERS_PAGINATED,
+    {
+      variables: {
+        search: search || "",
+        offset: page ? (page - 1) * 25 : 0,
+        limit: 25,
+        order: [
+          {
+            [sortcolumn || "created_at"]: sortorder
+              ? sortorder === "descend"
+                ? "desc"
+                : "asc"
+              : "desc",
+          },
+        ],
+      },
+    }
+  );
 
-  if (error) return <AlertComponent message={error.message} type='error' />;
+  if (error) return <AlertComponent message={error.message} type="error" />;
   return (
     <OwnersListComponent
       loading={loading}
-      owners={data ? data.owners : null}
+      owners={data ? data.search_owners : null}
+      total={data ? data.search_owners_aggregate.aggregate.count : 0}
       refetch={refetch}
     />
   );