Browse Source

show proxiwash last updated date

Arnaud Vergnet 2 years ago
parent
commit
360023aea6

+ 1
- 0
locales/en.json View File

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

+ 1
- 0
locales/fr.json View File

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

+ 6
- 2
package-lock.json View File

@@ -9576,8 +9576,7 @@
9576 9576
     "moment": {
9577 9577
       "version": "2.29.1",
9578 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 9581
     "ms": {
9583 9582
       "version": "2.1.1",
@@ -10733,6 +10732,11 @@
10733 10732
       "resolved": "https://registry.npmjs.org/react-native-swipe-gestures/-/react-native-swipe-gestures-1.0.5.tgz",
10734 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 10740
     "react-native-vector-icons": {
10737 10741
       "version": "8.1.0",
10738 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,6 +28,7 @@
28 28
     "@react-navigation/native": "5.9.4",
29 29
     "@react-navigation/stack": "5.14.4",
30 30
     "i18n-js": "3.8.0",
31
+    "moment": "^2.29.1",
31 32
     "react": "17.0.1",
32 33
     "react-native": "0.64.1",
33 34
     "react-native-animatable": "1.3.3",
@@ -51,6 +52,7 @@
51 52
     "react-native-safe-area-context": "3.2.0",
52 53
     "react-native-screens": "3.1.1",
53 54
     "react-native-splash-screen": "3.2.0",
55
+    "react-native-timeago": "^0.5.0",
54 56
     "react-native-vector-icons": "8.1.0",
55 57
     "react-native-webview": "11.4.3",
56 58
     "react-navigation-collapsible": "5.9.1",

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

@@ -0,0 +1,43 @@
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,15 +61,18 @@ type Props<ItemT, RawData> = Omit<
61 61
   > & {
62 62
     createDataset: (
63 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 68
     ) => SectionListDataType<ItemT>;
66 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 75
     ) => React.ComponentType<any> | React.ReactElement | null;
69
-    renderSectionHeader?: (
70
-      data: { section: SectionListData<ItemT> },
71
-      isLoading: boolean
72
-    ) => React.ReactElement | null;
73 76
     itemHeight?: number | null;
74 77
   };
75 78
 
@@ -110,7 +113,13 @@ function WebSectionList<ItemT, RawData>(props: Props<ItemT, RawData>) {
110 113
     code?: REQUEST_CODES
111 114
   ) => {
112 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 123
     if (!data && !loading) {
115 124
       showSnackBar();
116 125
     }
@@ -131,7 +140,13 @@ function WebSectionList<ItemT, RawData>(props: Props<ItemT, RawData>) {
131 140
         style={styles.container}
132 141
         ListHeaderComponent={
133 142
           props.renderListHeaderComponent != null
134
-            ? props.renderListHeaderComponent(data)
143
+            ? props.renderListHeaderComponent(
144
+                data,
145
+                loading,
146
+                refreshData,
147
+                status,
148
+                code
149
+              )
135 150
             : null
136 151
         }
137 152
         ListEmptyComponent={

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

@@ -52,6 +52,8 @@ import GENERAL_STYLES from '../../constants/Styles';
52 52
 import { readData } from '../../utils/WebData';
53 53
 import { useFocusEffect, useNavigation } from '@react-navigation/core';
54 54
 import { setupMachineNotification } from '../../utils/Notifications';
55
+import { REQUEST_STATUS } from '../../utils/Requests';
56
+import ProximoListHeader from '../../components/Lists/Proximo/ProximoListHeader';
55 57
 
56 58
 const REFRESH_TIME = 1000 * 10; // Refresh every 10 seconds
57 59
 const LIST_ITEM_HEIGHT = 64;
@@ -105,9 +107,11 @@ function ProxiwashScreen() {
105 107
   const [selectedWash, setSelectedWash] = useState(
106 108
     AsyncStorageManager.getString(
107 109
       AsyncStorageManager.PREFERENCES.selectedWash.key
108
-    )
110
+    ) as 'tripodeB' | 'washinsa'
109 111
   );
110 112
 
113
+  const lastrefreshDate = useRef<Date | undefined>(undefined);
114
+
111 115
   const modalStateStrings: { [key in MachineStates]: string } = {
112 116
     [MachineStates.AVAILABLE]: i18n.t('screens.proxiwash.modal.ready'),
113 117
     [MachineStates.RUNNING]: i18n.t('screens.proxiwash.modal.running'),
@@ -145,7 +149,7 @@ function ProxiwashScreen() {
145 149
     useCallback(() => {
146 150
       const selected = AsyncStorageManager.getString(
147 151
         AsyncStorageManager.PREFERENCES.selectedWash.key
148
-      );
152
+      ) as 'tripodeB' | 'washinsa';
149 153
       if (selected !== selectedWash) {
150 154
         setSelectedWash(selected);
151 155
       }
@@ -418,6 +422,24 @@ function ProxiwashScreen() {
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 443
   let data: LaundromatType;
422 444
   switch (selectedWash) {
423 445
     case 'tripodeB':
@@ -437,6 +459,7 @@ function ProxiwashScreen() {
437 459
           autoRefreshTime={REFRESH_TIME}
438 460
           refreshOnFocus={true}
439 461
           extraData={machinesWatched.length}
462
+          renderListHeaderComponent={renderListHeaderComponent}
440 463
         />
441 464
       </View>
442 465
       <MascotPopup

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

@@ -104,6 +104,7 @@ export function useRequestLogic<T>(
104 104
             code: 0,
105 105
             data: prevState.data,
106 106
           }));
107
+          setLastRefreshDate(undefined);
107 108
         });
108 109
     }
109 110
   };

Loading…
Cancel
Save