No extra rerender of different pages with each click (#5178)

* No extra rerender of different pages with each click

* updated changelog

* Dedicated effects

* Removed extra code

CHANGELOG.md

@@ -56,6 +56,7 @@ non-ascii paths while adding files from "Connected file share" (issue #4428)
 - Deleted frames become restored if a user deletes frames from another job of the same task
 (<https://github.com/opencv/cvat/pull/5138>)
 - Wrong issue position when create a quick issue on a rotated shape (<https://github.com/opencv/cvat/pull/5162>)
+- Extra rerenders of different pages with each click (<https://github.com/opencv/cvat/pull/5178>)
 - Skeleton points exported out of order in the COCO Keypoints format
   (<https://github.com/opencv/cvat/issues/5048>)
 - Changing an object causes current z layer to be set to the maximum (<https://github.com/opencv/cvat/pull/5145>)

cvat-ui/src/components/resource-sorting-filtering/filtering.tsx

@@ -129,15 +129,6 @@ export default function ResourceFilterHOC(
             setRecentFilters(receiveRecentFilters());
             setIsMounted(true);
 
-            const listener = (event: MouseEvent): void => {
-                const path: HTMLElement[] = event.composedPath()
-                    .filter((el: EventTarget) => el instanceof HTMLElement) as HTMLElement[];
-                if (path.some((el: HTMLElement) => el.id === 'root') && !path.some((el: HTMLElement) => el.classList.contains('ant-btn'))) {
-                    onBuilderVisibleChange(false);
-                    onRecentVisibleChange(false);
-                }
-            };
-
             try {
                 if (value) {
                     const tree = QbUtils.loadFromJsonLogic(JSON.parse(value), config);
@@ -152,10 +143,26 @@ export default function ResourceFilterHOC(
             } catch (_: any) {
                 // nothing to do
             }
+        }, []);
+
+        useEffect(() => {
+            const listener = (event: MouseEvent): void => {
+                const path: HTMLElement[] = event.composedPath()
+                    .filter((el: EventTarget) => el instanceof HTMLElement) as HTMLElement[];
+                if (path.some((el: HTMLElement) => el.id === 'root') && !path.some((el: HTMLElement) => el.classList.contains('ant-btn'))) {
+                    if (builderVisible) {
+                        onBuilderVisibleChange(false);
+                    }
+
+                    if (predefinedVisible) {
+                        onRecentVisibleChange(false);
+                    }
+                }
+            };
 
             window.addEventListener('click', listener);
             return () => window.removeEventListener('click', listener);
-        }, []);
+        }, [builderVisible, predefinedVisible]);
 
         useEffect(() => {
             if (!isMounted) {

cvat-ui/src/components/resource-sorting-filtering/sorting.tsx

@@ -119,17 +119,22 @@ function SortingModalComponent(props: Props): JSX.Element {
 
     useEffect(() => {
         setIsMounted(true);
+    }, []);
+
+    useEffect(() => {
         const listener = (event: MouseEvent): void => {
             const path: HTMLElement[] = event.composedPath()
                 .filter((el: EventTarget) => el instanceof HTMLElement) as HTMLElement[];
             if (path.some((el: HTMLElement) => el.id === 'root') && !path.some((el: HTMLElement) => el.classList.contains('ant-btn'))) {
-                onVisibleChange(false);
+                if (visible) {
+                    onVisibleChange(false);
+                }
             }
         };
 
         window.addEventListener('click', listener);
         return () => window.removeEventListener('click', listener);
-    }, []);
+    }, [visible]);
 
     useEffect(() => {
         if (!isMounted) return;