diff --git a/next-tavla/app/(admin)/boards/components/FilterButton/index.tsx b/next-tavla/app/(admin)/boards/components/FilterButton/index.tsx index 736272bed..6919d2e70 100644 --- a/next-tavla/app/(admin)/boards/components/FilterButton/index.tsx +++ b/next-tavla/app/(admin)/boards/components/FilterButton/index.tsx @@ -10,28 +10,27 @@ import { Heading4, Paragraph } from '@entur/typography' import { CloseIcon, FilterIcon } from '@entur/icons' import { TTag } from 'types/meta' import { FilterChip } from '@entur/chip' -import { uniq, xor } from 'lodash' import { NotificationBadge } from '@entur/layout' -import { TBoardWithOrganizaion } from 'types/settings' import { useSearchParamReplacer } from '../../hooks/useSearchParamReplacer' +import { useEffect, useState } from 'react' +import { xor } from 'lodash' -function FilterButton({ - boardsWithOrg, -}: { - boardsWithOrg: TBoardWithOrganizaion[] -}) { +function FilterButton({ filterOptions }: { filterOptions?: TTag[] }) { const [value, replace] = useSearchParamReplacer('tags') - const activeTags = value?.split(',') ?? [] - const allTags = uniq( - boardsWithOrg.flatMap((boardWithOrg) => { - return boardWithOrg?.board.meta?.tags ?? [] - }), - ) - const filterTags: TTag[] = activeTags.filter((tag: TTag) => - allTags.includes(tag), + const [activeTags, setActiveTags] = useState( + value?.split(',') ?? [], ) + useEffect(() => { + replace(activeTags.join(',')) + }, [activeTags, replace]) + + const handleFilterChipChange = (tag: TTag) => { + const newTags = xor(activeTags, [tag]) + setActiveTags(newTags) + } + return ( @@ -44,7 +43,7 @@ function FilterButton({