diff --git a/packages/client/modules/userDashboard/components/OrgMembers/OrgMembers.tsx b/packages/client/modules/userDashboard/components/OrgMembers/OrgMembers.tsx index 0e3e0b19a4f..8fc04aab8c9 100644 --- a/packages/client/modules/userDashboard/components/OrgMembers/OrgMembers.tsx +++ b/packages/client/modules/userDashboard/components/OrgMembers/OrgMembers.tsx @@ -1,7 +1,7 @@ import graphql from 'babel-plugin-relay/macro' import type {Parser as JSON2CSVParser} from 'json2csv' import Parser from 'json2csv/lib/JSON2CSVParser' // only grab the sync parser -import React, {useMemo, useState} from 'react' +import React, {useCallback, useMemo, useState} from 'react' import {PreloadedQuery, usePaginationFragment, usePreloadedQuery} from 'react-relay' import {OrgMembersPaginationQuery} from '~/__generated__/OrgMembersPaginationQuery.graphql' import {OrgMembersQuery} from '~/__generated__/OrgMembersQuery.graphql' @@ -76,23 +76,39 @@ const OrgMembers = (props: Props) => { ) const [sortBy, setSortBy] = useState('lastSeenAt') const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('desc') + const [searchInput, setSearchInput] = useState('') - const sortedOrganizationUsers = useMemo(() => { - return [...organizationUsers.edges].sort((a, b) => { + const handleSearchChange = useCallback((e: React.ChangeEvent) => { + setSearchInput(e.target.value) + }, []) + + const filteredOrgUsers = useMemo(() => { + const cleanedSearchInput = searchInput.toLowerCase().trim() + return organizationUsers.edges + .map(({node}) => node) + .filter( + (user) => + user.user.preferredName.toLowerCase().includes(cleanedSearchInput) || + user.user.email.toLowerCase().includes(cleanedSearchInput) + ) + }, [organizationUsers.edges, searchInput]) + + const finalOrgUsers = useMemo(() => { + return [...filteredOrgUsers].sort((a, b) => { if (sortBy === 'lastSeenAt') { - const aDate = a.node.user.lastSeenAt ? new Date(a.node.user.lastSeenAt) : new Date(0) - const bDate = b.node.user.lastSeenAt ? new Date(b.node.user.lastSeenAt) : new Date(0) + const aDate = a.user.lastSeenAt ? new Date(a.user.lastSeenAt) : new Date(0) + const bDate = b.user.lastSeenAt ? new Date(b.user.lastSeenAt) : new Date(0) return sortDirection === 'asc' ? aDate.getTime() - bDate.getTime() : bDate.getTime() - aDate.getTime() } else if (sortBy === 'preferredName') { return sortDirection === 'asc' - ? a.node.user.preferredName.localeCompare(b.node.user.preferredName) - : b.node.user.preferredName.localeCompare(a.node.user.preferredName) + ? a.user.preferredName.localeCompare(b.user.preferredName) + : b.user.preferredName.localeCompare(a.user.preferredName) } return 0 }) - }, [organizationUsers.edges, sortBy, sortDirection]) + }, [filteredOrgUsers, sortBy, sortDirection]) const handleSort = (column: keyof User) => { if (sortBy === column) { @@ -143,6 +159,16 @@ const OrgMembers = (props: Props) => { +
+ +
+
@@ -173,7 +199,7 @@ const OrgMembers = (props: Props) => { - {sortedOrganizationUsers.map(({node: organizationUser}) => ( + {finalOrgUsers.map((organizationUser) => (