Browse Source

Display message when no internet or no data yet in lists

keplyx 4 years ago
parent
commit
0201b9a389

+ 1
- 1
components/CustomMaterialIcon.js View File

@@ -9,7 +9,7 @@ type Props = {
9 9
     icon: string,
10 10
     color: ?string,
11 11
     fontSize: number,
12
-    width: number,
12
+    width: number|string,
13 13
 }
14 14
 
15 15
 /**

+ 63
- 3
components/FetchedDataSectionList.js View File

@@ -2,10 +2,12 @@
2 2
 
3 3
 import * as React from 'react';
4 4
 import WebDataManager from "../utils/WebDataManager";
5
-import {Container, Tab, TabHeading, Tabs, Text} from "native-base";
5
+import {Container, H3, Tab, TabHeading, Tabs, Text} from "native-base";
6 6
 import CustomHeader from "./CustomHeader";
7 7
 import {RefreshControl, SectionList, View} from "react-native";
8 8
 import CustomMaterialIcon from "./CustomMaterialIcon";
9
+import i18n from 'i18n-js';
10
+import ThemeManager from "../utils/ThemeManager";
9 11
 
10 12
 type Props = {
11 13
     navigation: Object,
@@ -69,6 +71,34 @@ export default class FetchedDataSectionList extends React.Component<Props, State
69 71
         return <View/>;
70 72
     }
71 73
 
74
+    getEmptyRenderItem(text: string, icon: string) {
75
+        return (
76
+            <View>
77
+                <View style={{
78
+                    justifyContent: 'center',
79
+                    alignItems: 'center',
80
+                    width: '100%',
81
+                    height: 100,
82
+                    marginBottom: 20
83
+                }}>
84
+                    <CustomMaterialIcon
85
+                        icon={icon}
86
+                        fontSize={100}
87
+                        width={100}
88
+                        color={ThemeManager.getCurrentThemeVariables().fetchedDataSectionListErrorText}/>
89
+                </View>
90
+
91
+                <H3 style={{
92
+                    textAlign: 'center',
93
+                    marginRight: 20,
94
+                    marginLeft: 20,
95
+                    color: ThemeManager.getCurrentThemeVariables().fetchedDataSectionListErrorText
96
+                }}>
97
+                    {text}
98
+                </H3>
99
+            </View>);
100
+    }
101
+
72 102
     /**
73 103
      * Create the dataset to be used in the list from the data fetched
74 104
      * @param fetchedData {Object}
@@ -78,11 +108,33 @@ export default class FetchedDataSectionList extends React.Component<Props, State
78 108
         return [];
79 109
     }
80 110
 
111
+    createEmptyDataset() {
112
+        return [
113
+            {
114
+                title: '',
115
+                data: [
116
+                    {
117
+                        text: this.state.refreshing ?
118
+                            i18n.t('general.loading') :
119
+                            i18n.t('general.networkError'),
120
+                        icon: this.state.refreshing ?
121
+                            'refresh' :
122
+                            'access-point-network-off'
123
+                    }
124
+                ],
125
+                keyExtractor: (item: Object) => item.text,
126
+            }
127
+        ];
128
+    }
129
+
81 130
     hasTabs() {
82 131
         return false;
83 132
     }
84 133
 
85 134
     getSectionList(dataset: Array<Object>) {
135
+        let isEmpty = dataset[0].data.length === 0;
136
+        if (isEmpty)
137
+            dataset = this.createEmptyDataset();
86 138
         return (
87 139
             <SectionList
88 140
                 sections={dataset}
@@ -93,12 +145,20 @@ export default class FetchedDataSectionList extends React.Component<Props, State
93 145
                     />
94 146
                 }
95 147
                 renderSectionHeader={({section: {title}}) =>
96
-                    this.getRenderSectionHeader(title)
148
+                    isEmpty ?
149
+                        <View/> :
150
+                        this.getRenderSectionHeader(title)
97 151
                 }
98 152
                 renderItem={({item, section}) =>
99
-                    this.getRenderItem(item, section, dataset)
153
+                    isEmpty ?
154
+                        this.getEmptyRenderItem(item.text, item.icon) :
155
+                        this.getRenderItem(item, section, dataset)
100 156
                 }
101 157
                 style={{minHeight: 300, width: '100%'}}
158
+                contentContainerStyle={
159
+                    isEmpty ?
160
+                        {flexGrow: 1, justifyContent: 'center', alignItems: 'center'} : {}
161
+                }
102 162
             />
103 163
         );
104 164
     }

+ 1
- 0
native-base-theme/variables/platform.js View File

@@ -258,6 +258,7 @@ export default {
258 258
 
259 259
   // CUSTOM
260 260
   customMaterialIconColor: "#5d5d5d",
261
+  fetchedDataSectionListErrorText : "#898989",
261 262
 
262 263
   // PROXIWASH
263 264
   proxiwashFinishedColor: "rgba(54,165,22,0.31)",

+ 1
- 0
native-base-theme/variables/platformDark.js View File

@@ -258,6 +258,7 @@ export default {
258 258
 
259 259
     // CUSTOM
260 260
     customMaterialIconColor: "#b3b3b3",
261
+    fetchedDataSectionListErrorText : "#acacac",
261 262
 
262 263
     // PROXIWASH
263 264
     proxiwashFinishedColor: "rgba(12,157,13,0.72)",

+ 0
- 3
screens/ProxiwashScreen.js View File

@@ -87,12 +87,10 @@ export default class ProxiwashScreen extends FetchedDataSectionList {
87 87
     }
88 88
 
89 89
     getDryersKeyExtractor(item: Object) {
90
-        console.log(item !== undefined ? "dryer" + item.number : undefined);
91 90
         return item !== undefined ? "dryer" + item.number : undefined;
92 91
     }
93 92
 
94 93
     getWashersKeyExtractor(item: Object) {
95
-        console.log(item !== undefined ? "washer" + item.number : undefined);
96 94
         return item !== undefined ? "washer" + item.number : undefined;
97 95
     }
98 96
 
@@ -155,7 +153,6 @@ export default class ProxiwashScreen extends FetchedDataSectionList {
155 153
             reminderNotifTime = parseInt(val);
156 154
         else
157 155
             reminderNotifTime = -1;
158
-        console.log(reminderNotifTime);
159 156
         return reminderNotifTime;
160 157
     }
161 158
 

+ 4
- 0
translations/en.json View File

@@ -85,5 +85,9 @@
85 85
       "machineRunningTitle": "Laundry running: {{time}} minutes left",
86 86
       "machineRunningBody": "The machine n°{{number}} is still running"
87 87
     }
88
+  },
89
+  "general": {
90
+    "loading": "Loading...",
91
+    "networkError": "Unable to contact servers. Make sure you are connected to Internet."
88 92
   }
89 93
 }

+ 4
- 0
translations/fr.json View File

@@ -85,5 +85,9 @@
85 85
       "machineRunningTitle": "Machine en cours: {{time}} minutes restantes",
86 86
       "machineRunningBody": "La machine n°{{number}} n'est pas encore terminée"
87 87
     }
88
+  },
89
+  "general": {
90
+    "loading": "Chargement...",
91
+    "networkError": "Impossible de contacter les serveurs. Assurez vous d'être connecté à internet."
88 92
   }
89 93
 }

+ 0
- 1
utils/AsyncStorageManager.js View File

@@ -55,7 +55,6 @@ export default class AsyncStorageManager {
55 55
                 val = this.preferences[key].default;
56 56
             this.preferences[key].current = val;
57 57
         }
58
-        console.log(this.preferences);
59 58
     }
60 59
 
61 60
     savePref(key : string, val : string) {

Loading…
Cancel
Save