updated react and changed deprecated components.

package.json

@@ -9,18 +9,20 @@
     "@testing-library/user-event": "^13.2.1",
     "@types/jest": "^27.0.1",
     "@types/node": "^16.7.13",
-    "@types/react": "^17.0.20",
-    "@types/react-dom": "^17.0.9",
+    "@types/react": "^18.3.26",
+    "@types/react-dom": "^18.3.7",
     "@types/styled-components": "^5.1.21",
     "env-cmd": "^10.1.0",
     "immer": "^9.0.12",
     "lodash": "^4.17.20",
+    "mkcert": "^3.2.0",
+    "nss": "^0.0.1",
     "polished": "^4.1.4",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-feather": "^2.0.9",
     "react-icons": "^4.1.0",
-    "react-router-dom": "^5.2.0",
+    "react-router-dom": "^7.9.4",
     "react-scripts": "^5.0.0",
     "react-zoom-pan-pinch": "^1.6.1",
     "simple-zustand-devtools": "^1.0.0",

src/App.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import { Header } from './components/Header/Header'
 import styled from 'styled-components'
 
-import { BrowserRouter as Router, Switch, Route } from "react-router-dom"
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom"
 import { Home } from "./pages/Home/Home"
 import { Enter } from "./pages/Enter/Enter"
 import { Session } from "./pages/Session/Session"
@@ -20,24 +20,21 @@ function App() {
   return (
     <AppContainer>
       <Router>
-        <Switch>
-          <Route path="/enter/:id">
-            <Enter />
-          </Route>
-
-          <Route path="/session/:id">
-            {/* TODO: redirect to "/enter" if this the first time the user in this conference */}
-            <Session />
-          </Route>
-
-          <Route path="/">
-            <Header>Chatmosphere</Header>
-            <Home />
-          </Route>
-        </Switch>
+        <Routes>
+          <Route path="/enter/:id?" element={<Enter />} />
+
+          <Route path="/session/:id" element={<Session />} />
+
+          <Route path="/" element={
+            <>
+              <Header>Chatmosphere</Header>
+              <Home />
+            </>
+          } />
+        </Routes>
       </Router>
     </AppContainer>
   )
 }
 
-export default App
+export default App

src/components/Footer/JoinButton/JoinButton.tsx

@@ -1,26 +1,26 @@
 import * as React from 'react'
 import { useConferenceStore } from '../../../store/ConferenceStore'
 import { useConnectionStore } from '../../../store/ConnectionStore'
-import { useHistory } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
 import { Button } from '../../common/Buttons/Button'
 import { PhoneOff } from 'react-feather'
 
 export const JoinButton = ({ joined = false }) => {
 	const leave = useConferenceStore((store) => store.leaveConference)
 	const disconnectServer = useConnectionStore((store) => store.disconnectServer)
 	const conferenceName = useConferenceStore((store) => store.conferenceName)
-	const history = useHistory()
+	const navigate = useNavigate()
 
 	const onEndCall = () => {
 		leave()
 		disconnectServer()
-		history.push(`/`)
+		navigate(`/`)
 	}
 
 	const onStartCall = (e) => {
 		e.preventDefault()
 		//perhaps it is better to create a connection and then forward to "session/" page?
-		history.push(`/session/${conferenceName}`)
+		navigate(`/session/${conferenceName}`)
 	}
 
 	if (joined) {

src/components/Room/Room.tsx

@@ -19,7 +19,7 @@ const RoomContainer = styled.div`
 //   height:100%;
 // `
 
-export const Room:React.FC = ({children}) => {
+export const Room: React.FC<{ children: React.ReactNode }> = ({children}) => {
   return (
     <RoomContainer>
       {/* <Background /> */}

src/index.tsx

@@ -1,12 +1,13 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import App from './App'
 import reportWebVitals from './reportWebVitals'
 import { ThemeProvider } from 'styled-components'
 import { lightTheme } from './theme/theme'
 import { GlobalStyles } from './theme/GlobalStyles/GlobalStyles'
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('root')!);
+root.render(
 	<React.StrictMode>
 		<ThemeProvider theme={lightTheme}>
 			<>
@@ -15,9 +16,7 @@ ReactDOM.render(
 			</>
 		</ThemeProvider>
 	</React.StrictMode>
-	,
-	document.getElementById('root'),
-)
+);
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))

src/pages/Enter/Enter.tsx

@@ -41,7 +41,9 @@ export const Enter = () => {
 
 	React.useEffect(
 		() => {
+			if (id) {
 			setConferenceName(id)
+			}
 		},
 		[ id, setConferenceName ],
 	)

src/pages/Home/elements/NameInputContainer.tsx

@@ -2,13 +2,13 @@ import React, { useState } from 'react';
 import { conferenceName } from '../../../components/JitsiConnection/jitsiOptions';
 import { useConferenceStore } from '../../../store/ConferenceStore';
 import { NameInputForm } from './NameInputForm';
-import {useHistory } from 'react-router-dom'
+import {useNavigate } from 'react-router-dom'
 
 export const NameInputContainer = () => {
 
   const [sessionName, setName] = useState<string>(conferenceName)
 	const setConferenceName = useConferenceStore(state => state.setConferenceName)
-	const history = useHistory()
+	const navigate = useNavigate()
 
 	const handleChange = (e) => {
 		setName(e.target.value)
@@ -20,7 +20,7 @@ export const NameInputContainer = () => {
 			//set the conference name to use it in enter screen
 			//it won't join to conference yet until enter.tsx creates a connection
 			setConferenceName(sessionName) 
-			history.push(`/session/${sessionName}`)
+			navigate(`/session/${sessionName}`)
 		}
 	}