Add UI to manage video conferencing #60

spec/event_crud.spec.js

@@ -3,13 +3,18 @@ var storeManager = require('../src/flow/store/storeManager')
 var eventActionLazy = require('../src/flow/store/event/eventActionLazy')
 
 const store = storeManager.createInitialStore({})
+const EVENT_URL =
+  'https://chat.openintents.org/#/room/#oi-calendar:openintents.modular.im'
 
 describe('CRUD Events', () => {
   describe('add private event', () => {
     it('should store a new private event', () => {
       store
         .dispatch(
-          eventActionLazy.addEvent({ title: 'Testing add private event' })
+          eventActionLazy.addEvent({
+            title: 'Testing add private event',
+            url: EVENT_URL,
+          })
         )
         .then(() => {
           const allEvents = store.getState().events.allEvents
@@ -18,6 +23,11 @@ describe('CRUD Events', () => {
             2,
             'Should contain default event and new event'
           )
+          assert.strict.equal(
+            allEvents[1].url,
+            EVENT_URL,
+            'Should contain the correcly event url'
+          )
         })
     })
   })

src/components/event-details/EventDetails.js

@@ -89,6 +89,8 @@ class EventDetails extends Component {
         this.props.eventDetail && this.props.eventDetail.duration
           ? 'duration'
           : 'endDate',
+      addingConferencing: false,
+      removingConferencing: false,
     }
 
     this.bound = [
@@ -102,6 +104,8 @@ class EventDetails extends Component {
       'updateEvent',
       'deleteEvent',
       'updateEndDateFromDuration',
+      'addConferencing',
+      'removeConferencing',
     ].reduce((acc, d) => {
       acc[d] = this[d].bind(this)
       delete this[d]
@@ -243,9 +247,46 @@ class EventDetails extends Component {
     sendInvites(eventDetail, guests, eventType)
   }
 
+  addConferencing() {
+    console.log('add conferencing')
+    this.setState({
+      addingConferencing: true,
+    })
+
+    setTimeout(() => this.addConferencingCallback(), 1000)
+  }
+
+  addConferencingCallback() {
+    const { eventDetail } = this.props
+    eventDetail['url'] =
+      'https://chat.openintents.org/#/room/#oi-calendar:openintents.modular.im'
+    this.setState({ eventDetail, addingConferencing: false })
+  }
+
+  removeConferencing() {
+    console.log('remove conferencing')
+    this.setState({
+      removingConferencing: true,
+    })
+
+    setTimeout(() => this.removeConferencingCallback(), 1000)
+  }
+
+  removeConferencingCallback() {
+    const { eventDetail } = this.props
+    eventDetail['url'] = null
+    this.setState({ eventDetail, addingConferencing: false })
+  }
+
   render() {
     console.log('[EVENDETAILS.render]', this.props)
-    const { showInvitesModal, sending, endDateOrDuration } = this.state
+    const {
+      showInvitesModal,
+      sending,
+      endDateOrDuration,
+      addingConferencing,
+      removingConferencing,
+    } = this.state
     const { handleClose } = this.bound
     const {
       views,
@@ -264,6 +305,8 @@ class EventDetails extends Component {
       addEvent,
       updateEvent,
       deleteEvent,
+      addConferencing,
+      removeConferencing,
     } = this.bound
     const hasGuests = checkHasGuests(eventDetail.guests)
 
@@ -371,6 +414,40 @@ class EventDetails extends Component {
               {renderDurationComponent()}
             </div>
           )}
+          <div style={{ marginTop: '10px', marginBottom: '10px' }}>
+            {!eventDetail.url ? (
+              <Button
+                bsStyle="primary"
+                bsSize="small"
+                onClick={() => addConferencing()}
+                disabled={addingConferencing}
+              >
+                {addingConferencing
+                  ? 'Adding conferencing...'
+                  : 'Add conferencing'}
+              </Button>
+            ) : (
+              <div>
+                <Button
+                  bsStyle="danger"
+                  bsSize="small"
+                  onClick={() => removeConferencing()}
+                  disabled={removingConferencing}
+                >
+                  {removingConferencing
+                    ? 'Removing conferencing...'
+                    : 'Remove conferencing'}
+                </Button>
+                <Button
+                  bsStyle="linkUrl"
+                  href={eventDetail.url}
+                  target="_blank"
+                >
+                  Open conferencing
+                </Button>
+              </div>
+            )}
+          </div>
 
           <label> Event Notes </label>
           <textarea