commit

package.json

@@ -9,19 +9,19 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "axios": "^1.6.8",
+    "axios": "^1.7.0",
     "html-react-parser": "^5.1.10",
     "megajs": "1.2.2",
     "next": "^14.2.3",
-    "peerjs": "^1.5.2",
+    "peerjs": "^1.5.4",
     "qr-scanner": "^1.4.2",
     "react": "^18.3.1",
     "react-circular-progressbar": "^2.1.0",
     "react-dom": "^18.3.1",
-    "react-icons": "^5.2.0",
+    "react-icons": "^5.2.1",
     "react-markdown": "^9.0.1",
-    "react-qr-code": "^2.0.12",
-    "react-text-to-speech": "^0.14.5",
+    "react-qr-code": "^2.0.13",
+    "react-text-to-speech": "^0.14.6",
     "react-textarea-autosize": "^8.5.3",
     "react-toastify": "^10.0.5",
     "react-top-loading-bar": "^2.3.1",
@@ -35,7 +35,7 @@
     "@serwist/next": "^9.0.2",
     "@tailwindcss/typography": "^0.5.13",
     "autoprefixer": "^10.4.19",
-    "eslint": "8.57.0",
+    "eslint": "^8.57.0",
     "eslint-config-next": "^14.2.3",
     "postcss": "^8.4.38",
     "prettier-plugin-tailwindcss": "^0.5.14",

src/components/Peer.js → src/components/PeerCard.js

@@ -9,7 +9,7 @@ import { bytesToFraction, bytesToUnit, speed } from "../modules/functions";
 import "react-circular-progressbar/dist/styles.css";
 import { useFileContext } from "../contexts/ContextProvider";
 
-export default function Peer({ data: { name, conn }, names, sizes, totalSize }) {
+export default function PeerCard({ data: { name, conn }, names, sizes, totalSize }) {
   const { files } = useFileContext();
   const [count, setCount] = useState(0);
   const [bytes, setBytes] = useState(0);

src/pages/_app.js

@@ -16,7 +16,6 @@ const api = process.env.NEXT_PUBLIC_API;
 export default function MyApp({ Component, pageProps }) {
   const router = useRouter();
   const [loading, setLoading] = useState(true);
-  pageProps.router = router;
 
   useEffect(() => {
     setLoading(false);
@@ -177,7 +176,7 @@ export default function MyApp({ Component, pageProps }) {
         {!loading && router.isReady && (
           <>
             {!hideNavbar.includes(router.pathname) && <Navbar />}
-            <Component {...pageProps} />
+            <Component router={router} {...pageProps} />
             {showModal.includes(router.pathname) && <Modal />}
             <ToastContainer stacked autoClose={3000} pauseOnFocusLoss={false} position="bottom-right" />
           </>

src/pages/p2p/[roomId].js

@@ -1,5 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import Head from "next/head";
+import Peer from "peerjs";
 import { useEffect, useRef, useState } from "react";
 import { toast } from "react-toastify";
 import BarProgress from "../../components/BarProgress";
@@ -102,7 +103,6 @@ export default function Id({ router }) {
   }
 
   useEffect(() => {
-    const Peer = require("peerjs").default;
     const peer = (peerRef.current = new Peer(peerOptions));
     peer.on("open", connect);
     peer.on("error", handleError);

src/pages/p2p/index.js

@@ -1,11 +1,12 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import { useEffect, useMemo, useReducer, useRef, useState } from "react";
+import Peer from "peerjs";
 import Head from "next/head";
 import Textarea from "react-textarea-autosize";
 import { FaQrcode } from "react-icons/fa";
 import { toast } from "react-toastify";
 import Info from "../../components/Info";
-import Peer from "../../components/Peer";
+import PeerCard from "../../components/PeerCard";
 import { peerOptions } from "../../constants";
 import { useFileContext } from "../../contexts/ContextProvider";
 import { fileDetails, generateId } from "../../modules/functions";
@@ -91,7 +92,6 @@ export default function P2p({ router }) {
     e.preventDefault();
     if (!length && !text) return toast.error("Please provide files or text to share!");
     setProgress(100 / 8);
-    const Peer = require("peerjs").default;
     const peerId = shareRoom.current.value || Date.now();
     setProgress(100 / 3);
     const peer = (peerRef.current = new Peer(peerId, peerOptions));
@@ -171,7 +171,7 @@ export default function P2p({ router }) {
             <h2 className="text-center text-lg font-medium md:text-xl">Active Users</h2>
             <div className="mx-5 flex flex-wrap items-center justify-center gap-5 pb-10">
               {connArr.map((conn) => (
-                <Peer key={conn[0]} data={conn[1]} names={names} sizes={sizes} totalSize={totalSize} />
+                <PeerCard key={conn[0]} data={conn[1]} names={names} sizes={sizes} totalSize={totalSize} />
               ))}
             </div>
           </div>