Application Android et IOS pour l'amicale des élèves https://play.google.com/store/apps/details?id=fr.amicaleinsat.application
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.6KB

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