123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373 |
- /*
- * Copyright (c) 2019 - 2020 Arnaud Vergnet.
- *
- * This file is part of Campus INSAT.
- *
- * Campus INSAT is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * Campus INSAT is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with Campus INSAT. If not, see <https://www.gnu.org/licenses/>.
- */
-
- import React, { useLayoutEffect, useRef, useState } from 'react';
- import { Image, Platform, ScrollView, StyleSheet, View } from 'react-native';
- import i18n from 'i18n-js';
- import {
- RadioButton,
- Searchbar,
- Subheading,
- Text,
- Title,
- useTheme,
- } from 'react-native-paper';
- import { Modalize } from 'react-native-modalize';
- import CustomModal from '../../../components/Overrides/CustomModal';
- import { stringMatchQuery } from '../../../utils/Search';
- import ProximoListItem from '../../../components/Lists/Proximo/ProximoListItem';
- import MaterialHeaderButtons, {
- Item,
- } from '../../../components/Overrides/CustomHeaderButton';
- import type { ProximoArticleType } from './ProximoMainScreen';
- import GENERAL_STYLES from '../../../constants/Styles';
- import { useNavigation } from '@react-navigation/core';
- import Urls from '../../../constants/Urls';
- import WebSectionList, {
- SectionListDataType,
- } from '../../../components/Screens/WebSectionList';
- import { readData } from '../../../utils/WebData';
- import { StackScreenProps } from '@react-navigation/stack';
- import {
- MainRoutes,
- MainStackParamsList,
- } from '../../../navigation/MainNavigator';
- import { useCachedProximoArticles } from '../../../context/cacheContext';
-
- function sortPrice(a: ProximoArticleType, b: ProximoArticleType): number {
- return a.price - b.price;
- }
-
- function sortPriceReverse(
- a: ProximoArticleType,
- b: ProximoArticleType
- ): number {
- return b.price - a.price;
- }
-
- function sortName(a: ProximoArticleType, b: ProximoArticleType): number {
- if (a.name.toLowerCase() < b.name.toLowerCase()) {
- return -1;
- }
- if (a.name.toLowerCase() > b.name.toLowerCase()) {
- return 1;
- }
- return 0;
- }
-
- function sortNameReverse(a: ProximoArticleType, b: ProximoArticleType): number {
- if (a.name.toLowerCase() < b.name.toLowerCase()) {
- return 1;
- }
- if (a.name.toLowerCase() > b.name.toLowerCase()) {
- return -1;
- }
- return 0;
- }
-
- const LIST_ITEM_HEIGHT = 84;
-
- const styles = StyleSheet.create({
- modalContainer: {
- flex: 1,
- padding: 20,
- },
- modalTitleContainer: {
- flexDirection: 'row',
- width: '100%',
- marginTop: 10,
- },
- modalTitle: {
- marginLeft: 'auto',
- },
- modalContent: {
- width: '100%',
- height: 150,
- marginTop: 20,
- marginBottom: 20,
- },
- image: {
- flex: 1,
- resizeMode: 'contain',
- },
- sortTitle: {
- marginBottom: 10,
- },
- });
-
- export type ArticlesType = Array<ProximoArticleType>;
-
- type Props = StackScreenProps<MainStackParamsList, MainRoutes.ProximoList>;
-
- function ProximoListScreen(props: Props) {
- const navigation = useNavigation();
- const theme = useTheme();
- const { articles, setArticles } = useCachedProximoArticles();
- const modalRef = useRef<Modalize>(null);
-
- const [currentSearchString, setCurrentSearchString] = useState('');
- const [currentSortMode, setCurrentSortMode] = useState(2);
- const [modalCurrentDisplayItem, setModalCurrentDisplayItem] = useState<
- React.ReactChild | undefined
- >();
-
- const sortModes = [sortPrice, sortPriceReverse, sortName, sortNameReverse];
-
- useLayoutEffect(() => {
- navigation.setOptions({
- headerRight: getSortMenuButton,
- headerTitle: getSearchBar,
- headerBackTitleVisible: false,
- headerTitleContainerStyle:
- Platform.OS === 'ios'
- ? { marginHorizontal: 0, width: '70%' }
- : { marginHorizontal: 0, right: 50, left: 50 },
- });
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [navigation, currentSortMode]);
-
- /**
- * Callback used when clicking on the sort menu button.
- * It will open the modal to show a sort selection
- */
- const onSortMenuPress = () => {
- setModalCurrentDisplayItem(getModalSortMenu());
- if (modalRef.current) {
- modalRef.current.open();
- }
- };
-
- /**
- * Callback used when clicking an article in the list.
- * It opens the modal to show detailed information about the article
- *
- * @param item The article pressed
- */
- const onListItemPress = (item: ProximoArticleType) => {
- setModalCurrentDisplayItem(getModalItemContent(item));
- if (modalRef.current) {
- modalRef.current.open();
- }
- };
-
- /**
- * Sets the current sort mode.
- *
- * @param mode The number representing the mode
- */
- const setSortMode = (mode: string) => {
- const currentMode = parseInt(mode, 10);
- setCurrentSortMode(currentMode);
- if (modalRef.current && currentMode !== currentSortMode) {
- modalRef.current.close();
- }
- };
-
- /**
- * Gets a color depending on the quantity available
- *
- * @param availableStock The quantity available
- * @return
- */
- const getStockColor = (availableStock: number): string => {
- let color: string;
- if (availableStock > 3) {
- color = theme.colors.success;
- } else if (availableStock > 0) {
- color = theme.colors.warning;
- } else {
- color = theme.colors.danger;
- }
- return color;
- };
-
- /**
- * Gets the sort menu header button
- *
- * @return {*}
- */
- const getSortMenuButton = () => {
- return (
- <MaterialHeaderButtons>
- <Item title="main" iconName="sort" onPress={onSortMenuPress} />
- </MaterialHeaderButtons>
- );
- };
-
- /**
- * Gets the header search bar
- *
- * @return {*}
- */
- const getSearchBar = () => {
- return (
- // @ts-ignore
- <Searchbar
- placeholder={i18n.t('screens.proximo.search')}
- onChangeText={setCurrentSearchString}
- autoFocus={props.route.params.shouldFocusSearchBar}
- />
- );
- };
-
- /**
- * Gets the modal content depending on the given article
- *
- * @param item The article to display
- * @return {*}
- */
- const getModalItemContent = (item: ProximoArticleType) => {
- return (
- <View style={styles.modalContainer}>
- <Title>{item.name}</Title>
- <View style={styles.modalTitleContainer}>
- <Subheading
- style={{
- color: getStockColor(item.quantity),
- }}
- >
- {`${item.quantity} ${i18n.t('screens.proximo.inStock')}`}
- </Subheading>
- <Subheading style={styles.modalTitle}>
- {item.price.toFixed(2)}€
- </Subheading>
- </View>
-
- <ScrollView>
- <View style={styles.modalContent}>
- <Image
- style={styles.image}
- source={{ uri: Urls.proximo.images + item.image }}
- />
- </View>
- <Text>{item.description}</Text>
- </ScrollView>
- </View>
- );
- };
-
- /**
- * Gets the modal content to display a sort menu
- *
- * @return {*}
- */
- const getModalSortMenu = () => {
- return (
- <View style={styles.modalContainer}>
- <Title style={styles.sortTitle}>
- {i18n.t('screens.proximo.sortOrder')}
- </Title>
- <RadioButton.Group
- onValueChange={setSortMode}
- value={currentSortMode.toString()}
- >
- <RadioButton.Item
- label={i18n.t('screens.proximo.sortPrice')}
- value={'0'}
- />
- <RadioButton.Item
- label={i18n.t('screens.proximo.sortPriceReverse')}
- value={'1'}
- />
- <RadioButton.Item
- label={i18n.t('screens.proximo.sortName')}
- value={'2'}
- />
- <RadioButton.Item
- label={i18n.t('screens.proximo.sortNameReverse')}
- value={'3'}
- />
- </RadioButton.Group>
- </View>
- );
- };
-
- /**
- * Gets a render item for the given article
- *
- * @param item The article to render
- * @return {*}
- */
- const getRenderItem = ({ item }: { item: ProximoArticleType }) => {
- if (stringMatchQuery(item.name, currentSearchString)) {
- const onPress = () => {
- onListItemPress(item);
- };
- const color = getStockColor(item.quantity);
- return (
- <ProximoListItem
- item={item}
- onPress={onPress}
- color={color}
- height={LIST_ITEM_HEIGHT}
- />
- );
- }
- return null;
- };
-
- /**
- * Extracts a key for the given article
- *
- * @param item The article to extract the key from
- * @return {string} The extracted key
- */
- const keyExtractor = (item: ProximoArticleType): string =>
- item.name + item.code;
-
- const createDataset = (
- data: ArticlesType | undefined
- ): SectionListDataType<ProximoArticleType> => {
- if (data) {
- return [
- {
- title: '',
- data: data
- .filter(
- (d) =>
- props.route.params.category === -1 ||
- props.route.params.category === d.category_id
- )
- .sort(sortModes[currentSortMode]),
- keyExtractor: keyExtractor,
- },
- ];
- } else {
- return [];
- }
- };
-
- return (
- <View style={GENERAL_STYLES.flex}>
- <CustomModal ref={modalRef}>{modalCurrentDisplayItem}</CustomModal>
- <WebSectionList
- request={() => readData<ArticlesType>(Urls.proximo.articles)}
- createDataset={createDataset}
- refreshOnFocus={true}
- renderItem={getRenderItem}
- extraData={currentSearchString + currentSortMode}
- itemHeight={LIST_ITEM_HEIGHT}
- cache={articles}
- onCacheUpdate={setArticles}
- />
- </View>
- );
- }
-
- export default ProximoListScreen;
|