From c222bc06f9c123d3e2fa4a428d74032f54887485 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Sat, 17 Apr 2021 19:56:30 +0300
Subject: feat: add ServiceSearch

---
 src/lib/ServiceContext.tsx |  1 +
 src/lib/ServiceFilters.tsx |  6 ++----
 src/lib/ServiceItem.tsx    |  2 +-
 src/lib/ServiceList.tsx    | 10 +++++++++-
 src/lib/ServiceSearch.tsx  | 31 +++++++++++++++++++++++++++++++
 5 files changed, 44 insertions(+), 6 deletions(-)
 create mode 100644 src/lib/ServiceSearch.tsx

(limited to 'src/lib')

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;
-- 
cgit v1.2.3