Merge branch 'muke1908:master' into patch-copystyle

client/package.json

@@ -4,29 +4,29 @@
   "private": true,
   "dependencies": {
     "@chat-e2ee/service": "file:../service",
-    "qrcode.react": "^3.1.0",
-    "react": "^16.13.1",
-    "react-bootstrap": "^1.5.2",
-    "react-dom": "^16.13.1",
-    "react-icons": "^3.10.0",
-    "react-router-dom": "^5.2.0"
+    "qrcode.react": "^4.0.1",
+    "react": "^18.3.1",
+    "react-bootstrap": "^2.10.4",
+    "react-dom": "^18.3.1",
+    "react-icons": "^5.3.0",
+    "react-router-dom": "^6.26.2"
   },
   "devDependencies": {
     "react-scripts": "^5.0.1",
-    "typescript-plugin-css-modules": "^5.0.1",
-    "@types/jest": "^29.5.2",
-    "@types/node": "^20.2.5",
-    "@types/react": "^18.2.9",
-    "@types/react-dom": "^18.2.4",
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.5.0",
-    "@testing-library/user-event": "^7.2.1",
+    "typescript-plugin-css-modules": "^5.1.0",
+    "@types/jest": "^29.5.13",
+    "@types/node": "^22.6.1",
+    "@types/react": "^18.3.8",
+    "@types/react-dom": "^18.3.0",
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.5.2",
     "@types/react-router-dom": "^5.3.3",
-    "eslint-plugin-jsx-a11y": "^6.6.1",
-    "eslint-plugin-promise": "4.1.1",
-    "eslint-plugin-react": "7.31.11",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "html-webpack-plugin": "^5.5.1",
+    "eslint-plugin-jsx-a11y": "^6.10.0",
+    "eslint-plugin-promise": "7.1.0",
+    "eslint-plugin-react": "7.36.1",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "html-webpack-plugin": "^5.6.0",
     "typescript": "^4.9.5"
   },
   "scripts": {

client/src/components/LinkDisplay/index.tsx

@@ -3,7 +3,7 @@ import { FiLink, FiCopy, FiExternalLink, FiArrowDown, FiArrowUp } from "react-ic
 import styles from "./Style.module.css";
 import { ThemeContext } from "../../ThemeContext";
 import { LinkObjType } from "@chat-e2ee/service";
-import QRCode from "qrcode.react";
+import { QRCodeSVG } from "qrcode.react";
 
 const LinkDisplay: React.FC<{ content: LinkObjType }> = ({ content }) => {
   const chatLink =
@@ -80,7 +80,7 @@ const LinkDisplay: React.FC<{ content: LinkObjType }> = ({ content }) => {
       </div>
       {showQR && (
         <div className={styles.qrCodeContainer}>
-          <QRCode value={chatLink} size={128} />
+          <QRCodeSVG value={chatLink} size={128} />
         </div>
       )}
     </div>

client/src/index.tsx

@@ -7,7 +7,7 @@ import ChatLink from "./pages/chatlink";
 import Messaging from "./pages/messaging";
 import { ThemeProvider, ThemeContext } from "./ThemeContext";
 
-import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
+import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
 
 const App = () => {
   const [darkMode] = useContext(ThemeContext);
@@ -18,10 +18,10 @@ const App = () => {
     >
       <Router>
         <div className={styles.bodyContent}>
-          <Switch>
-            <Route exact path="/" component={ChatLink} />
-            <Route exact path="/chat/:channelID" component={Messaging} />
-          </Switch>
+          <Routes>
+            <Route path="/" element={<ChatLink />} />
+            <Route path="/chat/:channelID" element={<Messaging />} />
+          </Routes>
         </div>
       </Router>
     </div>

client/src/pages/messaging/index.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
-import { useHistory, useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 
 import {
     createChatInstance, utils, TypeUsersInChannel, setConfig
@@ -48,12 +48,13 @@ const Chat = () => {
   const [deliveredID, setDeliveredID] = useState<string[]>([]);
   const [darkMode] = useContext(ThemeContext);
   const [linkActive, setLinkActive] = useState(true);
-  const history = useHistory();
+  const navigate = useNavigate();
 
   const myKeyRef = useRef<{ privateKey?: string } | null>();
   const notificationTimer = useRef<number | undefined>(undefined);
 
-  const { channelID }: { channelID: string } = useParams();
+  const params = useParams<{ channelID: string }>();
+  const channelID = params.channelID;
 
   let userId = getUserSessionID(channelID);
   // if not in session, lets create one and store.
@@ -163,7 +164,7 @@ const Chat = () => {
   const handleDeleteLink = async () => {
     setLinkActive(false);
     await chate2ee.delete();
-    history.push("/");
+    navigate("/");
   };
 
   const initChat = async () => {