Pull request: request disabled protection duration on tab change

Updates #5759

Squashed commit of the following:

commit 970f88b142ba06eb328ed648f69e0547a5a46902
Merge: e2b624e44 37b69b218
Author: Ildar Kamalov <ik@adguard.com>
Date:   Tue Nov 14 10:30:47 2023 +0300

    Merge branch 'master' into ADG-7199

commit e2b624e4473a9c42c60502dfa878abbc8393bdd6
Merge: ba79dedc6 fdf60eeed
Author: Ildar Kamalov <ik@adguard.com>
Date:   Mon Nov 13 13:08:10 2023 +0300

    Merge branch 'master' into ADG-7199

commit ba79dedc6551f5025b88c94897dcc7e65a314779
Author: Ildar Kamalov <ik@adguard.com>
Date:   Mon Nov 13 10:56:36 2023 +0300

    changelog

commit a0c13fd1704198460c3c907beb17df77243a243b
Author: Ildar Kamalov <ik@adguard.com>
Date:   Sun Nov 12 16:51:26 2023 +0300

    ADG-7199 request disabled protection duration on tab change

CHANGELOG.md

@@ -23,6 +23,12 @@ See also the [v0.107.42 GitHub milestone][ms-v0.107.42].
 NOTE: Add new changes BELOW THIS COMMENT.
 -->
 
+### Fixed
+
+- Protection pause timer synchronization ([#5759]).
+
+[#5759]: https://github.com/AdguardTeam/AdGuardHome/issues/5759
+
 <!--
 NOTE: Add new changes ABOVE THIS COMMENT.
 -->

client/src/actions/index.js

@@ -338,6 +338,40 @@ export const getDnsStatus = () => async (dispatch) => {
     }
 };
 
+export const timerStatusRequest = createAction('TIMER_STATUS_REQUEST');
+export const timerStatusFailure = createAction('TIMER_STATUS_FAILURE');
+export const timerStatusSuccess = createAction('TIMER_STATUS_SUCCESS');
+
+export const getTimerStatus = () => async (dispatch) => {
+    dispatch(timerStatusRequest());
+
+    const handleRequestError = () => {
+        dispatch(addErrorToast({ error: 'dns_status_error' }));
+        dispatch(dnsStatusFailure());
+        window.location.reload(true);
+    };
+
+    const handleRequestSuccess = (response) => {
+        const dnsStatus = response.data;
+        if (dnsStatus.protection_disabled_duration === 0) {
+            dnsStatus.protection_disabled_duration = null;
+        }
+        const { running } = dnsStatus;
+        const runningStatus = dnsStatus && running;
+        if (runningStatus === true) {
+            dispatch(timerStatusSuccess(dnsStatus));
+        } else {
+            dispatch(setDnsRunningStatus(running));
+        }
+    };
+
+    try {
+        checkStatus(handleRequestSuccess, handleRequestError);
+    } catch (error) {
+        handleRequestError();
+    }
+};
+
 export const testUpstreamRequest = createAction('TEST_UPSTREAM_REQUEST');
 export const testUpstreamFailure = createAction('TEST_UPSTREAM_FAILURE');
 export const testUpstreamSuccess = createAction('TEST_UPSTREAM_SUCCESS');

client/src/components/App/index.js

@@ -28,7 +28,7 @@ import {
 } from '../../helpers/constants';
 import { getLogsUrlParams, setHtmlLangAttr, setUITheme } from '../../helpers/helpers';
 import Header from '../Header';
-import { changeLanguage, getDnsStatus } from '../../actions';
+import { changeLanguage, getDnsStatus, getTimerStatus } from '../../actions';
 
 import Dashboard from '../../containers/Dashboard';
 import SetupGuide from '../../containers/SetupGuide';
@@ -126,6 +126,18 @@ const App = () => {
 
     useEffect(() => {
         dispatch(getDnsStatus());
+
+        const handleVisibilityChange = () => {
+            if (document.visibilityState === 'visible') {
+                dispatch(getTimerStatus());
+            }
+        };
+
+        document.addEventListener('visibilitychange', handleVisibilityChange);
+
+        return () => {
+            document.removeEventListener('visibilitychange', handleVisibilityChange);
+        };
     }, []);
 
     const setLanguage = () => {

client/src/reducers/dashboard.js

@@ -44,6 +44,19 @@ const dashboard = handleActions(
 
             return newState;
         },
+        [actions.timerStatusSuccess]: (state, { payload }) => {
+            const {
+                protection_enabled: protectionEnabled,
+                protection_disabled_duration: protectionDisabledDuration,
+            } = payload;
+            const newState = {
+                ...state,
+                protectionEnabled,
+                protectionDisabledDuration,
+            };
+
+            return newState;
+        },
 
         [actions.getVersionRequest]: (state) => ({
             ...state,