Function MembersModal

apps/web/ui/MembersModal/index.tsx:20–105

({
  permissions,
  open,
  close,
  api,
  channel,
}: MembersModalProps)

}

export default function MembersModal({
  permissions,
  open,
  close,
  api,
  channel,
}: MembersModalProps) {
  const [users, setUsers] = useState<SerializedUser[]>([]);
  const [modal, setModal] = useState(false);
  const [user, setUser] = useState<SerializedUser>();

  useEffect(() => {
    if (open && channel && permissions?.accountId) {
      api
        .getChannelMembers({
          accountId: permissions.accountId,
          channelId: channel.id,
        })
        .then(setUsers);
    }
  }, [open, permissions, channel]);

  if (!channel || !permissions.accountId) {
    return <></>;
  }

  function removeUser() {
    if (user) {
      setUsers((users) => users.filter((u) => u.id !== user.id));
      setUser(undefined);
    }
  }

  function showModal(user: SerializedUser) {
    setUser(user);
    setModal(true);
  }

  function onUpdateClick() {
    if (channel && permissions?.accountId) {
      api
        .updateChannelMembers({
          accountId: permissions.accountId,
          channelId: channel.id,
          usersId: users.map((u) => u.id),
        })
        .then(() => {
          close();
        })
        .catch((e) => {
          Toast.info('Something went wrong');
        });
    }
  }

  return (
    <Modal open={open} close={close} size="md">
      <H3 className={styles.pb4}>Members</H3>