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.

ProximoMainScreen.tsx 6.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254
  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 i18n from 'i18n-js';
  21. import { Avatar, List, useTheme, withTheme } from 'react-native-paper';
  22. import WebSectionList from '../../../components/Screens/WebSectionList';
  23. import MaterialHeaderButtons, {
  24. Item,
  25. } from '../../../components/Overrides/CustomHeaderButton';
  26. import type { SectionListDataType } from '../../../components/Screens/WebSectionList';
  27. import { StyleSheet } from 'react-native';
  28. import Urls from '../../../constants/Urls';
  29. import { readData } from '../../../utils/WebData';
  30. import { useNavigation } from '@react-navigation/core';
  31. import { useLayoutEffect } from 'react';
  32. import { useCachedProximoCategories } from '../../../utils/cacheContext';
  33. const LIST_ITEM_HEIGHT = 84;
  34. export type ProximoCategoryType = {
  35. id: number;
  36. name: string;
  37. icon: string;
  38. created_at: string;
  39. updated_at: string;
  40. nb_articles: number;
  41. };
  42. export type ProximoArticleType = {
  43. id: number;
  44. name: string;
  45. description: string;
  46. quantity: number;
  47. price: number;
  48. code: string;
  49. image: string;
  50. category_id: number;
  51. created_at: string;
  52. updated_at: string;
  53. category: ProximoCategoryType;
  54. };
  55. export type CategoriesType = Array<ProximoCategoryType>;
  56. const styles = StyleSheet.create({
  57. item: {
  58. justifyContent: 'center',
  59. },
  60. });
  61. function sortCategories(
  62. a: ProximoCategoryType,
  63. b: ProximoCategoryType
  64. ): number {
  65. const str1 = a.name.toLowerCase();
  66. const str2 = b.name.toLowerCase();
  67. // Make 'All' category with id -1 stick to the top
  68. if (a.id === -1) {
  69. return -1;
  70. }
  71. if (b.id === -1) {
  72. return 1;
  73. }
  74. // Sort others by name ascending
  75. if (str1 < str2) {
  76. return -1;
  77. }
  78. if (str1 > str2) {
  79. return 1;
  80. }
  81. return 0;
  82. }
  83. /**
  84. * Class defining the main proximo screen.
  85. * This screen shows the different categories of articles offered by proximo.
  86. */
  87. function ProximoMainScreen() {
  88. const navigation = useNavigation();
  89. const theme = useTheme();
  90. const { categories, setCategories } = useCachedProximoCategories();
  91. useLayoutEffect(() => {
  92. navigation.setOptions({
  93. headerRight: () => getHeaderButtons(),
  94. });
  95. // eslint-disable-next-line react-hooks/exhaustive-deps
  96. }, [navigation]);
  97. /**
  98. * Callback used when the search button is pressed.
  99. * This will open a new ProximoListScreen with all items displayed
  100. */
  101. const onPressSearchBtn = () => {
  102. const searchScreenData = {
  103. shouldFocusSearchBar: true,
  104. category: -1,
  105. };
  106. navigation.navigate('proximo-list', searchScreenData);
  107. };
  108. const onPressAboutBtn = () => navigation.navigate('proximo-about');
  109. const getHeaderButtons = () => {
  110. return (
  111. <MaterialHeaderButtons>
  112. <Item
  113. title={'magnify'}
  114. iconName={'magnify'}
  115. onPress={onPressSearchBtn}
  116. />
  117. <Item
  118. title={'information'}
  119. iconName={'information'}
  120. onPress={onPressAboutBtn}
  121. />
  122. </MaterialHeaderButtons>
  123. );
  124. };
  125. /**
  126. * Extracts a key for the given category
  127. *
  128. * @param item The category to extract the key from
  129. * @return {*} The extracted key
  130. */
  131. const getKeyExtractor = (item: ProximoCategoryType): string =>
  132. item.id.toString();
  133. /**
  134. * Gets the given category render item
  135. *
  136. * @param item The category to render
  137. * @return {*}
  138. */
  139. const getRenderItem = ({ item }: { item: ProximoCategoryType }) => {
  140. const dataToSend = {
  141. shouldFocusSearchBar: false,
  142. category: item.id,
  143. };
  144. const article_number = item.nb_articles;
  145. const subtitle = `${article_number} ${
  146. article_number > 1
  147. ? i18n.t('screens.proximo.articles')
  148. : i18n.t('screens.proximo.article')
  149. }`;
  150. const onPress = () => navigation.navigate('proximo-list', dataToSend);
  151. if (article_number > 0) {
  152. return (
  153. <List.Item
  154. title={item.name}
  155. description={subtitle}
  156. onPress={onPress}
  157. left={(props) =>
  158. item.icon.endsWith('.png') ? (
  159. <Avatar.Image style={props.style} source={{ uri: item.icon }} />
  160. ) : (
  161. <List.Icon
  162. style={props.style}
  163. icon={item.icon}
  164. color={theme.colors.primary}
  165. />
  166. )
  167. }
  168. right={(props) => (
  169. <List.Icon
  170. color={props.color}
  171. style={props.style}
  172. icon={'chevron-right'}
  173. />
  174. )}
  175. style={{
  176. height: LIST_ITEM_HEIGHT,
  177. ...styles.item,
  178. }}
  179. />
  180. );
  181. }
  182. return null;
  183. };
  184. /**
  185. * Creates the dataset to be used in the FlatList
  186. *
  187. * @param fetchedData
  188. * @return {*}
  189. * */
  190. const createDataset = (
  191. data: CategoriesType | undefined
  192. ): SectionListDataType<ProximoCategoryType> => {
  193. if (data) {
  194. let totalArticles = 0;
  195. data.forEach((c) => (totalArticles += c.nb_articles));
  196. const finalData: CategoriesType = [
  197. {
  198. id: -1,
  199. name: i18n.t('screens.proximo.all'),
  200. icon: 'star',
  201. created_at: '',
  202. updated_at: '',
  203. nb_articles: totalArticles,
  204. },
  205. ...data,
  206. ];
  207. return [
  208. {
  209. title: '',
  210. data: finalData.filter((c) => c.nb_articles > 0).sort(sortCategories),
  211. keyExtractor: getKeyExtractor,
  212. },
  213. ];
  214. } else {
  215. return [
  216. {
  217. title: '',
  218. data: [],
  219. keyExtractor: getKeyExtractor,
  220. },
  221. ];
  222. }
  223. };
  224. return (
  225. <WebSectionList
  226. request={() => readData<CategoriesType>(Urls.proximo.categories)}
  227. createDataset={createDataset}
  228. refreshOnFocus={true}
  229. renderItem={getRenderItem}
  230. cache={categories}
  231. onCacheUpdate={setCategories}
  232. />
  233. );
  234. }
  235. export default withTheme(ProximoMainScreen);