client: Fix CheckAuthorization redirection

The `CheckAuthorization` was no longer redirecting to the `/sign/in` page and the following warning was logged into the console:

> You should call navigate() in a React.useEffect(), not when your component is first rendered.

Probably regressed in 88deede.

Let’s fix the redirection.

Using polyfill for `useEffectEvent` from react 1.19.2 to get `eslint-plugin-react-hooks` of our back.

Keeping the error message in the body to have some content in case the effect is slow.

Author: jtojnar

client/js/templates/App.jsx

@@ -10,6 +10,7 @@ import {
     useNavigate,
     useLocation,
 } from 'react-router';
+import { useEffectEvent } from 'use-effect-event';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Collapse } from '@kunukn/react-collapse';
 import classNames from 'classnames';
@@ -92,13 +93,23 @@ function NotFound() {
 
 function CheckAuthorization({ isAllowed, returnLocation, _, children }) {
     const navigate = useNavigate();
+
+    const redirect = useEffectEvent(() => {
+        navigate('/sign/in', {
+            state: { returnLocation },
+        });
+    });
+
+    useEffect(() => {
+        if (!isAllowed) {
+            redirect();
+        }
+    }, [isAllowed]);
+
     if (!isAllowed) {
         const [preLink, inLink, postLink] = _('error_unauthorized').split(
             /\{(?:link_begin|link_end)\}/,
         );
-        navigate('/sign/in', {
-            state: { returnLocation },
-        });
 
         return (
             <p>

client/package-lock.json

@@ -27,6 +27,7 @@
     "rooks": "^9.0.0",
     "tinykeys": "^3.0.0",
     "unreset-css": "^1.0.1",
+    "use-effect-event": "^2.0.3",
     "use-state-with-deps": "^1.1.1",
     "yet-another-react-lightbox": "^3.5.0"
   },