feat: add ServiceSearch

8 files changed, 63 insertions, 12 deletions

diff --git a/src/components/ListTable.tsx b/src/components/ListTable.tsx
index e90d2db..6874387 100644
--- a/src/components/ListTable.tsx
+++ b/src/components/ListTable.tsx
@@ -40,7 +40,7 @@ const ListTable: React.FC<Props> = ({ items = [], fields, handleRowClick = () =>
     setSortBy(field.key);
   }, [sortBy, sortOrder]);
 
-  if (!items.length) return <div className="text-center p-6">No data</div>;
+  if (!items.length) return <div className="text-center p-6">Ничего не найдено</div>;
 
   return (
     <table className="table-auto w-full">
diff --git a/src/hooks/useQuery.ts b/src/hooks/useQuery.ts
index f025a46..e9a00ec 100644
--- a/src/hooks/useQuery.ts
+++ b/src/hooks/useQuery.ts
@@ -1,9 +1,21 @@
-import { useLocation } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 
-const useQuery = (): Record<string, string> => {
-  const location = useLocation();
-  const searchParams = new URLSearchParams(location.search);
-  return Object.fromEntries(searchParams);
+interface UseQuery {
+  query: Record<string, string>;
+  setQuery: (query: Record<string, string>) => void;
+}
+
+const useQuery = (): UseQuery => {
+  const history = useHistory();
+  const searchParams = new URLSearchParams(history.location.search);
+  const query = Object.fromEntries(searchParams);
+
+  const setQuery = (newQuery: Record<string, string>): void => {
+    const queryString = new URLSearchParams(newQuery);
+    history.push({ search: `?${queryString}` });
+  };
+
+  return { query, setQuery };
 };
 
 export default useQuery;
diff --git a/src/lib/ServiceContext.tsx b/src/lib/ServiceContext.tsx
index 2001d00..2573134 100644
--- a/src/lib/ServiceContext.tsx
+++ b/src/lib/ServiceContext.tsx
@@ -28,6 +28,7 @@ export interface ServiceParams<T = any> {
   routes?: Record<string, React.FC>;
   actions?: Action[];
   filters?: Filter[];
+  searchBy?: string[];
   rowLink?: (item: T) => string;
   Form?: React.FC<FormikProps<T>>;
   Panel?: React.FC<PanelProps<T>>;
diff --git a/src/lib/ServiceFilters.tsx b/src/lib/ServiceFilters.tsx
index 4a7f166..8a1e160 100644
--- a/src/lib/ServiceFilters.tsx
+++ b/src/lib/ServiceFilters.tsx
@@ -14,7 +14,7 @@ const getOptionLabel = (item: any, filter: Filter) => {
 
 const ServiceFilters: React.FC = () => {
   const service = useContext(ServiceContext);
-  const query = useQuery();
+  const { query, setQuery } = useQuery();
   const history = useHistory();
   const { data } = hooks[service.route].useList('', { revalidateOnMount: !_.isEmpty(query) });
 
@@ -41,9 +41,7 @@ const ServiceFilters: React.FC = () => {
     const { value } = event.target;
     const updatedQuery = { ...query, [key]: value };
     if (value === '-') delete updatedQuery[key];
-
-    const queryString = new URLSearchParams(updatedQuery);
-    history.push(`${service.route}?${queryString}`);
+    setQuery(updatedQuery);
   };
 
   const resetFilters = () => history.push(service.route);
diff --git a/src/lib/ServiceItem.tsx b/src/lib/ServiceItem.tsx
index 6a0a99b..a639132 100644
--- a/src/lib/ServiceItem.tsx
+++ b/src/lib/ServiceItem.tsx
@@ -15,7 +15,7 @@ interface Params {
 const ServiceItem: React.FC = () => {
   const service = useContext(ServiceContext);
   const history = useHistory();
-  const query = useQuery();
+  const { query } = useQuery();
   const { id } = useParams<Params>();
   const { data: item, mutate } = hooks[service.route].useItem(id);
 
diff --git a/src/lib/ServiceList.tsx b/src/lib/ServiceList.tsx
index ae17a9c..8983bfa 100644
--- a/src/lib/ServiceList.tsx
+++ b/src/lib/ServiceList.tsx
@@ -6,6 +6,7 @@ import ListTable from '../components/ListTable';
 import hooks from '../hooks/useAPIClient';
 import ServiceContext from './ServiceContext';
 import ServiceFilters from './ServiceFilters';
+import ServiceSearch from './ServiceSearch';
 
 const ServiceList: React.FC = () => {
   const service = useContext(ServiceContext);
@@ -26,11 +27,18 @@ const ServiceList: React.FC = () => {
     history.push(route);
   };
 
+  const filters = (
+    <>
+      {service.searchBy && <ServiceSearch />}
+      {service.filters && <ServiceFilters />}
+    </>
+  );
+
   return (
     <Page
       title={service.name}
       actions={actions}
-      filters={<ServiceFilters />}
+      filters={filters}
     >
       <ListTable items={data} fields={service.tableFields} handleRowClick={handleRowClick} />
     </Page>
diff --git a/src/lib/ServiceSearch.tsx b/src/lib/ServiceSearch.tsx
new file mode 100644
index 0000000..b2509d3
--- /dev/null
+++ b/src/lib/ServiceSearch.tsx
@@ -0,0 +1,31 @@
+import React, { useContext } from 'react';
+import _ from 'lodash';
+import { InputBase } from '../components/Input';
+import ServiceContext from './ServiceContext';
+import useQuery from '../hooks/useQuery';
+
+const ServiceSearch: React.FC = () => {
+  const service = useContext(ServiceContext);
+  const { query, setQuery } = useQuery();
+
+  const placeholder = `Искать ${service.name.toLowerCase()}`;
+
+  const handleChange = _.debounce((event: React.ChangeEvent<HTMLInputElement>) => {
+    if (service.searchBy) {
+      const newQuery = service.searchBy.reduce((acc, key) => {
+        acc[`${key}[$regex]`] = event.target.value;
+        return acc;
+      }, query);
+
+      setQuery(newQuery);
+    }
+  }, 250);
+
+  return (
+    <div className="mr-6 flex items-center">
+      <InputBase placeholder={placeholder} onChange={handleChange} />
+    </div>
+  );
+};
+
+export default ServiceSearch;
diff --git a/src/services/products/index.ts b/src/services/products/index.ts
index 8e09eb2..2e9a714 100644
--- a/src/services/products/index.ts
+++ b/src/services/products/index.ts
@@ -11,6 +11,7 @@ const service: ServiceParams<Product> = {
     { key: 'price', label: 'Цена' },
     { key: 'quantity', label: 'На складе' },
   ],
+  searchBy: ['name'],
   default: {
     name: '',
     price: 0,