diff --git a/locales/en.json b/locales/en.json index 4a2f67b..65d4aa7 100644 --- a/locales/en.json +++ b/locales/en.json @@ -40,6 +40,7 @@ "dryers": "Dryers", "washer": "Washer", "washers": "Washers", + "updated": "Updated ", "min": "min", "informationTab": "Information", "paymentTab": "Payment", diff --git a/locales/fr.json b/locales/fr.json index 0d695da..e88f098 100644 --- a/locales/fr.json +++ b/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", diff --git a/package-lock.json b/package-lock.json index 0843a64..c7f1625 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index beaa3fa..c34ca1d 100644 --- a/package.json +++ b/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", diff --git a/src/components/Lists/Proximo/ProximoListHeader.tsx b/src/components/Lists/Proximo/ProximoListHeader.tsx new file mode 100644 index 0000000..b4636aa --- /dev/null +++ b/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 ( + + + {i18n.t('screens.proxiwash.updated')} + + + ) : null + } + /> + + ); +} + +export default ProximoListHeader; diff --git a/src/components/Screens/WebSectionList.tsx b/src/components/Screens/WebSectionList.tsx index 9a35726..b36e835 100644 --- a/src/components/Screens/WebSectionList.tsx +++ b/src/components/Screens/WebSectionList.tsx @@ -61,15 +61,18 @@ type Props = Omit< > & { createDataset: ( data: RawData | undefined, - isLoading: boolean + loading: boolean, + refreshData: (newRequest?: () => Promise) => void, + status: REQUEST_STATUS, + code?: REQUEST_CODES ) => SectionListDataType; renderListHeaderComponent?: ( - data?: RawData + data: RawData | undefined, + loading: boolean, + refreshData: (newRequest?: () => Promise) => void, + status: REQUEST_STATUS, + code?: REQUEST_CODES ) => React.ComponentType | React.ReactElement | null; - renderSectionHeader?: ( - data: { section: SectionListData }, - isLoading: boolean - ) => React.ReactElement | null; itemHeight?: number | null; }; @@ -110,7 +113,13 @@ function WebSectionList(props: Props) { 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(props: Props) { style={styles.container} ListHeaderComponent={ props.renderListHeaderComponent != null - ? props.renderListHeaderComponent(data) + ? props.renderListHeaderComponent( + data, + loading, + refreshData, + status, + code + ) : null } ListEmptyComponent={ diff --git a/src/screens/Proxiwash/ProxiwashScreen.tsx b/src/screens/Proxiwash/ProxiwashScreen.tsx index 836fb54..8b3ab2d 100644 --- a/src/screens/Proxiwash/ProxiwashScreen.tsx +++ b/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(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) => void, + status: REQUEST_STATUS + ) => { + const success = status === REQUEST_STATUS.SUCCESS; + if (success && !loading) { + lastrefreshDate.current = new Date(); + } + return ( + + ); + }; + let data: LaundromatType; switch (selectedWash) { case 'tripodeB': @@ -437,6 +459,7 @@ function ProxiwashScreen() { autoRefreshTime={REFRESH_TIME} refreshOnFocus={true} extraData={machinesWatched.length} + renderListHeaderComponent={renderListHeaderComponent} /> ( code: 0, data: prevState.data, })); + setLastRefreshDate(undefined); }); } };