51 lines
1.8 KiB
TypeScript
51 lines
1.8 KiB
TypeScript
|
// NetworkWindow is the part of window the network status reads: the browser's
|
||
|
|
// online flag and its online/offline events.
|
||
|
|
export type NetworkWindow = Pick<Window, 'navigator' | 'addEventListener' | 'removeEventListener'>
|
||
|
|
|
||
|
|
export type NetworkStatus = {
|
||
|
|
// offline reports whether the browser says it is offline or the last API
|
||
|
|
// request failed with a network error.
|
||
|
|
offline(): boolean
|
||
|
|
// subscribe is notified when offline may have changed. It listens for the
|
||
|
|
// window's online/offline events until the returned function is called.
|
||
|
|
subscribe(listener: () => void): () => void
|
||
|
|
// requestFailed records a fetch that rejected with a network error.
|
||
|
|
requestFailed(): void
|
||
|
|
// requestSucceeded records a fetch that got a response.
|
||
|
|
requestSucceeded(): void
|
||
|
|
}
|
||
|
|
|
||
|
|
// createNetworkStatus tracks whether MealQuest can reach the server. A failed
|
||
|
|
// request counts as offline until a later request gets a response or the
|
||
|
|
// browser reports that it is back online.
|
||
|
|
export function createNetworkStatus(win: NetworkWindow): NetworkStatus {
|
||
|
|
let failed = false
|
||
|
|
const listeners = new Set<() => void>()
|
||
|
|
|
||
|
|
function setFailed(value: boolean) {
|
||
|
|
if (failed === value) return
|
||
|
|
failed = value
|
||
|
|
listeners.forEach((listener) => listener())
|
||
|
|
}
|
||
|
|
|
||
|
|
return {
|
||
|
|
offline: () => !win.navigator.onLine || failed,
|
||
|
|
subscribe(listener) {
|
||
|
|
const online = () => {
|
||
|
|
failed = false
|
||
|
|
listener()
|
||
|
|
}
|
||
|
|
listeners.add(listener)
|
||
|
|
win.addEventListener('online', online)
|
||
|
|
win.addEventListener('offline', listener)
|
||
|
|
return () => {
|
||
|
|
listeners.delete(listener)
|
||
|
|
win.removeEventListener('online', online)
|
||
|
|
win.removeEventListener('offline', listener)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
requestFailed: () => setFailed(true),
|
||
|
|
requestSucceeded: () => setFailed(false),
|
||
|
|
}
|
||
|
|
}
|