Application Android et IOS pour l'amicale des élèves
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.

PlanningDisplayScreen.tsx 5.4KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201
  1. /*
  2. * Copyright (c) 2019 - 2020 Arnaud Vergnet.
  3. *
  4. * This file is part of Campus INSAT.
  5. *
  6. * Campus INSAT is free software: you can redistribute it and/or modify
  7. * it under the terms of the GNU General Public License as published by
  8. * the Free Software Foundation, either version 3 of the License, or
  9. * (at your option) any later version.
  10. *
  11. * Campus INSAT is distributed in the hope that it will be useful,
  12. * but WITHOUT ANY WARRANTY; without even the implied warranty of
  13. * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  14. * GNU General Public License for more details.
  15. *
  16. * You should have received a copy of the GNU General Public License
  17. * along with Campus INSAT. If not, see <https://www.gnu.org/licenses/>.
  18. */
  19. // @flow
  20. import * as React from 'react';
  21. import {View} from 'react-native';
  22. import {Card} from 'react-native-paper';
  23. import i18n from 'i18n-js';
  24. import {StackNavigationProp} from '@react-navigation/stack';
  25. import {getDateOnlyString, getTimeOnlyString} from '../../utils/Planning';
  26. import DateManager from '../../managers/DateManager';
  27. import BasicLoadingScreen from '../../components/Screens/BasicLoadingScreen';
  28. import {apiRequest, ERROR_TYPE} from '../../utils/WebData';
  29. import ErrorView from '../../components/Screens/ErrorView';
  30. import CustomHTML from '../../components/Overrides/CustomHTML';
  31. import CustomTabBar from '../../components/Tabbar/CustomTabBar';
  32. import CollapsibleScrollView from '../../components/Collapsible/CollapsibleScrollView';
  33. import type {PlanningEventType} from '../../utils/Planning';
  34. import ImageGalleryButton from '../../components/Media/ImageGalleryButton';
  35. type PropsType = {
  36. navigation: StackNavigationProp<any>;
  37. route: {params: {data: PlanningEventType; id: number; eventId: number}};
  38. };
  39. type StateType = {
  40. loading: boolean;
  41. };
  42. const EVENT_INFO_URL = 'event/info';
  43. /**
  44. * Class defining a planning event information page.
  45. */
  46. class PlanningDisplayScreen extends React.Component<PropsType, StateType> {
  47. displayData: null | PlanningEventType;
  48. shouldFetchData: boolean;
  49. eventId: number;
  50. errorCode: number;
  51. /**
  52. * Generates data depending on whether the screen was opened from the planning or from a link
  53. *
  54. * @param props
  55. */
  56. constructor(props: PropsType) {
  57. super(props);
  58. if (props.route.params.data != null) {
  59. this.displayData = props.route.params.data;
  60. this.eventId = this.displayData.id;
  61. this.shouldFetchData = false;
  62. this.errorCode = 0;
  63. this.state = {
  64. loading: false,
  65. };
  66. } else {
  67. this.displayData = null;
  68. this.eventId = props.route.params.eventId;
  69. this.shouldFetchData = true;
  70. this.errorCode = 0;
  71. this.state = {
  72. loading: true,
  73. };
  74. this.fetchData();
  75. }
  76. }
  77. /**
  78. * Hides loading and saves fetched data
  79. *
  80. * @param data Received data
  81. */
  82. onFetchSuccess = (data: PlanningEventType) => {
  83. this.displayData = data;
  84. this.setState({loading: false});
  85. };
  86. /**
  87. * Hides loading and saves the error code
  88. *
  89. * @param error
  90. */
  91. onFetchError = (error: number) => {
  92. this.errorCode = error;
  93. this.setState({loading: false});
  94. };
  95. /**
  96. * Gets content to display
  97. *
  98. * @returns {*}
  99. */
  100. getContent() {
  101. const {displayData} = this;
  102. if (displayData == null) {
  103. return null;
  104. }
  105. let subtitle = getTimeOnlyString(displayData.date_begin);
  106. const dateString = getDateOnlyString(displayData.date_begin);
  107. if (dateString !== null && subtitle != null) {
  108. subtitle += ` | ${DateManager.getInstance().getTranslatedDate(
  109. dateString,
  110. )}`;
  111. }
  112. return (
  113. <CollapsibleScrollView style={{paddingLeft: 5, paddingRight: 5}} hasTab>
  114. <Card.Title title={displayData.title} subtitle={subtitle} />
  115. {displayData.logo !== null ? (
  116. <ImageGalleryButton
  117. images={[{url: displayData.logo}]}
  118. style={{
  119. width: 300,
  120. height: 300,
  121. marginLeft: 'auto',
  122. marginRight: 'auto',
  123. }}
  124. />
  125. ) : null}
  126. {displayData.description !== null ? (
  127. <Card.Content
  128. style={{paddingBottom: CustomTabBar.TAB_BAR_HEIGHT + 20}}>
  129. <CustomHTML html={displayData.description} />
  130. </Card.Content>
  131. ) : (
  132. <View />
  133. )}
  134. </CollapsibleScrollView>
  135. );
  136. }
  137. /**
  138. * Shows an error view and use a custom message if the event does not exist
  139. *
  140. * @returns {*}
  141. */
  142. getErrorView() {
  143. const {navigation} = this.props;
  144. if (this.errorCode === ERROR_TYPE.BAD_INPUT) {
  145. return (
  146. <ErrorView
  147. navigation={navigation}
  148. showRetryButton={false}
  149. message={i18n.t('screens.planning.invalidEvent')}
  150. icon="calendar-remove"
  151. />
  152. );
  153. }
  154. return (
  155. <ErrorView
  156. navigation={navigation}
  157. errorCode={this.errorCode}
  158. onRefresh={this.fetchData}
  159. />
  160. );
  161. }
  162. /**
  163. * Fetches data for the current event id from the API
  164. */
  165. fetchData = () => {
  166. this.setState({loading: true});
  167. apiRequest<PlanningEventType>(EVENT_INFO_URL, 'POST', {id: this.eventId})
  168. .then(this.onFetchSuccess)
  169. .catch(this.onFetchError);
  170. };
  171. render() {
  172. const {loading} = this.state;
  173. if (loading) {
  174. return <BasicLoadingScreen />;
  175. }
  176. if (this.errorCode === 0) {
  177. return this.getContent();
  178. }
  179. return this.getErrorView();
  180. }
  181. }
  182. export default PlanningDisplayScreen;