application-amicale/components/FetchedDataSectionList.js

247 lines
7.1 KiB
JavaScript
Raw Normal View History

// @flow
import * as React from 'react';
import WebDataManager from "../utils/WebDataManager";
import {Container, H3, Tab, TabHeading, Tabs, Text} from "native-base";
import CustomHeader from "./CustomHeader";
import {RefreshControl, SectionList, View} from "react-native";
import CustomMaterialIcon from "./CustomMaterialIcon";
import i18n from 'i18n-js';
import ThemeManager from "../utils/ThemeManager";
type Props = {
navigation: Object,
}
type State = {
refreshing: boolean,
firstLoading: boolean,
fetchedData: Object,
machinesWatched: Array<Object>,
};
export default class FetchedDataSectionList extends React.Component<Props, State> {
webDataManager: WebDataManager;
willFocusSubscription : function;
willBlurSubscription : function;
refreshInterval: IntervalID;
constructor(fetchUrl: string, refreshTime : number) {
super();
this.webDataManager = new WebDataManager(fetchUrl);
this.refreshTime = refreshTime;
}
state = {
refreshing: false,
firstLoading: true,
fetchedData: {},
machinesWatched: [],
};
getHeaderTranslation() {
return "Header";
}
getUpdateToastTranslations() {
return ["whoa", "nah"];
}
/**
* Refresh the FetchedData on first screen load
*/
componentDidMount() {
this.willFocusSubscription = this.props.navigation.addListener(
'willFocus',
payload => {
this.onScreenFocus();
}
);
this.willBlurSubscription = this.props.navigation.addListener(
'willBlur',
payload => {
this.onScreenBlur();
}
);
}
onScreenFocus() {
this._onRefresh();
if (this.refreshTime > 0)
this.refreshInterval = setInterval(() => this._onRefresh(), this.refreshTime)
}
onScreenBlur() {
clearInterval(this.refreshInterval);
}
componentWillUnmount() {
this.willBlurSubscription.remove();
this.willFocusSubscription.remove();
}
_onRefresh = () => {
console.log('refresh');
this.setState({refreshing: true});
this.webDataManager.readData().then((fetchedData) => {
this.setState({
fetchedData: fetchedData,
refreshing: false,
firstLoading: false
});
this.webDataManager.showUpdateToast(this.getUpdateToastTranslations()[0], this.getUpdateToastTranslations()[1]);
});
};
getRenderItem(item: Object, section: Object, data: Object) {
return <View/>;
}
getRenderSectionHeader(title: String) {
return <View/>;
}
getEmptyRenderItem(text: string, icon: string) {
return (
<View>
<View style={{
justifyContent: 'center',
alignItems: 'center',
width: '100%',
height: 100,
marginBottom: 20
}}>
<CustomMaterialIcon
icon={icon}
fontSize={100}
width={100}
color={ThemeManager.getCurrentThemeVariables().fetchedDataSectionListErrorText}/>
</View>
<H3 style={{
textAlign: 'center',
marginRight: 20,
marginLeft: 20,
color: ThemeManager.getCurrentThemeVariables().fetchedDataSectionListErrorText
}}>
{text}
</H3>
</View>);
}
/**
* Create the dataset to be used in the list from the data fetched
* @param fetchedData {Object}
* @return {Array}
*/
createDataset(fetchedData: Object): Array<Object> {
return [];
}
createEmptyDataset() {
return [
{
title: '',
data: [
{
text: this.state.refreshing ?
i18n.t('general.loading') :
i18n.t('general.networkError'),
icon: this.state.refreshing ?
'refresh' :
'access-point-network-off'
}
],
keyExtractor: (item: Object) => item.text,
}
];
}
hasTabs() {
return false;
}
getSectionList(dataset: Array<Object>) {
let isEmpty = dataset[0].data.length === 0;
if (isEmpty)
dataset = this.createEmptyDataset();
return (
<SectionList
sections={dataset}
refreshControl={
<RefreshControl
refreshing={this.state.refreshing}
onRefresh={this._onRefresh}
/>
}
renderSectionHeader={({section: {title}}) =>
isEmpty ?
<View/> :
this.getRenderSectionHeader(title)
}
renderItem={({item, section}) =>
isEmpty ?
this.getEmptyRenderItem(item.text, item.icon) :
this.getRenderItem(item, section, dataset)
}
style={{minHeight: 300, width: '100%'}}
contentContainerStyle={
isEmpty ?
{flexGrow: 1, justifyContent: 'center', alignItems: 'center'} : {}
}
/>
);
}
getTabbedView(dataset: Array<Object>) {
let tabbedView = [];
for (let i = 0; i < dataset.length; i++) {
tabbedView.push(
<Tab heading={
<TabHeading>
<CustomMaterialIcon icon={dataset[i].icon}
color={'#fff'}
fontSize={20}
/>
<Text>{dataset[i].title}</Text>
</TabHeading>}
key={dataset[i].title}>
{this.getSectionList(
[
{
title: dataset[i].title,
data: dataset[i].data,
extraData: dataset[i].extraData,
keyExtractor: dataset[i].keyExtractor
}
]
)}
</Tab>);
}
return tabbedView;
}
render() {
const nav = this.props.navigation;
const dataset = this.createDataset(this.state.fetchedData);
return (
<Container>
<CustomHeader navigation={nav} title={this.getHeaderTranslation()}/>
{this.hasTabs() ?
<Tabs>
{this.getTabbedView(dataset)}
</Tabs>
:
this.getSectionList(dataset)
}
</Container>
);
}
}