metamask-extension/ui/app/pages/settings/contact-list-tab/contact-list-tab.component.js

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 (
      <div>
        <ContactList
          searchForContacts={() => contacts}
          searchForRecents={() => nonContacts}
          selectRecipient={(address) => {
            history.push(`${CONTACT_VIEW_ROUTE}/${address}`)
          }}
          selectedAddress={selectedAddress}
        />
      </div>
    )
  }

  renderAddButton() {
    const { history } = this.props

    return (
      <div
        className="address-book-add-button__button"
        onClick={() => {
          history.push(CONTACT_ADD_ROUTE)
        }}
      >
        <img
          className="account-menu__item-icon"
          src="images/plus-btn-white.svg"
          alt={this.context.t('addAccount')}
        />
      </div>
    )
  }

  renderMyAccountsButton() {
    const { history } = this.props
    const { t } = this.context
    return (
      <div
        className="address-book__my-accounts-button"
        onClick={() => {
          history.push(CONTACT_MY_ACCOUNTS_ROUTE)
        }}
      >
        <div className="address-book__my-accounts-button__header">
          {t('myWalletAccounts')}
        </div>
        <div className="address-book__my-accounts-button__content">
          <div className="address-book__my-accounts-button__text">
            {t('myWalletAccountsDescription')}
          </div>
          <div className="address-book__my-accounts-button__caret" />
        </div>
      </div>
    )
  }

  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 && (
        <div className="address-book-contact-content">
          <ContactContentComponent />
        </div>
      )
    )
  }

  renderAddressBookContent() {
    const { hideAddressBook, showingMyAccounts } = this.props

    if (!hideAddressBook && !showingMyAccounts) {
      return (
        <div className="address-book">
          {this.renderMyAccountsButton()}
          {this.renderAddresses()}
        </div>
      )
    } else if (!hideAddressBook && showingMyAccounts) {
      return <MyAccounts />
    }
    return null
  }

  render() {
    const { addingContact } = this.props

    return (
      <div className="address-book-wrapper">
        {this.renderAddressBookContent()}
        {this.renderContactContent()}
        {!addingContact && (
          <div className="address-book-add-button">
            {this.renderAddButton()}
          </div>
        )}
      </div>
    )
  }
}