import { FileTextOutlined, LogoutOutlined, MacCommandOutlined, QuestionCircleOutlined, ReadOutlined, SettingOutlined, } from "@ant-design/icons"; import { Menu, Modal, Popover, Typography, Space } from "antd"; import Link from "next/link"; import React, { ReactElement, ReactNode, useState } from "react"; import styled from "styled-components"; import SelfAvatar from "../common/SelfAvatar"; import { useRoleInCourse } from "../../hooks/useRoleInCourse"; import { Role } from "@koh/common"; const { Text } = Typography; const StyleablePopover = ({ className, ...props }: { className: string }) => ( <Popover {...props} overlayClassName={className} /> ); const NoPaddingPopover: typeof Popover = styled(StyleablePopover)` & .ant-popover-inner-content { padding: 0px; } `; const AvatarButton = styled.div` cursor: pointer; `; interface ProfileDrawerProps { courseId: number; } function shortcutInfoContent(role: Role): ReactNode { if (role === Role.STUDENT) { return ( <Space direction="vertical" style={{ display: "flex" }}> <Space> <Text keyboard>shift</Text> <Text keyboard>n</Text>Create a new question </Space> <Space> <Text keyboard>shift</Text> <Text keyboard>e</Text>Edit question </Space> <Space size={40}> <Text keyboard>enter</Text>Finish writing question </Space> </Space> ); } else { return ( <Space direction="vertical" style={{ display: "flex" }}> <Space> <Text keyboard>shift</Text> <Text keyboard>h</Text>Help the next student </Space> <Space> <Text keyboard>shift</Text> <Text keyboard>d</Text>Delete the currently selected student's question </Space> <Space> <Space size={1}> <Text keyboard>up</Text>/<Text keyboard>down</Text> </Space> Navigate through students </Space> </Space> ); } } export default function ProfileDrawer({ courseId, }: ProfileDrawerProps): ReactElement { const [isPopoverOpen, setIsPopoverOpen] = useState(false); const role = useRoleInCourse(courseId); return ( <> <NoPaddingPopover content={ isPopoverOpen && ( <Menu mode="inline"> <Menu.Item icon={<SettingOutlined />}> <Link href={{ pathname: "/settings", query: { cid: courseId } }} > <a>Settings</a> </Link> </Menu.Item> <Menu.Item icon={<MacCommandOutlined />} onClick={() => { Modal.info({ title: "Queue Page Keyboard Shortcuts", content: shortcutInfoContent(role), }); setIsPopoverOpen(false); }} > Keyboard Shortcuts </Menu.Item> <Menu.Item key="1" icon={<QuestionCircleOutlined />} onClick={() => { window.open("https://info.khouryofficehours.com/help"); setIsPopoverOpen(false); }} > Help Guide </Menu.Item> <Menu.Item key="2" icon={<FileTextOutlined />} onClick={() => { window.open( "https://info.khouryofficehours.com/release-notes-archive" ); setIsPopoverOpen(false); }} > Release Notes </Menu.Item> <Menu.Item key="3" icon={<ReadOutlined />}> <Link href={"/about"}> <a>About Us</a> </Link> </Menu.Item> <Menu.Item key="4" icon={<LogoutOutlined />}> <Link href={"/api/v1/logout"}> <a data-cy="logout-button">Logout</a> </Link> </Menu.Item> </Menu> ) } placement="bottomRight" trigger="click" visible={isPopoverOpen} onVisibleChange={setIsPopoverOpen} > <AvatarButton> <SelfAvatar size={40} /> </AvatarButton> </NoPaddingPopover> </> ); }