text: import React, { Component, Fragment } from 'react';
  import PropTypes from 'prop-types';
  import { connect } from 'react-redux';
  import { createSelector } from 'reselect';
  import {
    Panel,
    FormControl,
    FormGroup,
    ControlLabel,
    Button,
    Col,
    Row
  } from '@freecodecamp/react-bootstrap';
  import Helmet from 'react-helmet';
  import { Trans, withTranslation } from 'react-i18next';
  
  import Login from '../components/Header/components/Login';
  
  import {
    isSignedInSelector,
    userFetchStateSelector,
    userSelector,
    reportUser
  } from '../redux';
  import { Spacer, Loader, FullWidthRow } from '../components/helpers';
  
  const propTypes = {
    email: PropTypes.string,
    isSignedIn: PropTypes.bool,
    reportUser: PropTypes.func.isRequired,
    t: PropTypes.func.isRequired,
    userFetchState: PropTypes.shape({
      pending: PropTypes.bool,
      complete: PropTypes.bool,
      errored: PropTypes.bool
    }),
    username: PropTypes.string
  };
  
  const mapStateToProps = createSelector(
    isSignedInSelector,
    userFetchStateSelector,
    userSelector,
    (isSignedIn, userFetchState, { email }) => ({
      isSignedIn,
      userFetchState,
      email
    })
  );
  
  const mapDispatchToProps = {
    reportUser
  };
  
  class ShowUser extends Component {
    constructor(props) {
      super(props);
  
      this.state = {
        textarea: ''
      };
      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
    }
  
    handleChange(e) {
      const textarea = e.target.value.slice();
      return this.setState({
        textarea
      });
    }
  
    handleSubmit(e) {
      e.preventDefault();
      const { textarea: reportDescription } = this.state;
      const { username, reportUser } = this.props;
      return reportUser({ username, reportDescription });
    }
  
    render() {
      const { username, isSignedIn, userFetchState, email, t } = this.props;
      const { pending, complete, errored } = userFetchState;
      if (pending && !complete) {
        return <Loader fullScreen={true} />;
      }
  
      if ((complete || errored) && !isSignedIn) {
        return (
          <main>
            <FullWidthRow>
              <Spacer size={2} />
              <Panel bsStyle='info' className='text-center'>
                <Panel.Heading>
                  <Panel.Title componentClass='h3'>
                    {t('report.sign-in')}
                  </Panel.Title>
                </Panel.Heading>
                <Panel.Body className='text-center'>
                  <Spacer size={2} />
                  <Col md={6} mdOffset={3} sm={8} smOffset={2} xs={12}>
                    <Login block={true}>{t('buttons.click-here')}</Login>
                  </Col>
                  <Spacer size={3} />
                </Panel.Body>
              </Panel>
            </FullWidthRow>
          </main>
        );
      }
  
      const { textarea } = this.state;
      const placeholderText = t('report.details');
      return (
        <Fragment>
          <Helmet>
            <title>{t('report.portfolio')} | freeCodeCamp.org</title>
          </Helmet>
          <Spacer size={2} />
          <Row className='text-center overflow-fix'>
            <Col sm={8} smOffset={2} xs={12}>
              <h2>{t('report.portfolio-2', { username: username })}</h2>
            </Col>
          </Row>
          <Row className='overflow-fix'>
            <Col sm={6} smOffset={3} xs={12}>
              <p>
                <Trans email={email} i18nKey='report.notify-1'>
                  <strong>{{ email }}</strong>
                </Trans>
              </p>
              <p>{t('report.notify-2')}</p>
              <form onSubmit={this.handleSubmit}>
                <FormGroup controlId='report-user-textarea'>
                  <ControlLabel>{t('report.what')}</ControlLabel>
                  <FormControl
                    componentClass='textarea'
                    onChange={this.handleChange}
                    placeholder={placeholderText}
                    value={textarea}
                  />
                </FormGroup>
                <Button block={true} bsStyle='primary' type='submit'>
                  {t('report.submit')}
                </Button>
                <Spacer />
              </form>
            </Col>
          </Row>
        </Fragment>
      );
    }
  }
  
  ShowUser.displayName = 'ShowUser';
  ShowUser.propTypes = propTypes;
  
  export default withTranslation()(
    connect(mapStateToProps, mapDispatchToProps)(ShowUser)
  );
  