<commit_before>import React, { useEffect, useState } from 'react';
import { c } from 'ttag';
import { APPS, FEATURE_FLAGS, isSSOMode, SSO_PATHS } from 'proton-shared/lib/constants';
import { getAccountSettingsApp, getAppHref } from 'proton-shared/lib/apps/helper';
import { requestFork } from 'proton-shared/lib/authentication/sessionForking';
import { FORK_TYPE } from 'proton-shared/lib/authentication/ForkInterface';
import { updateThemeType } from 'proton-shared/lib/api/settings';
import { ThemeTypes } from 'proton-shared/lib/themes/themes';

import {
    useAuthentication,
    useConfig,
    useModals,
    useUser,
    useApi,
    useUserSettings,
    useOrganization,
} from '../../hooks';
import {
    ButtonLike,
    usePopperAnchor,
    Dropdown,
    Icon,
    AppLink,
    SelectTwo,
    Option,
    Href,
    Button,
    Toggle,
} from '../../components';
import { generateUID } from '../../helpers';
import UserDropdownButton from './UserDropdownButton';
import { DonateModal } from '../payments';
import { useThemeStyle } from '../themes';
import { getThemeStyle } from '../themes/ThemeInjector';

const UserDropdown = ({ ...rest }) => {
    const { APP_NAME } = useConfig();
    const api = useApi();
    const [organization] = useOrganization();
    const { Name: organizationName } = organization || {};
    const [user] = useUser();
    const [userSettings] = useUserSettings();
    const { canPay, isSubUser } = user;
    const { logout } = useAuthentication();
    const { createModal } = useModals();
    const [uid] = useState(generateUID('dropdown'));
    const { anchorRef, isOpen, toggle, close } = usePopperAnchor<HTMLButtonElement>();

    const actualThemeType = userSettings.ThemeType;
    const [, setThemeStyle] = useThemeStyle();
    const [themeType, setThemeType] = useState(actualThemeType);

    useEffect(() => {
        // Updates from event-manager
        setThemeType(themeType);
    }, [actualThemeType]);

    const handleSupportUsClick = () => {
        createModal(<DonateModal />);
        close();
    };

    const handleSwitchAccount = () => {
        if (APP_NAME === APPS.PROTONACCOUNT) {
            const href = getAppHref(SSO_PATHS.SWITCH, APPS.PROTONACCOUNT);
            return document.location.assign(href);
        }
        return requestFork(APP_NAME, undefined, FORK_TYPE.SWITCH);
    };

    const handleLogout = () => {
        logout();
        close();
    };

    const handleThemeChange = (newThemeType: ThemeTypes) => {
        setThemeType(newThemeType);
        setThemeStyle(getThemeStyle(newThemeType));
        api(updateThemeType(newThemeType));
    };

    const handleThemeToggle = () => {
        handleThemeChange(themeType === ThemeTypes.Dark ? ThemeTypes.Default : ThemeTypes.Dark);
    };

    return (
        <>
            <UserDropdownButton
                data-cy-header="userDropdown"
                {...rest}
                user={user}
                ref={anchorRef}
                isOpen={isOpen}
                onClick={toggle}
            />
            <Dropdown
                id={uid}
                className="userDropdown"
                style={{ '--min-width': '20em' }}
                isOpen={isOpen}
                noMaxSize
                anchorRef={anchorRef}
                autoClose={false}
                onClose={close}
                originalPlacement="bottom-right"
            >
                <ul className="unstyled mt1 mb1">
                    {APP_NAME !== APPS.PROTONVPN_SETTINGS ? (
                        <>
                            <li className="pl1 pr1">
                                {organizationName ? (
                                    <>
                                        <div className="color-weak text-sm m0">{c('Label').t`Organization`}</div>
                                        <div className="mb1">{organizationName}</div>
                                    </>
                                ) : null}
                                <ButtonLike
                                    as={AppLink}
                                    to="/"
                                    color="norm"
                                    shape="outline"
                                    className="block w100 mt1-5 mb1-5 text-center"
                                    toApp={getAccountSettingsApp()}
                                    onClick={() => close()}
                                >
                                    {c('Action').t`Manage account`}
                                </ButtonLike>
                            </li>
                            <li className="dropdown-item-hr mt0-5 mb0-5" aria-hidden="false" />
                        </><commit_msg>Hotfix - Remove spacing after organization row<commit_after>import React, { useEffect, useState } from 'react';
import { c } from 'ttag';
import { APPS, FEATURE_FLAGS, isSSOMode, SSO_PATHS } from 'proton-shared/lib/constants';
import { getAccountSettingsApp, getAppHref } from 'proton-shared/lib/apps/helper';
import { requestFork } from 'proton-shared/lib/authentication/sessionForking';
import { FORK_TYPE } from 'proton-shared/lib/authentication/ForkInterface';
import { updateThemeType } from 'proton-shared/lib/api/settings';
import { ThemeTypes } from 'proton-shared/lib/themes/themes';

import {
    useAuthentication,
    useConfig,
    useModals,
    useUser,
    useApi,
    useUserSettings,
    useOrganization,
} from '../../hooks';
import {
    ButtonLike,
    usePopperAnchor,
    Dropdown,
    Icon,
    AppLink,
    SelectTwo,
    Option,
    Href,
    Button,
    Toggle,
} from '../../components';
import { generateUID } from '../../helpers';
import UserDropdownButton from './UserDropdownButton';
import { DonateModal } from '../payments';
import { useThemeStyle } from '../themes';
import { getThemeStyle } from '../themes/ThemeInjector';

const UserDropdown = ({ ...rest }) => {
    const { APP_NAME } = useConfig();
    const api = useApi();
    const [organization] = useOrganization();
    const { Name: organizationName } = organization || {};
    const [user] = useUser();
    const [userSettings] = useUserSettings();
    const { canPay, isSubUser } = user;
    const { logout } = useAuthentication();
    const { createModal } = useModals();
    const [uid] = useState(generateUID('dropdown'));
    const { anchorRef, isOpen, toggle, close } = usePopperAnchor<HTMLButtonElement>();

    const actualThemeType = userSettings.ThemeType;
    const [, setThemeStyle] = useThemeStyle();
    const [themeType, setThemeType] = useState(actualThemeType);

    useEffect(() => {
        // Updates from event-manager
        setThemeType(themeType);
    }, [actualThemeType]);

    const handleSupportUsClick = () => {
        createModal(<DonateModal />);
        close();
    };

    const handleSwitchAccount = () => {
        if (APP_NAME === APPS.PROTONACCOUNT) {
            const href = getAppHref(SSO_PATHS.SWITCH, APPS.PROTONACCOUNT);
            return document.location.assign(href);
        }
        return requestFork(APP_NAME, undefined, FORK_TYPE.SWITCH);
    };

    const handleLogout = () => {
        logout();
        close();
    };

    const handleThemeChange = (newThemeType: ThemeTypes) => {
        setThemeType(newThemeType);
        setThemeStyle(getThemeStyle(newThemeType));
        api(updateThemeType(newThemeType));
    };

    const handleThemeToggle = () => {
        handleThemeChange(themeType === ThemeTypes.Dark ? ThemeTypes.Default : ThemeTypes.Dark);
    };

    return (
        <>
            <UserDropdownButton
                data-cy-header="userDropdown"
                {...rest}
                user={user}
                ref={anchorRef}
                isOpen={isOpen}
                onClick={toggle}
            />
            <Dropdown
                id={uid}
                className="userDropdown"
                style={{ '--min-width': '20em' }}
                isOpen={isOpen}
                noMaxSize
                anchorRef={anchorRef}
                autoClose={false}
                onClose={close}
                originalPlacement="bottom-right"
            >
                <ul className="unstyled mt1 mb1">
                    {APP_NAME !== APPS.PROTONVPN_SETTINGS ? (
                        <>
                            <li className="pl1 pr1">
                                {organizationName ? (
                                    <>
                                        <div className="color-weak text-sm m0">{c('Label').t`Organization`}</div>
                                        <div>{organizationName}</div>
                                    </>
                                ) : null}
                                <ButtonLike
                                    as={AppLink}
                                    to="/"
                                    color="norm"
                                    shape="outline"
                                    className="block w100 mt1-5 mb1-5 text-center"
                                    toApp={getAccountSettingsApp()}
                                    onClick={() => close()}
                                >
                                    {c('Action').t`Manage account`}
                                </ButtonLike>
                            </li>
                            <li className="dropdown-item-hr mt0-5 mb0-5" aria-hidden="false" />
                        </>
{'fraction_non_alphanumeric': 0.11987780469819867, 'fraction_numerical': 0.003897608764352681, 'mean_word_length': 1.591864591864592, 'pattern_counts': {'":': 0, '<': 41, '<?xml version=': 0, '>': 57, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 29, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1083335', 'n_tokens_mistral': 2533, 'n_tokens_neox': 2445, 'n_words': 470}