connection: use other method of connected/disconnected hook

frontend/src/lib/Connection.ts

@@ -10,6 +10,8 @@ class Connection {
 
     socket: SocketIOClient.Socket;
 
+    isConnected = new Sub<boolean>();
+
     config = new Sub<Config | null>();
     room = new Sub<Room | null>();
     timeline = new Sub<Timeline | null>();
@@ -23,6 +25,8 @@ class Connection {
     calls: { [id: number]: Call } = {};
 
     constructor() {
+        this.isConnected.set(false);
+
         this.socket = io(this.url, {
             autoConnect: false,
             transports: ['websocket']
@@ -41,10 +45,12 @@ class Connection {
 
     setupSocketListeners() {
         this.socket.on('connect', () => {
+            this.isConnected.set(true);
             this.onConnect();
         })
 
         this.socket.on('disconnect', () => {
+            this.isConnected.set(false);
             this.onDisconnect();
         })
 
@@ -314,21 +320,6 @@ export function roomTime(): number {
     return (connection.serverTime() - room.startTime) * room.speedFactor;
 }
 
-export function useIsConnected() {
-    const [isConnected, setIsConnected] = useState(connection.socket.connected);
-
-    useEffect(() => {
-        let connectListener = () => setIsConnected(true);
-        let disconnectListener = () => setIsConnected(false);
-
-        connection.socket.on('connect', connectListener);
-        connection.socket.on('disconnect', disconnectListener);
-
-        return () => {
-            connection.socket.off('connect', connectListener);
-            connection.socket.off('disconnect', disconnectListener);
-        }
-    }, [isConnected]);
-
-    return isConnected;
+export function useIsConnected(): boolean {
+    return useSub(connection.isConnected);
 }