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,6 +247,18 @@ class EventDetails extends Component {
     sendInvites(eventDetail, guests, eventType)
   }
 
+  addConferencing() {
+    const { createConferencingRoom } = this.props
+    console.log('add conferencing')
+    createConferencingRoom()
+  }
+
+  removeConferencing() {
+    const { removeConferencingRoom } = this.props
+    console.log('remove conferencing')
+    removeConferencingRoom()
+  }
+
   render() {
     console.log('[EVENDETAILS.render]', this.props)
     const { showInvitesModal, sending, endDateOrDuration } = this.state
@@ -253,6 +269,8 @@ class EventDetails extends Component {
       eventType,
       eventDetail,
       loadGuestList,
+      addingConferencing,
+      removingConferencing,
     } = this.props
     const { GuestList } = views
     const {
@@ -264,6 +282,8 @@ class EventDetails extends Component {
       addEvent,
       updateEvent,
       deleteEvent,
+      addConferencing,
+      removeConferencing,
     } = this.bound
     const hasGuests = checkHasGuests(eventDetail.guests)
 
@@ -371,6 +391,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

src/flow/connect/connectEventDetails.js

@@ -8,6 +8,8 @@ import {
   deleteEvent,
   updateEvent,
   saveAllEvents,
+  createConferencingRoom,
+  removeConferencingRoom,
 } from '../../flow/store/event/eventActionLazy'
 
 import {
@@ -30,13 +32,17 @@ export default connect(
     const { currentEvent, currentEventType } = state.events
     const inviteError = state.events.inviteError
     const inviteSuccess = state.events.inviteSuccess
+    const addingConferencing = state.events.addingConferencing
+    const removingConferencing = state.events.removingConferencing
 
     return {
       inviteError,
       inviteSuccess,
       views: { GuestList },
       eventDetail: Object.assign({}, eventDefaults, currentEvent),
       eventType: currentEventType,
+      addingConferencing,
+      removingConferencing,
     }
   },
   (dispatch, redux) => {
@@ -67,6 +73,8 @@ export default connect(
         dispatch(addEvent(obj))
       },
       updateEvent: obj => dispatch(updateEvent(obj)),
+      createConferencingRoom: () => dispatch(createConferencingRoom()),
+      removeConferencingRoom: obj => dispatch(removeConferencingRoom(obj)),
     }
   }
 )

src/flow/store/ActionTypes.js

@@ -41,5 +41,8 @@ export const SHOW_ALL_CALENDARS = 'settings.SHOW_ALL_CALENDARS'
 export const SHOW_SETTINGS_ADD_CALENDAR = 'settings.SHOW_SETTINGS_ADD_CALENDAR'
 export const SHOW_INSTRUCTIONS = 'settings.SHOW_INSTRUCTIONS'
 
+export const CREATE_CONFERENCING_ROOM = 'rooms.CREATE_CONFERENCING_ROOM'
+export const REMOVE_CONFERENCING_ROOM = 'rooms.REMOVE_CONFERENCING_ROOM'
+
 // App
 export const SET_ERROR = 'app.SET_ERROR'

src/flow/store/event/eventActionLazy.js

@@ -18,6 +18,8 @@ import {
   SHOW_INSTRUCTIONS,
   SET_LOADING_CALENDARS,
   SET_ERROR,
+  CREATE_CONFERENCING_ROOM,
+  REMOVE_CONFERENCING_ROOM,
 } from '../ActionTypes'
 
 import { defaultEvents } from '../../io/eventDefaults'
@@ -363,3 +365,33 @@ export function showAllCalendars() {
     dispatch(showAllCalendarsAction())
   }
 }
+
+export function createConferencingRoomAction(status, url) {
+  return { type: CREATE_CONFERENCING_ROOM, payload: { status, url } }
+}
+
+export function createConferencingRoom() {
+  return async (dispatch, getState) => {
+    dispatch(createConferencingRoomAction('adding', null))
+    setTimeout(() => {
+      dispatch(
+        createConferencingRoomAction(
+          'added',
+          'https://chat.openintents.org/#/room/#oi-calendar:openintents.modular.im'
+        )
+      )
+    }, 1000)
+  }
+}
+
+export function removeConferencingRoomAction(status) {
+  return { type: REMOVE_CONFERENCING_ROOM, payload: { status } }
+}
+
+export function removeConferencingRoom(url) {
+  console.log('removeConferencingRoom')
+  return async (dispatch, getState) => {
+    dispatch(removeConferencingRoomAction('removing'))
+    setTimeout(() => dispatch(removeConferencingRoomAction('removed')), 1000)
+  }
+}

src/flow/store/event/eventReducer.js

@@ -20,6 +20,8 @@ import {
   UNSET_CURRENT_INVITES,
   SET_LOADING_CALENDARS,
   SET_ERROR,
+  CREATE_CONFERENCING_ROOM,
+  REMOVE_CONFERENCING_ROOM,
 } from '../ActionTypes'
 
 let initialState = {
@@ -191,6 +193,40 @@ export default function reduce(state = initialState, action = {}) {
         currentError: payload,
       }
       break
+    case CREATE_CONFERENCING_ROOM:
+      console.log('CREATE_CONFERENCING_ROOM', payload)
+      if (payload.status === 'added') {
+        newState = {
+          ...state,
+          addingConferencing: false,
+          currentEvent: Object.assign({}, state.currentEvent, {
+            url: payload.url,
+          }),
+        }
+      } else {
+        newState = {
+          ...state,
+          addingConferencing: payload.status === 'adding',
+        }
+      }
+      break
+    case REMOVE_CONFERENCING_ROOM:
+      console.log('REMOVE_CONFERENCING_ROOM', payload)
+      if (payload.status === 'removed') {
+        newState = {
+          ...state,
+          removingConferencing: false,
+          currentEvent: Object.assign({}, state.currentEvent, {
+            url: null,
+          }),
+        }
+      } else {
+        newState = {
+          ...state,
+          removingConferencing: payload.status === 'removing',
+        }
+      }
+      break
     default:
       newState = state
       break