alpinesmuseum-public/assets/js/components/ContribView/CVBody.js

import React, { Component } from 'react';

import CVObjectTypeRadio from './CVObjectTypeRadio';
import CVDescInput from './CVDescInput';
import CVUploadInput from './CVUploadInput';
import CVPersonalInfosInputs from './CVPersonalInfosInputs';
import CVAGBInput from './CVAGBInput';
import CVKeepInput from './CVKeepInput';
import CVSubmit from './CVSubmit';
import autobind from 'autobind-decorator';
import { Notification } from 'react-notification';
import Spinner from '../Spinner';
import reduxLang from '../../middleware/lang';

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

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

		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 (!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;
		}

		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: '' });
	}

	render() {
		const { notification } = this.state;
		const { pending, participated, t } = this.props;
		if (pending) {
			return <Spinner />;
		}
		if (participated) {
			return (
				<div className='CVBody participated'>
					<div className='CVParticipatedMessage medium-text'>{t('thank_you')}</div>
				</div>
			);
		}
		return (
			<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} />
					<CVUploadInput onFileChange={this.onFileChange} />
					<CVPersonalInfosInputs onPersonalInfosChange={this.onPersonalInfosChange} />
					<CVKeepInput onKeepChange={this.onKeepChange} />
					<CVAGBInput onAGBChange={this.onAGBChange} />
					<CVSubmit />
				</form>
			</div>
		);
	}
}