Removed code duplication and unset event listeners (#9262)

Author: bsekachev

cvat-ui/src/components/consensus-management-page/consensus-management-page.tsx

@@ -21,15 +21,11 @@ import Result from 'antd/lib/result';
 import CVATLoadingSpinner from 'components/common/loading-spinner';
 import { ActionUnion, createAction } from 'utils/redux';
 import { fetchTask } from 'utils/fetch';
+import { getTabFromHash } from 'utils/location-utils';
 import ConsensusSettingsTab from './consensus-settings-tab';
 
 const core = getCore();
 
-function getTabFromHash(supportedTabs: string[]): string {
-    const tab = window.location.hash.slice(1);
-    return supportedTabs.includes(tab) ? tab : supportedTabs[0];
-}
-
 enum TabName {
     settings = 'settings',
 }
@@ -107,8 +103,8 @@ const reducer = (state: State, action: ActionUnion<typeof reducerActions>): Stat
     return state;
 };
 
+const supportedTabs = Object.values(TabName);
 function ConsensusManagementPage(): JSX.Element {
-    const supportedTabs = Object.values(TabName);
     const [state, dispatch] = useReducer(reducer, {
         fetching: true,
         reportRefreshingStatus: null,
@@ -176,14 +172,13 @@ function ConsensusManagementPage(): JSX.Element {
     }, [requestedInstanceID]);
 
     useEffect(() => {
-        window.addEventListener('hashchange', () => {
-            const hash = getTabFromHash(supportedTabs);
-            setActiveTab(hash);
-        });
+        const onHashChange = () => setActiveTab(getTabFromHash(supportedTabs));
+        window.addEventListener('hashchange', onHashChange);
+        return () => window.removeEventListener('hashchange', onHashChange);
     }, []);
 
     useEffect(() => {
-        window.location.hash = activeTab;
+        window.history.replaceState(null, '', `#${activeTab}`);
     }, [activeTab]);
 
     const onTabKeyChange = useCallback((key: string): void => {

cvat-ui/src/components/quality-control/quality-control-page.tsx

@@ -22,18 +22,14 @@ import {
 import CVATLoadingSpinner from 'components/common/loading-spinner';
 import GoBackButton from 'components/common/go-back-button';
 import { ActionUnion, createAction } from 'utils/redux';
+import { getTabFromHash } from 'utils/location-utils';
 import { fetchTask } from 'utils/fetch';
 import QualityOverviewTab from './task-quality/quality-overview-tab';
 import QualityManagementTab from './task-quality/quality-magement-tab';
 import QualitySettingsTab from './quality-settings-tab';
 
 const core = getCore();
 
-function getTabFromHash(supportedTabs: string[]): string {
-    const tab = window.location.hash.slice(1);
-    return supportedTabs.includes(tab) ? tab : supportedTabs[0];
-}
-
 interface State {
     fetching: boolean;
     reportRefreshingStatus: string | null;
@@ -159,8 +155,8 @@ const reducer = (state: State, action: ActionUnion<typeof reducerActions>): Stat
     return state;
 };
 
+const supportedTabs = ['overview', 'settings', 'management'];
 function QualityControlPage(): JSX.Element {
-    const supportedTabs = ['overview', 'settings', 'management'];
     const [state, dispatch] = useReducer(reducer, {
         fetching: true,
         reportRefreshingStatus: null,
@@ -293,10 +289,9 @@ function QualityControlPage(): JSX.Element {
     }, [requestedInstanceID]);
 
     useEffect(() => {
-        window.addEventListener('hashchange', () => {
-            const hash = getTabFromHash(supportedTabs);
-            setActiveTab(hash);
-        });
+        const onHashChange = () => setActiveTab(getTabFromHash(supportedTabs));
+        window.addEventListener('hashchange', onHashChange);
+        return () => window.removeEventListener('hashchange', onHashChange);
     }, []);
 
     useEffect(() => {

cvat-ui/src/utils/location-utils.ts

@@ -0,0 +1,8 @@
+// Copyright (C) CVAT.ai Corporation
+//
+// SPDX-License-Identifier: MIT
+
+export function getTabFromHash(supportedTabs: string[]): string {
+    const tab = window.location.hash.slice(1);
+    return supportedTabs.includes(tab) ? tab : supportedTabs[0];
+}