ciphermask/ui/app/pages/create-account/create-account.component.js

import React, { Component } from 'react'
import { Switch, Route, matchPath } from 'react-router-dom'
import PropTypes from 'prop-types'
import classnames from 'classnames'
import NewAccountCreateForm from './new-account.container'
import NewAccountImportForm from './import-account'
import ConnectHardwareForm from './connect-hardware'
import {
  NEW_ACCOUNT_ROUTE,
  IMPORT_ACCOUNT_ROUTE,
  CONNECT_HARDWARE_ROUTE,
} from '../../helpers/constants/routes'

export default class CreateAccountPage extends Component {
  renderTabs () {
    const { history, location: { pathname } } = this.props
    const getClassNames = (path) => classnames('new-account__tabs__tab', {
      'new-account__tabs__selected': matchPath(pathname, {
        path,
        exact: true,
      }),
    })

    return (
      <div className="new-account__tabs">
        <div className={getClassNames(NEW_ACCOUNT_ROUTE)} onClick={() => history.push(NEW_ACCOUNT_ROUTE)}>
          {this.context.t('create')}
        </div>
        <div className={getClassNames(IMPORT_ACCOUNT_ROUTE)} onClick={() => history.push(IMPORT_ACCOUNT_ROUTE)}>
          {this.context.t('import')}
        </div>
        <div className={getClassNames(CONNECT_HARDWARE_ROUTE)} onClick={() => history.push(CONNECT_HARDWARE_ROUTE)}>
          {this.context.t('connect')}
        </div>
      </div>
    )
  }

  render () {
    return (
      <div className="new-account">
        <div className="new-account__header">
          <div className={`new-account__header ${this.context.t('newAccount')}`}>
            {this.renderTabs()}
          </div>
        </div>
        <div className="new-account__form">
          <Switch>
            <Route
              exact
              path={NEW_ACCOUNT_ROUTE}
              component={NewAccountCreateForm}
            />
            <Route
              exact
              path={IMPORT_ACCOUNT_ROUTE}
              component={NewAccountImportForm}
            />
            <Route
              exact
              path={CONNECT_HARDWARE_ROUTE}
              component={ConnectHardwareForm}
            />
          </Switch>
        </div>
      </div>
    )
  }
}

CreateAccountPage.propTypes = {
  location: PropTypes.object,
  history: PropTypes.object,
}

CreateAccountPage.contextTypes = {
  t: PropTypes.func,
}