import React, { Component } from 'react' import PropTypes from 'prop-types' import ContactList from '../../../components/app/contact-list' import { CONTACT_ADD_ROUTE, CONTACT_VIEW_ROUTE, CONTACT_MY_ACCOUNTS_ROUTE, } from '../../../helpers/constants/routes' import EditContact from './edit-contact' import AddContact from './add-contact' import ViewContact from './view-contact' import MyAccounts from './my-accounts' export default class ContactListTab extends Component { static contextTypes = { t: PropTypes.func, } static propTypes = { addressBook: PropTypes.array, history: PropTypes.object, selectedAddress: PropTypes.string, viewingContact: PropTypes.bool, editingContact: PropTypes.bool, addingContact: PropTypes.bool, showContactContent: PropTypes.bool, hideAddressBook: PropTypes.bool, showingMyAccounts: PropTypes.bool, } renderAddresses() { const { addressBook, history, selectedAddress } = this.props const contacts = addressBook.filter(({ name }) => Boolean(name)) const nonContacts = addressBook.filter(({ name }) => !name) return (
contacts} searchForRecents={() => nonContacts} selectRecipient={(address) => { history.push(`${CONTACT_VIEW_ROUTE}/${address}`) }} selectedAddress={selectedAddress} />
) } renderAddButton() { const { history } = this.props return (
{ history.push(CONTACT_ADD_ROUTE) }} > {this.context.t('addAccount')}
) } renderMyAccountsButton() { const { history } = this.props const { t } = this.context return (
{ history.push(CONTACT_MY_ACCOUNTS_ROUTE) }} >
{t('myWalletAccounts')}
{t('myWalletAccountsDescription')}
) } renderContactContent() { const { viewingContact, editingContact, addingContact, showContactContent, } = this.props if (!showContactContent) { return null } let ContactContentComponent = null if (viewingContact) { ContactContentComponent = ViewContact } else if (editingContact) { ContactContentComponent = EditContact } else if (addingContact) { ContactContentComponent = AddContact } return ( ContactContentComponent && (
) ) } renderAddressBookContent() { const { hideAddressBook, showingMyAccounts } = this.props if (!hideAddressBook && !showingMyAccounts) { return (
{this.renderMyAccountsButton()} {this.renderAddresses()}
) } else if (!hideAddressBook && showingMyAccounts) { return } return null } render() { const { addingContact } = this.props return (
{this.renderAddressBookContent()} {this.renderContactContent()} {!addingContact && (
{this.renderAddButton()}
)}
) } }