golang/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2025-11-02 20:23:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

Wire up placeholder name change modal

Browse Source
This commit is contained in:
Gabe Kangas
2022-05-13 15:07:49 -07:00
parent e0f8a1f702
commit f14b8ea8ba
3 changed files with 58 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
web/components/common/UserDropdown/UserDropdown.tsx
View File

@ -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>
);
}