123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314 |
- /*
- * 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 * as React from 'react';
- import i18n from 'i18n-js';
- import {Snackbar} from 'react-native-paper';
- import {
- NativeSyntheticEvent,
- RefreshControl,
- SectionListData,
- View,
- } from 'react-native';
- import * as Animatable from 'react-native-animatable';
- import {Collapsible} from 'react-navigation-collapsible';
- import {StackNavigationProp} from '@react-navigation/stack';
- import ErrorView from './ErrorView';
- import BasicLoadingScreen from './BasicLoadingScreen';
- import withCollapsible from '../../utils/withCollapsible';
- import CustomTabBar from '../Tabbar/CustomTabBar';
- import {ERROR_TYPE, readData} from '../../utils/WebData';
- import CollapsibleSectionList from '../Collapsible/CollapsibleSectionList';
-
- export type SectionListDataType<ItemT> = Array<{
- title: string;
- data: Array<ItemT>;
- keyExtractor?: (data: ItemT) => string;
- }>;
-
- type PropsType<ItemT, RawData> = {
- navigation: StackNavigationProp<any>;
- fetchUrl: string;
- autoRefreshTime: number;
- refreshOnFocus: boolean;
- renderItem: (data: {item: ItemT}) => React.ReactNode;
- createDataset: (
- data: RawData | null,
- isLoading?: boolean,
- ) => SectionListDataType<ItemT>;
- onScroll: (event: NativeSyntheticEvent<EventTarget>) => void;
- collapsibleStack: Collapsible;
-
- showError?: boolean;
- itemHeight?: number | null;
- updateData?: number;
- renderListHeaderComponent?: (
- data: RawData | null,
- ) => React.ComponentType<any> | React.ReactElement | null;
- renderSectionHeader?: (
- data: {section: SectionListData<ItemT>},
- isLoading?: boolean,
- ) => React.ReactElement | null;
- stickyHeader?: boolean;
- };
-
- type StateType<RawData> = {
- refreshing: boolean;
- fetchedData: RawData | null;
- snackbarVisible: boolean;
- };
-
- const MIN_REFRESH_TIME = 5 * 1000;
-
- /**
- * Component used to render a SectionList with data fetched from the web
- *
- * This is a pure component, meaning it will only update if a shallow comparison of state and props is different.
- * To force the component to update, change the value of updateData.
- */
- class WebSectionList<ItemT, RawData> extends React.PureComponent<
- PropsType<ItemT, RawData>,
- StateType<RawData>
- > {
- static defaultProps = {
- showError: true,
- itemHeight: null,
- updateData: 0,
- renderListHeaderComponent: () => null,
- renderSectionHeader: () => null,
- stickyHeader: false,
- };
-
- refreshInterval: NodeJS.Timeout | undefined;
-
- lastRefresh: Date | undefined;
-
- constructor(props: PropsType<ItemT, RawData>) {
- super(props);
- this.state = {
- refreshing: false,
- fetchedData: null,
- snackbarVisible: false,
- };
- }
-
- /**
- * Registers react navigation events on first screen load.
- * Allows to detect when the screen is focused
- */
- componentDidMount() {
- const {navigation} = this.props;
- navigation.addListener('focus', this.onScreenFocus);
- navigation.addListener('blur', this.onScreenBlur);
- this.lastRefresh = undefined;
- this.onRefresh();
- }
-
- /**
- * Refreshes data when focusing the screen and setup a refresh interval if asked to
- */
- onScreenFocus = () => {
- const {props} = this;
- if (props.refreshOnFocus && this.lastRefresh) {
- setTimeout(this.onRefresh, 200);
- }
- if (props.autoRefreshTime > 0) {
- this.refreshInterval = setInterval(this.onRefresh, props.autoRefreshTime);
- }
- };
-
- /**
- * Removes any interval on un-focus
- */
- onScreenBlur = () => {
- if (this.refreshInterval) {
- clearInterval(this.refreshInterval);
- }
- };
-
- /**
- * Callback used when fetch is successful.
- * It will update the displayed data and stop the refresh animation
- *
- * @param fetchedData The newly fetched data
- */
- onFetchSuccess = (fetchedData: RawData) => {
- this.setState({
- fetchedData,
- refreshing: false,
- });
- this.lastRefresh = new Date();
- };
-
- /**
- * Callback used when fetch encountered an error.
- * It will reset the displayed data and show an error.
- */
- onFetchError = () => {
- this.setState({
- fetchedData: null,
- refreshing: false,
- });
- this.showSnackBar();
- };
-
- /**
- * Refreshes data and shows an animations while doing it
- */
- onRefresh = () => {
- const {fetchUrl} = this.props;
- let canRefresh;
- if (this.lastRefresh != null) {
- const last = this.lastRefresh;
- canRefresh = new Date().getTime() - last.getTime() > MIN_REFRESH_TIME;
- } else {
- canRefresh = true;
- }
- if (canRefresh) {
- this.setState({refreshing: true});
- readData(fetchUrl).then(this.onFetchSuccess).catch(this.onFetchError);
- }
- };
-
- /**
- * Shows the error popup
- */
- showSnackBar = () => {
- this.setState({snackbarVisible: true});
- };
-
- /**
- * Hides the error popup
- */
- hideSnackBar = () => {
- this.setState({snackbarVisible: false});
- };
-
- getItemLayout = (
- height: number,
- data: Array<SectionListData<ItemT>> | null,
- index: number,
- ): {length: number; offset: number; index: number} => {
- return {
- length: height,
- offset: height * index,
- index,
- };
- };
-
- getRenderSectionHeader = (data: {section: SectionListData<ItemT>}) => {
- const {renderSectionHeader} = this.props;
- const {refreshing} = this.state;
- if (renderSectionHeader != null) {
- return (
- <Animatable.View animation="fadeInUp" duration={500} useNativeDriver>
- {renderSectionHeader(data, refreshing)}
- </Animatable.View>
- );
- }
- return null;
- };
-
- getRenderItem = (data: {item: ItemT}) => {
- const {renderItem} = this.props;
- return (
- <Animatable.View animation="fadeInUp" duration={500} useNativeDriver>
- {renderItem(data)}
- </Animatable.View>
- );
- };
-
- onScroll = (event: NativeSyntheticEvent<EventTarget>) => {
- const {onScroll} = this.props;
- if (onScroll != null) {
- onScroll(event);
- }
- };
-
- render() {
- const {props, state} = this;
- const {itemHeight} = props;
- let dataset: SectionListDataType<ItemT> = [];
- if (
- state.fetchedData != null ||
- (state.fetchedData == null && !props.showError)
- ) {
- dataset = props.createDataset(state.fetchedData, state.refreshing);
- }
-
- const {containerPaddingTop} = props.collapsibleStack;
- return (
- <View>
- <CollapsibleSectionList
- sections={dataset}
- extraData={props.updateData}
- refreshControl={
- <RefreshControl
- progressViewOffset={containerPaddingTop}
- refreshing={state.refreshing}
- onRefresh={this.onRefresh}
- />
- }
- renderSectionHeader={this.getRenderSectionHeader}
- renderItem={this.getRenderItem}
- stickySectionHeadersEnabled={props.stickyHeader}
- style={{minHeight: '100%'}}
- ListHeaderComponent={
- props.renderListHeaderComponent != null
- ? props.renderListHeaderComponent(state.fetchedData)
- : null
- }
- ListEmptyComponent={
- state.refreshing ? (
- <BasicLoadingScreen />
- ) : (
- <ErrorView
- navigation={props.navigation}
- errorCode={ERROR_TYPE.CONNECTION_ERROR}
- onRefresh={this.onRefresh}
- />
- )
- }
- getItemLayout={
- itemHeight
- ? (data, index) => this.getItemLayout(itemHeight, data, index)
- : undefined
- }
- onScroll={this.onScroll}
- hasTab
- />
- <Snackbar
- visible={state.snackbarVisible}
- onDismiss={this.hideSnackBar}
- action={{
- label: 'OK',
- onPress: () => {},
- }}
- duration={4000}
- style={{
- bottom: CustomTabBar.TAB_BAR_HEIGHT,
- }}>
- {i18n.t('general.listUpdateFail')}
- </Snackbar>
- </View>
- );
- }
- }
-
- export default withCollapsible(WebSectionList);
|