2022-12-27 01:09:52 +03:00
|
|
|
import { Menu, Dropdown, Button } from 'antd';
|
2023-01-16 09:31:36 +03:00
|
|
|
|
2022-05-14 00:44:16 +03:00
|
|
|
import { useRecoilState, useRecoilValue } from 'recoil';
|
2022-09-07 10:00:28 +03:00
|
|
|
import { FC, useState } from 'react';
|
2022-06-25 09:27:17 +03:00
|
|
|
import { useHotkeys } from 'react-hotkeys-hook';
|
2022-10-04 07:06:46 +03:00
|
|
|
import dynamic from 'next/dynamic';
|
2022-05-26 06:38:40 +03:00
|
|
|
import {
|
|
|
|
chatVisibleToggleAtom,
|
2022-10-11 02:26:09 +03:00
|
|
|
currentUserAtom,
|
2022-05-26 06:38:40 +03:00
|
|
|
appStateAtom,
|
|
|
|
} from '../../stores/ClientConfigStore';
|
2022-09-07 10:00:28 +03:00
|
|
|
import styles from './UserDropdown.module.scss';
|
2022-05-26 06:38:40 +03:00
|
|
|
import { AppStateOptions } from '../../stores/application-state';
|
2022-10-04 07:06:46 +03:00
|
|
|
|
|
|
|
// Lazy loaded components
|
2023-01-16 09:31:36 +03:00
|
|
|
|
|
|
|
const CaretDownOutlined = dynamic(() => import('@ant-design/icons/CaretDownOutlined'), {
|
|
|
|
ssr: false,
|
|
|
|
});
|
|
|
|
|
|
|
|
const EditOutlined = dynamic(() => import('@ant-design/icons/EditOutlined'), {
|
|
|
|
ssr: false,
|
|
|
|
});
|
|
|
|
|
|
|
|
const LockOutlined = dynamic(() => import('@ant-design/icons/LockOutlined'), {
|
|
|
|
ssr: false,
|
|
|
|
});
|
|
|
|
|
|
|
|
const MessageOutlined = dynamic(() => import('@ant-design/icons/MessageOutlined'), {
|
|
|
|
ssr: false,
|
|
|
|
});
|
|
|
|
|
|
|
|
const UserOutlined = dynamic(() => import('@ant-design/icons/UserOutlined'), {
|
|
|
|
ssr: false,
|
|
|
|
});
|
|
|
|
|
2023-01-11 03:39:12 +03:00
|
|
|
const Modal = dynamic(() => import('../../ui/Modal/Modal').then(mod => mod.Modal), {
|
|
|
|
ssr: false,
|
|
|
|
});
|
2022-10-04 07:06:46 +03:00
|
|
|
|
2023-01-11 03:39:12 +03:00
|
|
|
const NameChangeModal = dynamic(
|
|
|
|
() => import('../../modals/NameChangeModal/NameChangeModal').then(mod => mod.NameChangeModal),
|
|
|
|
{
|
|
|
|
ssr: false,
|
|
|
|
},
|
2022-10-04 07:06:46 +03:00
|
|
|
);
|
|
|
|
|
2023-01-11 03:39:12 +03:00
|
|
|
const AuthModal = dynamic(
|
|
|
|
() => import('../../modals/AuthModal/AuthModal').then(mod => mod.AuthModal),
|
|
|
|
{
|
|
|
|
ssr: false,
|
|
|
|
},
|
2022-10-04 07:06:46 +03:00
|
|
|
);
|
2022-04-30 01:09:53 +03:00
|
|
|
|
2022-09-07 10:00:28 +03:00
|
|
|
export type UserDropdownProps = {
|
2022-05-14 00:44:16 +03:00
|
|
|
username?: string;
|
2022-09-07 10:00:28 +03:00
|
|
|
};
|
2022-04-28 09:19:20 +03:00
|
|
|
|
2022-09-07 10:00:28 +03:00
|
|
|
export const UserDropdown: FC<UserDropdownProps> = ({ username: defaultUsername = undefined }) => {
|
2022-05-14 01:07:49 +03:00
|
|
|
const [showNameChangeModal, setShowNameChangeModal] = useState<boolean>(false);
|
2022-08-21 02:13:31 +03:00
|
|
|
const [showAuthModal, setShowAuthModal] = useState<boolean>(false);
|
2022-05-26 06:38:40 +03:00
|
|
|
const [chatToggleVisible, setChatToggleVisible] = useRecoilState(chatVisibleToggleAtom);
|
|
|
|
const appState = useRecoilValue<AppStateOptions>(appStateAtom);
|
2022-04-30 01:09:53 +03:00
|
|
|
|
|
|
|
const toggleChatVisibility = () => {
|
2022-06-25 09:27:17 +03:00
|
|
|
setChatToggleVisible(!chatToggleVisible);
|
2022-04-30 01:09:53 +03:00
|
|
|
};
|
|
|
|
|
2022-05-14 01:07:49 +03:00
|
|
|
const handleChangeName = () => {
|
|
|
|
setShowNameChangeModal(true);
|
|
|
|
};
|
|
|
|
|
2022-06-25 09:27:17 +03:00
|
|
|
// Register keyboard shortcut for the space bar to toggle playback
|
|
|
|
useHotkeys(
|
|
|
|
'c',
|
|
|
|
toggleChatVisibility,
|
|
|
|
{
|
|
|
|
enableOnContentEditable: false,
|
|
|
|
},
|
|
|
|
[chatToggleVisible],
|
|
|
|
);
|
|
|
|
|
2022-10-11 02:56:02 +03:00
|
|
|
const currentUser = useRecoilValue(currentUserAtom);
|
2023-01-11 03:51:06 +03:00
|
|
|
if (!currentUser) {
|
|
|
|
return null;
|
|
|
|
}
|
2022-10-11 02:56:02 +03:00
|
|
|
|
|
|
|
const { displayName } = currentUser;
|
|
|
|
const username = defaultUsername || displayName;
|
2022-04-30 01:09:53 +03:00
|
|
|
const menu = (
|
|
|
|
<Menu>
|
2022-05-22 15:20:11 +03:00
|
|
|
<Menu.Item key="0" icon={<EditOutlined />} onClick={() => handleChangeName()}>
|
2022-05-14 01:07:49 +03:00
|
|
|
Change name
|
|
|
|
</Menu.Item>
|
2022-08-21 02:13:31 +03:00
|
|
|
<Menu.Item key="1" icon={<LockOutlined />} onClick={() => setShowAuthModal(true)}>
|
2022-05-22 15:20:11 +03:00
|
|
|
Authenticate
|
|
|
|
</Menu.Item>
|
2022-05-26 06:38:40 +03:00
|
|
|
{appState.chatAvailable && (
|
2023-01-24 06:16:52 +03:00
|
|
|
<Menu.Item
|
|
|
|
key="3"
|
|
|
|
icon={<MessageOutlined />}
|
|
|
|
onClick={() => toggleChatVisibility()}
|
|
|
|
aria-expanded={chatToggleVisible}
|
|
|
|
>
|
2022-12-16 06:23:43 +03:00
|
|
|
{chatToggleVisible ? 'Hide Chat' : 'Show Chat'}
|
2022-04-30 01:09:53 +03:00
|
|
|
</Menu.Item>
|
|
|
|
)}
|
|
|
|
</Menu>
|
|
|
|
);
|
|
|
|
|
|
|
|
return (
|
2022-11-05 06:04:13 +03:00
|
|
|
<div id="user-menu" className={`${styles.root}`}>
|
2022-05-08 10:41:47 +03:00
|
|
|
<Dropdown overlay={menu} trigger={['click']}>
|
2022-12-27 01:09:52 +03:00
|
|
|
<Button type="primary" icon={<UserOutlined className={styles.userIcon} />}>
|
|
|
|
<span className={styles.username}>{username}</span>
|
|
|
|
<CaretDownOutlined />
|
2022-05-08 10:41:47 +03:00
|
|
|
</Button>
|
|
|
|
</Dropdown>
|
2022-05-14 01:07:49 +03:00
|
|
|
<Modal
|
|
|
|
title="Change Chat Display Name"
|
2022-10-11 03:11:29 +03:00
|
|
|
open={showNameChangeModal}
|
2022-05-14 01:07:49 +03:00
|
|
|
handleCancel={() => setShowNameChangeModal(false)}
|
|
|
|
>
|
|
|
|
<NameChangeModal />
|
|
|
|
</Modal>
|
2022-10-11 03:11:29 +03:00
|
|
|
<Modal title="Authenticate" open={showAuthModal} handleCancel={() => setShowAuthModal(false)}>
|
2022-08-21 02:13:31 +03:00
|
|
|
<AuthModal />
|
|
|
|
</Modal>
|
2022-05-08 10:41:47 +03:00
|
|
|
</div>
|
2022-04-30 01:09:53 +03:00
|
|
|
);
|
2022-05-14 00:44:16 +03:00
|
|
|
};
|