useWebsocket, useHotlineClient, cleanups

Author: jackharrhy

frontend/src/App.js

@@ -1,15 +1,20 @@
 import React, { useRef, useEffect } from "react";
 
-import useHotline, { messageTypes } from "./useHotline";
+import { messageTypes } from "./consts";
+import useHotlineClient from "./useHotlineClient";
 import useChatInput from "./useChatInput";
+import useWebsocket from "./useWebsocket";
+
 import Admin from "./admin/Admin";
 
 import "./App.css";
 
-const ENDPOINT = "ws://localhost:2015/ws";
+const CLIENT_ENDPOINT = "ws://localhost:2015/ws";
 
 function App() {
-  const { opened, messages, sendMessage } = useHotline(ENDPOINT);
+  const { ws: clientWs, open: clientWsOpen } = useWebsocket(CLIENT_ENDPOINT);
+  const { messages, sendMessage } = useHotlineClient(clientWs);
+
   const { input, onInputChange, onInputKeyPress } = useChatInput(sendMessage);
 
   const lastMessage = useRef();
@@ -38,7 +43,7 @@ function App() {
         </div>
         <input
           className="ChatInput"
-          disabled={!opened}
+          disabled={!clientWsOpen}
           value={input}
           onChange={onInputChange}
           onKeyPress={onInputKeyPress}

frontend/src/consts.js

@@ -0,0 +1,4 @@
+export const messageTypes = Object.freeze({
+  sent: "SENT",
+  received: "RECEIVED",
+});

frontend/src/useHotline.js

@@ -0,0 +1,35 @@
+import { useState, useEffect } from "react";
+
+import { messageTypes } from "./consts";
+
+let messageId = 0;
+
+export default function useHotlineClient(ws) {
+  const [messages, setMessages] = useState([]);
+
+  const appendMessage = (message, type) => {
+    messageId++;
+    setMessages((prev) => [...prev, { key: messageId, message, type }]);
+  };
+
+  const sendMessage = (message) => {
+    if (ws?.readyState === WebSocket.OPEN) {
+      ws.send(message);
+      appendMessage(message, messageTypes.sent);
+    }
+  };
+
+  useEffect(() => {
+    if (ws !== null) {
+      window.__hotlineClient = ws;
+      ws.onmessage = (message) => {
+        appendMessage(message, messageTypes.received);
+      };
+    }
+  }, [ws]);
+
+  return {
+    messages,
+    sendMessage,
+  };
+}

frontend/src/useHotlineAdmin.js

@@ -0,0 +1,16 @@
+import { useEffect, useState } from "react";
+
+export default function useWebsocket(endpoint) {
+  const [ws, setWs] = useState(null);
+  const [open, setOpen] = useState(null);
+
+  useEffect(() => {
+    const wsInner = new WebSocket(endpoint);
+    wsInner.onopen = () => setOpen(true);
+    wsInner.onclose = () => setOpen(false);
+    setWs(wsInner);
+    return () => wsInner.close();
+  }, [endpoint]);
+
+  return { ws, open };
+}