Better name change handling

src/components/Connect.tsx

@@ -1,4 +1,6 @@
 import { useState } from "react";
+import { ReadyState as WebSocketReadyState } from "react-use-websocket";
+
 export type ConnectionOptions = {
   desiredName?: string;
   url: string;
@@ -6,10 +8,12 @@ export type ConnectionOptions = {
 
 export type ConnectComponentProps = {
   tryConnect(opts: ConnectionOptions): void;
+  webSocketReadyState: WebSocketReadyState;
 };
 
 export default function Connect({
   tryConnect,
+  webSocketReadyState,
 }: ConnectComponentProps): JSX.Element {
   const [socketUrl, setSocketUrl] = useState("wss.tobot.tk:8085/");
   const [desiredName, setDesiredName] = useState<string | undefined>(undefined);
@@ -32,14 +36,23 @@ export default function Connect({
         onChange={(e) => setDesiredName(e.target.value)}
       />
       <button
-        onClick={() =>
+        onClick={() => {
+          console.debug("CLICK");
           tryConnect({
             url: socketUrl,
             desiredName: desiredName === "" ? undefined : desiredName,
-          })
+          });
-        }
+        }}
       >
-        Connect
+        {webSocketReadyState === WebSocketReadyState.CONNECTING
+          ? "Connecting..."
+          : webSocketReadyState === WebSocketReadyState.OPEN
+          ? "Change nickname"
+          : webSocketReadyState === WebSocketReadyState.CLOSING
+          ? "Disconnecting..."
+          : webSocketReadyState === WebSocketReadyState.CLOSED
+          ? "Connect"
+          : "UNEXPECTED STATE"}
       </button>
     </>
   );

src/pages/index.tsx

@@ -96,32 +96,40 @@ export default function Index(): JSX.Element {
         (interval) => interval !== keepAliveInterval
       );
     },
-    onError(e) {
-      console.error(2, e);
-    },
   });
 
   const tryConnect = useCallback(
     (opts: ConnectionOptions) => {
       // Don't reconnect, just send new desiredName
-      if (opts.desiredName === desiredName) {
+      switch (webSocket.readyState) {
-        setDesiredName(opts.desiredName);
+        case WebSocketReadyState.UNINSTANTIATED:
-        webSocket.sendJsonMessage({
+          throw new Error("socket is not instantiated. This should not happen");
-          type: MessageType.DESIRED_NAME,
+        case WebSocketReadyState.CLOSED:
-          date: Date.now(),
-          desiredName: opts.desiredName,
-        } as DesiredNameMessage);
-      } else {
-        webSocket.getWebSocket()?.close();
           setConnectedUsers([]);
           setMessageHistory([]);
           setAuthorId("");
 
           setDesiredName(opts.desiredName);
           setSocketUrl(opts.url);
+          return;
+        case WebSocketReadyState.CLOSING:
+        case WebSocketReadyState.CONNECTING:
+          console.debug("WebSocket is already connecting or closing");
+          return;
+        case WebSocketReadyState.OPEN:
+          if (opts.desiredName === desiredName) {
+            return;
+          }
+          setDesiredName(opts.desiredName);
+          webSocket.sendJsonMessage({
+            type: MessageType.DESIRED_NAME,
+            date: Date.now(),
+            desiredName: opts.desiredName,
+          } as DesiredNameMessage);
+          return;
       }
     },
-    [desiredName, webSocket]
+    [webSocket, desiredName]
   );
 
   const trySendMessage = useCallback(() => {
@@ -208,7 +216,10 @@ export default function Index(): JSX.Element {
             Your ID: <span style={{ fontWeight: "bold" }}>{authorId}</span>
           </>
         )}{" "}
-        <Connect tryConnect={tryConnect} />
+        <Connect
+          tryConnect={tryConnect}
+          webSocketReadyState={webSocket.readyState}
+        />
         <span>Ready state: </span>
         <span style={{ fontWeight: "bold" }}>
           {WebSocketReadyState[webSocket.readyState]} ({webSocket.readyState})