<commit_before>import React from 'react';
import { c } from 'ttag';
import PropTypes from 'prop-types';
import { Block, Label, Select, PrimaryButton, useModal } from 'react-components';

import AddressModal from './AddressModal';

const AddressesToolbar = ({ onChangeMember, member, members, loading }) => {
    const { isOpen, open, close } = useModal();
    const options = members.map(({ ID: value, Name: text }) => ({ text, value }));

    const handleChange = ({ target }) => {
        const member = members.data.find(({ ID }) => target.value === ID);
        onChangeMember(member);
    };

    return (
        <Block>
            <Label htmlFor="memberSelect" className="mr1">{c('Label').t`User:`}</Label>
            <Select
                disabled={loading}
                id="memberSelect"
                value={member.ID}
                options={options}
                className="mr1"
                onChange={handleChange}
            />
            <PrimaryButton disabled={loading} onClick={open}>{c('Action').t`Add address`}</PrimaryButton>
            <AddressModal show={isOpen} onClose={close} member={member} />
        </Block>
    );
};

AddressesToolbar.propTypes = {
    member: PropTypes.object,
    members: PropTypes.array,
    onChangeMember: PropTypes.func.isRequired,
    loading: PropTypes.bool.isRequired
};

export default AddressesToolbar;
<commit_msg>Display emails in the <select><commit_after>import React from 'react';
import { c } from 'ttag';
import PropTypes from 'prop-types';
import { Block, Label, Select, PrimaryButton, useModal } from 'react-components';

import AddressModal from './AddressModal';

const AddressesToolbar = ({ onChangeMember, member, members, loading }) => {
    const { isOpen, open, close } = useModal();
    const options = members.map(({ ID: value, Name, addresses }) => ({
        text: `${Name} (${addresses.map(({ Email }) => Email).join(', ')})`,
        value
    }));

    const handleChange = ({ target }) => {
        const member = members.data.find(({ ID }) => target.value === ID);
        onChangeMember(member);
    };

    return (
        <Block>
            <Label htmlFor="memberSelect" className="mr1">{c('Label').t`User:`}</Label>
            <Select
                disabled={loading}
                id="memberSelect"
                value={member.ID}
                options={options}
                className="mr1"
                onChange={handleChange}
            />
            <PrimaryButton disabled={loading} onClick={open}>{c('Action').t`Add address`}</PrimaryButton>
            <AddressModal show={isOpen} onClose={close} member={member} />
        </Block>
    );
};

AddressesToolbar.propTypes = {
    member: PropTypes.object,
    members: PropTypes.array,
    onChangeMember: PropTypes.func.isRequired,
    loading: PropTypes.bool.isRequired
};

export default AddressesToolbar;

{'fraction_non_alphanumeric': 0.14863463532665053, 'fraction_numerical': 0.00138264777048047, 'mean_word_length': 2.654040404040404, 'pattern_counts': {'":': 0, '<': 20, '<?xml version=': 0, '>': 29, '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': '2012715', 'n_tokens_mistral': 778, 'n_tokens_neox': 788, 'n_words': 182}