From 394b9a6bfb4b15da01b8c464a39af4d1d46ca146 Mon Sep 17 00:00:00 2001
From: mrkarimoff <mrkarimoff99@gmail.com>
Date: Wed, 31 Jan 2024 15:34:07 +0500
Subject: [PATCH] add 'Apply' button for event filters

---
 .../analytics/EventsTable/TableFilter.tsx     | 28 +++++++++++++------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/apps/analytics/app/_components/analytics/EventsTable/TableFilter.tsx b/apps/analytics/app/_components/analytics/EventsTable/TableFilter.tsx
index 73ca6c19..191ebad4 100644
--- a/apps/analytics/app/_components/analytics/EventsTable/TableFilter.tsx
+++ b/apps/analytics/app/_components/analytics/EventsTable/TableFilter.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { type Dispatch, type SetStateAction } from "react";
+import { useState, type Dispatch, type SetStateAction } from "react";
 import { Button } from "~/components/ui/button";
 import { Checkbox } from "~/components/ui/checkbox";
 import {
@@ -18,8 +18,10 @@ type TableFilterProps = {
 };
 
 const TableFilter = ({ eventTypes, setEventTypes }: TableFilterProps) => {
+  const [options, setOptions] = useState<EventType[]>(eventTypes);
+
   const toggleOption = (option: string) => {
-    setEventTypes((prevState) =>
+    setOptions((prevState) =>
       prevState.map((t) =>
         t.text === option ? { ...t, isSelected: !t.isSelected } : t
       )
@@ -27,10 +29,10 @@ const TableFilter = ({ eventTypes, setEventTypes }: TableFilterProps) => {
   };
 
   const toggleAllOptions = (isSelected: boolean) => {
-    setEventTypes((prevState) => prevState.map((t) => ({ ...t, isSelected })));
+    setOptions((prevState) => prevState.map((t) => ({ ...t, isSelected })));
   };
 
-  const isAllSelected = eventTypes.every((option) => option.isSelected);
+  const isAllSelected = options.every((option) => option.isSelected);
 
   return (
     <DropdownMenu>
@@ -53,18 +55,26 @@ const TableFilter = ({ eventTypes, setEventTypes }: TableFilterProps) => {
           </label>
           <DropdownMenuSeparator />
 
-          {eventTypes.map((type) => (
+          {options.map((option) => (
             <label
-              key={type.text}
+              key={option.text}
               className="text-sm flex items-center gap-3 pl-2 transition-colors hover:bg-muted p-1 rounded-md"
             >
               <Checkbox
-                checked={type.isSelected}
-                onCheckedChange={() => toggleOption(type.text)}
+                checked={option.isSelected}
+                onCheckedChange={() => toggleOption(option.text)}
               />
-              <span>{type.text}</span>
+              <span>{option.text}</span>
             </label>
           ))}
+
+          <Button
+            onClick={() => setEventTypes(options)}
+            className="float-right"
+            size={"sm"}
+          >
+            Apply
+          </Button>
         </div>
       </DropdownMenuContent>
     </DropdownMenu>