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.

ClubDisplayScreen.tsx 7.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280
  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. import * as React from 'react';
  20. import {Linking, View} from 'react-native';
  21. import {
  22. Avatar,
  23. Button,
  24. Card,
  25. Chip,
  26. Paragraph,
  27. withTheme,
  28. } from 'react-native-paper';
  29. import i18n from 'i18n-js';
  30. import {StackNavigationProp} from '@react-navigation/stack';
  31. import AuthenticatedScreen from '../../../components/Amicale/AuthenticatedScreen';
  32. import CustomHTML from '../../../components/Overrides/CustomHTML';
  33. import CustomTabBar from '../../../components/Tabbar/CustomTabBar';
  34. import type {ClubCategoryType, ClubType} from './ClubListScreen';
  35. import {ERROR_TYPE} from '../../../utils/WebData';
  36. import CollapsibleScrollView from '../../../components/Collapsible/CollapsibleScrollView';
  37. import ImageGalleryButton from '../../../components/Media/ImageGalleryButton';
  38. type PropsType = {
  39. navigation: StackNavigationProp<any>;
  40. route: {
  41. params?: {
  42. data?: ClubType;
  43. categories?: Array<ClubCategoryType>;
  44. clubId?: number;
  45. };
  46. };
  47. theme: ReactNativePaper.Theme;
  48. };
  49. const AMICALE_MAIL = 'clubs@amicale-insat.fr';
  50. /**
  51. * Class defining a club event information page.
  52. * If called with data and categories navigation parameters, will use those to display the data.
  53. * If called with clubId parameter, will fetch the information on the server
  54. */
  55. class ClubDisplayScreen extends React.Component<PropsType> {
  56. displayData: ClubType | null;
  57. categories: Array<ClubCategoryType> | null;
  58. clubId: number;
  59. shouldFetchData: boolean;
  60. constructor(props: PropsType) {
  61. super(props);
  62. this.displayData = null;
  63. this.categories = null;
  64. this.clubId = props.route.params?.clubId ? props.route.params.clubId : 0;
  65. this.shouldFetchData = true;
  66. if (
  67. props.route.params &&
  68. props.route.params.data &&
  69. props.route.params.categories
  70. ) {
  71. this.displayData = props.route.params.data;
  72. this.categories = props.route.params.categories;
  73. this.clubId = props.route.params.data.id;
  74. this.shouldFetchData = false;
  75. }
  76. }
  77. /**
  78. * Gets the name of the category with the given ID
  79. *
  80. * @param id The category's ID
  81. * @returns {string|*}
  82. */
  83. getCategoryName(id: number): string {
  84. let categoryName = '';
  85. if (this.categories !== null) {
  86. this.categories.forEach((item: ClubCategoryType) => {
  87. if (id === item.id) {
  88. categoryName = item.name;
  89. }
  90. });
  91. }
  92. return categoryName;
  93. }
  94. /**
  95. * Gets the view for rendering categories
  96. *
  97. * @param categories The categories to display (max 2)
  98. * @returns {null|*}
  99. */
  100. getCategoriesRender(categories: Array<number | null>) {
  101. if (this.categories == null) {
  102. return null;
  103. }
  104. const final: Array<React.ReactNode> = [];
  105. categories.forEach((cat: number | null) => {
  106. if (cat != null) {
  107. final.push(
  108. <Chip style={{marginRight: 5}} key={cat}>
  109. {this.getCategoryName(cat)}
  110. </Chip>,
  111. );
  112. }
  113. });
  114. return <View style={{flexDirection: 'row', marginTop: 5}}>{final}</View>;
  115. }
  116. /**
  117. * Gets the view for rendering club managers if any
  118. *
  119. * @param managers The list of manager names
  120. * @param email The club contact email
  121. * @returns {*}
  122. */
  123. getManagersRender(managers: Array<string>, email: string | null) {
  124. const {props} = this;
  125. const managersListView: Array<React.ReactNode> = [];
  126. managers.forEach((item: string) => {
  127. managersListView.push(<Paragraph key={item}>{item}</Paragraph>);
  128. });
  129. const hasManagers = managers.length > 0;
  130. return (
  131. <Card
  132. style={{marginTop: 10, marginBottom: CustomTabBar.TAB_BAR_HEIGHT + 20}}>
  133. <Card.Title
  134. title={i18n.t('screens.clubs.managers')}
  135. subtitle={
  136. hasManagers
  137. ? i18n.t('screens.clubs.managersSubtitle')
  138. : i18n.t('screens.clubs.managersUnavailable')
  139. }
  140. left={(iconProps) => (
  141. <Avatar.Icon
  142. size={iconProps.size}
  143. style={{backgroundColor: 'transparent'}}
  144. color={
  145. hasManagers
  146. ? props.theme.colors.success
  147. : props.theme.colors.primary
  148. }
  149. icon="account-tie"
  150. />
  151. )}
  152. />
  153. <Card.Content>
  154. {managersListView}
  155. {ClubDisplayScreen.getEmailButton(email, hasManagers)}
  156. </Card.Content>
  157. </Card>
  158. );
  159. }
  160. /**
  161. * Gets the email button to contact the club, or the amicale if the club does not have any managers
  162. *
  163. * @param email The club contact email
  164. * @param hasManagers True if the club has managers
  165. * @returns {*}
  166. */
  167. static getEmailButton(email: string | null, hasManagers: boolean) {
  168. const destinationEmail =
  169. email != null && hasManagers ? email : AMICALE_MAIL;
  170. const text =
  171. email != null && hasManagers
  172. ? i18n.t('screens.clubs.clubContact')
  173. : i18n.t('screens.clubs.amicaleContact');
  174. return (
  175. <Card.Actions>
  176. <Button
  177. icon="email"
  178. mode="contained"
  179. onPress={() => {
  180. Linking.openURL(`mailto:${destinationEmail}`);
  181. }}
  182. style={{marginLeft: 'auto'}}>
  183. {text}
  184. </Button>
  185. </Card.Actions>
  186. );
  187. }
  188. getScreen = (response: Array<ClubType | null>) => {
  189. let data: ClubType | null = response[0];
  190. if (data != null) {
  191. this.updateHeaderTitle(data);
  192. return (
  193. <CollapsibleScrollView style={{paddingLeft: 5, paddingRight: 5}} hasTab>
  194. {this.getCategoriesRender(data.category)}
  195. {data.logo !== null ? (
  196. <ImageGalleryButton
  197. images={[{url: data.logo}]}
  198. style={{
  199. width: 300,
  200. height: 300,
  201. marginLeft: 'auto',
  202. marginRight: 'auto',
  203. marginTop: 10,
  204. marginBottom: 10,
  205. }}
  206. />
  207. ) : (
  208. <View />
  209. )}
  210. {data.description !== null ? (
  211. // Surround description with div to allow text styling if the description is not html
  212. <Card.Content>
  213. <CustomHTML html={data.description} />
  214. </Card.Content>
  215. ) : (
  216. <View />
  217. )}
  218. {this.getManagersRender(data.responsibles, data.email)}
  219. </CollapsibleScrollView>
  220. );
  221. }
  222. return null;
  223. };
  224. /**
  225. * Updates the header title to match the given club
  226. *
  227. * @param data The club data
  228. */
  229. updateHeaderTitle(data: ClubType) {
  230. const {props} = this;
  231. props.navigation.setOptions({title: data.name});
  232. }
  233. render() {
  234. const {props} = this;
  235. if (this.shouldFetchData) {
  236. return (
  237. <AuthenticatedScreen
  238. navigation={props.navigation}
  239. requests={[
  240. {
  241. link: 'clubs/info',
  242. params: {id: this.clubId},
  243. mandatory: true,
  244. },
  245. ]}
  246. renderFunction={this.getScreen}
  247. errorViewOverride={[
  248. {
  249. errorCode: ERROR_TYPE.BAD_INPUT,
  250. message: i18n.t('screens.clubs.invalidClub'),
  251. icon: 'account-question',
  252. showRetryButton: false,
  253. },
  254. ]}
  255. />
  256. );
  257. }
  258. return this.getScreen([this.displayData]);
  259. }
  260. }
  261. export default withTheme(ClubDisplayScreen);