How to use the react-components.useApi function in react-components

export const useSubscription = () => {
    const [user] = useUser();
    const api = useApi();

    return useCachedAsyncResult(
        SubscriptionModel.key,
        () => {
            if (user.isPaid) {
                return SubscriptionModel.get(api);
            }
            return Promise.resolve(FREE_SUBSCRIPTION);
        },
        []
    ); // Don't need to depend on the user changes since the subscription is updated through the event manager
};

const SessionsSection = () => {
    const { createNotification } = useNotifications();
    const api = useApi();
    const authentication = useAuthentication();
    const [loading, withLoading] = useLoading();
    const [table, setTable] = useState({ sessions: [], total: 0 });
    const { page, list, onNext, onPrevious, onSelect } = usePagination(table.sessions);
    const { createModal } = useModals();

    const fetchSessions = async () => {
        const { Sessions } = await api(querySessions());
        setTable({ sessions: Sessions.reverse(), total: Sessions.length }); // Most recent, first
    };

    const handleRevoke = async (UID) => {
        await api(UID ? revokeSession(UID) : revokeOtherSessions());
        await fetchSessions();
        createNotification({ text: UID ? c('Success').t`Session revoked` : c('Success').t`Sessions revoked` });
    };

cycle = DEFAULT_CYCLE,
    currency = DEFAULT_CURRENCY,
    coupon,
    planIDs = {},
    onClose,
    ...rest
}) => {
    const TITLE = {
        [SUBSCRIPTION_STEPS.NETWORK_ERROR]: c('Title').t`Network error`,
        [SUBSCRIPTION_STEPS.CUSTOMIZATION]: c('Title').t`Plan customization`,
        [SUBSCRIPTION_STEPS.PAYMENT]: c('Title').t`Checkout`,
        [SUBSCRIPTION_STEPS.UPGRADE]: <div>{c('Title').t`Processing...`}</div>,
        [SUBSCRIPTION_STEPS.THANKS]: <div>{c('Title').t`Thank you!`}</div>
    };

    const api = useApi();
    const [user] = useUser();
    const { call } = useEventManager();
    const { createModal } = useModals();
    const { createNotification } = useNotifications();
    const [vpnCountries, loadingVpnCountries] = useVPNCountries();
    const [plans, loadingPlans] = usePlans();
    const [organization, loadingOrganization] = useOrganization();
    const [loading, withLoading] = useLoading();
    const [loadingCheck, withLoadingCheck] = useLoading();
    const [checkResult, setCheckResult] = useState({});
    const { Credit = 0 } = checkResult;
    const { Code: couponCode } = checkResult.Coupon || {}; // Coupon can be null
    const creditsRemaining = (user.Credit + Credit) / 100;
    const [model, setModel] = useState({
        cycle,
        currency,

const NewsCheckboxes = () => {
    const [{ News } = {}] = useUserSettings();
    const { createNotification } = useNotifications();
    const { call } = useEventManager();
    const api = useApi();
    const [loading, withLoading] = useLoading();

    const update = async (mask) => {
        await api(updateNews(toggleBit(News, mask)));
        await call();
        createNotification({ text: c('Info').t`Emailing preference updated` });
    };

    const handleChange = (mask) => () => withLoading(update(mask));

    const checkboxes = [
        { id: 'announcements', flag: ANNOUNCEMENTS, text: c('Label for news').t`Major announcements (2-3 per year)` },
        { id: 'features', flag: FEATURES, text: c('Label for news').t`Major features (3-4 per year)` },
        { id: 'business', flag: BUSINESS, text: c('Label for news').t`Proton Business (4-5 per year)` },
        { id: 'newsletter', flag: NEWSLETTER, text: c('Label for news').t`Proton newsletter (5-6 per year)` },
        { id: 'beta', flag: BETA, text: c('Label for news').t`Proton Beta (10-12 per year)` }

export const useOrganization = () => {
    const [user] = useUser();
    const api = useApi();

    return useCachedAsyncResult(
        OrganizationModel.key,
        () => {
            if (user.isPaid) {
                return OrganizationModel.get(api);
            }
            return Promise.resolve(FREE_ORGANIZATION);
        },
        []
    );
};

const useContact = (contactID) => {
    const cache = useContext(ContactProviderContext);
    const api = useApi();

    const miss = useCallback(() => {
        return api(getContact(contactID)).then(({ Contact }) => Contact);
    }, []);

    return useCachedModelResult(cache, contactID, miss);
};

const AutoSaveContactsToggle = ({ autoSaveContacts, ...rest }) => {
    const api = useApi();
    const [loading, withLoading] = useLoading();
    const { createNotification } = useNotifications();
    const { call } = useEventManager();

    const handleChange = async ({ target }) => {
        await api(updateAutoSaveContacts(+target.checked));
        await call();
        createNotification({ text: c('Success').t`Preference saved` });
    };

    return (
         withLoading(handleChange(event))}
            {...rest}

const DailyNotificationsToggle = ({ id }) => {
    const { call } = useEventManager();
    const api = useApi();
    const [{ Email }] = useUserSettings();
    const [loading, withLoading] = useLoading();

    const handleChange = async (checked) => {
        await api(updateNotifyEmail(checked));
        await call();
    };

    return (
         withLoading(handleChange(+checked))}
        />
    );

const LoginForm = ({ onLogin, ignoreUnlock = false, needHelp }) => {
    const { createNotification } = useNotifications();
    const { createModal } = useModals();
    const cacheRef = useRef();
    const api = useApi();

    const [loading, withLoading] = useLoading();
    const [form, setForm] = useState(FORM.LOGIN);
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
    const [totp, setTotp] = useState('');
    const [keyPassword, setKeyPassword] = useState('');

    /**
     * Finalize login can be called without a key password in these cases:
     * 1) The admin panel
     * 2) Users who have no keys but are in 2-password mode
     * @param {String} [keyPassword]
     * @return {Promise}
     */
    const finalizeLogin = async (keyPassword) => {

const LoginContainer = ({ onLogin, needHelp, ignoreUnlock = false }) => {
    const { createNotification } = useNotifications();
    const cacheRef = useRef();
    const api = useApi();

    const [loading, withLoading] = useLoading();
    const [form, setForm] = useState(FORM.LOGIN);
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
    const [totp, setTotp] = useState('');
    const [keyPassword, setKeyPassword] = useState('');

    /**
     * Finalize login can be called without a key password in these cases:
     * 1) The admin panel
     * 2) Users who have no keys but are in 2-password mode
     * @param {String} [keyPassword]
     * @return {Promise}
     */
    const finalizeLogin = async (keyPassword) => {