import React from 'react'; import ReactDOM from 'react-dom'; import {createStore} from 'redux'; import {Map} from 'immutable'; import 'whatwg-fetch'; class PixelatedComponent extends React.Component { _updateStateFromStore() { this.setState(this.props.store.getState().toJS()); } componentWillMount() { this.unsubscribe = this.props.store.subscribe(() => this._updateStateFromStore()); this._updateStateFromStore(); } componentWillUnmount() { this.unsubscribe() } } class PixelatedForm extends PixelatedComponent { _fetchAndDispatch(url, actionProperties) { const immutableActionProperties = new Map(actionProperties); this.props.store.dispatch(immutableActionProperties.merge({status: 'STARTED'}).toJS()); fetch(url).then((response) => { return response.json() }).then((json) => { setTimeout(() => { this.props.store.dispatch(immutableActionProperties.merge({status: 'SUCCESS', json: json}).toJS()); }, 3000); }).catch((error) => { console.error('something went wrong', error); this.props.store.dispatch(immutableActionProperties.merge({status: 'ERROR', error: error}).toJS()); }); } } class InviteCodeForm extends PixelatedForm { render() { let className = "blue-button validation-link"; if(!this.state.inviteCodeValidation) { className = className + " disabled"; } return (
); } _handleClick(event) { event.stopPropagation(); event.preventDefault(); this.props.store.dispatch({type: 'SUBMIT_INVITE_CODE', inviteCode: event.target['invite-code'].value}); } _handleInputEmpty(event) { this.props.store.dispatch({type: 'VALIDATE_INVITE_CODE', inviteCode: event.target.value}); } } class CreateAccountForm extends PixelatedForm { render() { return ( ); } _handleClick(event) { event.stopPropagation(); event.preventDefault(); this.props.store.dispatch({type: 'SUBMIT_CREATE_ACCOUNT', username: event.target['username'].value, password: event.target['password'].value}); } } class BackupEmailForm extends PixelatedForm { render() { return ( ); } _handleClick(event) { event.stopPropagation(); event.preventDefault(); this._fetchAndDispatch('dummy.json', {type: 'SUBMIT_BACKUP_EMAIL', backupEmail: event.target['backup-email'].value}); } } class BackupEmailSentForm extends PixelatedForm { render() { return ( ); } _handleClick(event) { event.stopPropagation(); event.preventDefault(); } } class SignUp extends PixelatedComponent { render() { return ({this.state.summary}