class-example-ideal-react.js

const friendList = [
  { id: 1, name: 'Phoebe' },
  { id: 2, name: 'Rachel' },
  { id: 3, name: 'Ross' },
];


function useFriendStatus(component, friendID) {
  const onlineStatus = component.useState(null);
  const handleStatusChange = (status) => onlineStatus.set(status.isOnline);

  component.useEffect(() => {
    let currentId = friendID.get();
    ChatAPI.subscribeToFriendStatus(currentId, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(currentId, handleStatusChange);
    };
  });
  return () => onlineStatus.get();
}

class ChatRecipientPicker {
  recipientId = this.useState(1);
  recipientOnline = useFriendStatus(this, this.recipientId);
  
  render (props) {
    return <>
      <Circle color={this.recipientOnline() ? 'green' : 'red'} />
      <select
        value={this.recipientId.get()}
        onChange={e => this.recipientId.set(Number(e.target.value))}
      >
        {friendList.map(friend => (
          <option key={friend.id} value={friend.id}>
            {friend.name}
          </option>
        ))}
      </select>
    </>
  }
}