- #62 : upgrade all dependencies

- remove unnecessary depdendencies - separate production and dev dependencies
scout-ch · Feb 3, 2023 · 0fa08e1 · 0fa08e1
1 parent a232196
commit 0fa08e1
Show file tree

Hide file tree

Showing 12 changed files with 15,386 additions and 21,349 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,39 +8,41 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@craco/craco": "^6.4.3",
-    "@emotion/babel-preset-css-prop": "^11.2.0",
-    "@emotion/react": "^11.4.0",
-    "@emotion/styled": "^11.3.0",
-    "@fortawesome/fontawesome-svg-core": "^6.2.0",
-    "@fortawesome/free-solid-svg-icons": "^6.2.0",
+    "@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",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^12.1.5",
-    "@testing-library/user-event": "^14.4.3",
-    "@types/jest": "^29.2.3",
-    "@types/node": "^18.11.0",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
-    "axios": "^1.1.3",
-    "craco-less": "^1.20.0",
-    "i18next": "^22.0.6",
+    "axios": "^1.2.6",
+    "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": "^12.0.0",
-    "react-markdown": "^7.0.1",
-    "react-quiz-component": "^0.5.0",
-    "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": "^3.0.1",
-    "serve": "^14.1.2",
-    "typescript": "^4.1.2",
-    "web-vitals": "^3.0.3"
+    "typescript": "^4.9.4",
+    "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",
+    "@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",
+    "serve": "^14.2.0"
   },
   "scripts": {
     "start": "craco start",
@@ -69,10 +71,5 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  },
-  "devDependencies": {
-    "@types/react-helmet": "^6.1.6",
-    "@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,7 +1,7 @@
 import React, { useEffect } from 'react';
 import {
   HashRouter as Router,
-  Switch,
+  Routes,
   Route,
 } from "react-router-dom";
 import { faExclamationTriangle, faBars, faSearch } from '@fortawesome/free-solid-svg-icons'
@@ -71,21 +71,14 @@ function App() {
         </header>
 
         <main>
-          <Switch>
-            <Route path="/search" >
-              <SearchPage page={searchPage} />
-            </Route>
-            <Route path="/impressum" >
-              <ImpressumPage />
-            </Route>
-            <Route path="/:slug" children={<SectionPage sections={sectionsByKey} />} />
-            <Route exact path="/">
-              <HomePage page={startPage}></HomePage>
-            </Route>
-            <Route exact path="/thilo/">
-              <HomePage page={startPage}></HomePage>
-            </Route>
-          </Switch>
+          <Routes>
+            <Route path="/search" element={<SearchPage page={searchPage} />} />
+            <Route path="/impressum" element={<ImpressumPage />} />
+            <Route path="/:slug"  element={<SectionPage sections={sectionsByKey} />} />
+            <Route path="/" element={<HomePage page={startPage}/>
+            } />
+            <Route path="/thilo/" element={ <HomePage page={startPage}/>} />
+          </Routes>
 
         </main>
         <footer>

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { ReactComponent as PBSLogo } from './../images/pbs_logo.svg'
 import styled from '@emotion/styled';
 import i18n from './../i18n';
-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";
@@ -22,7 +22,8 @@ type Props = {
 }
 
 function Footer(props: Props) {
-  const changeLanguage = (lang: string, history: any, location: any, oldSections: SectionT[]) => {
+  const navigate = useNavigate();
+  const changeLanguage = (lang: string, location: any, oldSections: SectionT[]) => {
     let redirect = false
     const path = location.pathname.replace('/', '')
     const currentSection = oldSections.find((s) => { return s['slug'] === path })
@@ -40,19 +41,18 @@ function Footer(props: Props) {
             const newCurrentSection = newSections.find((s: any) => { return s['id'] === otherSection['id'] })
             if (newCurrentSection) {
               redirect = true
-              history.push('/' + newCurrentSection.slug)
+              navigate('/' + newCurrentSection.slug)
             }
           }
         }
       }).finally(() => {
         if (!redirect) {
-          history.push('/')
+          navigate('/')
         }
       })
     });
   }
   const location = useLocation();
