2018-02-08 18:50:19 +00:00
|
|
|
// @flow
|
2018-04-16 02:04:57 +00:00
|
|
|
|
2018-02-08 18:50:19 +00:00
|
|
|
import React, { Component } from 'react';
|
2018-03-20 13:51:51 +00:00
|
|
|
import { Text, TouchableOpacity, View } from 'react-native';
|
2018-02-08 18:50:19 +00:00
|
|
|
import { connect } from 'react-redux';
|
|
|
|
|
|
|
|
import { appNavigate } from '../../app';
|
2018-02-15 19:01:54 +00:00
|
|
|
import { getLocalizedDateFormatter, translate } from '../../base/i18n';
|
2018-02-13 23:33:03 +00:00
|
|
|
import { NavigateSectionList } from '../../base/react';
|
2018-03-20 13:51:51 +00:00
|
|
|
import { openSettings } from '../../mobile/permissions';
|
2018-02-08 18:50:19 +00:00
|
|
|
|
2018-04-16 02:04:57 +00:00
|
|
|
import { refreshCalendar } from '../actions';
|
Google & Microsoft calendar API integration (#3340)
* Refactor calendar-sync feature to be loaded on web.
For the web part it just adds new property to enable/disable calendar web integration, disabled by default.
* Initial implementation of retrieving google calendar events.
* Initial implementation of retrieving microsoft calendar events.
* Fixes comments.
* Rework to use the promise part of microsoft-graph-client api.
* Moves dispatching some actions, fixing comments.
* Makes sure we do not initializeClient google-api client multiple times.
* Do not try to login when fetching calendar entries.
The case where there is a calendar type google selected, but not logged in, trying to login on loading welcome page will show a warning that it tried to open a popup, which was denied by browser.
* Updates profile display data on sign in.
* Propagate google-api state to calendar-sync only if we use google cal.
* Adds sign out action.
* Clears the event listener when the popup closes.
* Clears calendarIntegrationInstance on signOut.
* WIP: UI for calendar settings, refactor auth flows
* Clean up some unused constants, functions and exports.
* break circular dependency of function and constant
* Exports only isCalendarEnabled from functions.
* Checks isSignedIn when doing fetchCalendarEntries on web.
* address comments
List microsoftApiApplicationClientID in undocument config.
remove unused SET_CALENDAR_TYPE action
use helper for calendar enabled in bootstrap
reorder actions
reorder imports
change order of signin -> set type -> update profile
add logging for signout error
reword setting dialog desc to avoid redundancy
add jsdoc to microsoft button props
reorder calendar constants
move default state to reducer (not reused anywhere)
update comment about calendar-sync due to removal of getCalendarState
update comment for getCalendarIntegration
remove vague comment
alpha order reducer, return default state on reset
alpha order persistence registry
remove unnecessary getType from apis
update comments in microsoftCalendar
alpha order google-api exports, use api.get in loadGoogleAPI
set jsdoc for google signin props
alpha order googleapi methods
fix calendartab docs
* Moves fetching calendar from APP_WILL_MOUNT to SET_CONFIG.
The web part needs configuration in order to refresh tokens (Microsoft).
* Fixes storing token expire time and refreshing tokens in Microsoft impl.
* Address comments
updateProfile changed to getCurrentEmail
rename result to results
stop storing integration in redux, store if ready for use
use existing helpers to parse redirect url
* update jsdocs, get google app id from redux
* clear integration instead of actual sign out
2018-08-15 20:11:54 +00:00
|
|
|
import { isCalendarEnabled } from '../functions';
|
2018-04-16 02:04:57 +00:00
|
|
|
import styles from './styles';
|
|
|
|
|
2018-06-04 19:52:51 +00:00
|
|
|
/**
|
|
|
|
* The tyoe of the React {@code Component} props of {@link MeetingList}.
|
|
|
|
*/
|
2018-02-08 18:50:19 +00:00
|
|
|
type Props = {
|
|
|
|
|
|
|
|
/**
|
2018-04-16 02:04:57 +00:00
|
|
|
* The current state of the calendar access permission.
|
2018-02-08 18:50:19 +00:00
|
|
|
*/
|
2018-06-11 17:28:45 +00:00
|
|
|
_authorization: ?string,
|
2018-02-08 18:50:19 +00:00
|
|
|
|
|
|
|
/**
|
2018-04-16 02:04:57 +00:00
|
|
|
* The calendar event list.
|
2018-02-08 18:50:19 +00:00
|
|
|
*/
|
2018-04-16 02:04:57 +00:00
|
|
|
_eventList: Array<Object>,
|
2018-02-08 18:50:19 +00:00
|
|
|
|
2018-03-06 16:30:59 +00:00
|
|
|
/**
|
2018-04-16 02:04:57 +00:00
|
|
|
* Indicates if the list is disabled or not.
|
2018-03-06 16:30:59 +00:00
|
|
|
*/
|
2018-04-16 02:04:57 +00:00
|
|
|
disabled: boolean,
|
2018-03-06 16:30:59 +00:00
|
|
|
|
2018-03-20 13:51:51 +00:00
|
|
|
/**
|
2018-04-16 02:04:57 +00:00
|
|
|
* The Redux dispatch function.
|
2018-03-20 13:51:51 +00:00
|
|
|
*/
|
2018-04-16 02:04:57 +00:00
|
|
|
dispatch: Function,
|
2018-03-20 13:51:51 +00:00
|
|
|
|
2018-02-08 18:50:19 +00:00
|
|
|
/**
|
|
|
|
* The translate function.
|
|
|
|
*/
|
|
|
|
t: Function
|
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Component to display a list of events from the (mobile) user's calendar.
|
|
|
|
*/
|
|
|
|
class MeetingList extends Component<Props> {
|
2018-02-13 23:33:03 +00:00
|
|
|
/**
|
|
|
|
* Default values for the component's props.
|
|
|
|
*/
|
|
|
|
static defaultProps = {
|
|
|
|
_eventList: []
|
|
|
|
};
|
|
|
|
|
2018-04-16 16:39:26 +00:00
|
|
|
/**
|
|
|
|
* Public API method for {@code Component}s rendered in
|
|
|
|
* {@link AbstractPagedList}. When invoked, refreshes the calendar entries
|
|
|
|
* in the app.
|
|
|
|
*
|
|
|
|
* Note: It is a static method as the {@code Component} may not be
|
|
|
|
* initialized yet when the UI invokes refresh (e.g. {@link TabBarIOS} tab
|
|
|
|
* change).
|
|
|
|
*
|
|
|
|
* @param {Function} dispatch - The Redux dispatch function.
|
2018-07-11 09:43:40 +00:00
|
|
|
* @param {boolean} isInteractive - If true this refresh was caused by
|
|
|
|
* direct user interaction, false otherwise.
|
2018-04-16 16:39:26 +00:00
|
|
|
* @public
|
|
|
|
* @returns {void}
|
|
|
|
*/
|
2018-07-11 09:43:40 +00:00
|
|
|
static refresh(dispatch, isInteractive) {
|
|
|
|
dispatch(refreshCalendar(false, isInteractive));
|
2018-04-16 16:39:26 +00:00
|
|
|
}
|
|
|
|
|
2018-02-08 18:50:19 +00:00
|
|
|
/**
|
2018-06-11 17:28:45 +00:00
|
|
|
* Initializes a new {@code MeetingList} instance.
|
2018-02-08 18:50:19 +00:00
|
|
|
*
|
|
|
|
* @inheritdoc
|
|
|
|
*/
|
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
|
2018-06-04 19:52:51 +00:00
|
|
|
// Bind event handlers so they are only bound once per instance.
|
2018-03-20 13:51:51 +00:00
|
|
|
this._getRenderListEmptyComponent
|
|
|
|
= this._getRenderListEmptyComponent.bind(this);
|
2018-02-13 23:33:03 +00:00
|
|
|
this._onPress = this._onPress.bind(this);
|
2018-02-14 16:50:48 +00:00
|
|
|
this._onRefresh = this._onRefresh.bind(this);
|
2018-06-11 17:28:45 +00:00
|
|
|
this._toDateString = this._toDateString.bind(this);
|
2018-02-13 23:33:03 +00:00
|
|
|
this._toDisplayableItem = this._toDisplayableItem.bind(this);
|
2018-02-08 18:50:19 +00:00
|
|
|
this._toDisplayableList = this._toDisplayableList.bind(this);
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
2018-06-11 17:28:45 +00:00
|
|
|
* Implements React's {@link Component#render}.
|
2018-02-08 18:50:19 +00:00
|
|
|
*
|
|
|
|
* @inheritdoc
|
|
|
|
*/
|
|
|
|
render() {
|
2018-06-11 17:28:45 +00:00
|
|
|
const { disabled } = this.props;
|
2018-02-08 18:50:19 +00:00
|
|
|
|
|
|
|
return (
|
2018-02-13 23:33:03 +00:00
|
|
|
<NavigateSectionList
|
|
|
|
disabled = { disabled }
|
|
|
|
onPress = { this._onPress }
|
2018-02-14 16:50:48 +00:00
|
|
|
onRefresh = { this._onRefresh }
|
2018-06-05 12:34:40 +00:00
|
|
|
renderListEmptyComponent
|
2018-06-11 17:28:45 +00:00
|
|
|
= { this._getRenderListEmptyComponent() }
|
2018-02-13 23:33:03 +00:00
|
|
|
sections = { this._toDisplayableList() } />
|
2018-02-08 18:50:19 +00:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2018-04-16 23:07:25 +00:00
|
|
|
_getRenderListEmptyComponent: () => Object;
|
2018-03-20 13:51:51 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Returns a list empty component if a custom one has to be rendered instead
|
|
|
|
* of the default one in the {@link NavigateSectionList}.
|
|
|
|
*
|
|
|
|
* @private
|
2018-06-11 17:28:45 +00:00
|
|
|
* @returns {?React$Component}
|
2018-03-20 13:51:51 +00:00
|
|
|
*/
|
|
|
|
_getRenderListEmptyComponent() {
|
2018-06-11 17:28:45 +00:00
|
|
|
const { _authorization, t } = this.props;
|
|
|
|
|
|
|
|
// If we don't provide a list specific renderListEmptyComponent, then
|
|
|
|
// the default empty component of the NavigateSectionList will be
|
|
|
|
// rendered, which (atm) is a simple "Pull to refresh" message.
|
|
|
|
if (_authorization !== 'denied') {
|
|
|
|
return undefined;
|
|
|
|
}
|
2018-03-20 13:51:51 +00:00
|
|
|
|
2018-06-05 12:34:40 +00:00
|
|
|
return (
|
|
|
|
<View style = { styles.noPermissionMessageView }>
|
|
|
|
<Text style = { styles.noPermissionMessageText }>
|
|
|
|
{ t('calendarSync.permissionMessage') }
|
|
|
|
</Text>
|
|
|
|
<TouchableOpacity
|
|
|
|
onPress = { openSettings }
|
|
|
|
style = { styles.noPermissionMessageButton } >
|
|
|
|
<Text style = { styles.noPermissionMessageButtonText }>
|
|
|
|
{ t('calendarSync.permissionButton') }
|
2018-03-20 13:51:51 +00:00
|
|
|
</Text>
|
2018-06-05 12:34:40 +00:00
|
|
|
</TouchableOpacity>
|
|
|
|
</View>
|
|
|
|
);
|
2018-03-20 13:51:51 +00:00
|
|
|
}
|
|
|
|
|
2018-04-16 23:07:25 +00:00
|
|
|
_onPress: string => Function;
|
2018-02-08 18:50:19 +00:00
|
|
|
|
|
|
|
/**
|
2018-02-13 23:33:03 +00:00
|
|
|
* Handles the list's navigate action.
|
2018-02-08 18:50:19 +00:00
|
|
|
*
|
|
|
|
* @private
|
2018-02-13 23:33:03 +00:00
|
|
|
* @param {string} url - The url string to navigate to.
|
2018-02-08 18:50:19 +00:00
|
|
|
* @returns {void}
|
|
|
|
*/
|
2018-02-13 23:33:03 +00:00
|
|
|
_onPress(url) {
|
2018-04-16 02:04:57 +00:00
|
|
|
this.props.dispatch(appNavigate(url));
|
2018-02-08 18:50:19 +00:00
|
|
|
}
|
|
|
|
|
2018-04-16 23:07:25 +00:00
|
|
|
_onRefresh: () => void;
|
2018-02-14 16:50:48 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Callback to execute when the list is doing a pull-to-refresh.
|
|
|
|
*
|
|
|
|
* @private
|
|
|
|
* @returns {void}
|
|
|
|
*/
|
|
|
|
_onRefresh() {
|
2018-04-16 02:04:57 +00:00
|
|
|
this.props.dispatch(refreshCalendar(true));
|
2018-02-14 16:50:48 +00:00
|
|
|
}
|
|
|
|
|
2018-06-11 17:28:45 +00:00
|
|
|
_toDateString: Object => string;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Generates a date (interval) string for a given event.
|
|
|
|
*
|
|
|
|
* @param {Object} event - The event.
|
|
|
|
* @private
|
|
|
|
* @returns {string}
|
|
|
|
*/
|
|
|
|
_toDateString(event) {
|
|
|
|
const startDateTime
|
|
|
|
= getLocalizedDateFormatter(event.startDate).format('lll');
|
|
|
|
const endTime
|
|
|
|
= getLocalizedDateFormatter(event.endDate).format('LT');
|
|
|
|
|
|
|
|
return `${startDateTime} - ${endTime}`;
|
|
|
|
}
|
|
|
|
|
2018-04-16 23:07:25 +00:00
|
|
|
_toDisplayableItem: Object => Object;
|
2018-02-08 18:50:19 +00:00
|
|
|
|
|
|
|
/**
|
2018-02-13 23:33:03 +00:00
|
|
|
* Creates a displayable object from an event.
|
2018-02-08 18:50:19 +00:00
|
|
|
*
|
2018-02-13 23:33:03 +00:00
|
|
|
* @param {Object} event - The calendar event.
|
2018-04-16 02:04:57 +00:00
|
|
|
* @private
|
2018-02-13 23:33:03 +00:00
|
|
|
* @returns {Object}
|
2018-02-08 18:50:19 +00:00
|
|
|
*/
|
2018-02-13 23:33:03 +00:00
|
|
|
_toDisplayableItem(event) {
|
|
|
|
return {
|
|
|
|
key: `${event.id}-${event.startDate}`,
|
|
|
|
lines: [
|
|
|
|
event.url,
|
|
|
|
this._toDateString(event)
|
|
|
|
],
|
|
|
|
title: event.title,
|
|
|
|
url: event.url
|
|
|
|
};
|
2018-02-08 18:50:19 +00:00
|
|
|
}
|
|
|
|
|
2018-04-16 23:07:25 +00:00
|
|
|
_toDisplayableList: () => Array<Object>;
|
2018-02-08 18:50:19 +00:00
|
|
|
|
|
|
|
/**
|
2018-04-16 02:04:57 +00:00
|
|
|
* Transforms the event list to a displayable list with sections.
|
2018-02-08 18:50:19 +00:00
|
|
|
*
|
|
|
|
* @private
|
|
|
|
* @returns {Array<Object>}
|
|
|
|
*/
|
|
|
|
_toDisplayableList() {
|
2018-02-13 23:33:03 +00:00
|
|
|
const { _eventList, t } = this.props;
|
2018-06-11 17:28:45 +00:00
|
|
|
|
2018-02-08 18:50:19 +00:00
|
|
|
const now = Date.now();
|
2018-06-11 17:28:45 +00:00
|
|
|
|
2018-04-16 23:07:25 +00:00
|
|
|
const { createSection } = NavigateSectionList;
|
|
|
|
const nowSection = createSection(t('calendarSync.now'), 'now');
|
|
|
|
const nextSection = createSection(t('calendarSync.next'), 'next');
|
|
|
|
const laterSection = createSection(t('calendarSync.later'), 'later');
|
2018-02-08 18:50:19 +00:00
|
|
|
|
2018-02-13 23:33:03 +00:00
|
|
|
for (const event of _eventList) {
|
|
|
|
const displayableEvent = this._toDisplayableItem(event);
|
|
|
|
|
|
|
|
if (event.startDate < now && event.endDate > now) {
|
|
|
|
nowSection.data.push(displayableEvent);
|
|
|
|
} else if (event.startDate > now) {
|
|
|
|
if (nextSection.data.length
|
2018-04-16 23:07:25 +00:00
|
|
|
&& nextSection.data[0].startDate !== event.startDate) {
|
2018-02-13 23:33:03 +00:00
|
|
|
laterSection.data.push(displayableEvent);
|
|
|
|
} else {
|
|
|
|
nextSection.data.push(displayableEvent);
|
2018-02-08 18:50:19 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const sectionList = [];
|
|
|
|
|
|
|
|
for (const section of [
|
|
|
|
nowSection,
|
|
|
|
nextSection,
|
|
|
|
laterSection
|
|
|
|
]) {
|
2018-06-11 17:28:45 +00:00
|
|
|
section.data.length && sectionList.push(section);
|
2018-02-08 18:50:19 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
return sectionList;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Maps redux state to component props.
|
|
|
|
*
|
|
|
|
* @param {Object} state - The redux state.
|
|
|
|
* @returns {{
|
2018-06-11 17:28:45 +00:00
|
|
|
* _authorization: ?string,
|
|
|
|
* _eventList: Array<Object>
|
2018-02-08 18:50:19 +00:00
|
|
|
* }}
|
|
|
|
*/
|
2018-04-16 16:39:26 +00:00
|
|
|
function _mapStateToProps(state: Object) {
|
2018-06-11 17:28:45 +00:00
|
|
|
const { authorization, events } = state['features/calendar-sync'];
|
2018-03-20 13:51:51 +00:00
|
|
|
|
2018-02-08 18:50:19 +00:00
|
|
|
return {
|
2018-06-11 17:28:45 +00:00
|
|
|
_authorization: authorization,
|
|
|
|
_eventList: events
|
2018-02-08 18:50:19 +00:00
|
|
|
};
|
|
|
|
}
|
|
|
|
|
Google & Microsoft calendar API integration (#3340)
* Refactor calendar-sync feature to be loaded on web.
For the web part it just adds new property to enable/disable calendar web integration, disabled by default.
* Initial implementation of retrieving google calendar events.
* Initial implementation of retrieving microsoft calendar events.
* Fixes comments.
* Rework to use the promise part of microsoft-graph-client api.
* Moves dispatching some actions, fixing comments.
* Makes sure we do not initializeClient google-api client multiple times.
* Do not try to login when fetching calendar entries.
The case where there is a calendar type google selected, but not logged in, trying to login on loading welcome page will show a warning that it tried to open a popup, which was denied by browser.
* Updates profile display data on sign in.
* Propagate google-api state to calendar-sync only if we use google cal.
* Adds sign out action.
* Clears the event listener when the popup closes.
* Clears calendarIntegrationInstance on signOut.
* WIP: UI for calendar settings, refactor auth flows
* Clean up some unused constants, functions and exports.
* break circular dependency of function and constant
* Exports only isCalendarEnabled from functions.
* Checks isSignedIn when doing fetchCalendarEntries on web.
* address comments
List microsoftApiApplicationClientID in undocument config.
remove unused SET_CALENDAR_TYPE action
use helper for calendar enabled in bootstrap
reorder actions
reorder imports
change order of signin -> set type -> update profile
add logging for signout error
reword setting dialog desc to avoid redundancy
add jsdoc to microsoft button props
reorder calendar constants
move default state to reducer (not reused anywhere)
update comment about calendar-sync due to removal of getCalendarState
update comment for getCalendarIntegration
remove vague comment
alpha order reducer, return default state on reset
alpha order persistence registry
remove unnecessary getType from apis
update comments in microsoftCalendar
alpha order google-api exports, use api.get in loadGoogleAPI
set jsdoc for google signin props
alpha order googleapi methods
fix calendartab docs
* Moves fetching calendar from APP_WILL_MOUNT to SET_CONFIG.
The web part needs configuration in order to refresh tokens (Microsoft).
* Fixes storing token expire time and refreshing tokens in Microsoft impl.
* Address comments
updateProfile changed to getCurrentEmail
rename result to results
stop storing integration in redux, store if ready for use
use existing helpers to parse redirect url
* update jsdocs, get google app id from redux
* clear integration instead of actual sign out
2018-08-15 20:11:54 +00:00
|
|
|
export default isCalendarEnabled()
|
2018-04-16 16:39:26 +00:00
|
|
|
? translate(connect(_mapStateToProps)(MeetingList))
|
|
|
|
: undefined;
|