More accurately hide/show and track chat state

web/components/common/UserDropdown/UserDropdown.tsx

@@ -1,19 +1,19 @@
 import { Menu, Dropdown, Button, Space } from 'antd';
 import { DownOutlined } from '@ant-design/icons';
-import { useRecoilState } from 'recoil';
-import { chatVisibilityAtom } from '../../stores/ClientConfigStore';
+import { useRecoilState, useRecoilValue } from 'recoil';
+import { chatVisibilityAtom, chatDisplayNameAtom } from '../../stores/ClientConfigStore';
 import { ChatState, ChatVisibilityState } from '../../../interfaces/application-state';
 import s from './UserDropdown.module.scss';
 
 interface Props {
-  username: string;
+  username?: string;
   chatState: ChatState;
 }
 
-export default function UserDropdown({ username = 'test-user', chatState }: Props) {
-  const chatEnabled = chatState !== ChatState.NotAvailable;
+export default function UserDropdown({ username: defaultUsername, chatState }: Props) {
   const [chatVisibility, setChatVisibility] =
     useRecoilState<ChatVisibilityState>(chatVisibilityAtom);
+  const username = defaultUsername || useRecoilValue(chatDisplayNameAtom);
 
   const toggleChatVisibility = () => {
     if (chatVisibility === ChatVisibilityState.Hidden) {
@@ -27,7 +27,7 @@ export default function UserDropdown({ username = 'test-user', chatState }: Prop
     <Menu>
       <Menu.Item key="0">Change name</Menu.Item>
       <Menu.Item key="1">Authenticate</Menu.Item>
-      {chatEnabled && (
+      {chatState === ChatState.Available && (
         <Menu.Item key="3" onClick={() => toggleChatVisibility()}>
           Toggle chat
         </Menu.Item>
@@ -48,3 +48,7 @@ export default function UserDropdown({ username = 'test-user', chatState }: Prop
     </div>
   );
 }
+
+UserDropdown.defaultProps = {
+  username: undefined,
+};