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.4KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250
  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 title="magnify" iconName="magnify" onPress={onPressSearchBtn} />
  113. <Item
  114. title="information"
  115. iconName="information"
  116. onPress={onPressAboutBtn}
  117. />
  118. </MaterialHeaderButtons>
  119. );
  120. };
  121. /**
  122. * Extracts a key for the given category
  123. *
  124. * @param item The category to extract the key from
  125. * @return {*} The extracted key
  126. */
  127. const getKeyExtractor = (item: ProximoCategoryType): string =>
  128. item.id.toString();
  129. /**
  130. * Gets the given category render item
  131. *
  132. * @param item The category to render
  133. * @return {*}
  134. */
  135. const getRenderItem = ({ item }: { item: ProximoCategoryType }) => {
  136. const dataToSend = {
  137. shouldFocusSearchBar: false,
  138. category: item.id,
  139. };
  140. const article_number = item.nb_articles;
  141. const subtitle = `${article_number} ${
  142. article_number > 1
  143. ? i18n.t('screens.proximo.articles')
  144. : i18n.t('screens.proximo.article')
  145. }`;
  146. const onPress = () => navigation.navigate('proximo-list', dataToSend);
  147. if (article_number > 0) {
  148. return (
  149. <List.Item
  150. title={item.name}
  151. description={subtitle}
  152. onPress={onPress}
  153. left={(props) =>
  154. item.icon.endsWith('.png') ? (
  155. <Avatar.Image style={props.style} source={{ uri: item.icon }} />
  156. ) : (
  157. <List.Icon
  158. style={props.style}
  159. icon={item.icon}
  160. color={theme.colors.primary}
  161. />
  162. )
  163. }
  164. right={(props) => (
  165. <List.Icon
  166. color={props.color}
  167. style={props.style}
  168. icon="chevron-right"
  169. />
  170. )}
  171. style={{
  172. height: LIST_ITEM_HEIGHT,
  173. ...styles.item,
  174. }}
  175. />
  176. );
  177. }
  178. return null;
  179. };
  180. /**
  181. * Creates the dataset to be used in the FlatList
  182. *
  183. * @param fetchedData
  184. * @return {*}
  185. * */
  186. const createDataset = (
  187. data: CategoriesType | undefined
  188. ): SectionListDataType<ProximoCategoryType> => {
  189. if (data) {
  190. let totalArticles = 0;
  191. data.forEach((c) => (totalArticles += c.nb_articles));
  192. const finalData: CategoriesType = [
  193. {
  194. id: -1,
  195. name: i18n.t('screens.proximo.all'),
  196. icon: 'star',
  197. created_at: '',
  198. updated_at: '',
  199. nb_articles: totalArticles,
  200. },
  201. ...data,
  202. ];
  203. return [
  204. {
  205. title: '',
  206. data: finalData.filter((c) => c.nb_articles > 0).sort(sortCategories),
  207. keyExtractor: getKeyExtractor,
  208. },
  209. ];
  210. } else {
  211. return [
  212. {
  213. title: '',
  214. data: [],
  215. keyExtractor: getKeyExtractor,
  216. },
  217. ];
  218. }
  219. };
  220. return (
  221. <WebSectionList
  222. request={() => readData<CategoriesType>(Urls.proximo.categories)}
  223. createDataset={createDataset}
  224. refreshOnFocus={true}
  225. renderItem={getRenderItem}
  226. cache={categories}
  227. onCacheUpdate={setCategories}
  228. />
  229. );
  230. }
  231. export default withTheme(ProximoMainScreen);