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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299
  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. // @ts-ignore
  107. <Searchbar
  108. placeholder={i18n.t('screens.proximo.search')}
  109. onChangeText={this.onSearchStringChange}
  110. />
  111. );
  112. };
  113. onChipSelect = (id: number) => {
  114. this.updateFilteredData(null, id);
  115. };
  116. /**
  117. * Gets the header button
  118. * @return {*}
  119. */
  120. getHeaderButtons = () => {
  121. const onPress = () => {
  122. const {props} = this;
  123. props.navigation.navigate('club-about');
  124. };
  125. return (
  126. <MaterialHeaderButtons>
  127. <Item title="main" iconName="information" onPress={onPress} />
  128. </MaterialHeaderButtons>
  129. );
  130. };
  131. getScreen = (
  132. data: Array<{
  133. categories: Array<ClubCategoryType>;
  134. clubs: Array<ClubType>;
  135. } | null>,
  136. ) => {
  137. let categoryList: Array<ClubCategoryType> = [];
  138. let clubList: Array<ClubType> = [];
  139. if (data[0] != null) {
  140. categoryList = data[0].categories;
  141. clubList = data[0].clubs;
  142. }
  143. this.categories = categoryList;
  144. return (
  145. <CollapsibleFlatList
  146. data={clubList}
  147. keyExtractor={this.keyExtractor}
  148. renderItem={this.getRenderItem}
  149. ListHeaderComponent={this.getListHeader()}
  150. // Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
  151. removeClippedSubviews
  152. getItemLayout={this.itemLayout}
  153. />
  154. );
  155. };
  156. /**
  157. * Gets the list header, with controls to change the categories filter
  158. *
  159. * @returns {*}
  160. */
  161. getListHeader() {
  162. const {state} = this;
  163. return (
  164. <ClubListHeader
  165. categories={this.categories}
  166. selectedCategories={state.currentlySelectedCategories}
  167. onChipSelect={this.onChipSelect}
  168. />
  169. );
  170. }
  171. /**
  172. * Gets the category object of the given ID
  173. *
  174. * @param id The ID of the category to find
  175. * @returns {*}
  176. */
  177. getCategoryOfId = (id: number): ClubCategoryType | null => {
  178. let cat = null;
  179. this.categories.forEach((item: ClubCategoryType) => {
  180. if (id === item.id) {
  181. cat = item;
  182. }
  183. });
  184. return cat;
  185. };
  186. getRenderItem = ({item}: {item: ClubType}) => {
  187. const onPress = () => {
  188. this.onListItemPress(item);
  189. };
  190. if (this.shouldRenderItem(item)) {
  191. return (
  192. <ClubListItem
  193. categoryTranslator={this.getCategoryOfId}
  194. item={item}
  195. onPress={onPress}
  196. height={LIST_ITEM_HEIGHT}
  197. />
  198. );
  199. }
  200. return null;
  201. };
  202. keyExtractor = (item: ClubType): string => item.id.toString();
  203. itemLayout = (
  204. data: Array<ClubType> | null | undefined,
  205. index: number,
  206. ): {length: number; offset: number; index: number} => ({
  207. length: LIST_ITEM_HEIGHT,
  208. offset: LIST_ITEM_HEIGHT * index,
  209. index,
  210. });
  211. /**
  212. * Updates the search string and category filter, saving them to the State.
  213. *
  214. * If the given category is already in the filter, it removes it.
  215. * Otherwise it adds it to the filter.
  216. *
  217. * @param filterStr The new filter string to use
  218. * @param categoryId The category to add/remove from the filter
  219. */
  220. updateFilteredData(filterStr: string | null, categoryId: number | null) {
  221. const {state} = this;
  222. const newCategoriesState = [...state.currentlySelectedCategories];
  223. let newStrState = state.currentSearchString;
  224. if (filterStr !== null) {
  225. newStrState = filterStr;
  226. }
  227. if (categoryId !== null) {
  228. const index = newCategoriesState.indexOf(categoryId);
  229. if (index === -1) {
  230. newCategoriesState.push(categoryId);
  231. } else {
  232. newCategoriesState.splice(index, 1);
  233. }
  234. }
  235. if (filterStr !== null || categoryId !== null) {
  236. this.setState({
  237. currentSearchString: newStrState,
  238. currentlySelectedCategories: newCategoriesState,
  239. });
  240. }
  241. }
  242. /**
  243. * Checks if the given item should be rendered according to current name and category filters
  244. *
  245. * @param item The club to check
  246. * @returns {boolean}
  247. */
  248. shouldRenderItem(item: ClubType): boolean {
  249. const {state} = this;
  250. let shouldRender =
  251. state.currentlySelectedCategories.length === 0 ||
  252. isItemInCategoryFilter(state.currentlySelectedCategories, item.category);
  253. if (shouldRender) {
  254. shouldRender = stringMatchQuery(item.name, state.currentSearchString);
  255. }
  256. return shouldRender;
  257. }
  258. render() {
  259. const {props} = this;
  260. return (
  261. <AuthenticatedScreen
  262. navigation={props.navigation}
  263. requests={[
  264. {
  265. link: 'clubs/list',
  266. params: {},
  267. mandatory: true,
  268. },
  269. ]}
  270. renderFunction={this.getScreen}
  271. />
  272. );
  273. }
  274. }
  275. export default ClubListScreen;