import { useState } from "react"; import { observer } from "mobx-react-lite"; import { Search } from "lucide-react"; // hooks import { useEventTracker, useMember } from "hooks/store"; // components import { ProjectMemberListItem, SendProjectInvitationModal } from "components/project"; // ui import { Button } from "@plane/ui"; import { MembersSettingsLoader } from "components/ui"; export const ProjectMemberList: React.FC = observer(() => { // states const [inviteModal, setInviteModal] = useState(false); const [searchQuery, setSearchQuery] = useState(""); // store hooks const { setTrackElement } = useEventTracker(); const { project: { projectMemberIds, getProjectMemberDetails }, } = useMember(); const searchedMembers = (projectMemberIds ?? []).filter((userId) => { const memberDetails = getProjectMemberDetails(userId); if (!memberDetails?.member) return false; const fullName = `${memberDetails?.member.first_name} ${memberDetails?.member.last_name}`.toLowerCase(); const displayName = memberDetails?.member.display_name.toLowerCase(); return displayName?.includes(searchQuery.toLowerCase()) || fullName.includes(searchQuery.toLowerCase()); }); return ( <> setInviteModal(false)} />

Members

setSearchQuery(e.target.value)} />
{!projectMemberIds ? ( ) : (
{projectMemberIds.length > 0 ? searchedMembers.map((userId) => ) : null} {searchedMembers.length === 0 && (

No matching members

)}
)} ); });