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

271 lines
6.9 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 {
createCalendarClickedEvent,
createCalendarSelectedEvent,
sendAnalytics
} from '../../analytics';
import { appNavigate } from '../../app/actions';
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';
2019-03-21 16:38:29 +00:00
import { connect } from '../../base/redux';
import { openUpdateCalendarEventDialog, refreshCalendar } from '../actions';
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) => void;
/**
* 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 = '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 {Props}
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
};
}
export default translate(connect(_mapStateToProps)(CalendarListContent));