alpinesmuseum-public/assets/js/components/AppContent/PreLaunchForm.js

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

@reduxLang('ContribView')
@autobind
export default class PreLaunchForm extends Component {
	constructor(props) {
		super(props);

		this.state = {
			desc: '',
			file: '',
			first_name: '',
			last_name: '',
			birth_year: '',
			address: '',
			post_code: '',
			city: '',
			phone: '',
			mail: '',
			agb: false,
			notification: '',
			uploadeBtn: true
		};

		this.props.toggleParticipated(false);
	}

	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 };
			delete data.abg;
			delete data.notification;

			this.props.sendParticipation(data);
		}
	}

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

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

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

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

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

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

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

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

		return true;
	}

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

	resetUploadBtn() {
		this.setState({ uploadeBtn: false });
		setImmediate(() => this.setState({ uploadeBtn: true }));
	}

	componentDidUpdate(prevProps) {
		if (this.props.participated) {
			animateScrollTo(document.getElementById('pre-launch-contribute-form'));
		}

		if (prevProps.locale !== this.props.locale) {
			this.resetUploadBtn();
		}
	}

	render() {
		const { notification, uploadeBtn } = this.state;
		const { pending, participated, t } = this.props;
		if (pending) {
			return <Spinner />;
		}
		return (
			<div className={`PreLaunchForm ContribView${participated ? ' participated' : ''}`}>
				<h1 className='big-text'>{t('we_search')}</h1>
				<div className='CVText'>
					<p
						className='medium-text'
						dangerouslySetInnerHTML={{ __html: t('intro_text') }}
					></p>
				</div>
				<div className='CVBody'>
					<Notification
						isActive={!!notification}
						message={notification}
						action={t('noti_close')}
						onClick={this.onNotificationDismiss}
					/>
					<form onSubmit={this.onSubmit}>
						<CVObjectTypeRadio onObjectTypeChange={this.onObjectTypeChange} />
						<CVDescInput onDescChange={this.onDescChange} />
						{uploadeBtn && (
							<CVUploadInput
								onFileChange={this.onFileChange}
								reset={this.resetUploadBtn}
							/>
						)}
						<CVPersonalInfosInputs onPersonalInfosChange={this.onPersonalInfosChange} />
						<CVKeepInput onKeepChange={this.onKeepChange} />
						<CVAGBInput onAGBChange={this.onAGBChange} />
						<CVSubmit />
					</form>
				</div>
				{participated && (
					<div className='CVParticipatedMessage medium-text'>{t('thank_you')}</div>
				)}
			</div>
		);
	}
}