70 lines
1.5 KiB
JavaScript
70 lines
1.5 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;
|
||
|
font-size: 0.8em;
|
||
|
height: 4.5em;
|
||
|
position: absolute;
|
||
|
top: 0.5em;
|
||
|
left: calc(320px + 0.5em);
|
||
|
line-height: 1em;
|
||
|
width: 10em;
|
||
|
padding: 0.125em;
|
||
|
font-family: monospace;
|
||
|
}
|
||
|
.connection > p {
|
||
|
margin-left: 0.25em;
|
||
|
margin-top: 0.3em;
|
||
|
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(true);
|
||
|
// Juggle connected state.
|
||
|
useEffect(() => {
|
||
|
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);
|