Add: Add a useReload hook to make the Reload component obsolete

The new useReload hook is based in useTiming. It calls a timing
function before every reload to calculate the timeout before the reload.
This timing function gets a isVisible argument passed. Using the
argument the timing function can decide to extend the timeout when the
current browser window is not visible.

src/web/hooks/__tests__/useReload.jsx

@@ -0,0 +1,188 @@
+/* SPDX-FileCopyrightText: 2024 Greenbone AG
+ *
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+/* eslint-disable react/prop-types */
+
+import {describe, test, expect, testing} from '@gsa/testing';
+
+import {act, fireEvent, render, screen} from 'web/utils/testing';
+
+import useReload from '../useReload';
+
+const TestComponent = ({reload, timeout}) => {
+ const [startTimer, clearTimer, isRunning] = useReload(reload, timeout);
+ return (
+ <>
+ <button onClick={startTimer} data-testid="startTimer"></button>
+ <button onClick={clearTimer} data-testid="clearTimer"></button>
+ <span data-testid="isRunning">{'' + isRunning}</span>
+ </>
+ );
+};
+
+const runTimers = async () => {
+ await act(async () => {
+ await testing.advanceTimersToNextTimerAsync();
+ });
+};
+
+describe('useTiming', () => {
+ test('should start a timer to reload', async () => {
+ testing.useFakeTimers();
+
+ const reload = testing.fn();
+ const timeout = testing.fn().mockImplementation(() => 900);
+
+ render(<TestComponent reload={reload} timeout={timeout} />);
+
+ const isRunning = screen.getByTestId('isRunning');
+
+ expect(isRunning).toHaveTextContent('false');
+ expect(reload).not.toHaveBeenCalled();
+ expect(timeout).not.toHaveBeenCalled();
+
+ fireEvent.click(screen.getByTestId('startTimer'));
+
+ expect(isRunning).toHaveTextContent('true');
+ expect(reload).not.toHaveBeenCalled();
+ expect(timeout).toHaveBeenCalledWith({isVisible: true});
+
+ timeout.mockClear();
+
+ await runTimers();
+
+ expect(isRunning).toHaveTextContent('false');
+ expect(reload).toHaveBeenCalled();
+ expect(timeout).not.toHaveBeenCalled();
+ });
+
+ test('should reload forever', async () => {
+ testing.useFakeTimers();
+
+ const reload = testing.fn().mockResolvedValue();
+ const timeout = testing.fn().mockImplementation(() => 900);
+
+ render(<TestComponent reload={reload} timeout={timeout} />);
+
+ const isRunning = screen.getByTestId('isRunning');
+
+ expect(isRunning).toHaveTextContent('false');
+ expect(reload).not.toHaveBeenCalled();
+ expect(timeout).not.toHaveBeenCalled();
+
+ fireEvent.click(screen.getByTestId('startTimer'));
+
+ expect(isRunning).toHaveTextContent('true');
+ expect(reload).not.toHaveBeenCalled();
+ expect(timeout).toHaveBeenCalledWith({isVisible: true});
+
+ timeout.mockClear();
+
+ await runTimers();
+
+ expect(isRunning).toHaveTextContent('true');
+ expect(reload).toHaveBeenCalled();
+ expect(timeout).toHaveBeenCalledWith({isVisible: true});
+
+ timeout.mockClear();
+ reload.mockClear();
+
+ await runTimers();
+
+ expect(isRunning).toHaveTextContent('true');
+ expect(reload).toHaveBeenCalled();
+ expect(timeout).toHaveBeenCalledWith({isVisible: true});
+ });
+
+ test('should not reload if loading fails', async () => {
+ testing.useFakeTimers();
+
+ const reload = testing.fn().mockRejectedValue();
+ const timeout = testing.fn().mockImplementation(() => 900);
+
+ render(<TestComponent reload={reload} timeout={timeout} />);
+
+ const isRunning = screen.getByTestId('isRunning');
+
+ expect(isRunning).toHaveTextContent('false');
+ expect(reload).not.toHaveBeenCalled();
+ expect(timeout).not.toHaveBeenCalled();
+
+ fireEvent.click(screen.getByTestId('startTimer'));
+
+ expect(isRunning).toHaveTextContent('true');
+ expect(reload).not.toHaveBeenCalled();
+ expect(timeout).toHaveBeenCalledWith({isVisible: true});
+
+ timeout.mockClear();
+
+ await runTimers();
+
+ expect(isRunning).toHaveTextContent('false');
+ expect(reload).toHaveBeenCalled();
+ expect(timeout).not.toHaveBeenCalled();
+ });
+
+ test('should allow to cancel reload', async () => {
+ testing.useFakeTimers();
+
+ const reload = testing.fn().mockResolvedValue();
+ const timeout = testing.fn().mockImplementation(() => 900);
+
+ render(<TestComponent reload={reload} timeout={timeout} />);
+
+ const isRunning = screen.getByTestId('isRunning');
+
+ expect(isRunning).toHaveTextContent('false');
+ expect(reload).not.toHaveBeenCalled();
+ expect(timeout).not.toHaveBeenCalled();
+
+ fireEvent.click(screen.getByTestId('startTimer'));
+
+ expect(isRunning).toHaveTextContent('true');
+ expect(reload).not.toHaveBeenCalled();
+ expect(timeout).toHaveBeenCalledWith({isVisible: true});
+
+ timeout.mockClear();
+
+ await runTimers();
+
+ expect(isRunning).toHaveTextContent('true');
+ expect(reload).toHaveBeenCalled();
+ expect(timeout).toHaveBeenCalledWith({isVisible: true});
+
+ timeout.mockClear();
+ reload.mockClear();
+
+ fireEvent.click(screen.getByTestId('clearTimer'));
+
+ await runTimers();
+
+ expect(isRunning).toHaveTextContent('false');
+ expect(reload).not.toHaveBeenCalled();
+ expect(timeout).not.toHaveBeenCalled();
+ });
+
+ test('should not start reload reload timer', async () => {
+ testing.useFakeTimers();
+
+ const reload = testing.fn();
+ const timeout = testing.fn();
+
+ render(<TestComponent reload={reload} timeout={timeout} />);
+
+ const isRunning = screen.getByTestId('isRunning');
+
+ expect(isRunning).toHaveTextContent('false');
+ expect(reload).not.toHaveBeenCalled();
+ expect(timeout).not.toHaveBeenCalled();
+
+ fireEvent.click(screen.getByTestId('startTimer'));
+
+ expect(isRunning).toHaveTextContent('false');
+ expect(reload).not.toHaveBeenCalled();
+ expect(timeout).toHaveBeenCalledWith({isVisible: true});
+ });
+});

