From 784872ed962c9e64a66e0ba7a8e9e43a4ee50b6e Mon Sep 17 00:00:00 2001 From: Arnaud Vergnet Date: Fri, 3 Apr 2020 14:28:33 +0200 Subject: [PATCH] Use flatlist empty list render to display errors and loading --- components/Custom/NetworkErrorComponent.js | 1 - components/Lists/EmptyWebSectionListItem.js | 54 ------------- components/Lists/WebSectionList.js | 86 +++++---------------- 3 files changed, 19 insertions(+), 122 deletions(-) delete mode 100644 components/Lists/EmptyWebSectionListItem.js diff --git a/components/Custom/NetworkErrorComponent.js b/components/Custom/NetworkErrorComponent.js index 110e908..ba54d9d 100644 --- a/components/Custom/NetworkErrorComponent.js +++ b/components/Custom/NetworkErrorComponent.js @@ -7,7 +7,6 @@ import {MaterialCommunityIcons} from "@expo/vector-icons"; import i18n from 'i18n-js'; type Props = { - navigation: Object, message: string, icon: string, onRefresh: Function, diff --git a/components/Lists/EmptyWebSectionListItem.js b/components/Lists/EmptyWebSectionListItem.js deleted file mode 100644 index 6e5c988..0000000 --- a/components/Lists/EmptyWebSectionListItem.js +++ /dev/null @@ -1,54 +0,0 @@ -import * as React from 'react'; -import {ActivityIndicator, Subheading, withTheme} from 'react-native-paper'; -import {StyleSheet, View} from "react-native"; -import {MaterialCommunityIcons} from "@expo/vector-icons"; - -/** - * Component used to display a message when a list is empty - * - * @param props Props to pass to the component - * @return {*} - */ -function EmptyWebSectionListItem(props: { text: string, icon: string, refreshing: boolean, theme: {} }) { - const {colors} = props.theme; - return ( - - - {props.refreshing ? - - : - } - - - - {props.text} - - - ); -} - -const styles = StyleSheet.create({ - iconContainer: { - justifyContent: 'center', - alignItems: 'center', - width: '100%', - height: 100, - marginBottom: 20 - }, - subheading: { - textAlign: 'center', - marginRight: 20, - marginLeft: 20, - } -}); - -export default withTheme(EmptyWebSectionListItem); diff --git a/components/Lists/WebSectionList.js b/components/Lists/WebSectionList.js index 4079cd8..af215b5 100644 --- a/components/Lists/WebSectionList.js +++ b/components/Lists/WebSectionList.js @@ -5,7 +5,8 @@ import {readData} from "../../utils/WebData"; import i18n from "i18n-js"; import {Snackbar} from 'react-native-paper'; import {RefreshControl, SectionList, View} from "react-native"; -import EmptyWebSectionListItem from "./EmptyWebSectionListItem"; +import NetworkErrorComponent from "../Custom/NetworkErrorComponent"; +import BasicLoadingScreen from "../Custom/BasicLoadingScreen"; type Props = { navigation: Object, @@ -22,7 +23,7 @@ type Props = { type State = { refreshing: boolean, firstLoading: boolean, - fetchedData: Object, + fetchedData: ?Object, snackbarVisible: boolean }; @@ -48,14 +49,13 @@ export default class WebSectionList extends React.PureComponent { state = { refreshing: false, firstLoading: true, - fetchedData: {}, + fetchedData: undefined, snackbarVisible: false }; onRefresh: Function; onFetchSuccess: Function; onFetchError: Function; - getEmptyRenderItem: Function; getEmptySectionHeader: Function; showSnackBar: Function; hideSnackBar: Function; @@ -66,7 +66,6 @@ export default class WebSectionList extends React.PureComponent { this.onRefresh = this.onRefresh.bind(this); this.onFetchSuccess = this.onFetchSuccess.bind(this); 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); @@ -123,7 +122,7 @@ export default class WebSectionList extends React.PureComponent { */ onFetchError() { this.setState({ - fetchedData: {}, + fetchedData: undefined, refreshing: false, firstLoading: false }); @@ -157,57 +156,6 @@ export default class WebSectionList extends React.PureComponent { return ; } - /** - * Gets an empty render item - * - * @param item The data to display - * @return {*} - */ - getEmptyRenderItem({item}: Object) { - return ( - - ); - } - - /** - * Creates an empty dataset - * - * @return {*} - */ - createEmptyDataset() { - return [ - { - title: '', - data: [ - { - text: this.state.refreshing ? - i18n.t('general.loading') : - i18n.t('general.networkError'), - isSpinner: this.state.refreshing, - icon: this.state.refreshing ? - 'refresh' : - 'access-point-network-off' - } - ], - keyExtractor: this.datasetKeyExtractor, - } - ]; - } - - /** - * Extracts a key from the given item - * - * @param item The item to extract the key from - * @return {string} The extracted key - */ - datasetKeyExtractor(item: Object): string { - return item.text - } - /** * Shows the error popup */ @@ -223,11 +171,10 @@ export default class WebSectionList extends React.PureComponent { } render() { - let dataset = this.props.createDataset(this.state.fetchedData); - const isEmpty = dataset[0].data.length === 0; - const shouldRenderHeader = !isEmpty && (this.props.renderSectionHeader !== null); - if (isEmpty) - dataset = this.createEmptyDataset(); + let dataset = []; + if (this.state.fetchedData !== undefined) + dataset = this.props.createDataset(this.state.fetchedData); + const shouldRenderHeader = this.props.renderSectionHeader !== null; return ( { > {i18n.t("homeScreen.listUpdateFail")} + {/*$FlowFixMe*/} { //$FlowFixMe renderSectionHeader={shouldRenderHeader ? this.props.renderSectionHeader : this.getEmptySectionHeader} //$FlowFixMe - renderItem={isEmpty ? this.getEmptyRenderItem : this.props.renderItem} - style={{minHeight: 300, width: '100%'}} + renderItem={this.props.renderItem} stickySectionHeadersEnabled={this.props.stickyHeader} - contentContainerStyle={ - isEmpty ? - {flexGrow: 1, justifyContent: 'center', alignItems: 'center'} : {} + contentContainerStyle={{minHeight: '100%'}} + style={{minHeight: '100%'}} + ListEmptyComponent={this.state.refreshing + ? + : } />