jam-cloud/web/app/assets/javascripts/events/react-components/EventsPage.js.jsx

87 lines
3.0 KiB
JavaScript

context = window
EventActions = context.EventActions
context.EventsPage = React.createClass({
getInitialState: function () {
return {submitting: false, error: null}
},
componentDidMount: function () {
EventActions.refresh()
},
authorizeDone: function(response) {
this.setState({submitting:false})
EventActions.addAuthorization(response)
},
authorizeFailed: function(e) {
if(e instanceof SyntaxError) {
this.setState({error: 'Server error. Please try again or contact support@jamkazam.com.'})
}
else if(e instanceof Error) {
this.setState({error: 'Please enter a valid Eventbrite Order ID'})
}
else {
console.log("heheh", e)
}
this.setState({submitting:false})
},
handleSubmit: function(event) {
var value = document.getElementById("order-input").value
if(value) {
context.JK.Rest2.authorizeLiveStream({order: value}).then((response) => {
if (!response.ok) {
throw Error(response.statusText);
}
return response.json()
}).then((response) => this.authorizeDone(response)).catch((jqXHR) => this.authorizeFailed(jqXHR))
this.setState({submitting: true, error:null})
}
event.preventDefault();
},
render: function () {
var ctaButtonClasses = "cta-button"
if(this.state.submitting) {
ctaButtonClasses = ctaButtonClasses + " submitting"
}
var errorClasses = "error"
if(this.state.error) {
errorClasses = errorClasses + " active"
}
var response = <div className="EventsPage">
<div id="header">
<div className="logo-holder"><img src="/assets/logo.png"/></div>
</div>
<div id="top-container">
<div className="header">
<p>Enter your order number from<img className="eventbrite-logo" src="/assets/event/eventbrite-logo.png"/>below:</p>
</div>
<div className="submit-row">
<div className="submit promo-start">
<form id="unlock" onSubmit={this.handleSubmit}>
<input type="text" name="order" className="order-input" id="order-input"/>
<button className={ctaButtonClasses}>Unlock Livestream</button>
</form>
<span className={errorClasses}>{this.state.error}</span>
</div>
</div>
</div>
<div className="listings">
<div className="preview-and-action-box">
<div id="upcoming-yours">
<EventList mode="yours"/>
</div>
<div id="upcoming-all">
<EventList mode="all"/>
</div>
</div>
</div>
</div>
return response
},
})