Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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>
</>
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.