@mui/icons-material#MoreVertRounded TypeScript Examples

export default function Sidebar(props: {
	conversations: Conversation[] | undefined;
	selectedConversation?: number;
	onConversationSelected: (id: number) => void;
	onCreateSelected: () => void;
	errorBanner?: ConnectionErrorCode;
	needsServerUpdate?: boolean;
}) {
	const displaySnackbar = useContext(SnackbarContext);
	
	const [overflowMenu, setOverflowMenu] = useState<HTMLElement | null>(null);
	const openOverflowMenu = useCallback((event: React.MouseEvent<HTMLElement>) => {
		setOverflowMenu(event.currentTarget);
	}, [setOverflowMenu]);
	const closeOverflowMenu = useCallback(() => {
		setOverflowMenu(null);
	}, [setOverflowMenu]);
	
	const [isChangelogDialog, showChangelogDialog, hideChangelogDialog] = useSidebarDialog(closeOverflowMenu);
	const [isFeedbackDialog, showFeedbackDialog, hideFeedbackDialog] = useSidebarDialog(closeOverflowMenu);
	const [isSignOutDialog, showSignOutDialog, hideSignOutDialog] = useSidebarDialog(closeOverflowMenu);
	const [isRemoteUpdateDialog, showRemoteUpdateDialog, hideRemoteUpdateDialog] = useSidebarDialog();
	const [isUpdateRequiredDialog, showUpdateRequiredDialog, hideUpdateRequiredDialog] = useSidebarDialog();
	const [faceTimeLinkDialog, setFaceTimeLinkDialog] = useState<string | undefined>(undefined);
	
	//Keep track of remote updates
	const [remoteUpdate, setRemoteUpdate] = useState<ServerUpdateData | undefined>(undefined);
	useEffect(() => {
		const listener: RemoteUpdateListener = {onUpdate: setRemoteUpdate};
		ConnectionManager.addRemoteUpdateListener(listener);
		return () => ConnectionManager.removeRemoteUpdateListener(listener);
	}, [setRemoteUpdate]);
	const [remoteUpdateCache, setRemoteUpdateCache] = useState<ServerUpdateData>({
		id: 0, notes: "", protocolRequirement: [], remoteInstallable: false, version: ""
	});
	useEffect(() => {
		if(remoteUpdate !== undefined) {
			setRemoteUpdateCache(remoteUpdate);
		}
	}, [remoteUpdate, setRemoteUpdateCache]);
	
	//Keep track of whether FaceTime is supported
	const isFaceTimeSupported = useIsFaceTimeSupported();
	
	const [isFaceTimeLinkLoading, setFaceTimeLinkLoading] = useState(false);
	const createFaceTimeLink = useCallback(async () => {
		setFaceTimeLinkLoading(true);
		
		try {
			const link = await ConnectionManager.requestFaceTimeLink();
			
			//Prefer web share, fall back to displaying a dialog
			if(navigator.share) {
				await navigator.share({text: link});
			} else {
				setFaceTimeLinkDialog(link);
			}
		} catch(error) {
			if(error === FaceTimeLinkErrorCode.Network) {
				displaySnackbar({message: "Failed to get FaceTime link: no connection to server"});
			} else if(error === FaceTimeLinkErrorCode.External) {
				displaySnackbar({message: "Failed to get FaceTime link: an external error occurred"});
			}
		} finally {
			setFaceTimeLinkLoading(false);
		}
	}, [setFaceTimeLinkLoading, displaySnackbar]);
	
	return (
		<div className={styles.sidebar}>
			<ChangelogDialog isOpen={isChangelogDialog} onDismiss={hideChangelogDialog} />
			<FeedbackDialog isOpen={isFeedbackDialog} onDismiss={hideFeedbackDialog} />
			<SignOutDialog isOpen={isSignOutDialog} onDismiss={hideSignOutDialog} />
			<RemoteUpdateDialog isOpen={isRemoteUpdateDialog} onDismiss={hideRemoteUpdateDialog} update={remoteUpdateCache} />
			<UpdateRequiredDialog isOpen={isUpdateRequiredDialog} onDismiss={hideUpdateRequiredDialog} />
			<FaceTimeLinkDialog isOpen={faceTimeLinkDialog !== undefined} onDismiss={() => setFaceTimeLinkDialog(undefined)} link={faceTimeLinkDialog ?? ""} />
			
			<Toolbar className={styles.sidebarToolbar}>
				<AirMessageLogo />
				<div style={{flexGrow: 1}} />
				{isFaceTimeSupported && (
					<IconButton
						size="large"
						onClick={createFaceTimeLink}
						disabled={isFaceTimeLinkLoading}>
						<VideoCallOutlined />
					</IconButton>
				)}
				
				<IconButton
					size="large"
					onClick={props.onCreateSelected}
					disabled={props.conversations === undefined}>
					<AddRounded />
				</IconButton>
				
				<IconButton
					aria-haspopup="true"
					size="large"
					onClick={openOverflowMenu}
					disabled={props.conversations === undefined}>
					<MoreVertRounded />
				</IconButton>
				
				<Menu
					anchorEl={overflowMenu}
					anchorOrigin={{
						vertical: "top",
						horizontal: "right",
					}}
					keepMounted
					transformOrigin={{
						vertical: "top",
						horizontal: "right",
					}}
					open={!!overflowMenu}
					onClose={closeOverflowMenu}>
					<MenuItem onClick={showChangelogDialog}>What&apos;s new</MenuItem>
					<MenuItem onClick={showFeedbackDialog}>Help and feedback</MenuItem>
					<MenuItem onClick={showSignOutDialog}>Sign out</MenuItem>
				</Menu>
			</Toolbar>
			
			{props.errorBanner !== undefined && <ConnectionBanner error={props.errorBanner} /> }
			
			{remoteUpdate !== undefined && (
				<SidebarBanner
					icon={<Update />}
					message="A server update is available"
					button="Details"
					onClickButton={showRemoteUpdateDialog} />
			)}
			
			{props.needsServerUpdate && (
				<SidebarBanner
					icon={<SyncProblem />}
					message="Your server needs to be updated"
					button="Details"
					onClickButton={showUpdateRequiredDialog} />
			)}
			
			{props.conversations !== undefined ? (
				<Flipper
					className={styles.sidebarList}
					flipKey={props.conversations.map(conversation => conversation.localID).join(" ")}>
					<List>
						{props.conversations.map((conversation) =>
							<Flipped key={conversation.localID} flipId={conversation.localID}>
								{flippedProps => (
									<ListConversation
										conversation={conversation}
										selected={conversation.localID === props.selectedConversation}
										highlighted={conversation.unreadMessages}
										onSelected={() => props.onConversationSelected(conversation.localID)}
										flippedProps={flippedProps as Record<string, unknown>} />
								)}
							</Flipped>
						)}
					</List>
				</Flipper>
			) : (
				<div className={styles.sidebarListLoading}>
					{[...Array(16)].map((element, index) => <ConversationSkeleton key={`skeleton-${index}`} />)}
				</div>
			)}
		</div>
	);
}