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.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284
  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] = useState<
  91. Array<ClubCategoryType> | undefined
  92. >();
  93. const [clubId, setClubId] = useState<number | undefined>();
  94. useFocusEffect(
  95. useCallback(() => {
  96. if (props.route.params?.data && props.route.params?.categories) {
  97. setDisplayData(props.route.params.data);
  98. setCategories(props.route.params.categories);
  99. setClubId(props.route.params.data.id);
  100. } else {
  101. const id = props.route.params?.clubId;
  102. setClubId(id ? id : 0);
  103. }
  104. }, [props.route.params])
  105. );
  106. /**
  107. * Gets the name of the category with the given ID
  108. *
  109. * @param id The category's ID
  110. * @returns {string|*}
  111. */
  112. const getCategoryName = (id: number): string => {
  113. let categoryName = '';
  114. if (categories) {
  115. categories.forEach((item: ClubCategoryType) => {
  116. if (id === item.id) {
  117. categoryName = item.name;
  118. }
  119. });
  120. }
  121. return categoryName;
  122. };
  123. /**
  124. * Gets the view for rendering categories
  125. *
  126. * @param categories The categories to display (max 2)
  127. * @returns {null|*}
  128. */
  129. const getCategoriesRender = (c: Array<number | null>) => {
  130. if (!categories) {
  131. return null;
  132. }
  133. const final: Array<React.ReactNode> = [];
  134. c.forEach((cat: number | null) => {
  135. if (cat != null) {
  136. final.push(
  137. <Chip style={styles.category} key={cat}>
  138. {getCategoryName(cat)}
  139. </Chip>
  140. );
  141. }
  142. });
  143. return <View style={styles.categoryContainer}>{final}</View>;
  144. };
  145. /**
  146. * Gets the view for rendering club managers if any
  147. *
  148. * @param managers The list of manager names
  149. * @param email The club contact email
  150. * @returns {*}
  151. */
  152. const getManagersRender = (managers: Array<string>, email: string | null) => {
  153. const managersListView: Array<React.ReactNode> = [];
  154. managers.forEach((item: string) => {
  155. managersListView.push(<Paragraph key={item}>{item}</Paragraph>);
  156. });
  157. const hasManagers = managers.length > 0;
  158. return (
  159. <Card
  160. style={{
  161. marginBottom: TAB_BAR_HEIGHT + 20,
  162. ...styles.card,
  163. }}
  164. >
  165. <Card.Title
  166. title={i18n.t('screens.clubs.managers')}
  167. subtitle={
  168. hasManagers
  169. ? i18n.t('screens.clubs.managersSubtitle')
  170. : i18n.t('screens.clubs.managersUnavailable')
  171. }
  172. left={(iconProps) => (
  173. <Avatar.Icon
  174. size={iconProps.size}
  175. style={styles.icon}
  176. color={hasManagers ? theme.colors.success : theme.colors.primary}
  177. icon="account-tie"
  178. />
  179. )}
  180. />
  181. <Card.Content>
  182. {managersListView}
  183. {getEmailButton(email, hasManagers)}
  184. </Card.Content>
  185. </Card>
  186. );
  187. };
  188. /**
  189. * Gets the email button to contact the club, or the amicale if the club does not have any managers
  190. *
  191. * @param email The club contact email
  192. * @param hasManagers True if the club has managers
  193. * @returns {*}
  194. */
  195. const getEmailButton = (email: string | null, hasManagers: boolean) => {
  196. const destinationEmail =
  197. email != null && hasManagers ? email : AMICALE_MAIL;
  198. const text =
  199. email != null && hasManagers
  200. ? i18n.t('screens.clubs.clubContact')
  201. : i18n.t('screens.clubs.amicaleContact');
  202. return (
  203. <Card.Actions>
  204. <Button
  205. icon="email"
  206. mode="contained"
  207. onPress={() => {
  208. Linking.openURL(`mailto:${destinationEmail}`);
  209. }}
  210. style={styles.emailButton}
  211. >
  212. {text}
  213. </Button>
  214. </Card.Actions>
  215. );
  216. };
  217. const getScreen = (data: ResponseType | undefined) => {
  218. if (data) {
  219. updateHeaderTitle(data);
  220. return (
  221. <CollapsibleScrollView style={styles.scroll} hasTab>
  222. {getCategoriesRender(data.category)}
  223. {data.logo !== null ? (
  224. <ImageGalleryButton
  225. images={[{ url: data.logo }]}
  226. style={styles.imageButton}
  227. />
  228. ) : (
  229. <View />
  230. )}
  231. {data.description !== null ? (
  232. // Surround description with div to allow text styling if the description is not html
  233. <Card.Content>
  234. <CustomHTML html={data.description} />
  235. </Card.Content>
  236. ) : (
  237. <View />
  238. )}
  239. {getManagersRender(data.responsibles, data.email)}
  240. </CollapsibleScrollView>
  241. );
  242. }
  243. return <View />;
  244. };
  245. /**
  246. * Updates the header title to match the given club
  247. *
  248. * @param data The club data
  249. */
  250. const updateHeaderTitle = (data: ClubType) => {
  251. navigation.setOptions({ title: data.name });
  252. };
  253. const request = useAuthenticatedRequest<ClubType>('clubs/info', {
  254. id: clubId,
  255. });
  256. return (
  257. <RequestScreen
  258. request={request}
  259. render={getScreen}
  260. cache={displayData}
  261. onCacheUpdate={setDisplayData}
  262. />
  263. );
  264. }
  265. export default ClubDisplayScreen;