export default function UserMenu()

in assets/js/components/UserMenu.js [56:237]
157 lines of code
11 McCabe index (conditional complexity)

export default function UserMenu() {
	const unifiedDashboardEnabled = useFeature( 'unifiedDashboard' );
	const proxyPermissionsURL = useSelect( ( select ) =>
		select( CORE_SITE ).getProxyPermissionsURL()
	);
	const userEmail = useSelect( ( select ) => select( CORE_USER ).getEmail() );
	const userPicture = useSelect( ( select ) =>
		select( CORE_USER ).getPicture()
	);
	const postDisconnectURL = useSelect( ( select ) =>
		select( CORE_SITE ).getAdminURL( 'googlesitekit-splash', {
			googlesitekit_context: 'revoked',
		} )
	);

	const [ dialogActive, toggleDialog ] = useState( false );
	const [ menuOpen, setMenuOpen ] = useState( false );
	const menuWrapperRef = useRef();
	const viewContext = useContext( ViewContextContext );
	const { navigateTo } = useDispatch( CORE_LOCATION );

	useClickAway( menuWrapperRef, () => setMenuOpen( false ) );
	useKeyCodesInside( [ ESCAPE, TAB ], menuWrapperRef, () =>
		setMenuOpen( false )
	);

	useEffect( () => {
		const handleDialogClose = ( e ) => {
			// Close if Escape key is pressed.
			if ( ESCAPE === e.keyCode ) {
				toggleDialog( false );
				setMenuOpen( false );
			}
		};

		global.addEventListener( 'keyup', handleDialogClose );

		return () => {
			global.removeEventListener( 'keyup', handleDialogClose );
		};
	}, [] );

	const handleMenu = useCallback( () => {
		if ( ! menuOpen ) {
			trackEvent( `${ viewContext }_headerbar`, 'open_usermenu' );
		}

		setMenuOpen( ! menuOpen );
	}, [ menuOpen, viewContext ] );

	const handleDialog = useCallback( () => {
		toggleDialog( ! dialogActive );
		setMenuOpen( false );
	}, [ dialogActive ] );

	const handleMenuItemSelect = useCallback(
		async ( index ) => {
			switch ( index ) {
				case 0:
					handleDialog();
					break;
				case 1:
					if ( proxyPermissionsURL ) {
						await trackEvent(
							`${ viewContext }_headerbar_usermenu`,
							'manage_sites'
						);
						navigateTo( proxyPermissionsURL );
					}
					break;
				default:
					handleMenu();
			}
		},
		[
			proxyPermissionsURL,
			handleMenu,
			handleDialog,
			navigateTo,
			viewContext,
		]
	);

	// Log the user out if they confirm the dialog.
	const handleUnlinkConfirm = useCallback( async () => {
		// Close the modal.
		toggleDialog( false );

		// Clear caches.
		clearWebStorage();

		await trackEvent(
			`${ viewContext }_headerbar_usermenu`,
			'disconnect_user'
		);

		// Navigate back to the splash screen to reconnect.
		navigateTo( postDisconnectURL );
	}, [ postDisconnectURL, navigateTo, viewContext ] );

	if ( ! unifiedDashboardEnabled && ! userEmail ) {
		return null;
	}

	return (
		<Fragment>
			<div
				ref={ menuWrapperRef }
				className="googlesitekit-user-selector googlesitekit-dropdown-menu googlesitekit-dropdown-menu__icon-menu mdc-menu-surface--anchor"
			>
				<Button
					className={ classnames(
						'googlesitekit-header__dropdown',
						'mdc-button--dropdown',
						// Adds circle background to the non-unified dashboard tablet + mobile view
						'googlesitekit-border-radius-round--tablet',
						'googlesitekit-border-radius-round--phone',
						{
							'googlesitekit-border-radius-round': unifiedDashboardEnabled,
							'googlesitekit-button-icon': unifiedDashboardEnabled,
						}
					) }
					text
					onClick={ handleMenu }
					icon={
						!! userPicture && (
							<i
								className={ classnames( 'mdc-button__icon', {
									'mdc-button__account': unifiedDashboardEnabled,
								} ) }
								aria-hidden="true"
							>
								<img
									className="mdc-button__icon--image"
									src={ userPicture }
									alt={ __(
										'User Avatar',
										'google-site-kit'
									) }
								/>
							</i>
						)
					}
					aria-haspopup="menu"
					aria-expanded={ menuOpen }
					aria-controls="user-menu"
					aria-label={ __( 'Account', 'google-site-kit' ) }
					tooltip
				>
					{ unifiedDashboardEnabled ? undefined : userEmail }
				</Button>
				<Menu
					className="googlesitekit-width-auto"
					menuOpen={ menuOpen }
					menuItems={ [
						__( 'Disconnect', 'google-site-kit' ),
					].concat(
						proxyPermissionsURL
							? [ __( 'Manage sites…', 'google-site-kit' ) ]
							: []
					) }
					onSelected={ handleMenuItemSelect }
					id="user-menu"
				/>
			</div>
			<Portal>
				<Dialog
					dialogActive={ dialogActive }
					handleConfirm={ handleUnlinkConfirm }
					handleDialog={ handleDialog }
					title={ __( 'Disconnect', 'google-site-kit' ) }
					subtitle={ __(
						'Disconnecting Site Kit by Google will remove your access to all services. After disconnecting, you will need to re-authorize to restore service.',
						'google-site-kit'
					) }
					confirmButton={ __( 'Disconnect', 'google-site-kit' ) }
					danger
				/>
			</Portal>
		</Fragment>
	);
}