2016-04-05 06:05:48 +08:00
|
|
|
import React, {Component, PropTypes} from 'react';
|
|
|
|
import NewEventCard from './new-event-card'
|
|
|
|
import {PLUGIN_ID} from '../scheduler-constants'
|
|
|
|
import {Utils, Event, Actions, DraftStore} from 'nylas-exports';
|
|
|
|
|
|
|
|
/**
|
|
|
|
* When you're creating an event you can either be creating:
|
|
|
|
*
|
|
|
|
* 1. A Meeting Request with a specific start and end time
|
|
|
|
* 2. OR a `pendingEvent` template that has a set of proposed times.
|
|
|
|
*
|
2016-04-10 09:19:01 +08:00
|
|
|
* Both are represented by a `pendingEvent` object on the `metadata` that
|
|
|
|
* holds the JSONified representation of the `Event`
|
2016-04-05 06:05:48 +08:00
|
|
|
*
|
2016-04-10 09:19:01 +08:00
|
|
|
* #2 adds a set of `proposals` on the metadata object.
|
2016-04-05 06:05:48 +08:00
|
|
|
*/
|
|
|
|
export default class NewEventCardContainer extends Component {
|
|
|
|
static displayName = 'NewEventCardContainer';
|
|
|
|
|
|
|
|
static propTypes = {
|
|
|
|
draftClientId: PropTypes.string,
|
2016-04-10 09:19:01 +08:00
|
|
|
}
|
2016-04-05 06:05:48 +08:00
|
|
|
|
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
this.state = {event: null};
|
|
|
|
this._session = null;
|
|
|
|
this._mounted = false;
|
|
|
|
this._usub = () => {}
|
|
|
|
}
|
|
|
|
|
2016-04-10 09:19:01 +08:00
|
|
|
componentWillMount() {
|
2016-04-05 06:05:48 +08:00
|
|
|
this._mounted = true;
|
|
|
|
this._loadDraft(this.props.draftClientId);
|
|
|
|
}
|
|
|
|
|
|
|
|
componentWillReceiveProps(newProps) {
|
|
|
|
this._loadDraft(newProps.draftClientId);
|
|
|
|
}
|
|
|
|
|
|
|
|
componentWillUnmount() {
|
|
|
|
this._mounted = false;
|
|
|
|
this._usub()
|
|
|
|
}
|
|
|
|
|
|
|
|
_loadDraft(draftClientId) {
|
|
|
|
DraftStore.sessionForClientId(draftClientId).then(session => {
|
|
|
|
// Only run if things are still relevant: component is mounted
|
|
|
|
// and draftClientIds still match
|
|
|
|
if (this._mounted) {
|
|
|
|
this._session = session;
|
|
|
|
this._usub()
|
|
|
|
this._usub = session.listen(this._onDraftChange);
|
|
|
|
this._onDraftChange();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
_onDraftChange = () => {
|
2016-04-10 09:19:01 +08:00
|
|
|
this.setState({event: this._getEvent()});
|
2016-04-05 06:05:48 +08:00
|
|
|
}
|
|
|
|
|
2016-04-10 09:19:01 +08:00
|
|
|
_getEvent() {
|
|
|
|
const metadata = this._session.draft().metadataForPluginId(PLUGIN_ID);
|
|
|
|
if (metadata && metadata.pendingEvent) {
|
|
|
|
return new Event().fromJSON(metadata.pendingEvent || {})
|
2016-04-05 06:05:48 +08:00
|
|
|
}
|
2016-04-10 09:19:01 +08:00
|
|
|
return null
|
2016-04-05 06:05:48 +08:00
|
|
|
}
|
|
|
|
|
2016-04-10 09:19:01 +08:00
|
|
|
_updateEvent = (newData) => {
|
|
|
|
const newEvent = Object.assign(this._getEvent().clone(), newData)
|
2016-04-12 05:32:54 +08:00
|
|
|
const newEventJSON = newEvent.toJSON();
|
|
|
|
|
|
|
|
const metadata = this._session.draft().metadataForPluginId(PLUGIN_ID);
|
|
|
|
if (!Utils.isEqual(metadata.pendingEvent, newEventJSON)) {
|
|
|
|
metadata.pendingEvent = newEventJSON;
|
|
|
|
this._session.changes.addPluginMetadata(PLUGIN_ID, metadata);
|
2016-04-05 06:05:48 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2016-04-10 09:19:01 +08:00
|
|
|
_removeEvent = () => {
|
2016-04-07 04:56:33 +08:00
|
|
|
const draft = this._session.draft()
|
|
|
|
const metadata = draft.metadataForPluginId(PLUGIN_ID);
|
|
|
|
if (metadata) {
|
|
|
|
delete metadata.pendingEvent
|
|
|
|
delete metadata.proposals
|
|
|
|
Actions.setMetadata(draft, PLUGIN_ID, metadata);
|
2016-04-05 06:05:48 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
|
|
let card = false;
|
|
|
|
if (this._session && this.state.event) {
|
|
|
|
card = (
|
|
|
|
<NewEventCard event={this.state.event}
|
|
|
|
draft={this._session.draft()}
|
2016-04-10 09:19:01 +08:00
|
|
|
onRemove={this._removeEvent}
|
|
|
|
onChange={this._updateEvent}
|
2016-04-05 06:05:48 +08:00
|
|
|
onParticipantsClick={() => {}}
|
|
|
|
/>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
return (
|
|
|
|
<div className="new-event-card-container">
|
|
|
|
{card}
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|