Improved layout

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<Props, State> {
 
     static defaultProps = {
-        renderSectionHeader: undefined,
+        renderSectionHeader: null,
         stickyHeader: false,
     };
 
@@ -50,6 +50,7 @@ export default class WebSectionList extends React.Component<Props, State> {
         refreshing: false,
         firstLoading: true,
         fetchedData: {},
+        snackbarVisible: false
     };
 
     onRefresh: Function;
@@ -57,6 +58,8 @@ export default class WebSectionList extends React.Component<Props, State> {
     onFetchError: Function;
     getEmptyRenderItem: Function;
     getEmptySectionHeader: Function;
+    showSnackBar: Function;
+    hideSnackBar: Function;
 
     constructor() {
         super();
@@ -66,6 +69,8 @@ export default class WebSectionList extends React.Component<Props, State> {
         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<Props, State> {
             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<Props, State> {
         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 (
-            <SectionList
+            <View>
-                sections={dataset}
+                <Snackbar
-                refreshControl={
+                    visible={this.state.snackbarVisible}
-                    <RefreshControl
+                    onDismiss={this.hideSnackBar}
-                        refreshing={this.state.refreshing}
+                    action={{
-                        onRefresh={this.onRefresh}
+                        label: 'OK',
-                    />
+                        onPress: this.hideSnackBar,
-                }
+                    }}
-                renderSectionHeader={shouldRenderHeader ? this.getEmptySectionHeader : this.props.renderSectionHeader}
+                    duration={4000}
-                renderItem={isEmpty ? this.getEmptyRenderItem : this.props.renderItem}
+                >
-                style={{minHeight: 300, width: '100%'}}
+                    {i18n.t("homeScreen.listUpdateFail")}
-                stickySectionHeadersEnabled={this.props.stickyHeader}
+                </Snackbar>
-                contentContainerStyle={
+                <SectionList
-                    isEmpty ?
+                    sections={dataset}
-                        {flexGrow: 1, justifyContent: 'center', alignItems: 'center'} : {}
+                    refreshControl={
-                }
+                        <RefreshControl
-            />
+                            refreshing={this.state.refreshing}
+                            onRefresh={this.onRefresh}
+                        />
+                    }
+                    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'} : {}
+                    }
+                />
+            </View>
         );
     }
 }

screens/HomeScreen.js

@@ -552,8 +552,7 @@ export default class HomeScreen extends React.Component<Props> {
                 navigation={nav}
                 refreshTime={REFRESH_TIME}
                 fetchUrl={DATA_URL}
-                renderItem={this.getRenderItem}
+                renderItem={this.getRenderItem}/>
-                updateErrorText={i18n.t("homeScreen.listUpdateFail")}/>
         );
     }
 }

screens/Proximo/ProximoListScreen.js

@@ -327,7 +327,7 @@ export default class ProximoListScreen extends React.Component<Props, State> {
                 description={item.quantity + ' ' + i18n.t('proximoScreen.inStock')}
                 descriptionStyle={{color: this.getStockColor(parseInt(item.quantity))}}
                 onPress={onPress}
-                left={props => <Avatar.Image size={64} source={{uri: item.image}}/>}
+                left={props => <Avatar.Image style={{backgroundColor: 'transparent'}} size={64} source={{uri: item.image}}/>}
                 right={props =>
                     <Text style={{fontWeight: "bold"}}>
                         {item.price}€

screens/Proximo/ProximoMainScreen.js

@@ -205,8 +205,7 @@ export default class ProximoMainScreen extends React.Component<Props, State> {
                 navigation={nav}
                 refreshTime={0}
                 fetchUrl={DATA_URL}
-                renderItem={this.getRenderItem}
+                renderItem={this.getRenderItem}/>
-                updateErrorText={i18n.t("homeScreen.listUpdateFail")}/>
         );
     }
 }

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<Props, State> {
 
     onAboutPress: Function;
     getRenderItem: Function;
+    getRenderSectionHeader: Function;
     createDataset: Function;
 
     state = {
@@ -88,9 +89,9 @@ export default class ProxiwashScreen extends React.Component<Props, State> {
         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<Props, State> {
                 refreshTime={REFRESH_TIME}
                 fetchUrl={DATA_URL}
                 renderItem={this.getRenderItem}
-                updateErrorText={i18n.t("proxiwashScreen.listUpdateFail")}/>
+                renderSectionHeader={this.getRenderSectionHeader}/>
+        );
+    }
+
+    getRenderSectionHeader({section}: Object) {
+        return (
+            <Title style={{
+                marginTop: 10,
+                textAlign: 'center'
+            }}>
+                {section.title}
+            </Title>
         );
     }
 

screens/SelfMenuScreen.js

@@ -95,19 +95,7 @@ export default class SelfMenuScreen extends React.Component<Props> {
 
     getRenderSectionHeader({section}: Object) {
         return (
-            <Card style={{
+            <Title>{section.title}</Title>
-                marginLeft: 10,
-                marginRight: 10,
-                marginTop: 10,
-                marginBottom: 10,
-                borderRadius: 50
-            }}>
-                <Title style={{
-                    textAlign: 'center',
-                    marginTop: 10,
-                    marginBottom: 10
-                }}>{section.title}</Title>
-            </Card>
         );
     }
 
@@ -119,7 +107,7 @@ export default class SelfMenuScreen extends React.Component<Props> {
             }}>
                     <Card.Title
                         title={item.name}
-                        titleStyle={{textAlign: 'center'}}/>
+                    />
                     <View style={{
                         width: '80%',
                         marginLeft: 'auto',
@@ -159,7 +147,6 @@ export default class SelfMenuScreen extends React.Component<Props> {
                 fetchUrl={DATA_URL}
                 renderItem={this.getRenderItem}
                 renderSectionHeader={this.getRenderSectionHeader}
-                updateErrorText={i18n.t("homeScreen.listUpdateFail")}
                 stickyHeader={true}/>
         );
     }