54e8027f06
Like the old status page, this will reload the status data every 5 seconds when auto-reload is enabled via the preferences (enabled by default). I picked up the idea to use a custom useInterval() react hook from this article [1]. Using this approach avoids a lot of callback chaining and takes care about clearing the interval on every re-render. By using the Page Visibility API in a custom useDocumentVisibility() hook, we can ensure that the data is only fetched when the page is in focus. Thus, when the user switches to another tab in the browser or another window/application, data fetching is skipped. [1]: https://overreacted.io/making-setinterval-declarative-with-react-hooks/ Change-Id: I39fa6a0a5189665f184aeafcf07ce81365a41902
57 lines
1.4 KiB
JavaScript
57 lines
1.4 KiB
JavaScript
// Copyright 2024 BMW Group
|
|
//
|
|
// Licensed under the Apache License, Version 2.0 (the "License"); you may
|
|
// not use this file except in compliance with the License. You may obtain
|
|
// a copy of the License at
|
|
//
|
|
// http://www.apache.org/licenses/LICENSE-2.0
|
|
//
|
|
// Unless required by applicable law or agreed to in writing, software
|
|
// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
|
// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
|
// License for the specific language governing permissions and limitations
|
|
// under the License.
|
|
|
|
import { useEffect, useRef, useState } from 'react'
|
|
|
|
|
|
function useDocumentVisibility() {
|
|
const [isDocumentVisible, setIsDocumentVisible] = useState(!document.hidden)
|
|
|
|
const handleVisibilityChange = () => {
|
|
setIsDocumentVisible(!document.hidden)
|
|
}
|
|
|
|
useEffect(() => {
|
|
document.addEventListener('visibilitychange', handleVisibilityChange)
|
|
|
|
return () => {
|
|
document.removeEventListener('visibilitychange', handleVisibilityChange)
|
|
}
|
|
}, [])
|
|
|
|
return isDocumentVisible
|
|
}
|
|
|
|
|
|
function useInterval(callback, delay) {
|
|
const savedCallback = useRef()
|
|
|
|
useEffect(() => {
|
|
savedCallback.current = callback
|
|
})
|
|
|
|
useEffect(() => {
|
|
function tick() {
|
|
savedCallback.current()
|
|
}
|
|
|
|
if (delay !== null) {
|
|
let id = setInterval(tick, delay)
|
|
return () => clearInterval(id)
|
|
}
|
|
}, [delay])
|
|
}
|
|
|
|
export { useDocumentVisibility, useInterval }
|