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.

ClubListScreen.tsx 7.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298
  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 {Platform} from 'react-native';
  21. import {Searchbar} from 'react-native-paper';
  22. import i18n from 'i18n-js';
  23. import {StackNavigationProp} from '@react-navigation/stack';
  24. import AuthenticatedScreen from '../../../components/Amicale/AuthenticatedScreen';
  25. import ClubListItem from '../../../components/Lists/Clubs/ClubListItem';
  26. import {isItemInCategoryFilter, stringMatchQuery} from '../../../utils/Search';
  27. import ClubListHeader from '../../../components/Lists/Clubs/ClubListHeader';
  28. import MaterialHeaderButtons, {
  29. Item,
  30. } from '../../../components/Overrides/CustomHeaderButton';
  31. import CollapsibleFlatList from '../../../components/Collapsible/CollapsibleFlatList';
  32. export type ClubCategoryType = {
  33. id: number;
  34. name: string;
  35. };
  36. export type ClubType = {
  37. id: number;
  38. name: string;
  39. description: string;
  40. logo: string;
  41. email: string | null;
  42. category: Array<number | null>;
  43. responsibles: Array<string>;
  44. };
  45. type PropsType = {
  46. navigation: StackNavigationProp<any>;
  47. };
  48. type StateType = {
  49. currentlySelectedCategories: Array<number>;
  50. currentSearchString: string;
  51. };
  52. const LIST_ITEM_HEIGHT = 96;
  53. class ClubListScreen extends React.Component<PropsType, StateType> {
  54. categories: Array<ClubCategoryType>;
  55. constructor(props: PropsType) {
  56. super(props);
  57. this.categories = [];
  58. this.state = {
  59. currentlySelectedCategories: [],
  60. currentSearchString: '',
  61. };
  62. }
  63. /**
  64. * Creates the header content
  65. */
  66. componentDidMount() {
  67. const {props} = this;
  68. props.navigation.setOptions({
  69. headerTitle: this.getSearchBar,
  70. headerRight: this.getHeaderButtons,
  71. headerBackTitleVisible: false,
  72. headerTitleContainerStyle:
  73. Platform.OS === 'ios'
  74. ? {marginHorizontal: 0, width: '70%'}
  75. : {marginHorizontal: 0, right: 50, left: 50},
  76. });
  77. }
  78. /**
  79. * Callback used when clicking an article in the list.
  80. * It opens the modal to show detailed information about the article
  81. *
  82. * @param item The article pressed
  83. */
  84. onListItemPress(item: ClubType) {
  85. const {props} = this;
  86. props.navigation.navigate('club-information', {
  87. data: item,
  88. categories: this.categories,
  89. });
  90. }
  91. /**
  92. * Callback used when the search changes
  93. *
  94. * @param str The new search string
  95. */
  96. onSearchStringChange = (str: string) => {
  97. this.updateFilteredData(str, null);
  98. };
  99. /**
  100. * Gets the header search bar
  101. *
  102. * @return {*}
  103. */
  104. getSearchBar = () => {
  105. return (
  106. <Searchbar
  107. placeholder={i18n.t('screens.proximo.search')}
  108. onChangeText={this.onSearchStringChange}
  109. />
  110. );
  111. };
  112. onChipSelect = (id: number) => {
  113. this.updateFilteredData(null, id);
  114. };
  115. /**
  116. * Gets the header button
  117. * @return {*}
  118. */
  119. getHeaderButtons = () => {
  120. const onPress = () => {
  121. const {props} = this;
  122. props.navigation.navigate('club-about');
  123. };
  124. return (
  125. <MaterialHeaderButtons>
  126. <Item title="main" iconName="information" onPress={onPress} />
  127. </MaterialHeaderButtons>
  128. );
  129. };
  130. getScreen = (
  131. data: Array<{
  132. categories: Array<ClubCategoryType>;
  133. clubs: Array<ClubType>;
  134. } | null>,
  135. ) => {
  136. let categoryList: Array<ClubCategoryType> = [];
  137. let clubList: Array<ClubType> = [];
  138. if (data[0] != null) {
  139. categoryList = data[0].categories;
  140. clubList = data[0].clubs;
  141. }
  142. this.categories = categoryList;
  143. return (
  144. <CollapsibleFlatList
  145. data={clubList}
  146. keyExtractor={this.keyExtractor}
  147. renderItem={this.getRenderItem}
  148. ListHeaderComponent={this.getListHeader()}
  149. // Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
  150. removeClippedSubviews
  151. getItemLayout={this.itemLayout}
  152. />
  153. );
  154. };
  155. /**
  156. * Gets the list header, with controls to change the categories filter
  157. *
  158. * @returns {*}
  159. */
  160. getListHeader() {
  161. const {state} = this;
  162. return (
  163. <ClubListHeader
  164. categories={this.categories}
  165. selectedCategories={state.currentlySelectedCategories}
  166. onChipSelect={this.onChipSelect}
  167. />
  168. );
  169. }
  170. /**
  171. * Gets the category object of the given ID
  172. *
  173. * @param id The ID of the category to find
  174. * @returns {*}
  175. */
  176. getCategoryOfId = (id: number): ClubCategoryType | null => {
  177. let cat = null;
  178. this.categories.forEach((item: ClubCategoryType) => {
  179. if (id === item.id) {
  180. cat = item;
  181. }
  182. });
  183. return cat;
  184. };
  185. getRenderItem = ({item}: {item: ClubType}) => {
  186. const onPress = () => {
  187. this.onListItemPress(item);
  188. };
  189. if (this.shouldRenderItem(item)) {
  190. return (
  191. <ClubListItem
  192. categoryTranslator={this.getCategoryOfId}
  193. item={item}
  194. onPress={onPress}
  195. height={LIST_ITEM_HEIGHT}
  196. />
  197. );
  198. }
  199. return null;
  200. };
  201. keyExtractor = (item: ClubType): string => item.id.toString();
  202. itemLayout = (
  203. data: Array<ClubType> | null | undefined,
  204. index: number,
  205. ): {length: number; offset: number; index: number} => ({
  206. length: LIST_ITEM_HEIGHT,
  207. offset: LIST_ITEM_HEIGHT * index,
  208. index,
  209. });
  210. /**
  211. * Updates the search string and category filter, saving them to the State.
  212. *
  213. * If the given category is already in the filter, it removes it.
  214. * Otherwise it adds it to the filter.
  215. *
  216. * @param filterStr The new filter string to use
  217. * @param categoryId The category to add/remove from the filter
  218. */
  219. updateFilteredData(filterStr: string | null, categoryId: number | null) {
  220. const {state} = this;
  221. const newCategoriesState = [...state.currentlySelectedCategories];
  222. let newStrState = state.currentSearchString;
  223. if (filterStr !== null) {
  224. newStrState = filterStr;
  225. }
  226. if (categoryId !== null) {
  227. const index = newCategoriesState.indexOf(categoryId);
  228. if (index === -1) {
  229. newCategoriesState.push(categoryId);
  230. } else {
  231. newCategoriesState.splice(index, 1);
  232. }
  233. }
  234. if (filterStr !== null || categoryId !== null) {
  235. this.setState({
  236. currentSearchString: newStrState,
  237. currentlySelectedCategories: newCategoriesState,
  238. });
  239. }
  240. }
  241. /**
  242. * Checks if the given item should be rendered according to current name and category filters
  243. *
  244. * @param item The club to check
  245. * @returns {boolean}
  246. */
  247. shouldRenderItem(item: ClubType): boolean {
  248. const {state} = this;
  249. let shouldRender =
  250. state.currentlySelectedCategories.length === 0 ||
  251. isItemInCategoryFilter(state.currentlySelectedCategories, item.category);
  252. if (shouldRender) {
  253. shouldRender = stringMatchQuery(item.name, state.currentSearchString);
  254. }
  255. return shouldRender;
  256. }
  257. render() {
  258. const {props} = this;
  259. return (
  260. <AuthenticatedScreen
  261. navigation={props.navigation}
  262. requests={[
  263. {
  264. link: 'clubs/list',
  265. params: {},
  266. mandatory: true,
  267. },
  268. ]}
  269. renderFunction={this.getScreen}
  270. />
  271. );
  272. }
  273. }
  274. export default ClubListScreen;