src/web/hooks/useReload.js

@@ -0,0 +1,47 @@
+/* SPDX-FileCopyrightText: 2024 Greenbone AG
+ *
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import {useCallback, useEffect} from 'react';
+
+import useTiming from 'web/hooks/useTiming';
+
+/**
+ * A hook to reload data considering the visibility change of the browser tab.
+ *
+ * @param {Function} reloadFunc Function to call when the timer fires
+ * @param {Function} timeoutFunc Function to get the timeout value from
+ * @returns Array of startTimer function, clearTimer function and boolean isRunning
+ */
+const useReload = (reloadFunc, timeoutFunc) => {
+ const timeout = useCallback(
+ () => timeoutFunc({isVisible: !document.hidden}),
+ [timeoutFunc],
+ );
+
+ const [startTimer, clearTimer, isRunning] = useTiming(reloadFunc, timeout);
+
+ const handleVisibilityChange = useCallback(() => {
+ const isVisible = !document.hidden;
+
+ if (isVisible) {
+ // browser tab is visible again
+ // restart timer to get a possible shorter interval as the remaining time
+
+ clearTimer();
+ startTimer();
+ }
+ }, [clearTimer, startTimer]);
+
+ useEffect(() => {
+ document.addEventListener('visibilitychange', handleVisibilityChange);
+ return () => {
+ document.removeEventListener('visibilitychange', handleVisibilityChange);
+ };
+ }, [handleVisibilityChange]);
+
+ return [startTimer, clearTimer, isRunning];
+};
+
+export default useReload;