Function TableMembers

apps/web/ui/MembersView/index.tsx:88–139

({
  users,
  onChangeMember,
  onDeleteMember,
}: {
  users: MembersType[];
  onChangeMember: (id: string, role: string, status: string) => Promise<void>;
  onDeleteMember: (user: MembersType) => Promise<void>;
})

}

function TableMembers({
  users,
  onChangeMember,
  onDeleteMember,
}: {
  users: MembersType[];
  onChangeMember: (id: string, role: string, status: string) => Promise<void>;
  onDeleteMember: (user: MembersType) => Promise<void>;
}) {
  function filterByEmail(e: any) {
    const filter = e.target.value.toLowerCase();
    const ul = document.getElementById('memberList');
    if (!ul) return;
    const li = ul.getElementsByTagName('li');
    if (!li) return;
    for (let i = 0; i < li.length; i++) {
      let p = li[i].getElementsByTagName('p')[0];
      if (p) {
        let txtValue = p.textContent || p.innerText;
        if (txtValue.toLowerCase().indexOf(filter) > -1) {
          li[i].style.display = '';
        } else {
          li[i].style.display = 'none';
        }
      }
    }
  }

  return (
    <>
      <div className={styles.flexPt4}>
        <div className={styles.growMb2}>
          <TextInput
            id="filterByEmail"
            label="Search"
            onKeyUp={filterByEmail}
          />
        </div>
      </div>
      <ul role="list" id="memberList" className={styles.flexColGap0}>
        {users?.map((user) => (
          <RowMember
            user={user}
            onChangeMember={onChangeMember}
            onDeleteMember={onDeleteMember}
            key={user.id}
          />
        ))}
      </ul>
    </>
  );
}

function RowMember({
  user,