feat: add reset filters button

2 files changed, 24 insertions, 3 deletions

diff --git a/src/containers/Page.tsx b/src/containers/Page.tsx
index 458bf15..69f3513 100644
--- a/src/containers/Page.tsx
+++ b/src/containers/Page.tsx
@@ -1,4 +1,5 @@
 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';
@@ -9,12 +10,15 @@ interface Props {
   actions?: Action[];
   filters?: Filter[];
   applyFilter?: (key: string, value: string) => void;
+  resetFilters?: () => void;
   className?: string;
 }
 
 const style = 'mb-2 flex justify-between md:flex-row md:items-center';
 
-const Page: React.FC<Props> = ({ title, actions, filters, applyFilter, className, children }) => {
+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);
   };
@@ -24,7 +28,16 @@ const Page: React.FC<Props> = ({ title, actions, filters, applyFilter, className
       <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">
+          <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}
diff --git a/src/lib/ServiceList.tsx b/src/lib/ServiceList.tsx
index 6316ea1..9f6835a 100644
--- a/src/lib/ServiceList.tsx
+++ b/src/lib/ServiceList.tsx
@@ -60,8 +60,16 @@ const ServiceList: React.FC = () => {
     history.push(`${service.route}?${queryString}`);
   };
 
+  const resetFilters = () => history.push(service.route);
+
   return (
-    <Page title={service.name} actions={actions} filters={filters} applyFilter={applyFilter}>
+    <Page
+      title={service.name}
+      actions={actions}
+      filters={filters}
+      applyFilter={applyFilter}
+      resetFilters={resetFilters}
+    >
       <ListTable items={data} fields={service.tableFields} handleRowClick={handleRowClick} />
     </Page>
   );