// 3rd party. import classnames from 'classnames'; import React, {useEffect, useState} from 'react'; // 2nd party. import {compose} from '@avocado/core'; import contempo from 'contempo'; const decorate = compose( contempo(` .connection-status { display: none; } .connection-status.interrupted { background-color: rgba(0, 0, 0, .75); display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: relative; } .connection-status.interrupted .message { color: white; font-family: monospace; font-size: 0.7em; text-align: center; text-transform: uppercase; } .connection-status.interrupted .message .dots { color: rgb(150, 150, 150); font-size: 0.5em; } `), ); const ConnectionStatusComponent = ({socket}) => { // Start true even if not really connected to prevent initial "interrupted" // state. const [isConnected, setIsConnected] = useState(true); const [dots, setDots] = useState(0); // 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); }; }, []); // Make the dots dance. useEffect(() => { if (isConnected) { return; } const handle = setTimeout(() => { setDots((dots + 1) % 39); }, 50); return () => { clearTimeout(handle); }; }, [dots, isConnected]); const renderedDots = Array(dots + 1).fill('.').join(''); return

:[ Connection interrupted ]:

{renderedDots}

; } export default decorate(ConnectionStatusComponent);