import React, { Component } from 'react' import PropTypes from 'prop-types' import ContactList from '../../../components/app/contact-list' import EditContact from './edit-contact' import AddContact from './add-contact' import ViewContact from './view-contact' import MyAccounts from './my-accounts' import { CONTACT_ADD_ROUTE, CONTACT_VIEW_ROUTE, CONTACT_MY_ACCOUNTS_ROUTE, } from '../../../helpers/constants/routes' 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 }) => !!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) }} >
) } 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 () } } render () { const { addingContact } = this.props return (
{ this.renderAddressBookContent() } { this.renderContactContent() } {!addingContact && (
{ this.renderAddButton() }
)}
) } }