Wire up placeholder name change modal

web/components/common/UserDropdown/UserDropdown.tsx

@@ -1,9 +1,12 @@
 import { Menu, Dropdown, Button, Space } from 'antd';
 import { DownOutlined } from '@ant-design/icons';
 import { useRecoilState, useRecoilValue } from 'recoil';
+import { useState } from 'react';
+import Modal from '../../ui/Modal/Modal';
 import { chatVisibilityAtom, chatDisplayNameAtom } from '../../stores/ClientConfigStore';
 import { ChatState, ChatVisibilityState } from '../../../interfaces/application-state';
 import s from './UserDropdown.module.scss';
+import NameChangeModal from '../../modals/NameChangeModal';
 
 interface Props {
   username?: string;
@@ -14,6 +17,7 @@ export default function UserDropdown({ username: defaultUsername, chatState }: P
   const [chatVisibility, setChatVisibility] =
     useRecoilState<ChatVisibilityState>(chatVisibilityAtom);
   const username = defaultUsername || useRecoilValue(chatDisplayNameAtom);
+  const [showNameChangeModal, setShowNameChangeModal] = useState<boolean>(false);
 
   const toggleChatVisibility = () => {
     if (chatVisibility === ChatVisibilityState.Hidden) {
@@ -23,9 +27,15 @@ export default function UserDropdown({ username: defaultUsername, chatState }: P
     }
   };
 
+  const handleChangeName = () => {
+    setShowNameChangeModal(true);
+  };
+
   const menu = (
     <Menu>
-      <Menu.Item key="0">Change name</Menu.Item>
+      <Menu.Item key="0" onClick={() => handleChangeName()}>
+        Change name
+      </Menu.Item>
       <Menu.Item key="1">Authenticate</Menu.Item>
       {chatState === ChatState.Available && (
         <Menu.Item key="3" onClick={() => toggleChatVisibility()}>
@@ -45,6 +55,13 @@ export default function UserDropdown({ username: defaultUsername, chatState }: P
           </Space>
         </Button>
       </Dropdown>
+      <Modal
+        title="Change Chat Display Name"
+        visible={showNameChangeModal}
+        handleCancel={() => setShowNameChangeModal(false)}
+      >
+        <NameChangeModal />
+      </Modal>
     </div>
   );
 }

web/components/modals/NameChangeModal.tsx

@@ -0,0 +1,25 @@
+import { useRecoilValue } from 'recoil';
+import WebsocketService from '../../services/websocket-service';
+// import { setLocalStorage } from '../../utils/helpers';
+import { websocketServiceAtom } from '../stores/ClientConfigStore';
+
+/* eslint-disable @typescript-eslint/no-unused-vars */
+interface Props {}
+
+export default function NameChangeModal(props: Props) {
+  const websocketService = useRecoilValue<WebsocketService>(websocketServiceAtom);
+
+  // const handleNameChange = () => {
+  //   // Send name change
+  //   const nameChange = {
+  //     type: SOCKET_MESSAGE_TYPES.NAME_CHANGE,
+  //     newName,
+  //   };
+  //   websocketService.send(nameChange);
+
+  //   // Store it locally
+  //   setLocalStorage(KEY_USERNAME, newName);
+  // };
+
+  return <div>Name change modal component goes here</div>;
+}

web/stories/NameChangeModal.stories.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import NameChangeModal from '../components/modals/NameChangeModal';
+
+export default {
+  title: 'owncast/Modals/Name change',
+  component: NameChangeModal,
+  parameters: {},
+} as ComponentMeta<typeof NameChangeModal>;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const Template: ComponentStory<typeof NameChangeModal> = args => <NameChangeModal />;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const Basic = Template.bind({});