show proxiwash last updated date

locales/en.json

@@ -40,6 +40,7 @@
       "dryers": "Dryers",
       "washer": "Washer",
       "washers": "Washers",
+      "updated": "Updated ",
       "min": "min",
       "informationTab": "Information",
       "paymentTab": "Payment",

locales/fr.json

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

package-lock.json

@@ -9576,8 +9576,7 @@
     "moment": {
       "version": "2.29.1",
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
-      "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==",
-      "optional": true
+      "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ=="
     },
     "ms": {
       "version": "2.1.1",
@@ -10733,6 +10732,11 @@
       "resolved": "https://registry.npmjs.org/react-native-swipe-gestures/-/react-native-swipe-gestures-1.0.5.tgz",
       "integrity": "sha512-Ns7Bn9H/Tyw278+5SQx9oAblDZ7JixyzeOczcBK8dipQk2pD7Djkcfnf1nB/8RErAmMLL9iXgW0QHqiII8AhKw=="
     },
+    "react-native-timeago": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/react-native-timeago/-/react-native-timeago-0.5.0.tgz",
+      "integrity": "sha512-GYrV36FK8ttkl7BIAdh77OlYLYGIKLGNviJqzPUtKaO8ANEtI8ph7UkSTRv9oMKfvDnA5VKV9hVX7GtYoAztRg=="
+    },
     "react-native-vector-icons": {
       "version": "8.1.0",
       "resolved": "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-8.1.0.tgz",

package.json

@@ -28,6 +28,7 @@
     "@react-navigation/native": "5.9.4",
     "@react-navigation/stack": "5.14.4",
     "i18n-js": "3.8.0",
+    "moment": "^2.29.1",
     "react": "17.0.1",
     "react-native": "0.64.1",
     "react-native-animatable": "1.3.3",
@@ -51,6 +52,7 @@
     "react-native-safe-area-context": "3.2.0",
     "react-native-screens": "3.1.1",
     "react-native-splash-screen": "3.2.0",
+    "react-native-timeago": "^0.5.0",
     "react-native-vector-icons": "8.1.0",
     "react-native-webview": "11.4.3",
     "react-navigation-collapsible": "5.9.1",

src/components/Lists/Proximo/ProximoListHeader.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import { Card, Text } from 'react-native-paper';
+import TimeAgo from 'react-native-timeago';
+import i18n from 'i18n-js';
+
+let moment = require('moment'); //load moment module to set local language
+require('moment/locale/fr'); // import moment local language file during the application build
+moment.locale('fr');
+
+type Props = {
+  date?: Date;
+  selectedWash: 'tripodeB' | 'washinsa';
+};
+
+const styles = StyleSheet.create({
+  card: { marginHorizontal: 5 },
+});
+
+function ProximoListHeader(props: Props) {
+  const { date, selectedWash } = props;
+  let title = i18n.t('screens.proxiwash.washinsa.title');
+  if (selectedWash === 'tripodeB') {
+    title = i18n.t('screens.proxiwash.tripodeB.title');
+  }
+  return (
+    <Card style={styles.card}>
+      <Card.Title
+        title={title}
+        subtitle={
+          date ? (
+            <Text>
+              {i18n.t('screens.proxiwash.updated')}
+              <TimeAgo time={date} interval={2000} />
+            </Text>
+          ) : null
+        }
+      />
+    </Card>
+  );
+}
+
+export default ProximoListHeader;

src/components/Screens/WebSectionList.tsx

@@ -61,15 +61,18 @@ type Props<ItemT, RawData> = Omit<
   > & {
     createDataset: (
       data: RawData | undefined,
-      isLoading: boolean
+      loading: boolean,
+      refreshData: (newRequest?: () => Promise<RawData>) => void,
+      status: REQUEST_STATUS,
+      code?: REQUEST_CODES
     ) => SectionListDataType<ItemT>;
     renderListHeaderComponent?: (
-      data?: RawData
+      data: RawData | undefined,
+      loading: boolean,
+      refreshData: (newRequest?: () => Promise<RawData>) => void,
+      status: REQUEST_STATUS,
+      code?: REQUEST_CODES
     ) => React.ComponentType<any> | React.ReactElement | null;
-    renderSectionHeader?: (
-      data: { section: SectionListData<ItemT> },
-      isLoading: boolean
-    ) => React.ReactElement | null;
     itemHeight?: number | null;
   };
 
@@ -110,7 +113,13 @@ function WebSectionList<ItemT, RawData>(props: Props<ItemT, RawData>) {
     code?: REQUEST_CODES
   ) => {
     const { itemHeight } = props;
-    const dataset = props.createDataset(data, loading);
+    const dataset = props.createDataset(
+      data,
+      loading,
+      refreshData,
+      status,
+      code
+    );
     if (!data && !loading) {
       showSnackBar();
     }
@@ -131,7 +140,13 @@ function WebSectionList<ItemT, RawData>(props: Props<ItemT, RawData>) {
         style={styles.container}
         ListHeaderComponent={
           props.renderListHeaderComponent != null
-            ? props.renderListHeaderComponent(data)
+            ? props.renderListHeaderComponent(
+                data,
+                loading,
+                refreshData,
+                status,
+                code
+              )
             : null
         }
         ListEmptyComponent={

src/screens/Proxiwash/ProxiwashScreen.tsx

@@ -52,6 +52,8 @@ import GENERAL_STYLES from '../../constants/Styles';
 import { readData } from '../../utils/WebData';
 import { useFocusEffect, useNavigation } from '@react-navigation/core';
 import { setupMachineNotification } from '../../utils/Notifications';
+import { REQUEST_STATUS } from '../../utils/Requests';
+import ProximoListHeader from '../../components/Lists/Proximo/ProximoListHeader';
 
 const REFRESH_TIME = 1000 * 10; // Refresh every 10 seconds
 const LIST_ITEM_HEIGHT = 64;
@@ -105,9 +107,11 @@ function ProxiwashScreen() {
   const [selectedWash, setSelectedWash] = useState(
     AsyncStorageManager.getString(
       AsyncStorageManager.PREFERENCES.selectedWash.key
-    )
+    ) as 'tripodeB' | 'washinsa'
   );
 
+  const lastrefreshDate = useRef<Date | undefined>(undefined);
+
   const modalStateStrings: { [key in MachineStates]: string } = {
     [MachineStates.AVAILABLE]: i18n.t('screens.proxiwash.modal.ready'),
     [MachineStates.RUNNING]: i18n.t('screens.proxiwash.modal.running'),
@@ -145,7 +149,7 @@ function ProxiwashScreen() {
     useCallback(() => {
       const selected = AsyncStorageManager.getString(
         AsyncStorageManager.PREFERENCES.selectedWash.key
-      );
+      ) as 'tripodeB' | 'washinsa';
       if (selected !== selectedWash) {
         setSelectedWash(selected);
       }
@@ -418,6 +422,24 @@ function ProxiwashScreen() {
     );
   };
 
+  const renderListHeaderComponent = (
+    _data: FetchedDataType | undefined,
+    loading: boolean,
+    _refreshData: (newRequest?: () => Promise<FetchedDataType>) => void,
+    status: REQUEST_STATUS
+  ) => {
+    const success = status === REQUEST_STATUS.SUCCESS;
+    if (success && !loading) {
+      lastrefreshDate.current = new Date();
+    }
+    return (
+      <ProximoListHeader
+        date={lastrefreshDate.current}
+        selectedWash={selectedWash}
+      />
+    );
+  };
+
   let data: LaundromatType;
   switch (selectedWash) {
     case 'tripodeB':
@@ -437,6 +459,7 @@ function ProxiwashScreen() {
           autoRefreshTime={REFRESH_TIME}
           refreshOnFocus={true}
           extraData={machinesWatched.length}
+          renderListHeaderComponent={renderListHeaderComponent}
         />
       </View>
       <MascotPopup

src/utils/customHooks.tsx

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