Browse Source

show proxiwash last updated date

Arnaud Vergnet 2 years ago
parent
commit
360023aea6

+ 1
- 0
locales/en.json View File

40
       "dryers": "Dryers",
40
       "dryers": "Dryers",
41
       "washer": "Washer",
41
       "washer": "Washer",
42
       "washers": "Washers",
42
       "washers": "Washers",
43
+      "updated": "Updated ",
43
       "min": "min",
44
       "min": "min",
44
       "informationTab": "Information",
45
       "informationTab": "Information",
45
       "paymentTab": "Payment",
46
       "paymentTab": "Payment",

+ 1
- 0
locales/fr.json View File

40
       "dryers": "Sèche-Linges",
40
       "dryers": "Sèche-Linges",
41
       "washer": "Lave-Linge",
41
       "washer": "Lave-Linge",
42
       "washers": "Lave-Linges",
42
       "washers": "Lave-Linges",
43
+      "updated": "Mise à jour ",
43
       "min": "min",
44
       "min": "min",
44
       "informationTab": "Informations",
45
       "informationTab": "Informations",
45
       "paymentTab": "Paiement",
46
       "paymentTab": "Paiement",

+ 6
- 2
package-lock.json View File

9576
     "moment": {
9576
     "moment": {
9577
       "version": "2.29.1",
9577
       "version": "2.29.1",
9578
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
9578
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
9579
-      "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==",
9580
-      "optional": true
9579
+      "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ=="
9581
     },
9580
     },
9582
     "ms": {
9581
     "ms": {
9583
       "version": "2.1.1",
9582
       "version": "2.1.1",
10733
       "resolved": "https://registry.npmjs.org/react-native-swipe-gestures/-/react-native-swipe-gestures-1.0.5.tgz",
10732
       "resolved": "https://registry.npmjs.org/react-native-swipe-gestures/-/react-native-swipe-gestures-1.0.5.tgz",
10734
       "integrity": "sha512-Ns7Bn9H/Tyw278+5SQx9oAblDZ7JixyzeOczcBK8dipQk2pD7Djkcfnf1nB/8RErAmMLL9iXgW0QHqiII8AhKw=="
10733
       "integrity": "sha512-Ns7Bn9H/Tyw278+5SQx9oAblDZ7JixyzeOczcBK8dipQk2pD7Djkcfnf1nB/8RErAmMLL9iXgW0QHqiII8AhKw=="
10735
     },
10734
     },
