Add Search Api/Components.

hooks/useApiFilter.ts

@@ -0,0 +1,28 @@
+import { useState } from 'react';
+
+export function useApiFilter() {
+  const [filter, setFilter] = useState();
+  const [filterType, setFilterType] = useState('All');
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+
+  const handleFilterChange = value => setFilter(value);
+  const handlePageChange = value => setPage(value);
+  const handlePageSizeChange = value => setPageSize(value);
+
+  return {
+    filter,
+    setFilter,
+    filterType,
+    setFilterType,
+    page,
+    setPage,
+    pageSize,
+    setPageSize,
+    handleFilterChange,
+    handlePageChange,
+    handlePageSizeChange,
+  };
+}
+
+export default useApiFilter;

hooks/useReports.js

@@ -1,12 +1,16 @@
 import { useState } from 'react';
 import useApi from './useApi';
+import useApiFilter from 'hooks/useApiFilter';
 
 export function useReports(websiteId) {
   const [modified, setModified] = useState(Date.now());
   const { get, useQuery, del, useMutation } = useApi();
   const { mutate } = useMutation(reportId => del(`/reports/${reportId}`));
-  const { data, error, isLoading } = useQuery(['reports:website', { websiteId, modified }], () =>
-    get(`/reports`, { websiteId }),
+  const { filter, page, pageSize, handleFilterChange, handlePageChange, handlePageSizeChange } =
+    useApiFilter();
+  const { data, error, isLoading } = useQuery(
+    ['reports:website', { websiteId, modified, filter, page, pageSize }],
+    () => get(`/reports`, { websiteId, filter, page, pageSize }),
   );
 
   const deleteReport = id => {
@@ -17,7 +21,18 @@ export function useReports(websiteId) {
     });
   };
 
-  return { reports: data, error, isLoading, deleteReport };
+  return {
+    reports: data,
+    error,
+    isLoading,
+    deleteReport,
+    filter,
+    page,
+    pageSize,
+    handleFilterChange,
+    handlePageChange,
+    handlePageSizeChange,
+  };
 }
 
 export default useReports;