jiti-meet/react/features/calendar-sync/components/CalendarListContent.native.js

277 lines
7.0 KiB
JavaScript
Raw Normal View History

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';
import { connect } from 'react-redux';
import { appNavigate } from '../../app';
import {
createCalendarClickedEvent,
createCalendarSelectedEvent,
sendAnalytics
} from '../../analytics';
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-02-08 18:50:19 +00:00
2018-09-04 07:29:48 +00:00
import { refreshCalendar, openUpdateCalendarEventDialog } 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
2018-06-04 19:52:51 +00:00
/**
* The type of the React {@code Component} props of
2018-09-25 12:48:03 +00:00
* {@link CalendarListContent}.
2018-06-04 19:52:51 +00:00
*/
2018-02-08 18:50:19 +00:00
type Props = {
/**
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-04-16 02:04:57 +00:00
* Indicates if the list is disabled or not.
*/
2018-04-16 02:04:57 +00:00
disabled: boolean,
/**
2018-04-16 02:04:57 +00:00
* The Redux dispatch function.
*/
2018-04-16 02:04:57 +00:00
dispatch: Function,
/**
*
*/
listEmptyComponent: React$Node,
2018-02-08 18:50:19 +00:00
/**
* The translate function.
*/
t: Function
};
/**
* Component to display a list of events from a connected calendar.
2018-02-08 18:50:19 +00:00
*/
2018-09-25 12:48:03 +00:00
class CalendarListContent 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
/**
2018-09-25 12:48:03 +00:00
* Initializes a new {@code CalendarListContent} 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-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-09-04 07:29:48 +00:00
this._onSecondaryAction = this._onSecondaryAction.bind(this);
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);
this._toTimeString = this._toTimeString.bind(this);
2018-02-08 18:50:19 +00:00
}
/**
* Implements React's {@link Component#componentDidMount()}. Invoked
* immediately after this component is mounted.
*
* @inheritdoc
* @returns {void}
*/
componentDidMount() {
sendAnalytics(createCalendarSelectedEvent());
}
2018-02-08 18:50:19 +00:00
/**
* Implements React's {@link Component#render}.
2018-02-08 18:50:19 +00:00
*
* @inheritdoc
*/
render() {
const { disabled, listEmptyComponent } = 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-09-04 07:29:48 +00:00
onSecondaryAction = { this._onSecondaryAction }
renderListEmptyComponent
= { listEmptyComponent }
2018-02-13 23:33:03 +00:00
sections = { this._toDisplayableList() } />
2018-02-08 18:50:19 +00:00
);
}
_onPress: (string, string) => Function;
/**
* Handles the list's navigate action.
*
* @private
* @param {string} url - The url string to navigate to.
* @param {string} analyticsEventName - Тhe name of the analytics event
* associated with this action.
* @returns {void}
*/
_onPress(url, analyticsEventName = 'calendar.meeting.tile') {
sendAnalytics(createCalendarClickedEvent(analyticsEventName));
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-09-04 07:29:48 +00:00
_onSecondaryAction: string => void;
/**
* Handles the list's secondary action.
*
* @private
* @param {string} id - The ID of the item on which the secondary action was
* performed.
* @returns {void}
*/
_onSecondaryAction(id) {
this.props.dispatch(openUpdateCalendarEventDialog(id, ''));
}
_toDateString: Object => string;
/**
* Generates a date string for a given event.
*
* @param {Object} event - The event.
* @private
* @returns {string}
*/
_toDateString(event) {
const startDateTime
= getLocalizedDateFormatter(event.startDate).format('MMM Do, YYYY');
return `${startDateTime}`;
}
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 {
2018-09-04 07:29:48 +00:00
id: event.id,
2018-02-13 23:33:03 +00:00
key: `${event.id}-${event.startDate}`,
lines: [
event.url,
this._toTimeString(event)
2018-02-13 23:33:03 +00:00
],
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;
const now = new Date();
2018-04-16 23:07:25 +00:00
const { createSection } = NavigateSectionList;
const TODAY_SECTION = 'today';
const sectionMap = new Map();
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);
const startDate = new Date(event.startDate).getDate();
if (startDate === now.getDate()) {
let todaySection = sectionMap.get(TODAY_SECTION);
if (!todaySection) {
todaySection
= createSection(t('calendarSync.today'), TODAY_SECTION);
sectionMap.set(TODAY_SECTION, todaySection);
}
todaySection.data.push(displayableEvent);
} else if (sectionMap.has(startDate)) {
const section = sectionMap.get(startDate);
2018-02-13 23:33:03 +00:00
if (section) {
section.data.push(displayableEvent);
2018-02-08 18:50:19 +00:00
}
} else {
const newSection
= createSection(this._toDateString(event), startDate);
sectionMap.set(startDate, newSection);
newSection.data.push(displayableEvent);
2018-02-08 18:50:19 +00:00
}
}
return Array.from(sectionMap.values());
}
2018-02-08 18:50:19 +00:00
_toTimeString: Object => string;
2018-02-08 18:50:19 +00:00
/**
* Generates a time (interval) string for a given event.
*
* @param {Object} event - The event.
* @private
* @returns {string}
*/
_toTimeString(event) {
const startDateTime
= getLocalizedDateFormatter(event.startDate).format('lll');
const endTime
= getLocalizedDateFormatter(event.endDate).format('LT');
return `${startDateTime} - ${endTime}`;
2018-02-08 18:50:19 +00:00
}
}
/**
* Maps redux state to component props.
*
* @param {Object} state - The redux state.
* @returns {{
* _eventList: Array<Object>
2018-02-08 18:50:19 +00:00
* }}
*/
2018-04-16 16:39:26 +00:00
function _mapStateToProps(state: Object) {
2018-02-08 18:50:19 +00:00
return {
_eventList: state['features/calendar-sync'].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-09-25 12:48:03 +00:00
? translate(connect(_mapStateToProps)(CalendarListContent))
2018-04-16 16:39:26 +00:00
: undefined;