move last refresh date in request screen
This commit is contained in:
parent
02135d64ff
commit
c1dd69d0ed
4 changed files with 42 additions and 37 deletions
|
@ -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
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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,
|
||||
|
|
Loading…
Reference in a new issue