From c8cc9ad3a50e71c5e38334f171007d585e7bf9a7 Mon Sep 17 00:00:00 2001
From: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com>
Date: Fri, 1 Aug 2025 11:11:18 +0200
Subject: [PATCH] refactor: filters

---
 .../src/component/filter/AddFilterButton.tsx  | 12 +--
 .../src/component/filter/Filters/Filters.tsx  | 74 +++++++++----------
 .../ProjectFeatureToggles.tsx                 |  1 +
 3 files changed, 37 insertions(+), 50 deletions(-)

diff --git a/frontend/src/component/filter/AddFilterButton.tsx b/frontend/src/component/filter/AddFilterButton.tsx
index e038899220..e1f23212dc 100644
--- a/frontend/src/component/filter/AddFilterButton.tsx
+++ b/frontend/src/component/filter/AddFilterButton.tsx
@@ -38,17 +38,15 @@ const StyledIcon = styled(Icon)(({ theme }) => ({
 
 interface IAddFilterButtonProps {
     visibleOptions: string[];
-    setVisibleOptions: (filters: string[]) => void;
     hiddenOptions: string[];
-    setHiddenOptions: (filters: string[]) => void;
+    onSelectedOptionsChange: (filters: string[]) => void;
     availableFilters: IFilterItem[];
 }
 
 export const AddFilterButton = ({
     visibleOptions,
-    setVisibleOptions,
     hiddenOptions,
-    setHiddenOptions,
+    onSelectedOptionsChange,
     availableFilters,
 }: IAddFilterButtonProps) => {
     const projectId = useOptionalPathParam('projectId');
@@ -69,11 +67,7 @@ export const AddFilterButton = ({
     };
 
     const onSelect = (label: string) => {
-        const newVisibleOptions = visibleOptions.filter((f) => f !== label);
-        const newHiddenOptions = [...hiddenOptions, label];
-
-        setHiddenOptions(newHiddenOptions);
-        setVisibleOptions(newVisibleOptions);
+        onSelectedOptionsChange([...hiddenOptions, label]);
         handleClose();
     };
 
diff --git a/frontend/src/component/filter/Filters/Filters.tsx b/frontend/src/component/filter/Filters/Filters.tsx
index 6241f6c041..e1e92879ae 100644
--- a/frontend/src/component/filter/Filters/Filters.tsx
+++ b/frontend/src/component/filter/Filters/Filters.tsx
@@ -1,6 +1,5 @@
-import { type FC, useEffect, useState } from 'react';
+import { type FC, useEffect, useMemo, useState } from 'react';
 import { Box, Icon, styled } from '@mui/material';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { AddFilterButton } from '../AddFilterButton.tsx';
 import { FilterDateItem } from 'component/common/FilterDateItem/FilterDateItem';
 import {
@@ -165,6 +164,22 @@ const SingleFilter: FC<SingleFilterProps> = ({
     );
 };
 
+const mergeArraysKeepingOrder = (
+    firstArray: string[],
+    secondArray: string[],
+): string[] => {
+    const resultArray: string[] = [...firstArray];
+    const elementsSet = new Set(firstArray);
+
+    secondArray.forEach((element) => {
+        if (!elementsSet.has(element)) {
+            resultArray.push(element);
+        }
+    });
+
+    return resultArray;
+};
+
 type MultiFilterProps = IFilterProps & {
     rangeChangeHandler: RangeChangeHandler;
 };
@@ -176,31 +191,12 @@ const MultiFilter: FC<MultiFilterProps> = ({
     rangeChangeHandler,
     className,
 }) => {
-    const [unselectedFilters, setUnselectedFilters] = useState<string[]>([]);
     const [selectedFilters, setSelectedFilters] = useState<string[]>([]);
 
     const deselectFilter = (label: string) => {
         const newSelectedFilters = selectedFilters.filter((f) => f !== label);
-        const newUnselectedFilters = [...unselectedFilters, label].sort();
 
         setSelectedFilters(newSelectedFilters);
-        setUnselectedFilters(newUnselectedFilters);
-    };
-
-    const mergeArraysKeepingOrder = (
-        firstArray: string[],
-        secondArray: string[],
-    ): string[] => {
-        const resultArray: string[] = [...firstArray];
-        const elementsSet = new Set(firstArray);
-
-        secondArray.forEach((element) => {
-            if (!elementsSet.has(element)) {
-                resultArray.push(element);
-            }
-        });
-
-        return resultArray;
     };
 
     useEffect(() => {
@@ -219,15 +215,16 @@ const MultiFilter: FC<MultiFilterProps> = ({
             newSelectedFilters,
         );
         setSelectedFilters(allSelectedFilters);
-
-        const newUnselectedFilters = availableFilters
-            .filter((item) => !allSelectedFilters.includes(item.label))
-            .map((field) => field.label)
-            .sort();
-        setUnselectedFilters(newUnselectedFilters);
     }, [JSON.stringify(state), JSON.stringify(availableFilters)]);
 
-    const hasAvailableFilters = unselectedFilters.length > 0;
+    const unselectedFilters = useMemo(
+        () =>
+            availableFilters
+                .filter((item) => !selectedFilters.includes(item.label))
+                .map((field) => field.label)
+                .sort(),
+        [availableFilters, selectedFilters],
+    );
 
     return (
         <StyledBox className={className}>
@@ -251,19 +248,14 @@ const MultiFilter: FC<MultiFilterProps> = ({
                     />
                 );
             })}
-
-            <ConditionallyRender
-                condition={hasAvailableFilters}
-                show={
-                    <AddFilterButton
-                        availableFilters={availableFilters}
-                        visibleOptions={unselectedFilters}
-                        setVisibleOptions={setUnselectedFilters}
-                        hiddenOptions={selectedFilters}
-                        setHiddenOptions={setSelectedFilters}
-                    />
-                }
-            />
+            {unselectedFilters.length > 0 ? (
+                <AddFilterButton
+                    availableFilters={availableFilters}
+                    visibleOptions={unselectedFilters}
+                    hiddenOptions={selectedFilters}
+                    onSelectedOptionsChange={setSelectedFilters}
+                />
+            ) : null}
         </StyledBox>
     );
 };
diff --git a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx
index 03a6127891..7a9dc0245c 100644
--- a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx
+++ b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx
@@ -114,6 +114,7 @@ export const ProjectFeatureToggles = ({
         createdBy: tableState.createdBy,
         archived: tableState.archived,
         lifecycle: tableState.lifecycle,
+        lastSeenAt: tableState.lastSeenAt,
     };
 
     const { favorite, unfavorite } = useFavoriteFeaturesApi();