jiti-meet/react/features/settings/components/web/CalendarTab.js

302 lines
7.9 KiB
JavaScript
Raw Normal View History

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
// @flow
import Button from '@atlaskit/button';
import Spinner from '@atlaskit/spinner';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { translate } from '../../../base/i18n';
import {
CALENDAR_TYPE,
MicrosoftSignInButton,
clearCalendarIntegration,
bootstrapCalendarIntegration,
isCalendarEnabled,
signIn
} from '../../../calendar-sync';
import { GoogleSignInButton } from '../../../google-api';
const logger = require('jitsi-meet-logger').getLogger(__filename);
declare var interfaceConfig: Object;
/**
* The type of the React {@code Component} props of {@link CalendarTab}.
*/
type Props = {
/**
* The name given to this Jitsi Application.
*/
_appName: string,
/**
* Whether or not to display a button to sign in to Google.
*/
_enableGoogleIntegration: boolean,
/**
* Whether or not to display a button to sign in to Microsoft.
*/
_enableMicrosoftIntegration: boolean,
/**
* The current calendar integration in use, if any.
*/
_isConnectedToCalendar: boolean,
/**
* The email address associated with the calendar integration in use.
*/
_profileEmail: string,
/**
* Invoked to change the configured calendar integration.
*/
dispatch: Function,
/**
* Invoked to obtain translated strings.
*/
t: Function
};
/**
* The type of the React {@code Component} state of {@link CalendarTab}.
*/
type State = {
/**
* Whether or not any third party APIs are being loaded.
*/
loading: boolean
};
/**
* React {@code Component} for modifying calendar integration.
*
* @extends Component
*/
class CalendarTab extends Component<Props, State> {
/**
* Initializes a new {@code CalendarTab} instance.
*
* @inheritdoc
*/
constructor(props: Props) {
super(props);
this.state = {
loading: true
};
// Bind event handlers so they are only bound once for every instance.
this._onClickDisconnect = this._onClickDisconnect.bind(this);
this._onClickGoogle = this._onClickGoogle.bind(this);
this._onClickMicrosoft = this._onClickMicrosoft.bind(this);
}
/**
* Loads third party APIs as needed and bootstraps the initial calendar
* state if not already set.
*
* @inheritdoc
*/
componentDidMount() {
this.props.dispatch(bootstrapCalendarIntegration())
.catch(err => logger.error('CalendarTab bootstrap failed', err))
.then(() => this.setState({ loading: false }));
}
/**
* Implements React's {@link Component#render()}.
*
* @inheritdoc
* @returns {ReactElement}
*/
render() {
let view;
if (this.state.loading) {
view = this._renderLoadingState();
} else if (this.props._isConnectedToCalendar) {
view = this._renderSignOutState();
} else {
view = this._renderSignInState();
}
return (
<div className = 'calendar-tab'>
{ view }
</div>
);
}
/**
* Dispatches the action to start the sign in flow for a given calendar
* integration type.
*
* @param {string} type - The calendar type to try integrating with.
* @private
* @returns {void}
*/
_attemptSignIn(type) {
this.props.dispatch(signIn(type));
}
_onClickDisconnect: (Object) => void;
/**
* Dispatches an action to sign out of the currently connected third party
* used for calendar integration.
*
* @private
* @returns {void}
*/
_onClickDisconnect() {
// We clear the integration state instead of actually signing out. This
// is for two primary reasons. Microsoft does not support a sign out and
// instead relies on clearing of local auth data. Google signout can
// also sign the user out of YouTube. So for now we've decided not to
// do an actual sign out.
this.props.dispatch(clearCalendarIntegration());
}
_onClickGoogle: () => void;
/**
* Starts the sign in flow for Google calendar integration.
*
* @private
* @returns {void}
*/
_onClickGoogle() {
this._attemptSignIn(CALENDAR_TYPE.GOOGLE);
}
_onClickMicrosoft: () => void;
/**
* Starts the sign in flow for Microsoft calendar integration.
*
* @private
* @returns {void}
*/
_onClickMicrosoft() {
this._attemptSignIn(CALENDAR_TYPE.MICROSOFT);
}
/**
* Render a React Element to indicate third party APIs are being loaded.
*
* @private
* @returns {ReactElement}
*/
_renderLoadingState() {
return (
<Spinner
isCompleting = { false }
size = 'medium' />
);
}
/**
* Render a React Element to sign into a third party for calendar
* integration.
*
* @private
* @returns {ReactElement}
*/
_renderSignInState() {
const {
_appName,
_enableGoogleIntegration,
_enableMicrosoftIntegration,
t
} = this.props;
return (
<div>
<p>
{ t('settings.calendar.about',
{ appName: _appName || '' }) }
</p>
{ _enableGoogleIntegration
&& <div className = 'calendar-tab-sign-in'>
<GoogleSignInButton
onClick = { this._onClickGoogle }
text = { t('liveStreaming.signIn') } />
</div> }
{ _enableMicrosoftIntegration
&& <div className = 'calendar-tab-sign-in'>
<MicrosoftSignInButton
onClick = { this._onClickMicrosoft }
text = { t('settings.calendar.microsoftSignIn') } />
</div> }
</div>
);
}
/**
* Render a React Element to sign out of the currently connected third
* party used for calendar integration.
*
* @private
* @returns {ReactElement}
*/
_renderSignOutState() {
const { _profileEmail, t } = this.props;
return (
<div>
<div className = 'sign-out-cta'>
{ t('settings.calendar.signedIn',
{ email: _profileEmail }) }
</div>
<Button
appearance = 'primary'
id = 'calendar_logout'
onClick = { this._onClickDisconnect }
type = 'button'>
{ t('settings.calendar.disconnect') }
</Button>
</div>
);
}
}
/**
* Maps (parts of) the Redux state to the associated props for the
* {@code CalendarTab} component.
*
* @param {Object} state - The Redux state.
* @private
* @returns {{
* _appName: string,
* _enableGoogleIntegration: boolean,
* _enableMicrosoftIntegration: boolean,
* _isConnectedToCalendar: boolean,
* _profileEmail: string
* }}
*/
function _mapStateToProps(state) {
const calendarState = state['features/calendar-sync'] || {};
const {
googleApiApplicationClientID,
microsoftApiApplicationClientID
} = state['features/base/config'];
const calendarEnabled = isCalendarEnabled();
return {
_appName: interfaceConfig.APP_NAME,
_enableGoogleIntegration: Boolean(
calendarEnabled && googleApiApplicationClientID),
_enableMicrosoftIntegration: Boolean(
calendarEnabled && microsoftApiApplicationClientID),
_isConnectedToCalendar: calendarState.integrationReady,
_profileEmail: calendarState.profileEmail
};
}
export default translate(connect(_mapStateToProps)(CalendarTab));