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: (
data: T | undefined,
loading: boolean,
lastRefreshDate: Date | undefined,
refreshData: (newRequest?: () => Promise<T>) => void,
status: REQUEST_STATUS,
code?: REQUEST_CODES
@ -37,8 +38,15 @@ const MIN_REFRESH_TIME = 5 * 1000;
export default function RequestScreen<T>(props: Props<T>) {
const refreshInterval = useRef<number>();
const [loading, status, code, data, refreshData] = useRequestLogic<T>(
() => props.request(),
const [
loading,
lastRefreshDate,
status,
code,
data,
refreshData,
] = useRequestLogic<T>(
props.request,
props.cache,
props.onCacheUpdate,
props.refreshOnFocus,
@ -81,16 +89,6 @@ export default function RequestScreen<T>(props: Props<T>) {
}, [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) {
return <BasicLoadingScreen />;
} else if (
@ -110,6 +108,13 @@ export default function RequestScreen<T>(props: Props<T>) {
/>
);
} 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: (
data: RawData | undefined,
loading: boolean,
lastRefreshDate: Date | undefined,
refreshData: (newRequest?: () => Promise<RawData>) => void,
status: REQUEST_STATUS,
code?: REQUEST_CODES
@ -69,6 +70,7 @@ type Props<ItemT, RawData> = Omit<
renderListHeaderComponent?: (
data: RawData | undefined,
loading: boolean,
lastRefreshDate: Date | undefined,
refreshData: (newRequest?: () => Promise<RawData>) => void,
status: REQUEST_STATUS,
code?: REQUEST_CODES
@ -108,6 +110,7 @@ function WebSectionList<ItemT, RawData>(props: Props<ItemT, RawData>) {
const render = (
data: RawData | undefined,
loading: boolean,
lastRefreshDate: Date | undefined,
refreshData: (newRequest?: () => Promise<RawData>) => void,
status: REQUEST_STATUS,
code?: REQUEST_CODES
@ -116,6 +119,7 @@ function WebSectionList<ItemT, RawData>(props: Props<ItemT, RawData>) {
const dataset = props.createDataset(
data,
loading,
lastRefreshDate,
refreshData,
status,
code
@ -143,6 +147,7 @@ function WebSectionList<ItemT, RawData>(props: Props<ItemT, RawData>) {
? props.renderListHeaderComponent(
data,
loading,
lastRefreshDate,
refreshData,
status,
code

View file

@ -52,7 +52,6 @@ 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
@ -110,8 +109,6 @@ function ProxiwashScreen() {
) 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'),
@ -418,21 +415,17 @@ function ProxiwashScreen() {
};
const renderListHeaderComponent = (
_data: FetchedDataType | undefined,
loading: boolean,
_refreshData: (newRequest?: () => Promise<FetchedDataType>) => void,
status: REQUEST_STATUS
data: FetchedDataType | undefined,
_loading: boolean,
lastRefreshDate: Date | undefined
) => {
const success = status === REQUEST_STATUS.SUCCESS;
if (success && !loading) {
lastrefreshDate.current = new Date();
if (data) {
return (
<ProximoListHeader date={lastRefreshDate} selectedWash={selectedWash} />
);
} else {
return null;
}
return (
<ProximoListHeader
date={lastrefreshDate.current}
selectedWash={selectedWash}
/>
);
};
let data: LaundromatType;

View file

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