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.

GroupSelectionScreen.tsx 8.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320
  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 i18n from 'i18n-js';
  22. import {Searchbar} from 'react-native-paper';
  23. import {StackNavigationProp} from '@react-navigation/stack';
  24. import {stringMatchQuery} from '../../utils/Search';
  25. import WebSectionList from '../../components/Screens/WebSectionList';
  26. import GroupListAccordion from '../../components/Lists/PlanexGroups/GroupListAccordion';
  27. import AsyncStorageManager from '../../managers/AsyncStorageManager';
  28. const LIST_ITEM_HEIGHT = 70;
  29. export type PlanexGroupType = {
  30. name: string;
  31. id: number;
  32. };
  33. export type PlanexGroupCategoryType = {
  34. name: string;
  35. id: number;
  36. content: Array<PlanexGroupType>;
  37. };
  38. type PropsType = {
  39. navigation: StackNavigationProp<any>;
  40. };
  41. type StateType = {
  42. currentSearchString: string;
  43. favoriteGroups: Array<PlanexGroupType>;
  44. };
  45. function sortName(
  46. a: PlanexGroupType | PlanexGroupCategoryType,
  47. b: PlanexGroupType | PlanexGroupCategoryType,
  48. ): number {
  49. if (a.name.toLowerCase() < b.name.toLowerCase()) {
  50. return -1;
  51. }
  52. if (a.name.toLowerCase() > b.name.toLowerCase()) {
  53. return 1;
  54. }
  55. return 0;
  56. }
  57. const GROUPS_URL = 'http://planex.insa-toulouse.fr/wsAdeGrp.php?projectId=1';
  58. /**
  59. * Class defining planex group selection screen.
  60. */
  61. class GroupSelectionScreen extends React.Component<PropsType, StateType> {
  62. constructor(props: PropsType) {
  63. super(props);
  64. this.state = {
  65. currentSearchString: '',
  66. favoriteGroups: AsyncStorageManager.getObject(
  67. AsyncStorageManager.PREFERENCES.planexFavoriteGroups.key,
  68. ),
  69. };
  70. }
  71. /**
  72. * Creates the header content
  73. */
  74. componentDidMount() {
  75. const {navigation} = this.props;
  76. navigation.setOptions({
  77. headerTitle: this.getSearchBar,
  78. headerBackTitleVisible: false,
  79. headerTitleContainerStyle:
  80. Platform.OS === 'ios'
  81. ? {marginHorizontal: 0, width: '70%'}
  82. : {marginHorizontal: 0, right: 50, left: 50},
  83. });
  84. }
  85. /**
  86. * Gets the header search bar
  87. *
  88. * @return {*}
  89. */
  90. getSearchBar = () => {
  91. return (
  92. // @ts-ignore
  93. <Searchbar
  94. placeholder={i18n.t('screens.proximo.search')}
  95. onChangeText={this.onSearchStringChange}
  96. />
  97. );
  98. };
  99. /**
  100. * Gets a render item for the given article
  101. *
  102. * @param item The article to render
  103. * @return {*}
  104. */
  105. getRenderItem = ({item}: {item: PlanexGroupCategoryType}) => {
  106. const {currentSearchString, favoriteGroups} = this.state;
  107. if (
  108. this.shouldDisplayAccordion(item) ||
  109. (item.id === 0 && item.content.length === 0)
  110. ) {
  111. return (
  112. <GroupListAccordion
  113. item={item}
  114. favorites={[...favoriteGroups]}
  115. onGroupPress={this.onListItemPress}
  116. onFavoritePress={this.onListFavoritePress}
  117. currentSearchString={currentSearchString}
  118. height={LIST_ITEM_HEIGHT}
  119. />
  120. );
  121. }
  122. return null;
  123. };
  124. /**
  125. * Creates the dataset to be used in the FlatList
  126. *
  127. * @param fetchedData
  128. * @return {*}
  129. * */
  130. createDataset = (fetchedData: {
  131. [key: string]: PlanexGroupCategoryType;
  132. }): Array<{title: string; data: Array<PlanexGroupCategoryType>}> => {
  133. return [
  134. {
  135. title: '',
  136. data: this.generateData(fetchedData),
  137. },
  138. ];
  139. };
  140. /**
  141. * Callback used when the search changes
  142. *
  143. * @param str The new search string
  144. */
  145. onSearchStringChange = (str: string) => {
  146. this.setState({currentSearchString: str});
  147. };
  148. /**
  149. * Callback used when clicking an article in the list.
  150. * It opens the modal to show detailed information about the article
  151. *
  152. * @param item The article pressed
  153. */
  154. onListItemPress = (item: PlanexGroupType) => {
  155. const {navigation} = this.props;
  156. navigation.navigate('planex', {
  157. screen: 'index',
  158. params: {group: item},
  159. });
  160. };
  161. /**
  162. * Callback used when the user clicks on the favorite button
  163. *
  164. * @param item The item to add/remove from favorites
  165. */
  166. onListFavoritePress = (item: PlanexGroupType) => {
  167. this.updateGroupFavorites(item);
  168. };
  169. /**
  170. * Checks if the given group is in the favorites list
  171. *
  172. * @param group The group to check
  173. * @returns {boolean}
  174. */
  175. isGroupInFavorites(group: PlanexGroupType): boolean {
  176. let isFav = false;
  177. const {favoriteGroups} = this.state;
  178. favoriteGroups.forEach((favGroup: PlanexGroupType) => {
  179. if (group.id === favGroup.id) {
  180. isFav = true;
  181. }
  182. });
  183. return isFav;
  184. }
  185. /**
  186. * Adds or removes the given group to the favorites list, depending on whether it is already in it or not.
  187. * Favorites are then saved in user preferences
  188. *
  189. * @param group The group to add/remove to favorites
  190. */
  191. updateGroupFavorites(group: PlanexGroupType) {
  192. if (this.isGroupInFavorites(group)) {
  193. this.removeGroupFromFavorites(group);
  194. } else {
  195. this.addGroupToFavorites(group);
  196. }
  197. }
  198. /**
  199. * Checks whether to display the given group category, depending on user search query
  200. *
  201. * @param item The group category
  202. * @returns {boolean}
  203. */
  204. shouldDisplayAccordion(item: PlanexGroupCategoryType): boolean {
  205. const {currentSearchString} = this.state;
  206. let shouldDisplay = false;
  207. for (let i = 0; i < item.content.length; i += 1) {
  208. if (stringMatchQuery(item.content[i].name, currentSearchString)) {
  209. shouldDisplay = true;
  210. break;
  211. }
  212. }
  213. return shouldDisplay;
  214. }
  215. /**
  216. * Generates the dataset to be used in the FlatList.
  217. * This improves formatting of group names, sorts alphabetically the categories, and adds favorites at the top.
  218. *
  219. * @param fetchedData The raw data fetched from the server
  220. * @returns {[]}
  221. */
  222. generateData(fetchedData: {
  223. [key: string]: PlanexGroupCategoryType;
  224. }): Array<PlanexGroupCategoryType> {
  225. const {favoriteGroups} = this.state;
  226. const data: Array<PlanexGroupCategoryType> = [];
  227. Object.values(fetchedData).forEach((category: PlanexGroupCategoryType) => {
  228. data.push(category);
  229. });
  230. data.sort(sortName);
  231. data.unshift({
  232. name: i18n.t('screens.planex.favorites'),
  233. id: 0,
  234. content: favoriteGroups,
  235. });
  236. return data;
  237. }
  238. /**
  239. * Removes the given group from the favorites
  240. *
  241. * @param group The group to remove from the array
  242. */
  243. removeGroupFromFavorites(group: PlanexGroupType) {
  244. this.setState((prevState: StateType): {
  245. favoriteGroups: Array<PlanexGroupType>;
  246. } => {
  247. const {favoriteGroups} = prevState;
  248. for (let i = 0; i < favoriteGroups.length; i += 1) {
  249. if (group.id === favoriteGroups[i].id) {
  250. favoriteGroups.splice(i, 1);
  251. break;
  252. }
  253. }
  254. AsyncStorageManager.set(
  255. AsyncStorageManager.PREFERENCES.planexFavoriteGroups.key,
  256. favoriteGroups,
  257. );
  258. return {favoriteGroups};
  259. });
  260. }
  261. /**
  262. * Adds the given group to favorites
  263. *
  264. * @param group The group to add to the array
  265. */
  266. addGroupToFavorites(group: PlanexGroupType) {
  267. this.setState((prevState: StateType): {
  268. favoriteGroups: Array<PlanexGroupType>;
  269. } => {
  270. const {favoriteGroups} = prevState;
  271. favoriteGroups.push(group);
  272. favoriteGroups.sort(sortName);
  273. AsyncStorageManager.set(
  274. AsyncStorageManager.PREFERENCES.planexFavoriteGroups.key,
  275. favoriteGroups,
  276. );
  277. return {favoriteGroups};
  278. });
  279. }
  280. render() {
  281. const {props, state} = this;
  282. return (
  283. <WebSectionList
  284. navigation={props.navigation}
  285. createDataset={this.createDataset}
  286. autoRefreshTime={0}
  287. refreshOnFocus={false}
  288. fetchUrl={GROUPS_URL}
  289. renderItem={this.getRenderItem}
  290. updateData={state.currentSearchString + state.favoriteGroups.length}
  291. itemHeight={LIST_ITEM_HEIGHT}
  292. />
  293. );
  294. }
  295. }
  296. export default GroupSelectionScreen;