Function RowMember

apps/web/ui/MembersView/index.tsx:141–232

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

}

function RowMember({
  user,
  onChangeMember,
  onDeleteMember,
}: {
  user: MembersType;
  onChangeMember: (id: string, role: string, status: string) => Promise<void>;
  onDeleteMember: (user: MembersType) => Promise<void>;
}): JSX.Element {
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState(user);
  const [modal, setModal] = useState(false);

  async function onChange(e: any) {
    setLoading(true);
    const role = e.target.value;
    const id = e.target.id;
    await onChangeMember(id, role, user.status);
    setData({ ...data, role });
    setLoading(false);
  }

  return (
    <li key={user.id} className={styles.mb2}>
      <div className={styles.border}>
        <div className={styles.userWrapper}>
          <Avatar src={user.profileImageUrl} text={user.displayName} />
          <p className={styles.userDetails}>
            {user.displayName}
            {user.status === 'PENDING' && (
              <Badge
                className={classNames({
                  [styles.ml1]: !!user.displayName,
                })}
                type="info"
              >
                Pending
              </Badge>
            )}
            <br />
            <span className={styles.userEmail}>{user.email}</span>
          </p>
          <div className={styles.grow} />
          <div>
            <NativeSelect
              id={user.id}
              value={data.role}
              onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
                onChange(e);
              }}
              disabled={loading}
              icon={<FiUser />}
              theme="white"
              options={[
                { label: 'Member', value: Roles.MEMBER },
                { label: 'Admin', value: Roles.ADMIN },
                { label: 'Owner', value: Roles.OWNER },
              ]}