1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-12 20:57:12 +01:00
metamask-extension/ui/components/app/contact-list/contact-list.component.js
2021-04-28 14:53:59 -05:00

113 lines
3.0 KiB
JavaScript

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import Button from '../../ui/button';
import RecipientGroup from './recipient-group/recipient-group.component';
export default class ContactList extends PureComponent {
static propTypes = {
searchForContacts: PropTypes.func,
searchForRecents: PropTypes.func,
searchForMyAccounts: PropTypes.func,
selectRecipient: PropTypes.func,
children: PropTypes.node,
selectedAddress: PropTypes.string,
};
static contextTypes = {
t: PropTypes.func,
};
state = {
isShowingAllRecent: false,
};
renderRecents() {
const { t } = this.context;
const { isShowingAllRecent } = this.state;
const nonContacts = this.props.searchForRecents();
const showLoadMore = !isShowingAllRecent && nonContacts.length > 2;
return (
<div className="send__select-recipient-wrapper__recent-group-wrapper">
<RecipientGroup
label={t('recents')}
items={showLoadMore ? nonContacts.slice(0, 2) : nonContacts}
onSelect={this.props.selectRecipient}
selectedAddress={this.props.selectedAddress}
/>
{showLoadMore && (
<Button
type="link"
className="send__select-recipient-wrapper__recent-group-wrapper__load-more"
onClick={() => this.setState({ isShowingAllRecent: true })}
>
{t('loadMore')}
</Button>
)}
</div>
);
}
renderAddressBook() {
const contacts = this.props.searchForContacts();
const contactGroups = contacts.reduce((acc, contact) => {
const firstLetter = contact.name.slice(0, 1).toUpperCase();
acc[firstLetter] = acc[firstLetter] || [];
const bucket = acc[firstLetter];
bucket.push(contact);
return acc;
}, {});
return Object.entries(contactGroups)
.sort(([letter1], [letter2]) => {
if (letter1 > letter2) {
return 1;
} else if (letter1 === letter2) {
return 0;
}
return -1;
})
.map(([letter, groupItems]) => (
<RecipientGroup
key={`${letter}-contract-group`}
label={letter}
items={groupItems}
onSelect={this.props.selectRecipient}
selectedAddress={this.props.selectedAddress}
/>
));
}
renderMyAccounts() {
const myAccounts = this.props.searchForMyAccounts();
return (
<RecipientGroup
items={myAccounts}
onSelect={this.props.selectRecipient}
selectedAddress={this.props.selectedAddress}
/>
);
}
render() {
const {
children,
searchForRecents,
searchForContacts,
searchForMyAccounts,
} = this.props;
return (
<div className="send__select-recipient-wrapper__list">
{children || null}
{searchForRecents && this.renderRecents()}
{searchForContacts && this.renderAddressBook()}
{searchForMyAccounts && this.renderMyAccounts()}
</div>
);
}
}