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

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