You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

MeetingList.native.js 7.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278
  1. // @flow
  2. import React, { Component } from 'react';
  3. import { Text, TouchableOpacity, View } from 'react-native';
  4. import { connect } from 'react-redux';
  5. import { appNavigate } from '../../app';
  6. import { getLocalizedDateFormatter, translate } from '../../base/i18n';
  7. import { NavigateSectionList } from '../../base/react';
  8. import { openSettings } from '../../mobile/permissions';
  9. import { refreshCalendar } from '../actions';
  10. import styles from './styles';
  11. type Props = {
  12. /**
  13. * The current state of the calendar access permission.
  14. */
  15. _authorization: string,
  16. /**
  17. * The calendar event list.
  18. */
  19. _eventList: Array<Object>,
  20. /**
  21. * Indicates if the list is disabled or not.
  22. */
  23. disabled: boolean,
  24. /**
  25. * The Redux dispatch function.
  26. */
  27. dispatch: Function,
  28. /**
  29. * Tells the component if it's being displayed at the moment, or not. Note:
  30. * as an example, on Android it can happen that the component is rendered
  31. * but not displayed, because components like ViewPagerAndroid render their
  32. * children even if they are not visible at the moment.
  33. */
  34. displayed: boolean,
  35. /**
  36. * The translate function.
  37. */
  38. t: Function
  39. };
  40. /**
  41. * Component to display a list of events from the (mobile) user's calendar.
  42. */
  43. class MeetingList extends Component<Props> {
  44. /**
  45. * Default values for the component's props.
  46. */
  47. static defaultProps = {
  48. _eventList: []
  49. };
  50. /**
  51. * Constructor of the MeetingList component.
  52. *
  53. * @inheritdoc
  54. */
  55. constructor(props) {
  56. super(props);
  57. const { dispatch, displayed } = props;
  58. if (displayed) {
  59. dispatch(refreshCalendar());
  60. }
  61. this._getRenderListEmptyComponent
  62. = this._getRenderListEmptyComponent.bind(this);
  63. this._onPress = this._onPress.bind(this);
  64. this._onRefresh = this._onRefresh.bind(this);
  65. this._toDisplayableItem = this._toDisplayableItem.bind(this);
  66. this._toDisplayableList = this._toDisplayableList.bind(this);
  67. this._toDateString = this._toDateString.bind(this);
  68. }
  69. /**
  70. * Implements React Component's componentWillReceiveProps.
  71. *
  72. * @inheritdoc
  73. */
  74. componentWillReceiveProps(newProps) {
  75. const { displayed } = this.props;
  76. if (newProps.displayed && !displayed) {
  77. const { dispatch } = this.props;
  78. dispatch(refreshCalendar());
  79. }
  80. }
  81. /**
  82. * Implements the React Components's render.
  83. *
  84. * @inheritdoc
  85. */
  86. render() {
  87. const { disabled } = this.props;
  88. return (
  89. <NavigateSectionList
  90. disabled = { disabled }
  91. onPress = { this._onPress }
  92. onRefresh = { this._onRefresh }
  93. renderListEmptyComponent = { this._getRenderListEmptyComponent }
  94. sections = { this._toDisplayableList() } />
  95. );
  96. }
  97. _getRenderListEmptyComponent: () => Object;
  98. /**
  99. * Returns a list empty component if a custom one has to be rendered instead
  100. * of the default one in the {@link NavigateSectionList}.
  101. *
  102. * @private
  103. * @returns {Component}
  104. */
  105. _getRenderListEmptyComponent() {
  106. const { _authorization, t } = this.props;
  107. if (_authorization === 'denied') {
  108. return (
  109. <View style = { styles.noPermissionMessageView }>
  110. <Text style = { styles.noPermissionMessageText }>
  111. { t('calendarSync.permissionMessage') }
  112. </Text>
  113. <TouchableOpacity
  114. onPress = { openSettings }
  115. style = { styles.noPermissionMessageButton } >
  116. <Text style = { styles.noPermissionMessageButtonText }>
  117. { t('calendarSync.permissionButton') }
  118. </Text>
  119. </TouchableOpacity>
  120. </View>
  121. );
  122. }
  123. return null;
  124. }
  125. _onPress: string => Function;
  126. /**
  127. * Handles the list's navigate action.
  128. *
  129. * @private
  130. * @param {string} url - The url string to navigate to.
  131. * @returns {void}
  132. */
  133. _onPress(url) {
  134. this.props.dispatch(appNavigate(url));
  135. }
  136. _onRefresh: () => void;
  137. /**
  138. * Callback to execute when the list is doing a pull-to-refresh.
  139. *
  140. * @private
  141. * @returns {void}
  142. */
  143. _onRefresh() {
  144. this.props.dispatch(refreshCalendar(true));
  145. }
  146. _toDisplayableItem: Object => Object;
  147. /**
  148. * Creates a displayable object from an event.
  149. *
  150. * @param {Object} event - The calendar event.
  151. * @private
  152. * @returns {Object}
  153. */
  154. _toDisplayableItem(event) {
  155. return {
  156. key: `${event.id}-${event.startDate}`,
  157. lines: [
  158. event.url,
  159. this._toDateString(event)
  160. ],
  161. title: event.title,
  162. url: event.url
  163. };
  164. }
  165. _toDisplayableList: () => Array<Object>;
  166. /**
  167. * Transforms the event list to a displayable list with sections.
  168. *
  169. * @private
  170. * @returns {Array<Object>}
  171. */
  172. _toDisplayableList() {
  173. const { _eventList, t } = this.props;
  174. const now = Date.now();
  175. const { createSection } = NavigateSectionList;
  176. const nowSection = createSection(t('calendarSync.now'), 'now');
  177. const nextSection = createSection(t('calendarSync.next'), 'next');
  178. const laterSection = createSection(t('calendarSync.later'), 'later');
  179. for (const event of _eventList) {
  180. const displayableEvent = this._toDisplayableItem(event);
  181. if (event.startDate < now && event.endDate > now) {
  182. nowSection.data.push(displayableEvent);
  183. } else if (event.startDate > now) {
  184. if (nextSection.data.length
  185. && nextSection.data[0].startDate !== event.startDate) {
  186. laterSection.data.push(displayableEvent);
  187. } else {
  188. nextSection.data.push(displayableEvent);
  189. }
  190. }
  191. }
  192. const sectionList = [];
  193. for (const section of [
  194. nowSection,
  195. nextSection,
  196. laterSection
  197. ]) {
  198. if (section.data.length) {
  199. sectionList.push(section);
  200. }
  201. }
  202. return sectionList;
  203. }
  204. _toDateString: Object => string;
  205. /**
  206. * Generates a date (interval) string for a given event.
  207. *
  208. * @param {Object} event - The event.
  209. * @private
  210. * @returns {string}
  211. */
  212. _toDateString(event) {
  213. const startDateTime
  214. = getLocalizedDateFormatter(event.startDate).format('lll');
  215. const endTime
  216. = getLocalizedDateFormatter(event.endDate).format('LT');
  217. return `${startDateTime} - ${endTime}`;
  218. }
  219. }
  220. /**
  221. * Maps redux state to component props.
  222. *
  223. * @param {Object} state - The redux state.
  224. * @returns {{
  225. * _eventList: Array
  226. * }}
  227. */
  228. export function _mapStateToProps(state: Object) {
  229. const calendarSyncState = state['features/calendar-sync'];
  230. return {
  231. _authorization: calendarSyncState.authorization,
  232. _eventList: calendarSyncState.events
  233. };
  234. }
  235. export default translate(connect(_mapStateToProps)(MeetingList));