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.

GroupSelectionScreen.tsx 7.4KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269
  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, { useEffect, useLayoutEffect, useState } from 'react';
  20. import { Platform } from 'react-native';
  21. import i18n from 'i18n-js';
  22. import { Searchbar } from 'react-native-paper';
  23. import { stringMatchQuery } from '../../utils/Search';
  24. import WebSectionList from '../../components/Screens/WebSectionList';
  25. import GroupListAccordion from '../../components/Lists/PlanexGroups/GroupListAccordion';
  26. import AsyncStorageManager from '../../managers/AsyncStorageManager';
  27. import Urls from '../../constants/Urls';
  28. import { readData } from '../../utils/WebData';
  29. import { useNavigation } from '@react-navigation/core';
  30. import { useCachedPlanexGroups } from '../../utils/cacheContext';
  31. export type PlanexGroupType = {
  32. name: string;
  33. id: number;
  34. };
  35. export type PlanexGroupCategoryType = {
  36. name: string;
  37. id: number;
  38. content: Array<PlanexGroupType>;
  39. };
  40. export type PlanexGroupsType = { [key: string]: PlanexGroupCategoryType };
  41. function sortName(
  42. a: PlanexGroupType | PlanexGroupCategoryType,
  43. b: PlanexGroupType | PlanexGroupCategoryType
  44. ): number {
  45. if (a.name.toLowerCase() < b.name.toLowerCase()) {
  46. return -1;
  47. }
  48. if (a.name.toLowerCase() > b.name.toLowerCase()) {
  49. return 1;
  50. }
  51. return 0;
  52. }
  53. function GroupSelectionScreen() {
  54. const navigation = useNavigation();
  55. const { groups, setGroups } = useCachedPlanexGroups();
  56. const [currentSearchString, setCurrentSearchString] = useState('');
  57. const [favoriteGroups, setFavoriteGroups] = useState<Array<PlanexGroupType>>(
  58. AsyncStorageManager.getObject(
  59. AsyncStorageManager.PREFERENCES.planexFavoriteGroups.key
  60. )
  61. );
  62. useLayoutEffect(() => {
  63. navigation.setOptions({
  64. headerTitle: getSearchBar,
  65. headerBackTitleVisible: false,
  66. headerTitleContainerStyle:
  67. Platform.OS === 'ios'
  68. ? { marginHorizontal: 0, width: '70%' }
  69. : { marginHorizontal: 0, right: 50, left: 50 },
  70. });
  71. }, [navigation]);
  72. const getSearchBar = () => {
  73. return (
  74. // @ts-ignore
  75. <Searchbar
  76. placeholder={i18n.t('screens.proximo.search')}
  77. onChangeText={setCurrentSearchString}
  78. />
  79. );
  80. };
  81. /**
  82. * Gets a render item for the given article
  83. *
  84. * @param item The article to render
  85. * @return {*}
  86. */
  87. const getRenderItem = ({ item }: { item: PlanexGroupCategoryType }) => {
  88. if (
  89. shouldDisplayAccordion(item) ||
  90. (item.id === 0 && item.content.length === 0)
  91. ) {
  92. return (
  93. <GroupListAccordion
  94. item={item}
  95. favorites={[...favoriteGroups]}
  96. onGroupPress={onListItemPress}
  97. onFavoritePress={onListFavoritePress}
  98. currentSearchString={currentSearchString}
  99. />
  100. );
  101. }
  102. return null;
  103. };
  104. /**
  105. * Creates the dataset to be used in the FlatList
  106. *
  107. * @param fetchedData
  108. * @return {*}
  109. * */
  110. const createDataset = (
  111. fetchedData:
  112. | {
  113. [key: string]: PlanexGroupCategoryType;
  114. }
  115. | undefined
  116. ): Array<{ title: string; data: Array<PlanexGroupCategoryType> }> => {
  117. return [
  118. {
  119. title: '',
  120. data: generateData(fetchedData),
  121. },
  122. ];
  123. };
  124. /**
  125. * Callback used when clicking an article in the list.
  126. * It opens the modal to show detailed information about the article
  127. *
  128. * @param item The article pressed
  129. */
  130. const onListItemPress = (item: PlanexGroupType) => {
  131. navigation.navigate('planex', {
  132. screen: 'index',
  133. params: { group: item },
  134. });
  135. };
  136. /**
  137. * Callback used when the user clicks on the favorite button
  138. *
  139. * @param item The item to add/remove from favorites
  140. */
  141. const onListFavoritePress = (item: PlanexGroupType) => {
  142. updateGroupFavorites(item);
  143. };
  144. /**
  145. * Checks if the given group is in the favorites list
  146. *
  147. * @param group The group to check
  148. * @returns {boolean}
  149. */
  150. const isGroupInFavorites = (group: PlanexGroupType): boolean => {
  151. let isFav = false;
  152. favoriteGroups.forEach((favGroup: PlanexGroupType) => {
  153. if (group.id === favGroup.id) {
  154. isFav = true;
  155. }
  156. });
  157. return isFav;
  158. };
  159. /**
  160. * Adds or removes the given group to the favorites list, depending on whether it is already in it or not.
  161. * Favorites are then saved in user preferences
  162. *
  163. * @param group The group to add/remove to favorites
  164. */
  165. const updateGroupFavorites = (group: PlanexGroupType) => {
  166. if (isGroupInFavorites(group)) {
  167. removeGroupFromFavorites(group);
  168. } else {
  169. addGroupToFavorites(group);
  170. }
  171. };
  172. /**
  173. * Checks whether to display the given group category, depending on user search query
  174. *
  175. * @param item The group category
  176. * @returns {boolean}
  177. */
  178. const shouldDisplayAccordion = (item: PlanexGroupCategoryType): boolean => {
  179. let shouldDisplay = false;
  180. for (let i = 0; i < item.content.length; i += 1) {
  181. if (stringMatchQuery(item.content[i].name, currentSearchString)) {
  182. shouldDisplay = true;
  183. break;
  184. }
  185. }
  186. return shouldDisplay;
  187. };
  188. /**
  189. * Generates the dataset to be used in the FlatList.
  190. * This improves formatting of group names, sorts alphabetically the categories, and adds favorites at the top.
  191. *
  192. * @param fetchedData The raw data fetched from the server
  193. * @returns {[]}
  194. */
  195. const generateData = (
  196. fetchedData: PlanexGroupsType | undefined
  197. ): Array<PlanexGroupCategoryType> => {
  198. const data: Array<PlanexGroupCategoryType> = [];
  199. if (fetchedData) {
  200. Object.values(fetchedData).forEach(
  201. (category: PlanexGroupCategoryType) => {
  202. data.push(category);
  203. }
  204. );
  205. data.sort(sortName);
  206. data.unshift({
  207. name: i18n.t('screens.planex.favorites.title'),
  208. id: 0,
  209. content: favoriteGroups,
  210. });
  211. }
  212. return data;
  213. };
  214. /**
  215. * Removes the given group from the favorites
  216. *
  217. * @param group The group to remove from the array
  218. */
  219. const removeGroupFromFavorites = (group: PlanexGroupType) => {
  220. setFavoriteGroups(favoriteGroups.filter((g) => g.id !== group.id));
  221. };
  222. useEffect(() => {
  223. AsyncStorageManager.set(
  224. AsyncStorageManager.PREFERENCES.planexFavoriteGroups.key,
  225. favoriteGroups
  226. );
  227. }, [favoriteGroups]);
  228. /**
  229. * Adds the given group to favorites
  230. *
  231. * @param group The group to add to the array
  232. */
  233. const addGroupToFavorites = (group: PlanexGroupType) => {
  234. setFavoriteGroups([...favoriteGroups, group].sort(sortName));
  235. };
  236. return (
  237. <WebSectionList
  238. request={() => readData<PlanexGroupsType>(Urls.planex.groups)}
  239. createDataset={createDataset}
  240. refreshOnFocus={true}
  241. renderItem={getRenderItem}
  242. extraData={currentSearchString + favoriteGroups.length}
  243. cache={groups}
  244. onCacheUpdate={setGroups}
  245. />
  246. );
  247. }
  248. export default GroupSelectionScreen;