move last refresh date in request screen

This commit is contained in:
Arnaud Vergnet 2021-05-13 09:59:38 +02:00
parent 02135d64ff
commit c1dd69d0ed
4 changed files with 42 additions and 37 deletions

View file

@ -11,6 +11,7 @@ export type RequestScreenProps<T> = {
render: ( render: (
data: T | undefined, data: T | undefined,
loading: boolean, loading: boolean,
lastRefreshDate: Date | undefined,
refreshData: (newRequest?: () => Promise<T>) => void, refreshData: (newRequest?: () => Promise<T>) => void,
status: REQUEST_STATUS, status: REQUEST_STATUS,
code?: REQUEST_CODES code?: REQUEST_CODES
@ -37,8 +38,15 @@ const MIN_REFRESH_TIME = 5 * 1000;
export default function RequestScreen<T>(props: Props<T>) { export default function RequestScreen<T>(props: Props<T>) {
const refreshInterval = useRef<number>(); const refreshInterval = useRef<number>();
const [loading, status, code, data, refreshData] = useRequestLogic<T>( const [
() => props.request(), loading,
lastRefreshDate,
status,
code,
data,
refreshData,
] = useRequestLogic<T>(
props.request,
props.cache, props.cache,
props.onCacheUpdate, props.onCacheUpdate,
props.refreshOnFocus, props.refreshOnFocus,
@ -81,16 +89,6 @@ export default function RequestScreen<T>(props: Props<T>) {
}, [props.cache, props.refreshOnFocus]) }, [props.cache, props.refreshOnFocus])
); );
// useEffect(() => {
// if (status === REQUEST_STATUS.BAD_TOKEN && props.onMajorError) {
// props.onMajorError(status, code);
// }
// // eslint-disable-next-line react-hooks/exhaustive-deps
// }, [status, code]);
// if (status === REQUEST_STATUS.BAD_TOKEN && props.onMajorError) {
// return <View />;
// } else
if (data === undefined && loading && props.showLoading !== false) { if (data === undefined && loading && props.showLoading !== false) {
return <BasicLoadingScreen />; return <BasicLoadingScreen />;
} else if ( } else if (
@ -110,6 +108,13 @@ export default function RequestScreen<T>(props: Props<T>) {
/> />
); );
} else { } else {
return props.render(data, loading, refreshData, status, code); return props.render(
data,
loading,
lastRefreshDate,
refreshData,
status,
code
);
} }
} }

View file

