From 38ada0c0276f4fd92e1da9af7269f91c2e39a6fb Mon Sep 17 00:00:00 2001 From: keplyx Date: Sat, 7 Mar 2020 09:15:25 +0100 Subject: [PATCH] Improved layout --- components/WebSectionList.js | 71 +++++++++++++++++++--------- screens/HomeScreen.js | 3 +- screens/Proximo/ProximoListScreen.js | 2 +- screens/Proximo/ProximoMainScreen.js | 3 +- screens/Proxiwash/ProxiwashScreen.js | 18 +++++-- screens/SelfMenuScreen.js | 17 +------ 6 files changed, 69 insertions(+), 45 deletions(-) diff --git a/components/WebSectionList.js b/components/WebSectionList.js index 497b33e..90dc594 100644 --- a/components/WebSectionList.js +++ b/components/WebSectionList.js @@ -5,7 +5,7 @@ import ThemeManager from '../utils/ThemeManager'; import WebDataManager from "../utils/WebDataManager"; import {MaterialCommunityIcons} from "@expo/vector-icons"; import i18n from "i18n-js"; -import {ActivityIndicator, Subheading} from 'react-native-paper'; +import {ActivityIndicator, Snackbar, Subheading} from 'react-native-paper'; import {RefreshControl, SectionList, View} from "react-native"; type Props = { @@ -16,13 +16,13 @@ type Props = { renderSectionHeader: React.Node, stickyHeader: boolean, createDataset: Function, - updateErrorText: string, } type State = { refreshing: boolean, firstLoading: boolean, fetchedData: Object, + snackbarVisible: boolean }; /** @@ -37,7 +37,7 @@ type State = { export default class WebSectionList extends React.Component { static defaultProps = { - renderSectionHeader: undefined, + renderSectionHeader: null, stickyHeader: false, }; @@ -50,6 +50,7 @@ export default class WebSectionList extends React.Component { refreshing: false, firstLoading: true, fetchedData: {}, + snackbarVisible: false }; onRefresh: Function; @@ -57,6 +58,8 @@ export default class WebSectionList extends React.Component { onFetchError: Function; getEmptyRenderItem: Function; getEmptySectionHeader: Function; + showSnackBar: Function; + hideSnackBar: Function; constructor() { super(); @@ -66,6 +69,8 @@ export default class WebSectionList extends React.Component { this.onFetchError = this.onFetchError.bind(this); this.getEmptyRenderItem = this.getEmptyRenderItem.bind(this); this.getEmptySectionHeader = this.getEmptySectionHeader.bind(this); + this.showSnackBar = this.showSnackBar.bind(this); + this.hideSnackBar = this.hideSnackBar.bind(this); } /** @@ -112,7 +117,8 @@ export default class WebSectionList extends React.Component { refreshing: false, firstLoading: false }); - this.webDataManager.showUpdateToast(this.props.updateErrorText); + this.showSnackBar(); + // this.webDataManager.showUpdateToast(this.props.updateErrorText); } /** @@ -194,30 +200,51 @@ export default class WebSectionList extends React.Component { return item.text } + showSnackBar() { + this.setState({snackbarVisible: true}) + } + + hideSnackBar() { + this.setState({snackbarVisible: false}) + } + render() { let dataset = this.props.createDataset(this.state.fetchedData); const isEmpty = dataset[0].data.length === 0; - const shouldRenderHeader = isEmpty || (this.props.renderSectionHeader !== undefined); + const shouldRenderHeader = !isEmpty || (this.props.renderSectionHeader !== null); if (isEmpty) dataset = this.createEmptyDataset(); return ( - - } - renderSectionHeader={shouldRenderHeader ? this.getEmptySectionHeader : this.props.renderSectionHeader} - renderItem={isEmpty ? this.getEmptyRenderItem : this.props.renderItem} - style={{minHeight: 300, width: '100%'}} - stickySectionHeadersEnabled={this.props.stickyHeader} - contentContainerStyle={ - isEmpty ? - {flexGrow: 1, justifyContent: 'center', alignItems: 'center'} : {} - } - /> + + + {i18n.t("homeScreen.listUpdateFail")} + + + } + renderSectionHeader={shouldRenderHeader ? this.props.renderSectionHeader : this.getEmptySectionHeader} + renderItem={isEmpty ? this.getEmptyRenderItem : this.props.renderItem} + style={{minHeight: 300, width: '100%'}} + stickySectionHeadersEnabled={this.props.stickyHeader} + contentContainerStyle={ + isEmpty ? + {flexGrow: 1, justifyContent: 'center', alignItems: 'center'} : {} + } + /> + ); } } diff --git a/screens/HomeScreen.js b/screens/HomeScreen.js index 563ab1f..3ac0274 100644 --- a/screens/HomeScreen.js +++ b/screens/HomeScreen.js @@ -552,8 +552,7 @@ export default class HomeScreen extends React.Component { navigation={nav} refreshTime={REFRESH_TIME} fetchUrl={DATA_URL} - renderItem={this.getRenderItem} - updateErrorText={i18n.t("homeScreen.listUpdateFail")}/> + renderItem={this.getRenderItem}/> ); } } diff --git a/screens/Proximo/ProximoListScreen.js b/screens/Proximo/ProximoListScreen.js index 3a9b5a9..b1bcc72 100644 --- a/screens/Proximo/ProximoListScreen.js +++ b/screens/Proximo/ProximoListScreen.js @@ -327,7 +327,7 @@ export default class ProximoListScreen extends React.Component { description={item.quantity + ' ' + i18n.t('proximoScreen.inStock')} descriptionStyle={{color: this.getStockColor(parseInt(item.quantity))}} onPress={onPress} - left={props => } + left={props => } right={props => {item.price}€ diff --git a/screens/Proximo/ProximoMainScreen.js b/screens/Proximo/ProximoMainScreen.js index eaf7b5c..ece17df 100644 --- a/screens/Proximo/ProximoMainScreen.js +++ b/screens/Proximo/ProximoMainScreen.js @@ -205,8 +205,7 @@ export default class ProximoMainScreen extends React.Component { navigation={nav} refreshTime={0} fetchUrl={DATA_URL} - renderItem={this.getRenderItem} - updateErrorText={i18n.t("homeScreen.listUpdateFail")}/> + renderItem={this.getRenderItem}/> ); } } diff --git a/screens/Proxiwash/ProxiwashScreen.js b/screens/Proxiwash/ProxiwashScreen.js index 8477b9f..e409547 100644 --- a/screens/Proxiwash/ProxiwashScreen.js +++ b/screens/Proxiwash/ProxiwashScreen.js @@ -8,7 +8,7 @@ import WebSectionList from "../../components/WebSectionList"; import NotificationsManager from "../../utils/NotificationsManager"; import AsyncStorageManager from "../../utils/AsyncStorageManager"; import * as Expo from "expo"; -import {Divider, IconButton, List, Text} from 'react-native-paper'; +import {Divider, IconButton, List, Text, Title} from 'react-native-paper'; const DATA_URL = "https://etud.insa-toulouse.fr/~amicale_app/washinsa/washinsa.json"; @@ -47,6 +47,7 @@ export default class ProxiwashScreen extends React.Component { onAboutPress: Function; getRenderItem: Function; + getRenderSectionHeader: Function; createDataset: Function; state = { @@ -88,9 +89,9 @@ export default class ProxiwashScreen extends React.Component { stateIcons[MACHINE_STATES.ERREUR] = 'alert'; // let dataString = AsyncStorageManager.getInstance().preferences.proxiwashWatchedMachines.current; - // this.setMinTimeRefresh(30); this.onAboutPress = this.onAboutPress.bind(this); this.getRenderItem = this.getRenderItem.bind(this); + this.getRenderSectionHeader = this.getRenderSectionHeader.bind(this); this.createDataset = this.createDataset.bind(this); } @@ -303,7 +304,18 @@ export default class ProxiwashScreen extends React.Component { refreshTime={REFRESH_TIME} fetchUrl={DATA_URL} renderItem={this.getRenderItem} - updateErrorText={i18n.t("proxiwashScreen.listUpdateFail")}/> + renderSectionHeader={this.getRenderSectionHeader}/> + ); + } + + getRenderSectionHeader({section}: Object) { + return ( + + {section.title} + ); } diff --git a/screens/SelfMenuScreen.js b/screens/SelfMenuScreen.js index 226e108..4e15f8b 100644 --- a/screens/SelfMenuScreen.js +++ b/screens/SelfMenuScreen.js @@ -95,19 +95,7 @@ export default class SelfMenuScreen extends React.Component { getRenderSectionHeader({section}: Object) { return ( - - {section.title} - + {section.title} ); } @@ -119,7 +107,7 @@ export default class SelfMenuScreen extends React.Component { }}> + /> { fetchUrl={DATA_URL} renderItem={this.getRenderItem} renderSectionHeader={this.getRenderSectionHeader} - updateErrorText={i18n.t("homeScreen.listUpdateFail")} stickyHeader={true}/> ); }