File Manager

📁 Media Files

📁 .. (Parent Directory) 📁 hoc/ 📁 layout/ 📁 schema-utils/ ⚡ character-limit-status.js ⚡ confirmation-dialog.js ⚡ dashboard-breadcrumb.js ⚡ error-boundary.js ⚡ global-remove-image-button.js ⚡ global-save-button.js ⚡ global-search.js ⚡ icon-badge.js ⚡ improve-with-ai-button.js ⚡ loading-skeleton.js ⚡ logo.js ⚡ media-preview.js ⚡ modal-wrapper.js ⚡ not-allowed.js ⚡ page-check-status-indicator.js ⚡ page-content-wrapper.js ⚡ page-header.js ⚡ preview-input-with-suffix.js ⚡ sidebar-skeleton.js ⚡ social-preview.js ⚡ tabs.js ⚡ tanstack-router-dev-tools.js ⚡ tooltip.js ⚡ upgrade-cta-alert.js ⚡ user-dropdown.js ⚡ version-badge.js

⬆️ Upload Files

📁 Create Folder

📄 Create File

💻 Terminal

📦 Extract Archive

⚡ Edit: user-dropdown.js

Size: 3.16 KB | Modified: 2026-04-21 02:50:19

import apiFetch from '@wordpress/api-fetch';
import { Avatar, DropdownMenu, toast } from '@bsf/force-ui';
import { Globe, LogOut, User } from 'lucide-react';
import { __ } from '@wordpress/i18n';
import { useDispatch, useSelect } from '@wordpress/data';
import { STORE_NAME } from '@/admin-store/constants';

const UserDropdown = () => {
	const searchConsole = useSelect( ( select ) =>
		select( STORE_NAME ).getSearchConsole()
	);
	const { toggleSiteSelectorModal, setConfirmationModal } =
		useDispatch( STORE_NAME );

const handleChangeSite = () => {
		toggleSiteSelectorModal();
	};

const handleDisconnect = () => {
		setConfirmationModal( {
			open: true,
			title: __( 'Disconnect Search Console Account', 'surerank' ),
			description: __(
				'Are you sure you want to disconnect your Search Console account from SureRank?',
				'surerank'
			),
			onConfirm: handleDisconnectConfirm,
			confirmButtonText: __( 'Disconnect', 'surerank' ),
		} );
	};

const options = [
		{
			label: __( 'Change Site', 'surerank' ),
			icon: Globe,
			onClick: handleChangeSite,
		},
		{
			label: __( 'Disconnect', 'surerank' ),
			icon: LogOut,
			onClick: handleDisconnect,
		},
	];

if ( ! searchConsole.authenticated ) {
		return null;
	}

return (
		<DropdownMenu placement="bottom-start">
			<DropdownMenu.Trigger className="cursor-pointer">
				<Avatar variant="primary-light" size="xs">
					<User />
				</Avatar>
			</DropdownMenu.Trigger>
			<DropdownMenu.ContentWrapper>
				<DropdownMenu.Content className="w-60 [&>div]:p-1.5">
					<DropdownMenu.List className="p-0">
						<div className="p-1 flex gap-2 items-center">
							<Avatar
								src={ searchConsole.profile.gravatar }
								className="rounded-full shrink-0"
							/>
							<div className="max-w-[78%]">
								<p className="text-base font-medium text-text-primary truncate">
									{ searchConsole.profile.name }
								</p>
								<p className="text-xs font-normal text-text-tertiary truncate">
									{ searchConsole.profile.email }
								</p>
							</div>
						</div>
						<DropdownMenu.Separator className="w-[calc(100%+1rem)] -translate-x-2 mb-0 my-1" />
						{ options.map( ( option, index ) => (
							<DropdownMenu.Item
								className="p-1"
								key={ index }
								onClick={ option.onClick }
							>
								<option.icon className="size-5" />
								<span>{ option.label }</span>
							</DropdownMenu.Item>
						) ) }
					</DropdownMenu.List>
				</DropdownMenu.Content>
			</DropdownMenu.ContentWrapper>
		</DropdownMenu>
	);
};

export const handleDisconnectConfirm = async () => {
	try {
		const response = await apiFetch( {
			path: '/surerank/v1/google-search-console/revoke-auth',
			method: 'DELETE',
		} );
		if ( ! response.success ) {
			throw new Error(
				response?.message ??
					__(
						'Failed to disconnect your account. Please try again.',
						'surerank'
					)
			);
		}
		toast.success(
			__(
				'Your account has been disconnected. The page will refresh in a few seconds.',
				'surerank'
			)
		);
		// Refresh the page after 3 seconds
		setTimeout( () => {
			window.location.reload();
		}, 3000 );
	} catch ( error ) {
		toast.error( error.message );
	}
};

export default UserDropdown;

Supports: PHP, ASPX, HTML, JavaScript, CSS and other text-based files

📥 Download

File manager