Support changing your own name and handling name change events

web/components/modals/NameChangeModal.tsx

@@ -1,25 +1,44 @@
+import { useState } from 'react';
 import { useRecoilValue } from 'recoil';
+import { Input, Button } from 'antd';
+import { MessageType } from '../../interfaces/socket-events';
 import WebsocketService from '../../services/websocket-service';
-// import { setLocalStorage } from '../../utils/helpers';
-import { websocketServiceAtom } from '../stores/ClientConfigStore';
+import { websocketServiceAtom, chatDisplayNameAtom } from '../stores/ClientConfigStore';
 
 /* eslint-disable @typescript-eslint/no-unused-vars */
 interface Props {}
 
 export default function NameChangeModal(props: Props) {
   const websocketService = useRecoilValue<WebsocketService>(websocketServiceAtom);
+  const chatDisplayName = useRecoilValue<string>(chatDisplayNameAtom);
+  const [newName, setNewName] = useState<any>(chatDisplayName);
 
-  // const handleNameChange = () => {
-  //   // Send name change
-  //   const nameChange = {
-  //     type: SOCKET_MESSAGE_TYPES.NAME_CHANGE,
-  //     newName,
-  //   };
-  //   websocketService.send(nameChange);
+  const handleNameChange = () => {
+    const nameChange = {
+      type: MessageType.NAME_CHANGE,
+      newName,
+    };
+    websocketService.send(nameChange);
+  };
 
-  //   // Store it locally
-  //   setLocalStorage(KEY_USERNAME, newName);
-  // };
+  const saveEnabled =
+    newName !== chatDisplayName && newName !== '' && websocketService?.isConnected();
 
-  return <div>Name change modal component goes here</div>;
+  return (
+    <div>
+      Your chat display name is what people see when you send chat messages. Other information can
+      go here to mention auth, and stuff.
+      <Input
+        value={newName}
+        onChange={e => setNewName(e.target.value)}
+        placeholder="Your chat display name"
+        maxLength={10}
+        showCount
+        defaultValue={chatDisplayName}
+      />
+      <Button disabled={!saveEnabled} onClick={handleNameChange}>
+        Change name
+      </Button>
+    </div>
+  );
 }