From ff2558a9d1f0f6f614b5e92fa41957bfb69001c7 Mon Sep 17 00:00:00 2001
From: GRBurst <GRBurst@protonmail.com>
Date: Sat, 25 May 2024 15:17:55 +0200
Subject: [PATCH] allow removing of custom filters

Signed-off-by: GRBurst <GRBurst@protonmail.com>
---
 frontend/src/components/CustomFilters.tsx     |  2 +-
 frontend/src/components/FilterableJobList.tsx |  7 ++++++
 frontend/src/components/HnJobs.tsx            |  2 ++
 frontend/src/components/TagFilterBar.tsx      | 24 +++++++++++++------
 frontend/src/index.css                        |  2 +-
 5 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/CustomFilters.tsx b/frontend/src/components/CustomFilters.tsx
index d640b3c..13bd579 100644
--- a/frontend/src/components/CustomFilters.tsx
+++ b/frontend/src/components/CustomFilters.tsx
@@ -17,7 +17,7 @@ const CustomTagFilter = ({ onTagAdd }: CustomTagFilterProps) => {
     const addNewTag = () => {
         if (tagName !== undefined && tagName != "") {
             const newFlags = (tagPatternFlags !== undefined && tagPatternFlags != "") ? tagPattern : "gmi"
-            const newTag = (tagPattern !== undefined && tagPattern != "") ? TagFilter({ name: tagName, pattern: RegExp(tagPattern, newFlags) }) : TagFilterSimple(tagName)
+            const newTag = (tagPattern !== undefined && tagPattern != "") ? TagFilter({ name: tagName, pattern: RegExp(`(${tagPattern})`, newFlags) }) : TagFilterSimple(tagName)
             onTagAdd(AppConfig.tagFilters.custom.sectionName, newTag)
             setTagName("")
             setTagPattern("")
diff --git a/frontend/src/components/FilterableJobList.tsx b/frontend/src/components/FilterableJobList.tsx
index f00867b..755b872 100644
--- a/frontend/src/components/FilterableJobList.tsx
+++ b/frontend/src/components/FilterableJobList.tsx
@@ -190,6 +190,13 @@ const FilterableJobList = ({
             JSON.stringify(Array.from(allTagFilters.get(AppConfig.tagFilters.custom.sectionName) ?? []).map(f => tagFilterToString(f)))
           )
         }}
+        onTagRemove={(key: string, tag: TagFilter) => {
+          removeFilters(key, tag, allTagFilters, setAllTagFilters)
+          localStorage.setItem(
+            AppConfig.tagFilters.custom.localStorageKey,
+            JSON.stringify(Array.from(allTagFilters.get(AppConfig.tagFilters.custom.sectionName) ?? []).map(f => tagFilterToString(f)))
+          )
+        }}
         onSearch={(needle: string | undefined) => setSearchFilter(needle)}
       />
       <ItemList
diff --git a/frontend/src/components/HnJobs.tsx b/frontend/src/components/HnJobs.tsx
index 1b9147f..76fb8ef 100644
--- a/frontend/src/components/HnJobs.tsx
+++ b/frontend/src/components/HnJobs.tsx
@@ -66,8 +66,10 @@ const HnJobs = () => {
     if (customFilters) {
       const restoredFilters = JSON.parse(customFilters).map((f: string) => tagFilterFromString(f))
       console.log("Restoring custom filters: ", restoredFilters)
+      if (restoredFilters?.length) {
       predefinedFilterTags.set(AppConfig.tagFilters.custom.sectionName, HSet.fromIterable(restoredFilters));
     }
+    }
 
   }, []);
 
diff --git a/frontend/src/components/TagFilterBar.tsx b/frontend/src/components/TagFilterBar.tsx
index ba0e5de..1ffcf05 100644
--- a/frontend/src/components/TagFilterBar.tsx
+++ b/frontend/src/components/TagFilterBar.tsx
@@ -1,5 +1,5 @@
 import { CSSProperties, Fragment, ReactNode, useContext, useState } from 'react';
-import { Collapse, Drawer, Flex, Button, FloatButton } from "antd";
+import { Collapse, Drawer, Flex, FloatButton, Tag } from "antd";
 import type { CollapseProps } from 'antd';
 import { EditFilled, FilterTwoTone } from '@ant-design/icons';
 
@@ -16,15 +16,24 @@ interface TagProps {
     filterKey: string
     isActive: boolean
     onActiveChange: (filterKey: string, tag: TagF) => void
+    deletable: boolean
+    onTagRemove: (filterKey: string, tag: TagF) => void
 }
 
-function TagButton({ tagFilter, filterKey, isActive, onActiveChange }: TagProps): ReactNode {
-    return <Button type={isActive ? "primary" : "default"} onClick={() => onActiveChange(filterKey, tagFilter)}>{tagFilter.name}</Button>
+function TagButton({ tagFilter, filterKey, isActive, onActiveChange, deletable, onTagRemove }: TagProps): ReactNode {
+    return <Tag
+        color={isActive ? AppConfig.colors.primary : "default"}
+        closable={deletable}
+        onClick={() => onActiveChange(filterKey, tagFilter)}
+        onClose={() => deletable ? onTagRemove(filterKey, tagFilter) : {}}
+    >{tagFilter.name}</Tag>
 }
 
 TagButton.defaultProps = {
     isActive: false,
-    onActiveChange: () => { }
+    onActiveChange: () => { },
+    deletable: false,
+    onTagRemove: () => { },
 }
 
 interface TagFilterProps {
@@ -33,9 +42,10 @@ interface TagFilterProps {
     onActive: (key: string, tag: TagF) => void
     onInactive: (key: string, tag: TagF) => void
     onTagAdd: (key: string, tag: TagF) => void
+    onTagRemove: (key: string, tag: TagF) => void
     onSearch: (needle: string | undefined) => void
 }
-const TagFilterDrawer = ({ allTags, activeTags, onActive, onInactive, onTagAdd, onSearch }: TagFilterProps) => {
+const TagFilterDrawer = ({ allTags, activeTags, onActive, onInactive, onTagAdd, onTagRemove, onSearch }: TagFilterProps) => {
     const [open, setOpen] = useState(false);
     const appContext = useContext(ConfigContext)
     const flatActive = flatFilters(activeTags)
@@ -69,7 +79,7 @@ const TagFilterDrawer = ({ allTags, activeTags, onActive, onInactive, onTagAdd,
                 children: (
                     <Flex key={tagKey} wrap="wrap" gap="small" className="filter-list">
                         {Array.from(HSet.difference(allTags.get(tagKey) ?? HSet.empty(), activeTags.get(tagKey) ?? HSet.empty())).sort(tagSort).map(tag =>
-                            <TagButton key={tagKey + tag.name} filterKey={tagKey} tagFilter={tag} isActive={false} onActiveChange={onActive} />)
+                            <TagButton key={tagKey + tag.name} filterKey={tagKey} tagFilter={tag} isActive={false} onActiveChange={onActive} deletable={tagKey == AppConfig.tagFilters.custom.sectionName} onTagRemove={onTagRemove} />)
                         }
                     </Flex>
                 ),
@@ -80,7 +90,7 @@ const TagFilterDrawer = ({ allTags, activeTags, onActive, onInactive, onTagAdd,
 
     const collapsableCustomFilter: CollapseProps['items'] = [
         {
-            key: AppConfig.tagFilters.custom.sectionName,
+            key: `Add${AppConfig.tagFilters.custom.sectionName}`,
             label: <h3 className="filter">{AppConfig.tagFilters.custom.name}</h3>,
             children: <CustomFilters onTagAdd={onTagAdd} onSearch={onSearch} />,
             style: panelStyle
diff --git a/frontend/src/index.css b/frontend/src/index.css
index d59d048..3af2495 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -42,7 +42,7 @@ h3.filter {
 }
 
 .filter-list {
-  min-height: 40px;
+  min-height: 22px;
   display: flex;
 }