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

279 lines
7.5 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 { 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';
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';
2018-04-16 16:39:26 +00:00
import { CALENDAR_ENABLED } from '../constants';
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
*/
_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-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,
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.
* @public
* @returns {void}
*/
static refresh(dispatch) {
dispatch(refreshCalendar());
}
2018-02-08 18:50:19 +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.
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);
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);
}
/**
* Implements React's {@link Component#render}.
2018-02-08 18:50:19 +00:00
*
* @inheritdoc
*/
render() {
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 }
renderListEmptyComponent
= { 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;
/**
* Returns a list empty component if a custom one has to be rendered instead
* of the default one in the {@link NavigateSectionList}.
*
* @private
* @returns {?React$Component}
*/
_getRenderListEmptyComponent() {
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;
}
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') }
</Text>
</TouchableOpacity>
</View>
);
}
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
}
_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-02-08 18:50:19 +00:00
const now = Date.now();
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
]) {
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 {{
* _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) {
const { authorization, events } = state['features/calendar-sync'];
2018-02-08 18:50:19 +00:00
return {
_authorization: authorization,
_eventList: events
2018-02-08 18:50:19 +00:00
};
}
2018-04-16 16:39:26 +00:00
export default CALENDAR_ENABLED
? translate(connect(_mapStateToProps)(MeetingList))
: undefined;