fix(routing): Fix filter and board sorting performance (#1567)

* chore(filter): refactor * fix(filter): replace router for lagging filter
entur · Jul 5, 2024 · e0ec042 · e0ec042
1 parent 35df9f9
commit e0ec042
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 56 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, 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<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>
@@ -60,23 +59,23 @@ function FilterButton({
                         </PopoverCloseButton>
                     </div>
                     <div className="max-w-96 flex flex-wrap gap-2 pt-2">
-                        {allTags.length === 0 && (
+                        {filterOptions?.length === 0 ? (
                             <Paragraph>
                                 Du har ikke lagt til noen merkelapper.
                             </Paragraph>
+                        ) : (
+                            filterOptions?.sort().map((tag: TTag) => (
+                                <FilterChip
+                                    type="checkbox"
+                                    key={tag}
+                                    checked={activeTags.includes(tag)}
+                                    onChange={() => handleFilterChipChange(tag)}
+                                    value={tag}
+                                >
+                                    {tag}
+                                </FilterChip>
+                            ))
                         )}
-                        {allTags.sort().map((tag: TTag) => (
-                            <FilterChip
-                                key={tag}
-                                checked={filterTags.includes(tag)}
-                                onChange={() =>
-                                    replace(xor(activeTags, [tag]).join(','))
-                                }
-                                value={tag}
-                            >
-                                {tag}
-                            </FilterChip>
-                        ))}
                     </div>
                 </div>
             </PopoverContent>

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 boardWithOrg = 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 ?? [],
-                            ),
-                        )}
-                    />
-                ))}
+            {boardWithOrg.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/hooks/useSearchParamReplacer.ts b/next-tavla/app/(admin)/boards/hooks/useSearchParamReplacer.ts
@@ -1,11 +1,10 @@
-import { usePathname, useSearchParams, useRouter } from 'next/navigation'
+import { usePathname, useSearchParams } from 'next/navigation'
 import { useCallback } from 'react'
 import { useSearchParam } from './useSearchParam'
 
 function useSearchParamReplacer(
     param: string,
 ): [string | undefined, (value?: string) => void] {
-    const router = useRouter()
     const pathname = usePathname()
     const params = useSearchParams()
     const value = useSearchParam(param)
@@ -15,12 +14,13 @@ function useSearchParamReplacer(
             const newParams = new URLSearchParams(params ?? undefined)
             if (!value || value === '') newParams.delete(param)
             else newParams.set(param, value)
-
-            router.replace(
+            window.history.replaceState(
+                {},
+                '',
                 `${pathname}?${newParams.toString().replace(/%2C/g, ',')}`,
             )
         },
-        [router, pathname, param, params],
+        [pathname, param, params],
     )
     return [value, replace]
 }

diff --git a/next-tavla/app/(admin)/boards/page.tsx b/next-tavla/app/(admin)/boards/page.tsx
@@ -8,6 +8,7 @@ import { getAllBoardsForUser } from 'app/(admin)/actions'
 import { initializeAdminApp } from 'app/(admin)/utils/firebase'
 import { getUserFromSessionCookie } from 'app/(admin)/utils/server'
 import { Heading1 } from '@entur/typography'
+import { uniq } from 'lodash'
 
 initializeAdminApp()
 
@@ -20,13 +21,17 @@ async function OrganizationsBoardsPage() {
     if (!user) redirect('/')
 
     const boardsWithOrg = await getAllBoardsForUser()
-
+    const uniqueTags = uniq(
+        boardsWithOrg.flatMap(
+            (boardWithOrg) => boardWithOrg.board?.meta?.tags ?? [],
+        ),
+    )
     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={uniqueTags} />
             </div>
             <BoardTable boardsWithOrg={boardsWithOrg} />
         </div>