123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211 |
- // @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;
-
- constructor(fetchUrl: string) {
- super();
- this.webDataManager = new WebDataManager(fetchUrl);
- }
-
- state = {
- refreshing: false,
- firstLoading: true,
- fetchedData: {},
- machinesWatched: [],
- };
-
- getHeaderTranslation() {
- return "Header";
- }
-
- getUpdateToastTranslations() {
- return ["whoa", "nah"];
- }
-
- /**
- * Refresh the FetchedData on first screen load
- */
- componentDidMount() {
- this._onRefresh();
- }
-
- _onRefresh = () => {
- 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>
- );
- }
-
- }
|