Refactoring of code base #62: Remove react-helmet

- replace with react-helmet async
- fixes untraceable console warnings

package.json

@@ -19,7 +19,7 @@
     "i18next-browser-languagedetector": "^7.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-helmet": "^6.1.0",
+    "react-helmet-async": "^1.3.0",
     "react-i18next": "^12.1.4",
     "react-markdown": "^8.0.5",
     "react-quiz-component": "^0.5.1",
@@ -31,17 +31,17 @@
     "web-vitals": "^3.1.1"
   },
   "devDependencies": {
-    "react-scripts": "^5.0.1",
     "@craco/craco": "7.0.0",
-    "craco-less":"2.1.0-alpha.0",
-    "@types/react-helmet": "^6.1.6",
-    "@types/react-router-dom": "^5.3.3",
-    "@types/react-router-hash-link": "^2.4.5",
+    "@svgr/webpack": "^6.5.1",
     "@types/jest": "^29.4.0",
     "@types/node": "^18.11.18",
     "@types/react": "^18.0.27",
     "@types/react-dom": "^18.0.10",
-    "@svgr/webpack": "^6.5.1",
+    "@types/react-helmet": "^6.1.6",
+    "@types/react-router-dom": "^5.3.3",
+    "@types/react-router-hash-link": "^2.4.5",
+    "craco-less": "2.1.0-alpha.0",
+    "react-scripts": "^5.0.1",
     "serve": "^14.2.0"
   },
   "scripts": {

src/components/Section.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Helmet } from 'react-helmet'
+import { Helmet, HelmetProvider } from 'react-helmet-async'
 import { withTranslation } from 'react-i18next'
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
@@ -43,7 +43,7 @@ function Section(props: Props) {
 
 
     return <div className='content'>
-        <Helmet><title>{props.section['title']}</title></Helmet>
+        <HelmetProvider><title>{props.section['title']}</title></HelmetProvider>
         <div className='content-main'>
             <div id="section-title" className={classes}>
                 {props.section.icon && (<img className='icon' src={props.section.icon.url} alt="icon" />)}

src/pages/HomePage .tsx

@@ -1,6 +1,6 @@
 // import styled from '@emotion/styled'
 import React from 'react'
-import { Helmet } from 'react-helmet'
+import { Helmet, HelmetProvider } from 'react-helmet-async'
 
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
@@ -22,9 +22,9 @@ function HomePage(props: Props) {
   const startPage = props.page
 
   return <div className='content-main'>
-    <Helmet>
+    <HelmetProvider>
       <title>{startPage.title}</title>
-    </Helmet>
+    </HelmetProvider>
 
     <h1>{startPage.title}</h1>
 

src/pages/ImpressumPage.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Helmet } from 'react-helmet'
+import { Helmet, HelmetProvider } from 'react-helmet-async'
 import { withTranslation } from 'react-i18next'
 import i18n from '../i18n';
 import client from '../client';
@@ -24,9 +24,9 @@ function ImpressumPage() {
   if (!impressumPage) return null
 
   return <div className='content-main'>
-    <Helmet>
+    <HelmetProvider>
       <title>{impressumPage.title}</title>
-    </Helmet>
+    </HelmetProvider>
   </div>
 }
 export default withTranslation()(ImpressumPage)

src/pages/SearchPage.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Helmet } from 'react-helmet'
+import { Helmet, HelmetProvider } from 'react-helmet-async'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
@@ -25,9 +25,9 @@ function SearchPage(props: Props) {
     const lang = i18n.language
 
     return <div className='content-main'>
-        <Helmet>
+        <HelmetProvider>
             <title>{searchPage.title}</title>
-        </Helmet>
+        </HelmetProvider>
 
         <div className='search'>
             <h1><FontAwesomeIcon icon="search" /> {searchPage.title}</h1>