refactor: move move filters to ServiceFilters

1 files changed, 15 insertions, 47 deletions

diff --git a/src/containers/Page.tsx b/src/containers/Page.tsx
index 69f3513..887e839 100644
--- a/src/containers/Page.tsx
+++ b/src/containers/Page.tsx
@@ -1,62 +1,30 @@
 import React from 'react';
-import { useLocation } from 'react-router-dom';
 import Paper from '../components/Paper';
 import Button from '../components/Button';
-import { Action, Filter } from '../lib/ServiceContext';
-import { SelectBase } from '../components/Select';
+import { Action } from '../lib/ServiceContext';
 
 interface Props {
   title?: string;
   actions?: Action[];
-  filters?: Filter[];
-  applyFilter?: (key: string, value: string) => void;
-  resetFilters?: () => void;
+  filters?: JSX.Element;
   className?: string;
 }
 
 const style = 'mb-2 flex justify-between md:flex-row md:items-center';
 
-const Page: React.FC<Props> = ({ title, actions, filters, applyFilter, resetFilters, className, children }) => {
-  const location = useLocation();
-
-  const handleFilterChange = (key: string) => (event: React.ChangeEvent<HTMLSelectElement>) => {
-    if (applyFilter) applyFilter(key, event.target.value);
-  };
-
-  return (
-    <Paper className="xl:m-5">
-      <div className={`${style} ${(actions?.length || 0) > 1 ? 'flex-col items-start' : 'flex-row items-center'}`}>
-        <span className="text-2xl font-bold">{title}</span>
-        <div className="flex">
-          <div className="mr-6 flex items-center">
-            {filters && location.search && (
-              <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>
-          <div>
-            {actions?.map(action => (<Button {...action} key={action.name} size="sm">{action.name}</Button>))}
-          </div>
-        </div>
-      </div>
-      <div className={className}>
-        {children}
+const Page: React.FC<Props> = ({ title, actions, filters, className, children }) => (
+  <Paper className="xl:m-5">
+    <div className={`${style} ${(actions?.length || 0) > 1 ? 'flex-col items-start' : 'flex-row items-center'}`}>
+      <span className="text-2xl font-bold">{title}</span>
+      <div className="flex">
+        {filters}
+        {actions?.map(action => (<Button {...action} key={action.name} size="sm">{action.name}</Button>))}
       </div>
-    </Paper>
-  );
-};
+    </div>
+    <div className={className}>
+      {children}
+    </div>
+  </Paper>
+);
 
 export default Page;