diff --git a/client/src/components/composite/Admin/AdminMemberView/AdminMemberView.test.tsx b/client/src/components/composite/Admin/AdminMemberView/AdminMemberView.test.tsx
index 3404a591b..a2a4b9e36 100644
--- a/client/src/components/composite/Admin/AdminMemberView/AdminMemberView.test.tsx
+++ b/client/src/components/composite/Admin/AdminMemberView/AdminMemberView.test.tsx
@@ -47,4 +47,102 @@ describe("AdminMemberView", () => {
expect(await queryByText("sausage")).toBeNull()
})
})
+ it("Filters the data properly by account type", async () => {
+ const { getByText, queryByText } = render(
+
+ )
+
+ const roleFilterButton = getByText("all")
+
+ // Cycle through filters
+ fireEvent.click(roleFilterButton) // admin
+ await waitFor(() => {
+ expect(queryByText("John")).toBeVisible()
+ expect(queryByText("sausage")).toBeVisible()
+ expect(queryByText("Dog")).toBeNull()
+ expect(queryByText("cat")).toBeNull()
+ expect(queryByText("fish")).toBeNull()
+ })
+
+ fireEvent.click(roleFilterButton) // member
+ await waitFor(() => {
+ expect(queryByText("John")).toBeNull()
+ expect(queryByText("sausage")).toBeNull()
+ expect(queryByText("Dog")).toBeVisible()
+ expect(queryByText("cat")).toBeNull()
+ expect(queryByText("fish")).toBeVisible()
+ })
+
+ fireEvent.click(roleFilterButton) // guest
+ await waitFor(() => {
+ expect(queryByText("John")).toBeNull()
+ expect(queryByText("sausage")).toBeNull()
+ expect(queryByText("Dog")).toBeNull()
+ expect(queryByText("cat")).toBeVisible()
+ expect(queryByText("fish")).toBeNull()
+ })
+
+ fireEvent.click(roleFilterButton) // all
+ await waitFor(() => {
+ expect(queryByText("John")).toBeVisible()
+ expect(queryByText("sausage")).toBeVisible()
+ expect(queryByText("Dog")).toBeVisible()
+ expect(queryByText("cat")).toBeVisible()
+ expect(queryByText("fish")).toBeVisible()
+ })
+ })
+
+ it("Filters the data by both search query and account type", async () => {
+ const { getByText, getByTestId, queryByText } = render(
+
+ )
+
+ const input = getByTestId("search-input")
+ const roleFilterButton = getByText("all")
+
+ fireEvent.change(input, { target: { value: "key" } })
+
+ fireEvent.click(roleFilterButton) // admin
+ await waitFor(() => {
+ expect(queryByText("John")).toBeVisible()
+ expect(queryByText("sausage")).toBeVisible()
+ expect(queryByText("Dog")).toBeNull()
+ expect(queryByText("cat")).toBeNull()
+ expect(queryByText("fish")).toBeNull()
+ })
+
+ fireEvent.click(roleFilterButton) // member
+ await waitFor(() => {
+ expect(queryByText("John")).toBeNull()
+ expect(queryByText("sausage")).toBeNull()
+ expect(queryByText("Dog")).toBeVisible()
+ expect(queryByText("cat")).toBeNull()
+ expect(queryByText("fish")).toBeVisible()
+ })
+
+ fireEvent.click(roleFilterButton) // guest
+ await waitFor(() => {
+ expect(queryByText("John")).toBeNull()
+ expect(queryByText("sausage")).toBeNull()
+ expect(queryByText("Dog")).toBeNull()
+ expect(queryByText("cat")).toBeVisible()
+ expect(queryByText("fish")).toBeNull()
+ })
+ })
})
diff --git a/client/src/components/composite/Admin/AdminMemberView/AdminMemberView.tsx b/client/src/components/composite/Admin/AdminMemberView/AdminMemberView.tsx
index c42046cd6..e498e7f5f 100644
--- a/client/src/components/composite/Admin/AdminMemberView/AdminMemberView.tsx
+++ b/client/src/components/composite/Admin/AdminMemberView/AdminMemberView.tsx
@@ -139,16 +139,22 @@ export const AdminMemberView = ({
const dataFilter = useCallback(
(oldData: MemberColumnFormat[]) => {
- return isValidSearchQuery || shouldFilterByAccount
- ? oldData.filter(
- (item) =>
- (isValidSearchQuery &&
- (item.Email?.toLowerCase().includes(currentSearchQuery) ||
- item.Name?.toLowerCase().includes(currentSearchQuery))) ||
- (shouldFilterByAccount &&
- filteredAccountType === item.Status?.toLowerCase())
- )
- : oldData
+ return oldData.filter((item) => {
+ const matchesSearchQuery =
+ isValidSearchQuery &&
+ (item.Email?.toLowerCase().includes(currentSearchQuery) ||
+ item.Name?.toLowerCase().includes(currentSearchQuery))
+
+ const matchesAccountType =
+ shouldFilterByAccount &&
+ filteredAccountType === item.Status?.toLowerCase()
+
+ // It is true if either filter matches or both
+ return (
+ (matchesSearchQuery || !isValidSearchQuery) &&
+ (matchesAccountType || !shouldFilterByAccount)
+ )
+ })
},
[
isValidSearchQuery,