accounts-frontend/packages/app/components/userbar/LoggedInPanel.tsx

import React, { ComponentType, useCallback, useState } from 'react';
import clsx from 'clsx';
import ClickAwayListener from 'react-click-away-listener';

import { Account } from 'app/components/accounts';

import AccountSwitcher from './AccountSwitcher';

import styles from './loggedInPanel.scss';

interface Props {
    activeAccount: Account;
    accounts: ReadonlyArray<Account>;
    onSwitchAccount?: (account: Account) => Promise<any>;
    onRemoveAccount?: (account: Account) => Promise<any>;
}

const LoggedInPanel: ComponentType<Props> = ({ activeAccount, accounts, onSwitchAccount, onRemoveAccount }) => {
    const [isAccountSwitcherActive, setAccountSwitcherState] = useState(false);
    const hideAccountSwitcher = useCallback(() => setAccountSwitcherState(false), []);
    const onAccountClick = useCallback(
        async (account: Account) => {
            if (onSwitchAccount) {
                await onSwitchAccount(account);
            }

            setAccountSwitcherState(false);
        },
        [onSwitchAccount],
    );

    return (
        <div className={styles.loggedInPanel}>
            <div
                className={clsx(styles.activeAccount, {
                    [styles.activeAccountExpanded]: isAccountSwitcherActive,
                })}
            >
                <ClickAwayListener onClickAway={hideAccountSwitcher}>
                    <button
                        className={styles.activeAccountButton}
                        onClick={setAccountSwitcherState.bind(null, !isAccountSwitcherActive)}
                    >
                        <span className={styles.userIcon} />
                        <span className={styles.userName}>{activeAccount.username}</span>
                        <span className={styles.expandIcon} />
                    </button>

                    <div className={styles.accountSwitcherContainer}>
                        <AccountSwitcher
                            activeAccount={activeAccount}
                            accounts={accounts}
                            onAccountClick={onAccountClick}
                            onRemoveClick={onRemoveAccount}
                            onLoginClick={hideAccountSwitcher}
                        />
                    </div>
                </ClickAwayListener>
            </div>
        </div>
    );
};

export default LoggedInPanel;