chore(filter): refactor

entur · Jul 3, 2024 · 8a45bf0 · 8a45bf0
1 parent 68be8d6
commit 8a45bf0
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 43 deletions.
diff --git 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 } 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<TTag[]>(
+        value?.split(',') ?? [],
     )
 
+    useEffect(() => {
+        replace(activeTags.join(','))
+    }, [activeTags, replace])
+
+    const handleFilterChipChange = (tag: TTag) => {
+        const newTags = xor(activeTags, [tag])
+        setActiveTags(newTags)
+    }
+
     return (
         <Popover>
             <PopoverTrigger>
@@ -44,7 +43,7 @@ function FilterButton({
                         <FilterIcon aria-hidden="true" />
                     </SecondaryButton>
                     <NotificationBadge variant="primary" max={10}>
-                        {filterTags.length}
+                        {activeTags.length}
                     </NotificationBadge>
                     <span className="visuallyHidden">merkelapper valgt</span>
                 </div>
@@ -62,13 +61,12 @@ function FilterButton({
                         </PopoverCloseButton>
                     </div>
                     <div className="max-w-96 flex flex-wrap gap-1">
-                        {allTags.sort().map((tag: TTag) => (
+                        {filterOptions?.sort().map((tag: TTag) => (
                             <FilterChip
+                                type="checkbox"
                                 key={tag}
-                                checked={filterTags.includes(tag)}
-                                onChange={() =>
-                                    replace(xor(activeTags, [tag]).join(','))
-                                }
+                                checked={activeTags.includes(tag)}
+                                onChange={() => handleFilterChipChange(tag)}
                                 value={tag}
                             >
                                 {tag}

diff --git a/next-tavla/app/(admin)/boards/components/TableRows/index.tsx b/next-tavla/app/(admin)/boards/components/TableRows/index.tsx
@@ -41,28 +41,24 @@ function TableRows({
         filter.length === 0 ||
         filter.every((tag) => (board?.meta?.tags ?? []).includes(tag))
 
+    const filteredBoards = boardsWithOrg
+        .filter(filterByTitleAndOrgName)
+        .filter((board) => filterByTags(board.board))
+        .sort(sortFunction)
     return (
         <>
-            {boardsWithOrg
-                .filter((boardWithOrg: TBoardWithOrganizaion) =>
-                    filterByTitleAndOrgName(boardWithOrg),
-                )
-                .filter((boardWithOrg: TBoardWithOrganizaion) =>
-                    filterByTags(boardWithOrg.board),
-                )
-                .sort(sortFunction)
-                .map((boardWithOrg: TBoardWithOrganizaion) => (
-                    <TableRow
-                        key={boardWithOrg.board.id}
-                        boardWithOrg={boardWithOrg}
-                        tags={uniq(
-                            boardsWithOrg.flatMap(
-                                (boardWithOrg) =>
-                                    boardWithOrg.board?.meta?.tags ?? [],
-                            ),
-                        )}
-                    />
-                ))}
+            {filteredBoards.map((boardWithOrg: TBoardWithOrganizaion) => (
+                <TableRow
+                    key={boardWithOrg.board.id}
+                    boardWithOrg={boardWithOrg}
+                    tags={uniq(
+                        boardsWithOrg.flatMap(
+                            (boardWithOrg) =>
+                                boardWithOrg.board?.meta?.tags ?? [],
+                        ),
+                    )}
+                />
+            ))}
         </>
     )
 }

diff --git a/next-tavla/app/(admin)/boards/page.tsx b/next-tavla/app/(admin)/boards/page.tsx
@@ -20,13 +20,19 @@ async function OrganizationsBoardsPage() {
     if (!user) redirect('/')
 
     const boardsWithOrg = await getAllBoardsForUser()
-
+    const tags = [
+        ...new Set(
+            boardsWithOrg
+                .map((boardWithOrg) => boardWithOrg.board.meta?.tags ?? [])
+                .flat(),
+        ),
+    ]
     return (
         <div className="flex flex-col gap-8">
             <Heading1>Tavler</Heading1>
             <div className="flex flex-col sm:flex-row md:items-center gap-3">
                 <Search />
-                <FilterButton boardsWithOrg={boardsWithOrg} />
+                <FilterButton filterOptions={tags} />
             </div>
             <BoardTable boardsWithOrg={boardsWithOrg} />
         </div>