<commit_before>import React, { useMemo, useState } from 'react';
import { c } from 'ttag';
import { Location } from 'history';
import {
    Loader,
    useMailSettings,
    useLabels,
    useFolders,
    useConversationCounts,
    useMessageCounts,
    SidebarList,
    SimpleSidebarListItemHeader,
    SidebarListItemHeaderLink
} from 'react-components';
import { SHOW_MOVED, MAILBOX_LABEL_IDS } from 'proton-shared/lib/constants';

import { getCounterMap } from '../../helpers/elements';
import { isConversationMode } from '../../helpers/mailSettings';
import SidebarItem from './SidebarItem';
import SidebarFolders from './SidebarFolders';
import SidebarLabels from './SidebarLabels';

interface Props {
    labelID: string;
    location: Location;
}

const MailSidebarList = ({ labelID: currentLabelID, location }: Props) => {
    const [conversationCounts = [], actualLoadingConversationCounts] = useConversationCounts();
    const [messageCounts = [], actualLoadingMessageCounts] = useMessageCounts();
    const [mailSettings, loadingMailSettings] = useMailSettings();
    const [displayFolders, toggleFolders] = useState(true);
    const [displayLabels, toggleLabels] = useState(true);
    const [labels, loadingLabels] = useLabels();
    const [folders, loadingFolders] = useFolders();

    // We want to show the loader only at inital loading, not on updates
    const loadingConversationCounts = actualLoadingConversationCounts && conversationCounts.length === 0;
    const loadingMessageCounts = actualLoadingMessageCounts && messageCounts.length === 0;

    const { ShowMoved } = mailSettings || {};

    const isConversation = isConversationMode(currentLabelID, mailSettings, location);

    const counterMap = useMemo(() => {
        if (!mailSettings || !labels || !folders || !conversationCounts || !messageCounts) {
            return {};
        }

        return getCounterMap(labels.concat(folders), conversationCounts, messageCounts, mailSettings, location);
    }, [mailSettings, labels, folders, conversationCounts, messageCounts]);

    if (loadingMailSettings || loadingLabels || loadingFolders || loadingConversationCounts || loadingMessageCounts) {
        return <Loader />;
    }

    const getCommonProps = (labelID: string) => ({
        currentLabelID,
        labelID,
        isConversation,
        count: counterMap[labelID]
    });

    return (
        <SidebarList>
            <SidebarItem
                {...getCommonProps(MAILBOX_LABEL_IDS.INBOX)}
                icon="inbox"
                text={c('Link').t`Inbox`}
                isFolder={true}
                data-test-id="inbox"
            />
            <SidebarItem
                {...getCommonProps(
                    ShowMoved & SHOW_MOVED.DRAFTS ? MAILBOX_LABEL_IDS.ALL_DRAFTS : MAILBOX_LABEL_IDS.DRAFTS
                )}
                icon="drafts"
                text={c('Link').t`Drafts`}
                isFolder={true}
                data-test-id="drafts"
            />
            <SidebarItem
                {...getCommonProps(ShowMoved & SHOW_MOVED.SENT ? MAILBOX_LABEL_IDS.ALL_SENT : MAILBOX_LABEL_IDS.SENT)}
                icon="sent"
                text={c('Link').t`Sent`}
                isFolder={true}
                data-test-id="sent"
            />
            <SidebarItem
                {...getCommonProps(MAILBOX_LABEL_IDS.STARRED)}
                icon="star"
                text={c('Link').t`Starred`}
                isFolder={false}
                data-test-id="starred"
            />
            <SidebarItem
                {...getCommonProps(MAILBOX_LABEL_IDS.ARCHIVE)}
                icon="archive"
                text={c('Link').t`Archive`}
                isFolder={true}
                data-test-id="archive"
            />
            <SidebarItem
                {...getCommonProps(MAILBOX_LABEL_IDS.SPAM)}
                icon="spam"
                text={c('Link').t`Spam`}
                isFolder={true}
                data-test-id="spam"
            />
            <SidebarItem
                {...getCommonProps(MAILBOX_LABEL_IDS.TRASH)}
                icon="trash"
                text={c('Link').t`Trash`}
                isFolder={true}
                data-test-id="trash"
            />
            <SidebarItem
                {...getCommonProps(MAILBOX_LABEL_IDS.ALL_MAIL)}
                icon="all-emails"
                text={c('Link').t`All mail`}
                isFolder={true}
                data-test-id="allmail"
            />
            <SimpleSidebarListItemHeader
                toggle={displayFolders}
                onToggle={() => toggleFolders(!displayFolders)}
                text={c('Link').t`Folders`}
                title={c('Link').t`Folders`}
                right={
                    <SidebarListItemHeaderLink
                        to="/settings/labels"
                        external={true}
                        icon="settings-singular"
                        title={c('Info').t`Manage your folders`}
                        info={c('Link').t`Folders`}
                    />
                }
            />
            {displayFolders && <SidebarFolders currentLabelID={currentLabelID} counterMap={counterMap} />}
            <SimpleSidebarListItemHeader
                toggle={displayLabels}
                onToggle={() => toggleLabels(!displayLabels)}
                text={c('Link').t`Labels`}
                title={c('Link').t`Labels`}
                right={
                    <SidebarListItemHeaderLink
                        to="/settings/labels"
                        external={true}
                        icon="settings-singular"
                        title={c('Info').t`Manage your labels`}
                        info={c('Link').t`Labels`}
                    />
                }
            />
            {displayLabels && <SidebarLabels currentLabelID={currentLabelID} counterMap={counterMap} />}
        </SidebarList>
    );
};

