Add expand/collapse based on serch-result (#1006)

* Add expand/collapse based on serch-result * remove console.log
Altinn · Aug 12, 2024 · 9841d0d · 9841d0d
1 parent 59053c9
commit 9841d0d
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git a/src/features/amUI/users/UserItem/UserItem.tsx b/src/features/amUI/users/UserItem/UserItem.tsx
@@ -1,16 +1,17 @@
 import * as React from 'react';
+import { type RightHolder } from '@/rtk/features/userInfo/userInfoApi';
 import { useTranslation } from 'react-i18next';
 import classes from './UserItem.module.css';
 import { UserIcon } from '@/components/UserIcon/UserIcon';
-import { type RightHolder } from '@/rtk/features/userInfo/userInfoApi';
 import { Button, Paragraph, Tag } from '@digdir/designsystemet-react';
 import { ChevronDownIcon, ChevronUpIcon } from '@navikt/aksel-icons';
-import { useId, useState } from 'react';
+import { useEffect, useId, useState } from 'react';
 import cn from 'classnames';
+import { FilteredRightHolder } from '../useFilteredRightHolders';
 
 interface UserProps {
   /** The user object containing user details. */
-  user: RightHolder;
+  user: FilteredRightHolder;
   /** The size of the component */
   size?: 'lg' | 'md' | 'sm';
   /** The color theme of the component */
@@ -41,6 +42,11 @@ export const UserItem = ({
   const headerId = useId();
   const contentId = useId();
   const [isExpanded, setIsExpanded] = useState(false);
+  useEffect(
+    () => setIsExpanded(user.matchInInheritingRightHolders ?? false),
+    [user.matchInInheritingRightHolders],
+  );
+
   const isExpanable = !!(user.inheritingRightHolders && user.inheritingRightHolders.length > 0);
 
   const avatar = <span>{user.name.charAt(0)}</span>;

diff --git a/src/features/amUI/users/useFilteredRightHolders.ts b/src/features/amUI/users/useFilteredRightHolders.ts
@@ -3,6 +3,10 @@ import type { RightHolder } from '@/rtk/features/userInfo/userInfoApi';
 import { useGetRightHoldersQuery, useGetUserInfoQuery } from '@/rtk/features/userInfo/userInfoApi';
 import { useState, useEffect, useMemo } from 'react';
 
+export interface FilteredRightHolder extends RightHolder {
+  matchInInheritingRightHolders?: boolean;
+}
+
 const isSearchMatch = (searchString: string, rightHolder: RightHolder): boolean => {
   const isNameMatch = rightHolder.name.toLowerCase().indexOf(searchString.toLowerCase()) > -1;
   const isPersonIdMatch = rightHolder.personId === searchString;
@@ -54,7 +58,7 @@ const computePageEntries = (
     };
   }
 
-  const searchResult: RightHolder[] = [];
+  const searchResult: FilteredRightHolder[] = [];
 
   rightHolders.forEach((rightHolder) => {
     if (isSearchMatch(searchString, rightHolder)) {
@@ -65,8 +69,10 @@ const computePageEntries = (
         (inheritRightHolder) => isSearchMatch(searchString, inheritRightHolder),
       );
       if (matchingInheritingItems.length > 0) {
+        // add rightHolder with matching inheritingRightHolders and flag to show them as expanded
         searchResult.push({
           ...rightHolder,
+          matchInInheritingRightHolders: true,
           inheritingRightHolders: matchingInheritingItems,
         });
       }