import React from 'react';
import { c, msgid } from 'ttag';
import { withRouter } from 'react-router';
import PropTypes from 'prop-types';
import {
    useEventManager,
    useOrganization,
    useDomains,
    SubTitle,
    Alert,
    PrimaryButton,
    Button,
    Block,
    useModals
} from 'react-components';

import DomainModal from './DomainModal';
import DomainsTable from './DomainsTable';
import RestoreAdministratorPrivileges from '../organization/RestoreAdministratorPrivileges';

const DomainsSection = ({ history }) => {
    const [domains, loadingDomains] = useDomains();
    const [organization] = useOrganization();
    const { createModal } = useModals();
    const { call } = useEventManager();

    const { UsedDomains, MaxDomains } = organization;

    const handleRedirect = (route) => {
        history.push(route);
    };

    return (
        <>
            <RestoreAdministratorPrivileges />
            <SubTitle>{c('Title').t`Custom domains`}</SubTitle>
            <Alert learnMore="https://protonmail.com/support/categories/custom-domains/">
                {c('Message')
                    .t`Add a domain to receive emails to your custom email addresses and to add more users to your organization (Visionary and Professional accounts only).`}
            </Alert>
            <Block>
                <PrimaryButton onClick={() => createModal(<DomainModal onRedirect={handleRedirect} />)} className="mr1">
                    {c('Action').t`Add domain`}
                </PrimaryButton>
                <Button disabled={loadingDomains} onClick={call}>{c('Action').t`Refresh status`}</Button>
            </Block>
            {!loadingDomains && !domains.length ? <Alert>{c('Info').t`No domains yet.`}</Alert> : null}
            {!loadingDomains && domains.length ? <DomainsTable domains={domains} onRedirect={handleRedirect} /> : null}
            <Block className="opacity-50">
                {UsedDomains} / {MaxDomains} {c('Info').ngettext(msgid`domain used`, `domains used`, UsedDomains)}
            </Block>
        </>
    );
};

DomainsSection.propTypes = {
    history: PropTypes.object.isRequired
};

export default withRouter(DomainsSection);

@@ -283,33 +283,119 @@
 dals
-%0A%7D from 'react-components
+,%0A    useLoading,%0A    Loader%0A%7D from 'react-components';%0Aimport %7B wait %7D from 'proton-shared/lib/helpers/promise
 ';%0A%0A
@@ -693,27 +693,97 @@
 tion
-%5D = useOrganization
+, loadingOrganization%5D = useOrganization();%0A    const %5Bloading, withLoading%5D = useLoading
 ();%0A
@@ -864,16 +864,81 @@
 ger();%0A%0A
+    if (loadingOrganization) %7B%0A        return %3CLoader /%3E;%0A    %7D%0A%0A
     cons
@@ -1061,16 +1061,153 @@
     %7D;%0A%0A
+    const handleRefresh = async () =%3E %7B%0A        // To not spam the event manager.%0A        await wait(200);%0A        await call();%0A    %7D;%0A%0A
     retu
@@ -1924,34 +1924,120 @@
 ns%7D 
-onClick=%7Bcall%7D%3E%7Bc('Action'
+loading=%7Bloading%7D onClick=%7B() =%3E withLoading(handleRefresh())%7D%3E%7Bc(%0A                    'Action'%0A                
 ).t%60

Add loader to refresh status