How to use react-components - 10 common examples

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 ImportCsvModalContent = ({ file, onSetVcardContacts }) => {
    const { createNotification } = useNotifications();

    const [isParsingFile, withParsing] = useLoading(true);
    const [contactIndex, setContactIndex] = useState(0);
    const [preVcardsContacts, setPreVcardsContacts] = useState([]);

    const handleClickPrevious = () => setContactIndex((index) => index - 1);
    const handleClickNext = () => setContactIndex((index) => index + 1);

    const handleToggle = (groupIndex) => (index) => {
        if (preVcardsContacts[0][groupIndex][index].combineInto === 'fn-main') {
            // do not allow to uncheck first name and last name simultaneously
            const preVcards = preVcardsContacts[0][groupIndex];
            const firstNameIndex = preVcards.findIndex(({ header }) => header.toLowerCase() === 'first name');
            const lastNameIndex = preVcards.findIndex(({ header }) => header.toLowerCase() === 'last name');
            const isFirstNameChecked = firstNameIndex !== -1 && preVcards[firstNameIndex].checked;
            const isLastNameChecked = lastNameIndex !== -1 && preVcards[lastNameIndex].checked;

            if ((!isFirstNameChecked && index === lastNameIndex) || (!isLastNameChecked && index === firstNameIndex)) {

const MergingModalContent = ({
    contactID,
    userKeysList,
    alreadyMerged,
    beMergedModel = {},
    beDeletedModel = {},
    totalBeMerged = 0,
    onFinish,
    history,
    location
}) => {
    const api = useApi();
    const { privateKeys, publicKeys } = useMemo(() => splitKeys(userKeysList), []);

    const [loading, withLoading] = useLoading(true);
    const [model, setModel] = useState({
        mergedAndEncrypted: [],
        failedOnMergeAndEncrypt: [],
        submitted: [],
        failedOnSubmit: []
    });

    useEffect(() => {
        // Prepare api for allowing cancellation in the middle of the merge
        const abortController = new AbortController();
        const apiWithAbort = (config) => api({ ...config, signal: abortController.signal });

        /**
         * Get a contact from its ID and decrypt it. Return contact as a list of properties
         */
        const getDecryptedContact = async (ID, { signal }) => {

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))}
        />
    );