69 lines
1.6 KiB
JavaScript
69 lines
1.6 KiB
JavaScript
// 3rd party.
|
|
import classnames from 'classnames';
|
|
import React, {useEffect, useState} from 'react';
|
|
// 2nd party.
|
|
import {compose} from '@avocado/core';
|
|
import contempo from 'contempo';
|
|
// 1st party.
|
|
import Throughput from './throughput';
|
|
|
|
const decorate = compose(
|
|
contempo(`
|
|
.connection {
|
|
background-color: rgba(0, 0, 0, .3);
|
|
border: 1px solid white;
|
|
color: white;
|
|
position: absolute;
|
|
top: 0.5em;
|
|
right: 0.5em;
|
|
line-height: 1em;
|
|
padding: 0.125em;
|
|
font-family: monospace;
|
|
}
|
|
.connection > p {
|
|
border-bottom: 1px solid rgb(180, 180, 180);
|
|
margin: 0.25em;
|
|
padding-bottom: 0.25em;
|
|
text-transform: uppercase;
|
|
}
|
|
.connection > p.connected {
|
|
color: rgb(0, 255, 0);
|
|
}
|
|
.connection > p.not-connected {
|
|
color: rgb(255, 0, 0);
|
|
}
|
|
`),
|
|
);
|
|
|
|
const ConnectionComponent = ({
|
|
Parser,
|
|
socket,
|
|
}) => {
|
|
const [isConnected, setIsConnected] = useState(false);
|
|
// Juggle connected state.
|
|
useEffect(() => {
|
|
setIsConnected(socket.isConnected);
|
|
const onConnect = () => {
|
|
setIsConnected(true);
|
|
};
|
|
socket.on('connect', onConnect);
|
|
const onDisconnect = () => {
|
|
setIsConnected(false);
|
|
};
|
|
socket.on('disconnect', onDisconnect);
|
|
return () => {
|
|
socket.off('connect', onConnect);
|
|
socket.off('disconnect', onDisconnect);
|
|
};
|
|
}, []);
|
|
return <div className="connection unselectable">
|
|
<p className={classnames(
|
|
isConnected ? 'connected' : 'not-connected',
|
|
'status',
|
|
)}>{isConnected ? 'connected' : 'not connected'}</p>
|
|
<Throughput Parser={Parser} />
|
|
</div>;
|
|
}
|
|
|
|
export default decorate(ConnectionComponent);
|