Skip to content

Commit 9253c54

Browse files
committed
[TOOL-4821] Improve Team members search (#7346)
<!-- ## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes" If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000): ## Notes for the reviewer Anything important to call out? Be sure to also clarify these in your comments. ## How to test Unit tests, playground, etc. --> <!-- start pr-codex --> --- ## PR-Codex overview This PR introduces a search feature for members in the `ManageMembersSection` component by integrating the `Fuse.js` library for fuzzy searching. This enhancement allows users to filter members based on their names and emails more effectively. ### Detailed summary - Added `Fuse` from `fuse.js` to enable fuzzy searching. - Created a `membersIndex` using `useMemo` to index `props.members`. - Updated the filtering logic to use `membersIndex.search(searchTerm)` for searching members. - Included `membersIndex` in the dependency array of the `membersToShow` memoization. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` <!-- end pr-codex --> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Improved member search functionality with fuzzy matching, allowing for more flexible and accurate search results based on names and emails. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
1 parent 913ea98 commit 9253c54

File tree

1 file changed

+20
-4
lines changed

1 file changed

+20
-4
lines changed

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/members/ManageMembersSection.tsx

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import {
1919
DropdownMenuTrigger,
2020
} from "@/components/ui/dropdown-menu";
2121
import { useMutation } from "@tanstack/react-query";
22+
import Fuse from "fuse.js";
2223
import { EllipsisIcon } from "lucide-react";
2324
import { useMemo, useState } from "react";
2425
import { toast } from "sonner";
@@ -41,13 +42,21 @@ export function ManageMembersSection(props: {
4142
const [role, setRole] = useState<RoleFilterValue>("ALL ROLES");
4243
const [sortBy, setSortBy] = useState<MemberSortId>("date");
4344

45+
const membersIndex = useMemo(() => {
46+
return new Fuse(props.members, {
47+
keys: [
48+
{ name: "account.name", weight: 2 },
49+
{ name: "account.email", weight: 1 },
50+
],
51+
threshold: 0.3,
52+
});
53+
}, [props.members]);
54+
4455
const membersToShow = useMemo(() => {
4556
let value = props.members;
4657

4758
if (searchTerm) {
48-
value = value.filter((m) =>
49-
m.account.name.toLowerCase().includes(searchTerm.toLowerCase()),
50-
);
59+
value = membersIndex.search(searchTerm).map((result) => result.item);
5160
}
5261

5362
value = value.filter((m) => !deletedMembersIds.includes(m.accountId));
@@ -76,7 +85,14 @@ export function ManageMembersSection(props: {
7685
}
7786

7887
return value;
79-
}, [role, props.members, sortBy, deletedMembersIds, searchTerm]);
88+
}, [
89+
role,
90+
props.members,
91+
sortBy,
92+
deletedMembersIds,
93+
searchTerm,
94+
membersIndex,
95+
]);
8096

8197
if (!props.userHasEditPermission) {
8298
topSection = (

0 commit comments

Comments
 (0)