-  const history = useHistory();
   var currentSection = location.pathname.replace('/', '');
   // console.log(currentSection, currentChapter, props.sections)
   var prevSection = '', nextSection = '';
@@ -67,7 +67,8 @@ function Footer(props: Props) {
         }
       }
     }
-  } else {
+  } else if(props.sections[0]) { 
+    // if no props.sections[0] then we can't access the section titles
     nextSection = props.sections[0].title;
     prevSection = props.sections[props.sections.length-1].title;
   }
@@ -78,15 +79,15 @@ function Footer(props: Props) {
         <div className='footer-logo'><PBSLogo></PBSLogo></div>
         <ul>
           <li>
-            <Button className='btn' onClick={() => history.push(`/${prevSection}`)}>
+            <Button className='btn' onClick={() => navigate(`/${prevSection}`)}>
               {prevSection.length > 0 &&
                 <>Vorheriges Kapitel<br/><i>{prevSection}</i></>
               }
               {prevSection.length === 0 &&
                 <>Zurück zum Start</>
               }
             </Button>
-            <Button className='btn' onClick={() => history.push(`/${nextSection}`)}>
+            <Button className='btn' onClick={() => navigate(`/${nextSection}`)}>
               {nextSection.length > 0 &&
                 <>Nächstes Kapitel<br/><i>{nextSection}</i></>
               }
@@ -98,9 +99,9 @@ function Footer(props: Props) {
         </ul>
         <ul>
           <li>
-            <Button className={props.lang === 'de' ? 'active' : ''} onClick={() => changeLanguage('de', history, location, props.sections)}>Deutsch</Button>
-            <Button className={props.lang === 'fr' ? 'active' : ''} onClick={() => changeLanguage('fr', history, location, props.sections)}>Français</Button>
-            <Button className={props.lang === 'it' ? 'active' : ''} onClick={() => changeLanguage('it', history, location, props.sections)}>Italiano</Button>
+            <Button className={props.lang === 'de' ? 'active' : ''} onClick={() => changeLanguage('de', location, props.sections)}>Deutsch</Button>
+            <Button className={props.lang === 'fr' ? 'active' : ''} onClick={() => changeLanguage('fr', location, props.sections)}>Français</Button>
+            <Button className={props.lang === 'it' ? 'active' : ''} onClick={() => changeLanguage('it', location, props.sections)}>Italiano</Button>
           </li>
         </ul>
       </nav>

diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
@@ -1,6 +1,6 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import React, { useState, useEffect } from 'react'
-import { Link, useHistory, useLocation } from 'react-router-dom'
+import { Link, useNavigate, useLocation } from 'react-router-dom'
 import { HashLink } from 'react-router-hash-link'
 import { StartPage } from '../pages/HomePage '
 import { ChapterT } from './Chapter'
@@ -16,7 +16,7 @@ function Navigation(props: Props) {
 
     const [navbarOpen, setNavbarOpen] = useState(false)
     const location = useLocation()
-    const history = useHistory()
+    const navigate = useNavigate()
 
     const sections = props.sections
     const [checkedState, setCheckedState] = useState(
@@ -28,7 +28,7 @@ function Navigation(props: Props) {
             index === sectionNav ? !item : false
         );
         setCheckedState(updatedCheckedState)
-        history.push('/' + section.slug)
+        navigate('/' + section.slug)
     }
 
     const handleToggle = () => {
@@ -46,14 +46,14 @@ function Navigation(props: Props) {
             const searchFieldValue = e.currentTarget.value;
             const searchPageRoute = '/search';
 
-            if (history.location.pathname !== searchPageRoute) {
+            if (location.pathname !== searchPageRoute) {
                 const location = { pathname: searchPageRoute, search: '' }
                 if (searchFieldValue?.length > 0) {
                     location.search = `keyword=${searchFieldValue}`
                 }
-                history.push(location)
+                navigate(location)
             } else {
-                history.replace({ search: `keyword=${searchFieldValue}` })
+                navigate({ search: `keyword=${searchFieldValue}` })
             }
 
             e.currentTarget.value = '';

diff --git a/src/components/SearchForm.tsx b/src/components/SearchForm.tsx
@@ -3,7 +3,7 @@ import { withTranslation } from "react-i18next"
 import Loading from './Loading'
 import { getLocalSectionData } from '../helper/LocalDataHelper';
 import { SearchHelper } from '../helper/SearchHelper';
-import { useHistory, useLocation } from 'react-router';
+import { useNavigate, useLocation, createPath } from 'react-router';
 import { ChapterT } from '../components/Chapter';
 import { SectionT } from '../components/Section';
 import ReactMarkdown from 'react-markdown';
@@ -25,7 +25,7 @@ type SearchResult = {
 
 function SearchForm(props: Props) {
     const location = useLocation()
-    const history = useHistory()
+    const navigate = useNavigate()
     const { t, lang } = props;
 
     const [keyword, setKeyword] = useState<string>('')
@@ -53,7 +53,7 @@ function SearchForm(props: Props) {
             if (!keyword || keyword.length <= 2) {
                 setSearchResults([])
                 setIsLoadingResults(false)
-                history.replace({ search: '' })
+                navigate({ search: '' })
                 return
             }
 
@@ -74,7 +74,7 @@ function SearchForm(props: Props) {
                 const routeParams = new URLSearchParams(location.search)
                 if (routeParams.get('keyword') !== keyword) {
                     routeParams.set('keyword', keyword)
-                    history.replace({ search: routeParams.toString() })
+                    navigate({ search: routeParams.toString() })
                 }
             }, 500))
         }
@@ -97,7 +97,7 @@ function SearchForm(props: Props) {
                     return searchResults.map(result => {
                         return <div key={result.id} className='search-result'>
                             <div className='title-match'>
-                                <a href={history.createHref({ pathname: result.slug })}>{result.title}</a>
+                                <a href={createPath({ pathname: result.slug })}>{result.title}</a>
                             </div>
                             {result.matchingContents.length > 0 ?
                                 <div className='content-match'>

diff --git a/src/components/Section.tsx b/src/components/Section.tsx
@@ -50,7 +50,7 @@ function Section(props: Props) {
                 <h1>{props.section['title']}</h1>
             </div>
             <ReactMarkdown
-                plugins={[remarkGfm]}
+                remarkPlugins={[remarkGfm]}
                 components={LinkComponent}
             >{props.section.content ?? ''}</ReactMarkdown>
             {chapters}

diff --git a/src/index.tsx b/src/index.tsx
@@ -1,14 +1,15 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 import './index.less';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
-ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root')
+import { createRoot } from 'react-dom/client';
+const container = document.getElementById('root');
+const root = createRoot(container!); // createRoot(container!) if you use TypeScript
+root.render(
+<React.StrictMode>
+  <App />
+</React.StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function

diff --git a/src/pages/HomePage .tsx b/src/pages/HomePage .tsx
@@ -29,7 +29,7 @@ function HomePage(props: Props) {
     <h1>{startPage.title}</h1>
 
     <ReactMarkdown
-            plugins={[remarkGfm]}
+            remarkPlugins={[remarkGfm]}
             components={LinkComponent}
         >{startPage.content}</ReactMarkdown>
 

diff --git a/src/pages/SearchPage.tsx b/src/pages/SearchPage.tsx
@@ -32,7 +32,7 @@ function SearchPage(props: Props) {
         <div className='search'>
             <h1><FontAwesomeIcon icon="search" /> {searchPage.title}</h1>
             <ReactMarkdown
-                plugins={[remarkGfm]}
+                remarkPlugins={[remarkGfm]}
                 components={LinkComponent}
             >{searchPage.content}</ReactMarkdown>
 

diff --git a/src/pages/SectionPage.tsx b/src/pages/SectionPage.tsx
@@ -18,7 +18,7 @@ type Props = {
 
 function SectionPage(props: Props) {
   const { slug } = useParams<Params>()
-  const section = props.sections[slug]
+  const section = props.sections[slug!]
   const location = useLocation();
 
   useEffect(() => {

diff --git a/src/setupTests.ts b/src/setupTests.ts