Added vehicle search function + paginated vehicles page BOD-116

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

@@ -2,18 +2,40 @@ import React from "react";
 import VehiclesListComponent from "./vehicles-list.component";
 import { useQuery } from "@apollo/react-hooks";
 import AlertComponent from "../alert/alert.component";
-import { QUERY_ALL_VEHICLES } from "../../graphql/vehicles.queries";
+import { QUERY_ALL_VEHICLES_PAGINATED } from "../../graphql/vehicles.queries";
+import queryString from "query-string";
+import { useLocation } from "react-router-dom";
 
 export default function VehiclesListContainer() {
-  const { loading, error, data, refetch } = useQuery(QUERY_ALL_VEHICLES, {
-    fetchPolicy: "network-only"
-  });
+  const searchParams = queryString.parse(useLocation().search);
+  const { page, sortcolumn, sortorder, search } = searchParams;
+
+  const { loading, error, data, refetch } = useQuery(
+    QUERY_ALL_VEHICLES_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" />;
   return (
     <VehiclesListComponent
       loading={loading}
-      vehicles={data ? data.vehicles : null}
+      vehicles={data ? data.search_vehicles : null}
+      total={data ? data.search_vehicles_aggregate.aggregate.count : 0}
       refetch={refetch}
     />
   );