export default MailSidebarList;<commit_msg>fix [MAILWEB-1195] vocalization folder/labels setting link<commit_after>import React, { useMemo, useState } from 'react';
import { c } from 'ttag';
import { Location } from 'history';
import {
    Loader,
    useMailSettings,
    useLabels,
    useFolders,
    useConversationCounts,
    useMessageCounts,
    SidebarList,
    SimpleSidebarListItemHeader,
    SidebarListItemHeaderLink
} from 'react-components';
import { SHOW_MOVED, MAILBOX_LABEL_IDS } from 'proton-shared/lib/constants';

import { getCounterMap } from '../../helpers/elements';
import { isConversationMode } from '../../helpers/mailSettings';
import SidebarItem from './SidebarItem';
import SidebarFolders from './SidebarFolders';
import SidebarLabels from './SidebarLabels';

interface Props {
    labelID: string;
    location: Location;
}

const MailSidebarList = ({ labelID: currentLabelID, location }: Props) => {
    const [conversationCounts = [], actualLoadingConversationCounts] = useConversationCounts();
    const [messageCounts = [], actualLoadingMessageCounts] = useMessageCounts();
    const [mailSettings, loadingMailSettings] = useMailSettings();
    const [displayFolders, toggleFolders] = useState(true);
    const [displayLabels, toggleLabels] = useState(true);
    const [labels, loadingLabels] = useLabels();
    const [folders, loadingFolders] = useFolders();

    // We want to show the loader only at inital loading, not on updates
    const loadingConversationCounts = actualLoadingConversationCounts && conversationCounts.length === 0;
    const loadingMessageCounts = actualLoadingMessageCounts && messageCounts.length === 0;

    const { ShowMoved } = mailSettings || {};

    const isConversation = isConversationMode(currentLabelID, mailSettings, location);

    const counterMap = useMemo(() => {
        if (!mailSettings || !labels || !folders || !conversationCounts || !messageCounts) {
            return {};
        }

        return getCounterMap(labels.concat(folders), conversationCounts, messageCounts, mailSettings, location);
    }, [mailSettings, labels, folders, conversationCounts, messageCounts]);

    if (loadingMailSettings || loadingLabels || loadingFolders || loadingConversationCounts || loadingMessageCounts) {
        return <Loader />;
    }

    const getCommonProps = (labelID: string) => ({
        currentLabelID,
        labelID,
        isConversation,
        count: counterMap[labelID]
    });

    return (
        <SidebarList>
            <SidebarItem
                {...getCommonProps(MAILBOX_LABEL_IDS.INBOX)}
                icon="inbox"
                text={c('Link').t`Inbox`}
                isFolder={true}
                data-test-id="inbox"
            />
            <SidebarItem
                {...getCommonProps(
                    ShowMoved & SHOW_MOVED.DRAFTS ? MAILBOX_LABEL_IDS.ALL_DRAFTS : MAILBOX_LABEL_IDS.DRAFTS
                )}
                icon="drafts"
                text={c('Link').t`Drafts`}
                isFolder={true}
                data-test-id="drafts"
            />
            <SidebarItem
                {...getCommonProps(ShowMoved & SHOW_MOVED.SENT ? MAILBOX_LABEL_IDS.ALL_SENT : MAILBOX_LABEL_IDS.SENT)}
                icon="sent"
                text={c('Link').t`Sent`}
                isFolder={true}
                data-test-id="sent"
            />
            <SidebarItem
                {...getCommonProps(MAILBOX_LABEL_IDS.STARRED)}
                icon="star"
                text={c('Link').t`Starred`}
                isFolder={false}
                data-test-id="starred"
            />
            <SidebarItem
                {...getCommonProps(MAILBOX_LABEL_IDS.ARCHIVE)}
                icon="archive"
                text={c('Link').t`Archive`}
                isFolder={true}
                data-test-id="archive"
            />
            <SidebarItem
                {...getCommonProps(MAILBOX_LABEL_IDS.SPAM)}
                icon="spam"
                text={c('Link').t`Spam`}
                isFolder={true}
                data-test-id="spam"
            />
            <SidebarItem
                {...getCommonProps(MAILBOX_LABEL_IDS.TRASH)}
                icon="trash"
                text={c('Link').t`Trash`}
                isFolder={true}
                data-test-id="trash"
            />
            <SidebarItem
                {...getCommonProps(MAILBOX_LABEL_IDS.ALL_MAIL)}
                icon="all-emails"
                text={c('Link').t`All mail`}
                isFolder={true}
                data-test-id="allmail"
            />
            <SimpleSidebarListItemHeader
                toggle={displayFolders}
                onToggle={() => toggleFolders(!displayFolders)}
                text={c('Link').t`Folders`}
                title={c('Link').t`Folders`}
                right={
                    <SidebarListItemHeaderLink
                        to="/settings/labels"
                        external={true}
                        icon="settings-singular"
                        title={c('Info').t`Manage your folders`}
                        info={c('Link').t`Manage your folders`}
                    />
                }
            />
            {displayFolders && <SidebarFolders currentLabelID={currentLabelID} counterMap={counterMap} />}
            <SimpleSidebarListItemHeader
                toggle={displayLabels}
                onToggle={() => toggleLabels(!displayLabels)}
                text={c('Link').t`Labels`}
                title={c('Link').t`Labels`}
                right={
                    <SidebarListItemHeaderLink
                        to="/settings/labels"
                        external={true}
                        icon="settings-singular"
                        title={c('Info').t`Manage your labels`}
                        info={c('Link').t`Manage your labels`}
                    />
                }
            />
            {displayLabels && <SidebarLabels currentLabelID={currentLabelID} counterMap={counterMap} />}
        </SidebarList>
    );
};

export default MailSidebarList;
{'fraction_non_alphanumeric': 0.11900635470826113, 'fraction_numerical': 0.0006602294297268301, 'mean_word_length': 1.8024976873265495, 'pattern_counts': {'":': 0, '<': 37, '<?xml version=': 0, '>': 47, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '531912', 'n_tokens_mistral': 3379, 'n_tokens_neox': 3261, 'n_words': 528}