2 files changed, 77 insertions, 41 deletions

diff --git a/src/lib/ServiceFilters.tsx b/src/lib/ServiceFilters.tsx
new file mode 100644
index 0000000..4a7f166
--- /dev/null
+++ b/src/lib/ServiceFilters.tsx
@@ -0,0 +1,74 @@
+import React, { useContext } from 'react';
+import { useHistory } from 'react-router-dom';
+import _ from 'lodash';
+import hooks from '../hooks/useAPIClient';
+import useQuery from '../hooks/useQuery';
+import ServiceContext, { Filter } from './ServiceContext';
+import { SelectBase } from '../components/Select';
+
+const getOptionLabel = (item: any, filter: Filter) => {
+  const value = _.get(item, filter.as || filter.key);
+  return filter.transform ? filter.transform(value) : value;
+};
+
+
+const ServiceFilters: React.FC = () => {
+  const service = useContext(ServiceContext);
+  const query = useQuery();
+  const history = useHistory();
+  const { data } = hooks[service.route].useList('', { revalidateOnMount: !_.isEmpty(query) });
+
+  const filters = service.filters?.map(filter => {
+    const options = _
+      .uniqBy(data, filter.key)
+      .map((item: any) => ({
+        key: _.get(item, filter.key),
+        label: getOptionLabel(item, filter),
+      }));
+
+    // Add default option
+    options?.unshift({
+      key: '-',
+      label: filter.label,
+    });
+
+    const value = _.get(query, filter.key) || '-';
+
+    return { ...filter, options, value };
+  });
+
+  const handleFilterChange = (key: string) => (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const { value } = event.target;
+    const updatedQuery = { ...query, [key]: value };
+    if (value === '-') delete updatedQuery[key];
+
+    const queryString = new URLSearchParams(updatedQuery);
+    history.push(`${service.route}?${queryString}`);
+  };
+
+  const resetFilters = () => history.push(service.route);
+
+  return (
+    <div className="mr-6 flex items-center">
+      {filters && !_.isEmpty(query) && (
+        <span
+          onClick={resetFilters}
+          role="presentation"
+          className="underline mr-2 cursor-pointer"
+        >
+          Сбросить фильтры
+        </span>
+      )}
+      {filters?.map(filter => (
+        <SelectBase
+          key={filter.key}
+          options={filter.options || []}
+          value={filter.value}
+          onChange={handleFilterChange(filter.key)}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default ServiceFilters;
diff --git a/src/lib/ServiceList.tsx b/src/lib/ServiceList.tsx
index 9f6835a..ae17a9c 100644
--- a/src/lib/ServiceList.tsx
+++ b/src/lib/ServiceList.tsx
@@ -4,46 +4,20 @@ import _ from 'lodash';
 import Page from '../containers/Page';
 import ListTable from '../components/ListTable';
 import hooks from '../hooks/useAPIClient';
-import ServiceContext, { Filter } from './ServiceContext';
-import useQuery from '../hooks/useQuery';
-
-const getOptionLabel = (item: any, filter: Filter) => {
-  const value = _.get(item, filter.as || filter.key);
-  return filter.transform ? filter.transform(value) : value;
-};
+import ServiceContext from './ServiceContext';
+import ServiceFilters from './ServiceFilters';
 
 const ServiceList: React.FC = () => {
   const service = useContext(ServiceContext);
   const history = useHistory();
   const location = useLocation();
-  const query = useQuery();
   const { data } = hooks[service.route].useList(location.search);
-  const { data: unfilteredData } = hooks[service.route].useList('', { revalidateOnMount: !!location.search });
 
   const actions = service.actions || [{
     name: 'Добавить',
     route: `/${service.route}/add${location.search}`,
   }];
 
-  const filters = service.filters?.map(filter => {
-    const options = _
-      .uniqBy(unfilteredData, filter.key)
-      .map((item: any) => ({
-        key: _.get(item, filter.key),
-        label: getOptionLabel(item, filter),
-      }));
-
-    // Add default option
-    options?.unshift({
-      key: '-',
-      label: filter.label,
-    });
-
-    const value = _.get(query, filter.key);
-
-    return { ...filter, options, value };
-  });
-
   const handleRowClick = (item: any) => {
     const route = service.rowLink
       ? service.rowLink(item)
@@ -52,23 +26,11 @@ const ServiceList: React.FC = () => {
     history.push(route);
   };
 
-  const applyFilter = (key: string, value: string) => {
-    const updatedQuery = { ...query, [key]: value };
-    if (value === '-') delete updatedQuery[key];
-
-    const queryString = new URLSearchParams(updatedQuery);
-    history.push(`${service.route}?${queryString}`);
-  };
-
-  const resetFilters = () => history.push(service.route);
-
   return (
     <Page
       title={service.name}
       actions={actions}
-      filters={filters}
-      applyFilter={applyFilter}
-      resetFilters={resetFilters}
+      filters={<ServiceFilters />}
     >
       <ListTable items={data} fields={service.tableFields} handleRowClick={handleRowClick} />
     </Page>