Merge branch 'Update-member-google-sheet-action-branch' of https://gi…

…thub.com/UoaWDCC/uasc-web into Update-member-google-sheet-action-branch
UoaWDCC · Oct 6, 2024 · b05e0bf · b05e0bf
2 parents cd10df4 + 841af41
commit b05e0bf
Show file tree

Hide file tree

Showing 2 changed files with 114 additions and 10 deletions.
diff --git 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(
+      <AdminMemberView
+        data={[
+          { uid: "", Name: "John", Email: "[email protected]", Status: "admin" },
+          { uid: "", Name: "Dog", Email: "[email protected]", Status: "member" },
+          { uid: "", Name: "cat", Email: "[email protected]", Status: "guest" },
+          { uid: "", Name: "fish", Email: "[email protected]", Status: "member" },
+          { uid: "", Name: "sausage", Email: "[email protected]", Status: "admin" }
+        ]}
+      />
+    )
+
+    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(
+      <AdminMemberView
+        data={[
+          { uid: "", Name: "John", Email: "[email protected]", Status: "admin" },
+          { uid: "", Name: "Dog", Email: "[email protected]", Status: "member" },
+          { uid: "", Name: "cat", Email: "[email protected]", Status: "guest" },
+          { uid: "", Name: "fish", Email: "[email protected]", Status: "member" },
+          { uid: "", Name: "sausage", Email: "[email protected]", Status: "admin" }
+        ]}
+      />
+    )
+
+    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
@@ -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,