@ -62,6 +62,7 @@ type Props<ItemT, RawData> = Omit<
createDataset: ( createDataset: (
data: RawData | undefined, data: RawData | undefined,
loading: boolean, loading: boolean,
lastRefreshDate: Date | undefined,
refreshData: (newRequest?: () => Promise<RawData>) => void, refreshData: (newRequest?: () => Promise<RawData>) => void,
status: REQUEST_STATUS, status: REQUEST_STATUS,
code?: REQUEST_CODES code?: REQUEST_CODES
@ -69,6 +70,7 @@ type Props<ItemT, RawData> = Omit<
renderListHeaderComponent?: ( renderListHeaderComponent?: (
data: RawData | undefined, data: RawData | undefined,
loading: boolean, loading: boolean,
lastRefreshDate: Date | undefined,
refreshData: (newRequest?: () => Promise<RawData>) => void, refreshData: (newRequest?: () => Promise<RawData>) => void,
status: REQUEST_STATUS, status: REQUEST_STATUS,
code?: REQUEST_CODES code?: REQUEST_CODES
@ -108,6 +110,7 @@ function WebSectionList<ItemT, RawData>(props: Props<ItemT, RawData>) {
const render = ( const render = (
data: RawData | undefined, data: RawData | undefined,
loading: boolean, loading: boolean,
lastRefreshDate: Date | undefined,
refreshData: (newRequest?: () => Promise<RawData>) => void, refreshData: (newRequest?: () => Promise<RawData>) => void,
status: REQUEST_STATUS, status: REQUEST_STATUS,
code?: REQUEST_CODES code?: REQUEST_CODES
@ -116,6 +119,7 @@ function WebSectionList<ItemT, RawData>(props: Props<ItemT, RawData>) {
const dataset = props.createDataset( const dataset = props.createDataset(
data, data,
loading, loading,
lastRefreshDate,
refreshData, refreshData,
status, status,
code code
@ -143,6 +147,7 @@ function WebSectionList<ItemT, RawData>(props: Props<ItemT, RawData>) {
? props.renderListHeaderComponent( ? props.renderListHeaderComponent(
data, data,
loading, loading,
lastRefreshDate,
refreshData, refreshData,
status, status,
code code

View file

@ -52,7 +52,6 @@ import GENERAL_STYLES from '../../constants/Styles';
import { readData } from '../../utils/WebData'; import { readData } from '../../utils/WebData';
import { useFocusEffect, useNavigation } from '@react-navigation/core'; import { useFocusEffect, useNavigation } from '@react-navigation/core';
import { setupMachineNotification } from '../../utils/Notifications'; import { setupMachineNotification } from '../../utils/Notifications';
import { REQUEST_STATUS } from '../../utils/Requests';
import ProximoListHeader from '../../components/Lists/Proximo/ProximoListHeader'; import ProximoListHeader from '../../components/Lists/Proximo/ProximoListHeader';
const REFRESH_TIME = 1000 * 10; // Refresh every 10 seconds const REFRESH_TIME = 1000 * 10; // Refresh every 10 seconds
@ -110,8 +109,6 @@ function ProxiwashScreen() {
) as 'tripodeB' | 'washinsa' ) as 'tripodeB' | 'washinsa'
); );
const lastrefreshDate = useRef<Date | undefined>(undefined);
const modalStateStrings: { [key in MachineStates]: string } = { const modalStateStrings: { [key in MachineStates]: string } = {
[MachineStates.AVAILABLE]: i18n.t('screens.proxiwash.modal.ready'), [MachineStates.AVAILABLE]: i18n.t('screens.proxiwash.modal.ready'),
[MachineStates.RUNNING]: i18n.t('screens.proxiwash.modal.running'), [MachineStates.RUNNING]: i18n.t('screens.proxiwash.modal.running'),
@ -418,21 +415,17 @@ function ProxiwashScreen() {
}; };
const renderListHeaderComponent = ( const renderListHeaderComponent = (
_data: FetchedDataType | undefined, data: FetchedDataType | undefined,
loading: boolean, _loading: boolean,
_refreshData: (newRequest?: () => Promise<FetchedDataType>) => void, lastRefreshDate: Date | undefined
status: REQUEST_STATUS
) => { ) => {
const success = status === REQUEST_STATUS.SUCCESS; if (data) {
if (success && !loading) { return (
lastrefreshDate.current = new Date(); <ProximoListHeader date={lastRefreshDate} selectedWash={selectedWash} />
);
} else {
return null;
} }
return (
<ProximoListHeader
date={lastrefreshDate.current}
selectedWash={selectedWash}
/>
);
}; };
let data: LaundromatType; let data: LaundromatType;

View file

@ -55,24 +55,24 @@ export function useRequestLogic<T>(
) { ) {
const [response, setResponse] = useState<{ const [response, setResponse] = useState<{
loading: boolean; loading: boolean;
lastRefreshDate?: Date;
status: REQUEST_STATUS; status: REQUEST_STATUS;
code?: number; code?: number;
data: T | undefined; data: T | undefined;
}>({ }>({
loading: startLoading !== false && cache === undefined, loading: startLoading !== false && cache === undefined,
lastRefreshDate: undefined,
status: REQUEST_STATUS.SUCCESS, status: REQUEST_STATUS.SUCCESS,
code: undefined, code: undefined,
data: undefined, data: undefined,
}); });
const [lastRefreshDate, setLastRefreshDate] = useState<Date | undefined>(
undefined
);
const refreshData = (newRequest?: () => Promise<T>) => { const refreshData = (newRequest?: () => Promise<T>) => {
let canRefresh; let canRefresh;
if (lastRefreshDate && minRefreshTime) { if (response.lastRefreshDate && minRefreshTime) {
const last = lastRefreshDate; canRefresh =
canRefresh = new Date().getTime() - last.getTime() > minRefreshTime; new Date().getTime() - response.lastRefreshDate.getTime() >
minRefreshTime;
} else { } else {
canRefresh = true; canRefresh = true;
} }
@ -83,12 +83,12 @@ export function useRequestLogic<T>(
loading: true, loading: true,
})); }));
} }
setLastRefreshDate(new Date());
const r = newRequest ? newRequest : request; const r = newRequest ? newRequest : request;
r() r()
.then((requestResponse: T) => { .then((requestResponse: T) => {
setResponse({ setResponse({
loading: false, loading: false,
lastRefreshDate: new Date(),
status: REQUEST_STATUS.SUCCESS, status: REQUEST_STATUS.SUCCESS,
code: undefined, code: undefined,
data: requestResponse, data: requestResponse,
@ -100,23 +100,25 @@ export function useRequestLogic<T>(
.catch(() => { .catch(() => {
setResponse((prevState) => ({ setResponse((prevState) => ({
loading: false, loading: false,
lastRefreshDate: prevState.lastRefreshDate,
status: REQUEST_STATUS.CONNECTION_ERROR, status: REQUEST_STATUS.CONNECTION_ERROR,
code: 0, code: 0,
data: prevState.data, data: prevState.data,
})); }));
setLastRefreshDate(undefined);
}); });
} }
}; };
const value: [ const value: [
boolean, boolean,
Date | undefined,
REQUEST_STATUS, REQUEST_STATUS,
number | undefined, number | undefined,
T | undefined, T | undefined,
(newRequest?: () => Promise<T>) => void (newRequest?: () => Promise<T>) => void
] = [ ] = [
response.loading, response.loading,
response.lastRefreshDate,
response.status, response.status,
response.code, response.code,
cache ? cache : response.data, cache ? cache : response.data,