Source: components/contributepage/MyData.js

import React, { Component } from 'react'
import Header from '../header/Header'
import Subheader from '../subheader/Subheader'
import { Redirect } from 'react-router-dom'
import Cookies from 'universal-cookie';
import getTranslation from '../../i18n/'
import Footer from '../footer/Footer'
import UserProfileView from './UserProfileView'
const cookies = new Cookies();

/**
 * The my data overview page where the user sees which information about him/her is saved on our web portal
 */
class MyData extends Component {

    constructor(props) {
        super(props);
        this.state = { redirect: false, deleteButton: true,
        deleteButtonExpanded: false}
    }

    componentWillReceiveProps(nextProps) {

        if(!nextProps.user.isLoggedIn) {
          this.setState({redirect: true});
        }
    }

    /**
     * Toggle delete buttons
     */
    toggleDelete() {
        this.setState({deleteButtonExpanded: !this.state.deleteButtonExpanded})
    }

    /**
     * Remove the user from the knowledge platform
     */
    removeUser() {
      let token = cookies.get('token')
      this.props.removeUser(token)
    }

  render() {

      if(this.state.redirect) {
          return <Redirect to="/experts" />
      }

      let userprofile = this.props.userprofiles.filter(profile => profile.user_id === this.props.user.id);
      if(userprofile.length === 1) {
          userprofile = userprofile[0]
      } else {
          userprofile = {};
      }
      
    return(
      <div>
        <Header />
        <div className="container container-small">
          <Subheader title="subheader.contribute" />
          <div className="default-element">
            <div className="default-element-content">
                <h3>{getTranslation("mydata.infotext")}:</h3>
                <table>
                  <tr><td>{getTranslation('forms.general.email.label')}:</td><td>{this.props.user.email}</td></tr>
                  <tr><td>{getTranslation('forms.signup.username.label')}:</td><td>{this.props.user.username}</td></tr>
                </table><br /><br />

                {userprofile.id &&
                    <React.Fragment>
                    <UserProfileView hidenav={true} countries={this.props.countries} pilotareas={this.props.pilotareas} professionalgroups={this.props.professionalgroups} userprofile={userprofile} /><br /><br />
                    </React.Fragment>
                }
                <p>{getTranslation("delete.infotext")}</p>
                {((!this.state.deleteButtonExpanded) && (this.state.deleteButton)) &&
                  <button className="btn btn-red btn-icon btn-delete" onClick={() => this.toggleDelete()}>{getTranslation("delete.userdata")}</button>
                }
                {this.state.deleteButtonExpanded &&
                    <span>
                        <button className="btn btn-red btn-icon btn-delete" onClick={() => this.removeUser()}>{getTranslation("forms.general.button.confirm_delete")}</button>
                        <button className="btn btn-gray btn-icon btn-cancel" onClick={() => this.toggleDelete()}>{getTranslation("forms.general.button.cancel_delete")}</button>
                    </span>
                }

            </div>
          </div>
          <Footer pages={this.props.pages} />
        </div>
      </div>
    )
  }

}


export default MyData