10735
+    "react-native-timeago": {
10736
+      "version": "0.5.0",
10737
+      "resolved": "https://registry.npmjs.org/react-native-timeago/-/react-native-timeago-0.5.0.tgz",
10738
+      "integrity": "sha512-GYrV36FK8ttkl7BIAdh77OlYLYGIKLGNviJqzPUtKaO8ANEtI8ph7UkSTRv9oMKfvDnA5VKV9hVX7GtYoAztRg=="
10739
+    },
10736
     "react-native-vector-icons": {
10740
     "react-native-vector-icons": {
10737
       "version": "8.1.0",
10741
       "version": "8.1.0",
10738
       "resolved": "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-8.1.0.tgz",
10742
       "resolved": "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-8.1.0.tgz",

+ 2
- 0
package.json View File

28
     "@react-navigation/native": "5.9.4",
28
     "@react-navigation/native": "5.9.4",
29
     "@react-navigation/stack": "5.14.4",
29
     "@react-navigation/stack": "5.14.4",
30
     "i18n-js": "3.8.0",
30
     "i18n-js": "3.8.0",
31
+    "moment": "^2.29.1",
31
     "react": "17.0.1",
32
     "react": "17.0.1",
32
     "react-native": "0.64.1",
33
     "react-native": "0.64.1",
33
     "react-native-animatable": "1.3.3",
34
     "react-native-animatable": "1.3.3",
51
     "react-native-safe-area-context": "3.2.0",
52
     "react-native-safe-area-context": "3.2.0",
52
     "react-native-screens": "3.1.1",
53
     "react-native-screens": "3.1.1",
53
     "react-native-splash-screen": "3.2.0",
54
     "react-native-splash-screen": "3.2.0",
55
+    "react-native-timeago": "^0.5.0",
54
     "react-native-vector-icons": "8.1.0",
56
     "react-native-vector-icons": "8.1.0",
55
     "react-native-webview": "11.4.3",
57
     "react-native-webview": "11.4.3",
56
     "react-navigation-collapsible": "5.9.1",
58
     "react-navigation-collapsible": "5.9.1",

+ 43
- 0
src/components/Lists/Proximo/ProximoListHeader.tsx View File

1
+import React from 'react';
2
+import { StyleSheet } from 'react-native';
3
+import { Card, Text } from 'react-native-paper';
4
+import TimeAgo from 'react-native-timeago';
5
+import i18n from 'i18n-js';
6
+
7
+let moment = require('moment'); //load moment module to set local language
8
+require('moment/locale/fr'); // import moment local language file during the application build
9
+moment.locale('fr');
10
+
11
+type Props = {
12
+  date?: Date;
13
+  selectedWash: 'tripodeB' | 'washinsa';
14
+};
15
+
16
+const styles = StyleSheet.create({
17
+  card: { marginHorizontal: 5 },
18
+});
19
+
20
+function ProximoListHeader(props: Props) {
21
+  const { date, selectedWash } = props;
22
+  let title = i18n.t('screens.proxiwash.washinsa.title');
23
+  if (selectedWash === 'tripodeB') {
24
+    title = i18n.t('screens.proxiwash.tripodeB.title');
25
+  }
26
+  return (
27
+    <Card style={styles.card}>
28
+      <Card.Title
29
+        title={title}
30
+        subtitle={
31
+          date ? (
32
+            <Text>
33
+              {i18n.t('screens.proxiwash.updated')}
34
+              <TimeAgo time={date} interval={2000} />
35
+            </Text>
36
+          ) : null
37
+        }
38
+      />
39
+    </Card>
40
+  );
41
+}
42
+
43
+export default ProximoListHeader;

+ 23
- 8
src/components/Screens/WebSectionList.tsx View File

61
   > & {
61
   > & {
62
     createDataset: (
62
     createDataset: (
63
       data: RawData | undefined,
63
       data: RawData | undefined,
64
-      isLoading: boolean
64
+      loading: boolean,
65
+      refreshData: (newRequest?: () => Promise<RawData>) => void,
66
+      status: REQUEST_STATUS,
67
+      code?: REQUEST_CODES
65
     ) => SectionListDataType<ItemT>;
68
     ) => SectionListDataType<ItemT>;
66
     renderListHeaderComponent?: (
69
     renderListHeaderComponent?: (
67
-      data?: RawData
70
+      data: RawData | undefined,
71
+      loading: boolean,
72
+      refreshData: (newRequest?: () => Promise<RawData>) => void,
73
+      status: REQUEST_STATUS,
74
+      code?: REQUEST_CODES
68
     ) => React.ComponentType<any> | React.ReactElement | null;
75
     ) => React.ComponentType<any> | React.ReactElement | null;
69
-    renderSectionHeader?: (
70
-      data: { section: SectionListData<ItemT> },
71
-      isLoading: boolean
72
-    ) => React.ReactElement | null;
73
     itemHeight?: number | null;
76
     itemHeight?: number | null;
74
   };
77
   };
75
 
78
 
110
     code?: REQUEST_CODES
113
     code?: REQUEST_CODES
111
   ) => {
114
   ) => {
112
     const { itemHeight } = props;
115
     const { itemHeight } = props;
113
-    const dataset = props.createDataset(data, loading);
116
+    const dataset = props.createDataset(
117
+      data,
118
+      loading,
119
+      refreshData,
120
+      status,
121
+      code
122
+    );
114
     if (!data && !loading) {
123
     if (!data && !loading) {
115
       showSnackBar();
124
       showSnackBar();
116
     }
125
     }
131
         style={styles.container}
140
         style={styles.container}
132
         ListHeaderComponent={
141
         ListHeaderComponent={
133
           props.renderListHeaderComponent != null
142
           props.renderListHeaderComponent != null
134
-            ? props.renderListHeaderComponent(data)
143
+            ? props.renderListHeaderComponent(
144
+                data,
145
+                loading,
146
+                refreshData,
147
+                status,
148
+                code
149
+              )
135
             : null
150
             : null
136
         }
151
         }
137
         ListEmptyComponent={
152
         ListEmptyComponent={

+ 25
- 2
src/screens/Proxiwash/ProxiwashScreen.tsx View File

52
 import { readData } from '../../utils/WebData';
52
 import { readData } from '../../utils/WebData';
53
 import { useFocusEffect, useNavigation } from '@react-navigation/core';
53
 import { useFocusEffect, useNavigation } from '@react-navigation/core';
54
 import { setupMachineNotification } from '../../utils/Notifications';
54
 import { setupMachineNotification } from '../../utils/Notifications';
55
+import { REQUEST_STATUS } from '../../utils/Requests';
56
+import ProximoListHeader from '../../components/Lists/Proximo/ProximoListHeader';
55
 
57
 
56
 const REFRESH_TIME = 1000 * 10; // Refresh every 10 seconds
58
 const REFRESH_TIME = 1000 * 10; // Refresh every 10 seconds
57
 const LIST_ITEM_HEIGHT = 64;
59
 const LIST_ITEM_HEIGHT = 64;
105
   const [selectedWash, setSelectedWash] = useState(
107
   const [selectedWash, setSelectedWash] = useState(
106
     AsyncStorageManager.getString(
108
     AsyncStorageManager.getString(
107
       AsyncStorageManager.PREFERENCES.selectedWash.key
109
       AsyncStorageManager.PREFERENCES.selectedWash.key
108
-    )
110
+    ) as 'tripodeB' | 'washinsa'
109
   );
111
   );
110
 
112
 
113
+  const lastrefreshDate = useRef<Date | undefined>(undefined);
114
+
111
   const modalStateStrings: { [key in MachineStates]: string } = {
115
   const modalStateStrings: { [key in MachineStates]: string } = {
112
     [MachineStates.AVAILABLE]: i18n.t('screens.proxiwash.modal.ready'),
116
     [MachineStates.AVAILABLE]: i18n.t('screens.proxiwash.modal.ready'),
113
     [MachineStates.RUNNING]: i18n.t('screens.proxiwash.modal.running'),
117
     [MachineStates.RUNNING]: i18n.t('screens.proxiwash.modal.running'),
145
     useCallback(() => {
149
     useCallback(() => {
146
       const selected = AsyncStorageManager.getString(
150
       const selected = AsyncStorageManager.getString(
147
         AsyncStorageManager.PREFERENCES.selectedWash.key
151
         AsyncStorageManager.PREFERENCES.selectedWash.key
148
-      );
152
+      ) as 'tripodeB' | 'washinsa';
149
       if (selected !== selectedWash) {
153
       if (selected !== selectedWash) {
150
         setSelectedWash(selected);
154
         setSelectedWash(selected);
151
       }
155
       }
418
     );
422
     );
419
   };
423
   };
420
 
424
 
425
+  const renderListHeaderComponent = (
426
+    _data: FetchedDataType | undefined,
427
+    loading: boolean,
428
+    _refreshData: (newRequest?: () => Promise<FetchedDataType>) => void,
429
+    status: REQUEST_STATUS
430
+  ) => {
431
+    const success = status === REQUEST_STATUS.SUCCESS;
432
+    if (success && !loading) {
433
+      lastrefreshDate.current = new Date();
434
+    }
435
+    return (
436
+      <ProximoListHeader
437
+        date={lastrefreshDate.current}
438
+        selectedWash={selectedWash}
439
+      />
440
+    );
441
+  };
442
+
421
   let data: LaundromatType;
443
   let data: LaundromatType;
422
   switch (selectedWash) {
444
   switch (selectedWash) {
423
     case 'tripodeB':
445
     case 'tripodeB':
437
           autoRefreshTime={REFRESH_TIME}
459
           autoRefreshTime={REFRESH_TIME}
438
           refreshOnFocus={true}
460
           refreshOnFocus={true}
439
           extraData={machinesWatched.length}
461
           extraData={machinesWatched.length}
462
+          renderListHeaderComponent={renderListHeaderComponent}
440
         />
463
         />
441
       </View>
464
       </View>
442
       <MascotPopup
465
       <MascotPopup

+ 1
- 0
src/utils/customHooks.tsx View File

104
             code: 0,
104
             code: 0,
105
             data: prevState.data,
105
             data: prevState.data,
106
           }));
106
           }));
107
+          setLastRefreshDate(undefined);
107
         });
108
         });
108
     }
109
     }
109
   };
110
   };

Loading…
Cancel
Save