status-im
/
js-waku-examples
mirror of https://github.com/status-im/js-waku-examples.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

improve readability on chatroom

This commit is contained in:
danisharora099 2023-08-02 18:21:35 +05:30
parent 3fc193d832
commit 6654248738
No known key found for this signature in database
GPG Key ID: FBD2BF500037F135
1 changed files with 24 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
examples/web-chat/src/Room.tsx
View File

@ -52,31 +52,34 @@ export default function Room(props: Props) {
const filterPeersLength = orZero(filterPeers?.length); const filterPeersLength = orZero(filterPeers?.length);
const storePeersLength = orZero(storePeers?.length); const storePeersLength = orZero(storePeers?.length);
const peersMessage = `Peers Connected: ${allConnectedLength}
Store: ${storePeersLength}
Filter: ${filterPeersLength}
Light Push: ${lightPushPeersLength}
`;
const protocolsPeersMessage = `Peers Discovered: ${
discoveredBootstrapPeers.size + discoveredPeerExchangePeers.size
}
Bootstrap: ${discoveredBootstrapPeers.size}
Peer Exchange: ${discoveredPeerExchangePeers.size};
Peers Connected: ${
connectedBootstrapPeers.size + connectedPeerExchangePeers.size
}
Bootstrap: ${connectedBootstrapPeers.size}
Peer Exchange: ${connectedPeerExchangePeers.size}
`;
return ( return (
<div className="h-screen flex flex-col"> <div className="h-screen flex flex-col">
<div className="flex justify-between items-center bg-gray-800 text-white p-4"> <div className="flex justify-between items-center bg-gray-800 text-white p-4">
<div>{peersMessage}</div> <div>
<div>Peers Connected: {allConnectedLength}</div>
<div className="mt-2">Store: {storePeersLength}</div>
<div>Filter: {filterPeersLength}</div>
<div>Light Push: {lightPushPeersLength}</div>
</div>
<div>Waku v2 Web Chat</div> <div>Waku v2 Web Chat</div>
<div>{protocolsPeersMessage}</div> <div>
<div className="mt-2">
Peers Discovered:{" "}
{discoveredBootstrapPeers.size + discoveredPeerExchangePeers.size}
</div>
<div>
Bootstrap: {discoveredBootstrapPeers.size} Peer Exchange:{" "}
{discoveredPeerExchangePeers.size}
</div>
<div className="mt-2">
Peers Connected:{" "}
{connectedBootstrapPeers.size + connectedPeerExchangePeers.size}
</div>
<div>
Bootstrap: {connectedBootstrapPeers.size} Peer Exchange:{" "}
{connectedPeerExchangePeers.size}
</div>
</div>
</div> </div>
<ChatList messages={props.messages} /> <ChatList messages={props.messages} />
<MessageInput hasLightPushPeers={!!lightPushPeers} sendMessage={onSend} /> <MessageInput hasLightPushPeers={!!lightPushPeers} sendMessage={onSend} />