From 59b91d523b4a0c1ef40a423f94654f079e98cce2 Mon Sep 17 00:00:00 2001
From: Andrew Smith <andrew@andrew.codes>
Date: Mon, 19 Feb 2024 17:16:37 +0000
Subject: [PATCH] Removing individual filters quickly Fixes #202

---
 .../src/components/Filters/FilterForm.tsx            | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/apps/playnite-web/src/components/Filters/FilterForm.tsx b/apps/playnite-web/src/components/Filters/FilterForm.tsx
index 639203430..ca8e072ea 100644
--- a/apps/playnite-web/src/components/Filters/FilterForm.tsx
+++ b/apps/playnite-web/src/components/Filters/FilterForm.tsx
@@ -65,6 +65,13 @@ const filterFormReducer = (state, action) => {
         ...state,
         ['nameFilter']: action.payload,
       }
+    case 'removeFilter':
+      return {
+        ...state,
+        [`${state.filterBy}Filter`]: state[`${state.filterBy}Filter`].filter(
+          (filter) => filter.id !== action.payload,
+        ),
+      }
     case 'reset':
       return action.payload
     case 'clear':
@@ -118,6 +125,9 @@ const FilterForm: FC<{
       payload: values,
     })
   }, [])
+  const handleRemoveFilter = (filterId: string) => {
+    dispatch({ type: 'removeFilter', payload: filterId })
+  }
 
   const handleResetFilters = useCallback(
     (evt: React.FormEvent<HTMLFormElement>) => {
@@ -161,6 +171,7 @@ const FilterForm: FC<{
           <Fragment key={filter.id}>
             <Chip
               label={filter.name}
+              onDelete={() => handleRemoveFilter(filter.id)}
               sx={(theme) => ({ margin: theme.spacing(0.25) })}
             />
             <input type="hidden" name="platformFilter" value={filter.id} />
@@ -170,6 +181,7 @@ const FilterForm: FC<{
           <Fragment key={filter.id}>
             <Chip
               label={filter.name}
+              onDelete={() => handleRemoveFilter(filter.id)}
               sx={(theme) => ({ margin: theme.spacing(0.25) })}
             />
             <input type="hidden" name="featureFilter" value={filter.id} />