import React, { Component } from 'react'
import Header from '../header/Header'
import Subheader from '../subheader/Subheader'
import EventsContributed from './EventsContributed'
import ContentContributed from './ContentContributed'
import UserProfile from './UserProfile'
import { Redirect } from 'react-router-dom'
import Cookies from 'universal-cookie';
import getTranslation from '../../i18n/'
import Footer from '../footer/Footer'
import { Link } from 'react-router-dom'
const cookies = new Cookies();
/**
* The dashboard that a user sees upon logging into the knowledge platform
*/
class ContributeOverview extends Component {
constructor(props) {
super(props);
this.state = { redirect: false, active: 'settings', deleteButton: true,
deleteButtonExpanded: false}
}
/**
* Log a user out
*/
logOut() {
cookies.remove('token', { path: '/'});
this.props.signOut();
this.setState({redirect: true});
}
componentWillReceiveProps(nextProps) {
if(!nextProps.user.isLoggedIn) {
this.setState({redirect: true});
}
}
/**
* Toggle delete buttons
*/
toggleDelete() {
this.setState({deleteButtonExpanded: !this.state.deleteButtonExpanded})
}
/**
* Remove a 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">
<h2 className="backend">{getTranslation("contribute.greeting", this.props.user.username)}
<button className="btn btn-gray" onClick={() => this.logOut()}>{getTranslation("contribute.logout")}</button>
{((!this.state.deleteButtonExpanded) && (this.state.deleteButton)) &&
<button className="btn btn-red btn-icon btn-delete" onClick={() => this.toggleDelete()}>Delete my account</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>
}
<Link to="/experts/contribute/mydata"><button className="btn btn-green">{getTranslation("mydata.button")}</button></Link>
</h2>
<ContentContributed content={this.props.content} user={this.props.user} />
<UserProfile countries={this.props.countries} toggleUserprofile={this.props.toggleUserprofile} pilotareas={this.props.pilotareas} professionalgroups={this.props.professionalgroups} userprofile={userprofile} />
<EventsContributed events={this.props.events} user={this.props.user} />
</div>
</div>
<Footer pages={this.props.pages} />
</div>
</div>
)
}
}
export default ContributeOverview