alpinesmuseum-public/assets/js/components/AppContent/CIDetailView/DVFooter.js

import React, { Component } from 'react';
import reduxLang from '../../../middleware/lang';
import CVDescInput from './../../ContribView/CVDescInput';
import CVUploadInput from './../../ContribView/CVUploadInput';
import CVPersonalInfosInputs from '../../ContribView/CVPersonalInfosInputs';
import CVSubmit from './../../ContribView/CVSubmit';
import autobind from 'autobind-decorator';
import { Notification } from 'react-notification';
import animateScrollTo from 'animated-scroll-to';

@reduxLang('ContribView')
@autobind
export default class DVFooter extends Component {
	constructor(props) {
		super(props);
		this.state = {
			isToggleOn: false,
			desc: '',
			file: '',
			first_name: '',
			last_name: '',
			birth_year: '',
			address: '',
			post_code: '',
			city: '',
			phone: '',
			mail: '',
			agb: false,
			notification: ''
		};

		this.props.toggleParticipated(false);
	}

	handleClick() {
		const { isToggleOn } = this.state;
		if (isToggleOn) {
			this.props.toggleParticipated(false);
			animateScrollTo(document.getElementById('CIDetailView-top-element'), {
				elementToScroll: document.getElementById('CIDetailView')
			}).then(hasScrolledToPosition => {
				// scroll animation is finished

				// "hasScrolledToPosition" indicates if page/element
				// was scrolled to a desired position
				// or if animation got interrupted
				if (hasScrolledToPosition) {
					// page is scrolled to a desired position

					this.setState({
						isToggleOn: !isToggleOn
					});
				}
			});
		} else {
			this.setState({
				isToggleOn: !isToggleOn
			});
			this.props.toggleParticipated(false);

			// if not executed 2 time, the scroll would not be complete
			setImmediate(() =>
				animateScrollTo(document.getElementById('detail-view-footer-button'), {
					elementToScroll: document.getElementById('CIDetailView')
				}).then(() =>
					animateScrollTo(document.getElementById('detail-view-footer-button'), {
						elementToScroll: document.getElementById('CIDetailView')
					})
				)
			);
		}
	}

	onObjectTypeChange(event) {
		this.setState({ object_type: event.target.value });
	}
	onDescChange(event) {
		this.setState({ desc: event.target.value });
	}
	onFileChange(value) {
		this.setState({ file: value });
	}
	onPersonalInfosChange(event) {
		this.setState({ [event.target.name]: event.target.value });
	}
	onKeepChange(event) {
		this.setState({ keep: event.target.value });
	}
	onAGBChange(event) {
		this.setState({ agb: event.target.checked });
	}
	onSubmit(event) {
		event.preventDefault();

		if (this.validForm()) {
			const data = { ...this.state, object_id: this.props.item.inventory_number };
			delete data.abg;
			delete data.notification;
			delete data.isToggleOn;

			this.props.sendParticipation(data);
		}
	}

	validForm() {
		const { desc, first_name, last_name, mail } = this.state;
		const { t } = this.props;

		if (!desc) {
			this.setState({ notification: t('noti_desc') });
			return false;
		}

		if (!last_name) {
			this.setState({ notification: t('noti_last_name') });
			return false;
		}

		if (!first_name) {
			this.setState({ notification: t('noti_first_name') });
			return false;
		}

		if (!mail) {
			this.setState({ notification: t('noti_mail') });
			return false;
		}

		return true;
	}

	onNotificationDismiss() {
		this.setState({ notification: '' });
	}

	render() {
		const { isToggleOn, notification } = this.state;
		const { t, participated, doYouKnowMoreURL, color } = this.props;
		return (
			<div className='DVFooter' style={{backgroundColor: color}}>
				<div>
					<div className='DVFooterTop'>
						<a id='detail-view-footer-button' target="_blank" href={doYouKnowMoreURL}>
							<p className='medium-text'>{t('know_more')}</p>
						</a>
					</div>
					{isToggleOn && (
						<div className='DVDropdown'>
							<div className='DVText'>
								<p className='medium-text'>{/* TODO */}</p>
							</div>
							{participated && (
								<div className='CVParticipatedMessage medium-text'>
									{t('thank_you')}
								</div>
							)}
							<Notification
								isActive={!!notification}
								message={notification}
								action={'schliessen'}
								onClick={this.onNotificationDismiss}
							/>
							<form
								onSubmit={this.onSubmit}
								style={participated ? { opacity: 0, pointerEvents: 'none' } : {}}
							>
								<CVDescInput onDescChange={this.onDescChange} />
								<CVUploadInput onFileChange={this.onFileChange} />
								<CVPersonalInfosInputs
									onPersonalInfosChange={this.onPersonalInfosChange}
								/>
								<CVSubmit />
							</form>
						</div>
					)}
				</div>
			</div>
		);
	}
}