update dependencies (#24)

* update dependencies * fix links and language switch * some cleanup
scout-ch · Oct 23, 2023 · 9cdb4b6 · 9cdb4b6
1 parent a3cc04d
commit 9cdb4b6
Show file tree

Hide file tree

Showing 17 changed files with 7,548 additions and 7,029 deletions.
diff --git a/.tool-versions b/.tool-versions
@@ -1,2 +1,2 @@
-nodejs 14.15.0
+nodejs 18.0.0
 
diff --git a/package.json b/package.json
@@ -4,37 +4,44 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@craco/craco": "^6.3.0",
-    "@emotion/babel-preset-css-prop": "^11.2.0",
-    "@emotion/react": "^11.4.0",
-    "@emotion/styled": "^11.3.0",
-    "@fortawesome/fontawesome-svg-core": "^1.2.36",
-    "@fortawesome/free-solid-svg-icons": "^5.15.4",
-    "@fortawesome/react-fontawesome": "^0.1.15",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
-    "@types/jest": "^26.0.15",
-    "@types/node": "^12.0.0",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
-    "axios": "^0.21.4",
-    "craco-less": "^1.20.0",
-    "i18next": "^21.2.0",
-    "i18next-browser-languagedetector": "^6.1.2",
+    "@emotion/babel-preset-css-prop": "^11.10.0",
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
+    "@fortawesome/fontawesome-svg-core": "^6.2.1",
+    "@fortawesome/free-solid-svg-icons": "^6.2.1",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "assert": "^2.1.0",
+    "axios": "^1.2.6",
+    "file-loader": "^6.2.0",
+    "i18next": "^22.4.9",
+    "i18next-browser-languagedetector": "^7.0.1",
     "ics": "^2.31.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
-    "react-i18next": "^11.12.0",
-    "react-markdown": "^7.0.1",
-    "react-router": "^5.2.1",
-    "react-router-dom": "^5.3.0",
+    "react-i18next": "^12.1.4",
+    "react-markdown": "^8.0.5",
+    "react-quiz-component": "^0.5.1",
+    "react-router": "^6.8.0",
+    "react-router-dom": "^6.8.0",
     "react-router-hash-link": "^2.4.3",
-    "react-scripts": "4.0.3",
-    "remark-gfm": "^2.0.0",
-    "typescript": "^4.1.2",
-    "web-vitals": "^1.0.1"
+    "remark-gfm": "^3.0.1",
+    "typescript": "^4.9.4",
+    "web-vitals": "^3.1.1"
+  },
+  "devDependencies": {
+    "@craco/craco": "7.0.0",
+    "@svgr/webpack": "^6.5.1",
+    "@types/jest": "^29.4.0",
+    "@types/node": "^18.11.18",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.10",
+    "@types/react-helmet": "^6.1.7",
+    "@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": {
     "start": "PORT=3001 craco start",
@@ -59,10 +66,5 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  },
-  "devDependencies": {
-    "@types/react-helmet": "^6.1.1",
-    "@types/react-router-dom": "^5.1.9",
-    "@types/react-router-hash-link": "^2.4.2"
   }
 }
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,8 +1,8 @@
 import React, { useEffect } from 'react';
 import {
   HashRouter as Router,
-  Switch,
   Route,
+  Routes,
 } from "react-router-dom";
 import { faCalendar, faExclamationTriangle, faBars } from '@fortawesome/free-solid-svg-icons'
 import { library } from '@fortawesome/fontawesome-svg-core'
@@ -74,21 +74,13 @@ function App() {
         </div>
 
         <main>
-          <Switch>
-            <Route path="/calendar" >
-              <CalendarPage page={calendarPage} />
-            </Route>
-            <Route path="/impressum" >
-              <ImpressumPage />
-            </Route>
-            <Route path="/:slug" children={<SectionPage sections={sectionsByKey} />} />
-            <Route exact path="/">
-              <HomePage page={startPage}></HomePage>
-            </Route>
-            <Route exact path="/hering/">
-              <HomePage page={startPage}></HomePage>
-            </Route>
-          </Switch>
+          <Routes>
+            <Route path="/calendar" element={ <CalendarPage page={calendarPage} />} />
+            <Route path="/impressum" element={<ImpressumPage />} />
+            <Route path="/:slug" element={<SectionPage sections={sectionsByKey} />} />
+            <Route path="/" element={<HomePage page={startPage}/>} />
+            <Route path="/hering/" element={<HomePage page={startPage}/>} />
+          </Routes>
 
           <div className='footer'>
             <Footer lang={lang} sections={sections} />

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -1,13 +1,13 @@
 import React from 'react'
-import { ReactComponent as FooterLogo } from './../images/footer.svg'
-import { ReactComponent as PBSLogo } from './../images/pbs_logo.svg'
 import styled from '@emotion/styled';
 import i18n from './../i18n';
 // import client from "./../client";
-import { Link, useHistory, useLocation } from 'react-router-dom'
+import { Link, useNavigate, useLocation } from 'react-router-dom'
 import { SectionT } from './Section';
 // import { getLocalSectionData } from '../helper/LocalDataHelper';
 import client from '../client';
+import FooterSvg from './FooterSvg';
+import PbsLogoSvg from './PbsLogoSvg';
 
 
 const Button = styled.button`
@@ -48,23 +48,27 @@ function Footer(props: Props) {
           const newCurrentSection = newSections.find((s: any) => { return s['id'] === otherSection['id'] })
           if (newCurrentSection) {
             redirect = true
-            history.push('/' + newCurrentSection.slug)
+            history('/' + newCurrentSection.slug)
           }
         }
       }).finally(() => {
         if (!redirect) {
-          history.push('/')
+          history('/')
         }
       })
     });
   }
   const location = useLocation();
-  const history = useHistory();
+  const history = useNavigate();
   return <>
-    <div className='footer-image'><FooterLogo></FooterLogo></div>
+    <div className='footer-image'>
+      <FooterSvg />
+      </div>
     <div className="footer-content">
       <nav className="footer-nav">
-        <div className='footer-logo'><PBSLogo></PBSLogo></div>
+        <div className='footer-logo'>
+          <PbsLogoSvg />
+        </div>
         <ul>
           <li>
             <Button className={props.lang === 'de' ? 'active' : ''} onClick={() => changeLanguage('de', history, location, props.sections)}>Deutsch</Button>

diff --git a/src/components/FooterSvg.tsx b/src/components/FooterSvg.tsx
diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { SectionT } from './Section'
-import { Link, useHistory, useLocation } from 'react-router-dom'
+import { Link, useNavigate, useLocation } from 'react-router-dom'
 import { ChapterT } from './Chapter'
 import { HashLink } from 'react-router-hash-link'
 import { useState } from 'react'
@@ -18,7 +18,7 @@ function Navigation(props: Props) {
 
     const [navbarOpen, setNavbarOpen] = useState(false)
     const location = useLocation()
-    const history = useHistory()
+    const history = useNavigate()
 
     const sections = props.sections
     const [checkedState, setCheckedState] = useState(
@@ -30,7 +30,7 @@ function Navigation(props: Props) {
             index === sectionNav ? !item : false
         );
         setCheckedState(updatedCheckedState)
-        history.push('/' + section.slug)
+        history('/' + section.slug)
     }
 
     const handleToggle = () => {