fix: react 19 migration fixes and enhancements Refs: KER-571

Author: mikkojamG

src/App.jsx

@@ -21,6 +21,7 @@ import {
   cookieBotRemoveListeners,
 } from './utils/cookiebotUtils';
 import useAuthHook from './hooks/useAuth';
+import useLanguageFromUrl from './hooks/useLanguageFromUrl';
 import { setOidcUser } from './actions';
 import getUser from './selectors/user';
 import enrichUserData from './actions/user';
@@ -40,6 +41,8 @@ function App({ isHighContrast, history, ...props }) {
   const location = useLocation();
   const { locale } = useIntl();
 
+  useLanguageFromUrl(onChangeLanguage);
+
   const { authenticated, user: oidcUser, logout } = useAuthHook();
   const { getStoredApiTokens } = useApiTokens();
 

src/components/CommentFormMap/CommentFormMap.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { MapContainer, TileLayer, FeatureGroup } from 'react-leaflet';
 import Leaflet from 'leaflet';

src/components/HashScroll.jsx

@@ -0,0 +1,19 @@
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+
+const HashScroll = () => {
+  const { hash } = useLocation();
+
+  useEffect(() => {
+    if (!hash) return;
+    const id = hash.slice(1);
+    const el = document.getElementById(id);
+    if (el) {
+      el.scrollIntoView({ behavior: 'smooth' });
+    }
+  }, [hash]);
+
+  return null;
+};
+
+export default HashScroll;

src/components/Hearing/Comment/index.jsx

@@ -160,7 +160,7 @@ const Comment = ({
 
   const onCopyURL = () => {
     // Build absolute URL for comment
-    const commentUrl = `${window.location.origin}${window.location.pathname}#comment-${data.id}`;
+    const commentUrl = `${globalThis.window.location.origin}${globalThis.window.location.pathname}#comment-${data.id}`;
     navigator.clipboard.writeText(commentUrl);
     // TODO: Add translations
     dispatch(
@@ -227,7 +227,7 @@ const Comment = ({
   const handlePostReply = (comment) => {
     let commentData = { ...comment };
 
-    if (onPostReply && onPostReply instanceof Function) {
+    if (onPostReply) {
       if (isReply && parentComponentId) {
         commentData = { ...commentData, comment: parentComponentId };
       } else {
@@ -765,7 +765,7 @@ Comment.propTypes = {
   questions: PropTypes.array,
   section: PropTypes.object,
   user: PropTypes.object,
-  showReplies: PropTypes,
+  showReplies: PropTypes.bool,
 };
 
 export default Comment;

src/components/Hearing/CommentList/index.jsx

@@ -1,6 +1,4 @@
-/* eslint-disable sonarjs/pseudo-random */
-/* eslint-disable sonarjs/no-uniq-key */
-import React, { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 
@@ -28,7 +26,7 @@ function CommentList({
   onPostFlag,
 }) {
   const [commentShowReplies, setCommentShowReplies] = useState(() =>
-    [...Array(comments.length)].map(() => false)
+    [new Array(comments.length)].map(() => false)
   );
 
   const prevCommentsRef = useRef(comments);
@@ -82,7 +80,7 @@ function CommentList({
           data={comment}
           defaultNickname={defaultNickname}
           hearingId={hearingId}
-          key={comment.id + Math.random()}
+          key={comment.id}
           jumpTo={jumpTo}
           language={language}
           nicknamePlaceholder={nicknamePlaceholder}

src/components/Hearing/Section/SectionImage.jsx

@@ -1,11 +1,17 @@
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
-import React, { useState } from 'react';
+import { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import Lightbox from 'yet-another-react-lightbox';
 
 const SectionImageComponent = ({ image, altText, caption, title }) => {
   const [open, setOpen] = useState(false);
 
+  useEffect(() => {
+    return () => {
+      document.body.classList.add('nav-fixed');
+    };
+  }, []);
+
   if (!image) return null;
 
   const alt = altText || caption || title || '';

src/components/HearingList/HearingsSearch/HearingsSearch.jsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import { isEmpty } from 'lodash';

src/components/InternalLink.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 
@@ -12,6 +11,10 @@ function InternalLink({ children, destinationId, srOnly = false, className }) {
       const top =
         target.getBoundingClientRect().top + window.scrollY - SCROLL_OFFSET;
       window.scrollTo({ top, behavior: 'smooth' });
+      if (!target.hasAttribute('tabIndex')) {
+        target.setAttribute('tabIndex', '-1');
+      }
+      target.focus({ preventScroll: true });
     }
   };
 

src/components/PluginContent.jsx

@@ -2,7 +2,7 @@
 /**
  * Created by riku on 11.5.2017.
  */
-import React, { useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { get } from 'lodash';
 

src/components/RichTextEditor/Iframe/IframeCopyPasteField.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import PropTypes from 'prop-types';
 
 import getMessage from '../../../utils/getMessage';