import React, { Component } from 'react'
import './UserProfile.css'
import Header from '../header/Header'
import ProfileForm from './ProfileForm'
import Subheader from '../subheader/Subheader'
import getTranslation from '../../i18n/'
import Footer from '../footer/Footer'
/**
* Display the user profile form
*/
class ProfilePage extends Component {
render() {
let filter = this.props.userprofile.filter(profile => profile.user_id === this.props.user.id);
let userprofile;
let lat, lon;
if(filter.length === 1) {
userprofile = Object.assign({}, filter[0])
lat = userprofile.lat;
lon = userprofile.lon;
} else {
lat = 51.505;
lon = -0.09;
userprofile = {
name: '',
occupation: [0, 0, 0],
street: '',
zip: '',
city: '',
country: '',
phone: '',
email: '',
website: '',
pilot_area: 0,
profile: '',
contactform: false,
activated: false,
};
}
let fetching = true;
if((!this.props.fetching.dataFetching.isFetching) || (this.props.fetching.data !== '')) {
fetching = false;
}
return(
<div>
<Header />
<div className="container container-small">
<Subheader title="subheader.contribute" />
<div className="default-element">
<div className="contribute-section">
<h4><i className="fa fa-address-book" aria-hidden="true"></i> {getTranslation("userprofile.form.title")}:</h4>
<div className="default-element-gray-content">
{fetching &&
<div className="fetching-overlay">
<div className="loader"></div>
</div>
}
{!fetching &&
<ProfileForm lat={lat} lon={lon} countries={this.props.countries} pilotareas={this.props.pilotareas} professionalgroups={this.props.professionalgroups} geocodeAddress={this.props.geocodeAddress} updateUserprofile={this.props.updateUserprofile} userprofile={userprofile} fetching={this.props.fetching} user={this.props.user} />
}
</div>
</div>
</div>
<Footer pages={this.props.pages} />
</div>
</div>
)
}
}
export default ProfilePage