feat: complete filtering logic

1 files changed, 12 insertions, 2 deletions

diff --git a/src/containers/Page.tsx b/src/containers/Page.tsx
index 467e458..458bf15 100644
--- a/src/containers/Page.tsx
+++ b/src/containers/Page.tsx
@@ -8,12 +8,17 @@ interface Props {
   title?: string;
   actions?: Action[];
   filters?: Filter[];
+  applyFilter?: (key: string, value: string) => void;
   className?: string;
 }
 
 const style = 'mb-2 flex justify-between md:flex-row md:items-center';
 
-const Page: React.FC<Props> = ({ title, actions, filters, className, children }) => {
+const Page: React.FC<Props> = ({ title, actions, filters, applyFilter, className, children }) => {
+  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'}`}>
@@ -21,7 +26,12 @@ const Page: React.FC<Props> = ({ title, actions, filters, className, children })
         <div className="flex">
           <div className="mr-6 flex">
             {filters?.map(filter => (
-              <SelectBase key={filter.key} options={filter.options || []} value={filter.value} />
+              <SelectBase
+                key={filter.key}
+                options={filter.options || []}
+                value={filter.value}
+                onChange={handleFilterChange(filter.key)}
+              />
             ))}
           </div>
           <div>