From 9f2b23a699994ce2fe79f088a7310d3800b14082 Mon Sep 17 00:00:00 2001
From: "j.krol" <janek01krol@gmail.com>
Date: Mon, 18 Mar 2024 20:10:35 +0100
Subject: [PATCH 01/64] Create notifications page

---
 frontend/src/components/Navbar.tsx       |  2 ++
 frontend/src/main.tsx                    |  2 ++
 frontend/src/pages/NotificationsPage.tsx | 12 ++++++++++++
 3 files changed, 16 insertions(+)
 create mode 100644 frontend/src/pages/NotificationsPage.tsx

diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx
index 7de56ca8..8dd1bde2 100644
--- a/frontend/src/components/Navbar.tsx
+++ b/frontend/src/components/Navbar.tsx
@@ -3,6 +3,7 @@ import LogoSVG from "/logo.svg";
 import { useUser } from "../helpers/UserProvider";
 import { useState } from "react";
 import {
+  faBell,
   faMagnifyingGlass,
   faUser,
   faUsers,
@@ -32,6 +33,7 @@ function Navbar(props: NavbarProps) {
   };
 
   const navLinks = [
+    { to: "/notifications", text: "Notifications", icon: faBell },
     { to: "/search", text: "Search", icon: faMagnifyingGlass },
     { to: "/profile", text: "My Profile", icon: faUser },
     { to: "/friends", text: "Friends", icon: faUsers },
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index e5af0e23..819cfd3f 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -12,6 +12,7 @@ import ProfilePage from "./pages/ProfilePage.tsx";
 import RegisterPage from "./pages/RegisterPage.tsx";
 import SearchPage from "./pages/SearchPage.tsx";
 import VideoCallPage from "./pages/VideoCallPage.tsx";
+import NotificationsPage from "./pages/NotificationsPage.tsx";
 
 import "./styles/styles.scss";
 
@@ -37,6 +38,7 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
             <Route path="/friends" element={<FriendsPage />} />
             <Route path="/search" element={<SearchPage />} />
             <Route path="/meeting" element={<VideoCallPage />} />
+            <Route path="/notifications" element={<NotificationsPage />} />
             <Route path="/*" element={<PageNotFound />} />
           </Routes>
         </Router>
diff --git a/frontend/src/pages/NotificationsPage.tsx b/frontend/src/pages/NotificationsPage.tsx
new file mode 100644
index 00000000..02d86a65
--- /dev/null
+++ b/frontend/src/pages/NotificationsPage.tsx
@@ -0,0 +1,12 @@
+import Navbar from "../components/Navbar";
+import Footer from "../components/Footer";
+function NotificationsPage() {
+    return (
+        <>
+            <Navbar />
+            <div>notifications page</div>
+            <Footer />
+        </>
+    )
+}
+export default NotificationsPage;
\ No newline at end of file

From c094faaf0b8ae12df6bf4bd7dd1249b76b834709 Mon Sep 17 00:00:00 2001
From: "j.krol" <janek01krol@gmail.com>
Date: Mon, 18 Mar 2024 20:24:49 +0100
Subject: [PATCH 02/64] Add new content for create room button

---
 frontend/src/pages/FriendsPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/pages/FriendsPage.tsx b/frontend/src/pages/FriendsPage.tsx
index 29ded59f..e21d1a5e 100644
--- a/frontend/src/pages/FriendsPage.tsx
+++ b/frontend/src/pages/FriendsPage.tsx
@@ -137,7 +137,7 @@ function FriendsPage() {
                   className="btn primary w-full mb-4"
                 >
                   <FontAwesomeIcon icon={faPlus}></FontAwesomeIcon>
-                  <span className="ml-2">Create a meeting</span>
+                  <span className="ml-2">Create a room</span>
                 </button>
                 <h1 className="text-3xl font-bold">Friends:</h1>
                 <hr className="text-my-orange"></hr>

From 1d1e2727cb2c8af220a6b841f6fecd1409701c2a Mon Sep 17 00:00:00 2001
From: "j.krol" <janek01krol@gmail.com>
Date: Mon, 18 Mar 2024 20:30:35 +0100
Subject: [PATCH 03/64] Create RoomCallPage for team meetings

---
 frontend/src/main.tsx               |  4 +++-
 frontend/src/pages/RoomCallPage.tsx | 14 ++++++++++++++
 2 files changed, 17 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/pages/RoomCallPage.tsx

diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index 819cfd3f..49bf6963 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -13,12 +13,13 @@ import RegisterPage from "./pages/RegisterPage.tsx";
 import SearchPage from "./pages/SearchPage.tsx";
 import VideoCallPage from "./pages/VideoCallPage.tsx";
 import NotificationsPage from "./pages/NotificationsPage.tsx";
+import EditDataPage from "./pages/EditDataPage.tsx";
+import RoomCallPage from "./pages/RoomCallPage.tsx";
 
 import "./styles/styles.scss";
 
 import UserProvider from "./helpers/UserProvider.tsx";
 import { store } from "./redux/store.ts";
-import EditDataPage from "./pages/EditDataPage.tsx";
 
 const body = document.getElementsByTagName("body")[0]!;
 body.className = "bg-my-darker text-my-light";
@@ -38,6 +39,7 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
             <Route path="/friends" element={<FriendsPage />} />
             <Route path="/search" element={<SearchPage />} />
             <Route path="/meeting" element={<VideoCallPage />} />
+            <Route path="/room/:roomId" element={<RoomCallPage />} />
             <Route path="/notifications" element={<NotificationsPage />} />
             <Route path="/*" element={<PageNotFound />} />
           </Routes>
diff --git a/frontend/src/pages/RoomCallPage.tsx b/frontend/src/pages/RoomCallPage.tsx
new file mode 100644
index 00000000..4eab0152
--- /dev/null
+++ b/frontend/src/pages/RoomCallPage.tsx
@@ -0,0 +1,14 @@
+import Footer from "../components/Footer";
+import Navbar from "../components/Navbar";
+
+function RoomCallPage() {
+    return (
+        <>
+            <Navbar />
+            <div>Room call page</div>
+            <Footer />
+        </>
+    )
+}
+
+export default RoomCallPage;
\ No newline at end of file

From 85dc043eebe5631a19a54cd0f0ec71f21b054417 Mon Sep 17 00:00:00 2001
From: "j.krol" <janek01krol@gmail.com>
Date: Tue, 19 Mar 2024 19:03:23 +0100
Subject: [PATCH 04/64] Create Dockerfile for peer server, but currently cannot
 use compose

---
 peer/Dockerfile | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 peer/Dockerfile

diff --git a/peer/Dockerfile b/peer/Dockerfile
new file mode 100644
index 00000000..07c53cd4
--- /dev/null
+++ b/peer/Dockerfile
@@ -0,0 +1,5 @@
+FROM node:alpine
+WORKDIR /
+RUN npm install -g peer
+EXPOSE 8000
+CMD ["peerjs", "--port", "8000"]
\ No newline at end of file

From d9ff9d8d64aa35d2a0e0f46fca9dfbe8b8d4d433 Mon Sep 17 00:00:00 2001
From: "j.krol" <janek01krol@gmail.com>
Date: Tue, 19 Mar 2024 20:35:40 +0100
Subject: [PATCH 05/64] Install peerjs package at create peer

---
 frontend/package-lock.json          | 300 ++++++++++++++++++++++++++++
 frontend/package.json               |   1 +
 frontend/src/pages/RoomCallPage.tsx |   4 +
 frontend/src/peer/peer.ts           |   8 +
 4 files changed, 313 insertions(+)
 create mode 100644 frontend/src/peer/peer.ts

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 8b16d9cf..71d08132 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -15,6 +15,7 @@
         "@hookform/resolvers": "^3.3.2",
         "framer-motion": "^10.16.4",
         "js-cookie": "^3.0.5",
+        "peerjs": "^1.5.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-hook-form": "^7.48.2",
@@ -429,6 +430,78 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@cbor-extract/cbor-extract-darwin-arm64": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@cbor-extract/cbor-extract-darwin-arm64/-/cbor-extract-darwin-arm64-2.2.0.tgz",
+      "integrity": "sha512-P7swiOAdF7aSi0H+tHtHtr6zrpF3aAq/W9FXx5HektRvLTM2O89xCyXF3pk7pLc7QpaY7AoaE8UowVf9QBdh3w==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@cbor-extract/cbor-extract-darwin-x64": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@cbor-extract/cbor-extract-darwin-x64/-/cbor-extract-darwin-x64-2.2.0.tgz",
+      "integrity": "sha512-1liF6fgowph0JxBbYnAS7ZlqNYLf000Qnj4KjqPNW4GViKrEql2MgZnAsExhY9LSy8dnvA4C0qHEBgPrll0z0w==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@cbor-extract/cbor-extract-linux-arm": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@cbor-extract/cbor-extract-linux-arm/-/cbor-extract-linux-arm-2.2.0.tgz",
+      "integrity": "sha512-QeBcBXk964zOytiedMPQNZr7sg0TNavZeuUCD6ON4vEOU/25+pLhNN6EDIKJ9VLTKaZ7K7EaAriyYQ1NQ05s/Q==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@cbor-extract/cbor-extract-linux-arm64": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@cbor-extract/cbor-extract-linux-arm64/-/cbor-extract-linux-arm64-2.2.0.tgz",
+      "integrity": "sha512-rQvhNmDuhjTVXSPFLolmQ47/ydGOFXtbR7+wgkSY0bdOxCFept1hvg59uiLPT2fVDuJFuEy16EImo5tE2x3RsQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@cbor-extract/cbor-extract-linux-x64": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@cbor-extract/cbor-extract-linux-x64/-/cbor-extract-linux-x64-2.2.0.tgz",
+      "integrity": "sha512-cWLAWtT3kNLHSvP4RKDzSTX9o0wvQEEAj4SKvhWuOVZxiDAeQazr9A+PSiRILK1VYMLeDml89ohxCnUNQNQNCw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@cbor-extract/cbor-extract-win32-x64": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@cbor-extract/cbor-extract-win32-x64/-/cbor-extract-win32-x64-2.2.0.tgz",
+      "integrity": "sha512-l2M+Z8DO2vbvADOBNLbbh9y5ST1RY5sqkWOg/58GkUPBYou/cuNZ68SGQ644f1CvZ8kcOxyZtw06+dxWHIoN/w==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
     "node_modules/@colors/colors": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@colors/colors/-/colors-1.5.0.tgz",
@@ -1222,6 +1295,14 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@msgpack/msgpack": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/@msgpack/msgpack/-/msgpack-2.8.0.tgz",
+      "integrity": "sha512-h9u4u/jiIRKbq25PM+zymTyW6bhTzELvOoUd+AvYriWOAKpLGnIamaET3pnHYoI5iYphAHBI4ayx0MehR+VVPQ==",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -2116,6 +2197,35 @@
       "integrity": "sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==",
       "dev": true
     },
+    "node_modules/cbor-extract": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/cbor-extract/-/cbor-extract-2.2.0.tgz",
+      "integrity": "sha512-Ig1zM66BjLfTXpNgKpvBePq271BPOvu8MR0Jl080yG7Jsl+wAZunfrwiwA+9ruzm/WEdIV5QF/bjDZTqyAIVHA==",
+      "hasInstallScript": true,
+      "optional": true,
+      "dependencies": {
+        "node-gyp-build-optional-packages": "5.1.1"
+      },
+      "bin": {
+        "download-cbor-prebuilds": "bin/download-prebuilds.js"
+      },
+      "optionalDependencies": {
+        "@cbor-extract/cbor-extract-darwin-arm64": "2.2.0",
+        "@cbor-extract/cbor-extract-darwin-x64": "2.2.0",
+        "@cbor-extract/cbor-extract-linux-arm": "2.2.0",
+        "@cbor-extract/cbor-extract-linux-arm64": "2.2.0",
+        "@cbor-extract/cbor-extract-linux-x64": "2.2.0",
+        "@cbor-extract/cbor-extract-win32-x64": "2.2.0"
+      }
+    },
+    "node_modules/cbor-x": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/cbor-x/-/cbor-x-1.5.4.tgz",
+      "integrity": "sha512-PVKILDn+Rf6MRhhcyzGXi5eizn1i0i3F8Fe6UMMxXBnWkalq9+C5+VTmlIjAYM4iF2IYF2N+zToqAfYOp+3rfw==",
+      "optionalDependencies": {
+        "cbor-extract": "^2.1.1"
+      }
+    },
     "node_modules/chalk": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
@@ -2580,6 +2690,15 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/detect-libc": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.3.tgz",
+      "integrity": "sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==",
+      "optional": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -3037,6 +3156,11 @@
       "integrity": "sha512-tYUSVOGeQPKt/eC1ABfhHy5Xd96N3oIijJvN3O9+TsC28T5V9yX9oEfEK5faP0EFSNVOG97qtAS68GBrQB2hDg==",
       "dev": true
     },
+    "node_modules/eventemitter3": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="
+    },
     "node_modules/execa": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/execa/-/execa-4.1.0.tgz",
@@ -4385,6 +4509,20 @@
       "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
       "dev": true
     },
+    "node_modules/node-gyp-build-optional-packages": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/node-gyp-build-optional-packages/-/node-gyp-build-optional-packages-5.1.1.tgz",
+      "integrity": "sha512-+P72GAjVAbTxjjwUmwjVrqrdZROD4nf8KgpBoDxqXXTiYZZt/ud60dE5yvCSr9lRO8e8yv6kgJIC0K0PfZFVQw==",
+      "optional": true,
+      "dependencies": {
+        "detect-libc": "^2.0.1"
+      },
+      "bin": {
+        "node-gyp-build-optional-packages": "bin.js",
+        "node-gyp-build-optional-packages-optional": "optional.js",
+        "node-gyp-build-optional-packages-test": "build-test.js"
+      }
+    },
     "node_modules/node-releases": {
       "version": "2.0.13",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.13.tgz",
@@ -4606,6 +4744,37 @@
         "node": ">=8"
       }
     },
+    "node_modules/peerjs": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/peerjs/-/peerjs-1.5.2.tgz",
+      "integrity": "sha512-pPrtNwPyWJHRPxy2y+rHcdlrG8UwUBB1nl+3Yj6r7FLwcbBpcB2NvGNvLvcrxAVGGGX9fsdA5VT5zBKTZcm1DQ==",
+      "dependencies": {
+        "@msgpack/msgpack": "^2.8.0",
+        "cbor-x": "1.5.4",
+        "eventemitter3": "^4.0.7",
+        "peerjs-js-binarypack": "^2.1.0",
+        "webrtc-adapter": "^8.0.0"
+      },
+      "engines": {
+        "node": ">= 14"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/peer"
+      }
+    },
+    "node_modules/peerjs-js-binarypack": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/peerjs-js-binarypack/-/peerjs-js-binarypack-2.1.0.tgz",
+      "integrity": "sha512-YIwCC+pTzp3Bi8jPI9UFKO0t0SLo6xALnHkiNt/iUFmUUZG0fEEmEyFKvjsDKweiFitzHRyhuh6NvyJZ4nNxMg==",
+      "engines": {
+        "node": ">= 14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/peer"
+      }
+    },
     "node_modules/pend": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
@@ -5284,6 +5453,11 @@
         "loose-envify": "^1.1.0"
       }
     },
+    "node_modules/sdp": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/sdp/-/sdp-3.2.0.tgz",
+      "integrity": "sha512-d7wDPgDV3DDiqulJjKiV2865wKsJ34YI+NDREbm+FySq6WuKOikwyNQcm+doLAZ1O6ltdO0SeKle2xMpN3Brgw=="
+    },
     "node_modules/semver": {
       "version": "7.5.4",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
@@ -6006,6 +6180,18 @@
         }
       }
     },
+    "node_modules/webrtc-adapter": {
+      "version": "8.2.3",
+      "resolved": "https://registry.npmjs.org/webrtc-adapter/-/webrtc-adapter-8.2.3.tgz",
+      "integrity": "sha512-gnmRz++suzmvxtp3ehQts6s2JtAGPuDPjA1F3a9ckNpG1kYdYuHWYpazoAnL9FS5/B21tKlhkorbdCXat0+4xQ==",
+      "dependencies": {
+        "sdp": "^3.2.0"
+      },
+      "engines": {
+        "node": ">=6.0.0",
+        "npm": ">=3.10.0"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -6431,6 +6617,42 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@cbor-extract/cbor-extract-darwin-arm64": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@cbor-extract/cbor-extract-darwin-arm64/-/cbor-extract-darwin-arm64-2.2.0.tgz",
+      "integrity": "sha512-P7swiOAdF7aSi0H+tHtHtr6zrpF3aAq/W9FXx5HektRvLTM2O89xCyXF3pk7pLc7QpaY7AoaE8UowVf9QBdh3w==",
+      "optional": true
+    },
+    "@cbor-extract/cbor-extract-darwin-x64": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@cbor-extract/cbor-extract-darwin-x64/-/cbor-extract-darwin-x64-2.2.0.tgz",
+      "integrity": "sha512-1liF6fgowph0JxBbYnAS7ZlqNYLf000Qnj4KjqPNW4GViKrEql2MgZnAsExhY9LSy8dnvA4C0qHEBgPrll0z0w==",
+      "optional": true
+    },
+    "@cbor-extract/cbor-extract-linux-arm": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@cbor-extract/cbor-extract-linux-arm/-/cbor-extract-linux-arm-2.2.0.tgz",
+      "integrity": "sha512-QeBcBXk964zOytiedMPQNZr7sg0TNavZeuUCD6ON4vEOU/25+pLhNN6EDIKJ9VLTKaZ7K7EaAriyYQ1NQ05s/Q==",
+      "optional": true
+    },
+    "@cbor-extract/cbor-extract-linux-arm64": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@cbor-extract/cbor-extract-linux-arm64/-/cbor-extract-linux-arm64-2.2.0.tgz",
+      "integrity": "sha512-rQvhNmDuhjTVXSPFLolmQ47/ydGOFXtbR7+wgkSY0bdOxCFept1hvg59uiLPT2fVDuJFuEy16EImo5tE2x3RsQ==",
+      "optional": true
+    },
+    "@cbor-extract/cbor-extract-linux-x64": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@cbor-extract/cbor-extract-linux-x64/-/cbor-extract-linux-x64-2.2.0.tgz",
+      "integrity": "sha512-cWLAWtT3kNLHSvP4RKDzSTX9o0wvQEEAj4SKvhWuOVZxiDAeQazr9A+PSiRILK1VYMLeDml89ohxCnUNQNQNCw==",
+      "optional": true
+    },
+    "@cbor-extract/cbor-extract-win32-x64": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@cbor-extract/cbor-extract-win32-x64/-/cbor-extract-win32-x64-2.2.0.tgz",
+      "integrity": "sha512-l2M+Z8DO2vbvADOBNLbbh9y5ST1RY5sqkWOg/58GkUPBYou/cuNZ68SGQ644f1CvZ8kcOxyZtw06+dxWHIoN/w==",
+      "optional": true
+    },
     "@colors/colors": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@colors/colors/-/colors-1.5.0.tgz",
@@ -6949,6 +7171,11 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "@msgpack/msgpack": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/@msgpack/msgpack/-/msgpack-2.8.0.tgz",
+      "integrity": "sha512-h9u4u/jiIRKbq25PM+zymTyW6bhTzELvOoUd+AvYriWOAKpLGnIamaET3pnHYoI5iYphAHBI4ayx0MehR+VVPQ=="
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -7557,6 +7784,29 @@
       "integrity": "sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==",
       "dev": true
     },
+    "cbor-extract": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/cbor-extract/-/cbor-extract-2.2.0.tgz",
+      "integrity": "sha512-Ig1zM66BjLfTXpNgKpvBePq271BPOvu8MR0Jl080yG7Jsl+wAZunfrwiwA+9ruzm/WEdIV5QF/bjDZTqyAIVHA==",
+      "optional": true,
+      "requires": {
+        "@cbor-extract/cbor-extract-darwin-arm64": "2.2.0",
+        "@cbor-extract/cbor-extract-darwin-x64": "2.2.0",
+        "@cbor-extract/cbor-extract-linux-arm": "2.2.0",
+        "@cbor-extract/cbor-extract-linux-arm64": "2.2.0",
+        "@cbor-extract/cbor-extract-linux-x64": "2.2.0",
+        "@cbor-extract/cbor-extract-win32-x64": "2.2.0",
+        "node-gyp-build-optional-packages": "5.1.1"
+      }
+    },
+    "cbor-x": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/cbor-x/-/cbor-x-1.5.4.tgz",
+      "integrity": "sha512-PVKILDn+Rf6MRhhcyzGXi5eizn1i0i3F8Fe6UMMxXBnWkalq9+C5+VTmlIjAYM4iF2IYF2N+zToqAfYOp+3rfw==",
+      "requires": {
+        "cbor-extract": "^2.1.1"
+      }
+    },
     "chalk": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
@@ -7902,6 +8152,12 @@
       "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
       "dev": true
     },
+    "detect-libc": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.3.tgz",
+      "integrity": "sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==",
+      "optional": true
+    },
     "didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -8251,6 +8507,11 @@
       "integrity": "sha512-tYUSVOGeQPKt/eC1ABfhHy5Xd96N3oIijJvN3O9+TsC28T5V9yX9oEfEK5faP0EFSNVOG97qtAS68GBrQB2hDg==",
       "dev": true
     },
+    "eventemitter3": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="
+    },
     "execa": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/execa/-/execa-4.1.0.tgz",
@@ -9233,6 +9494,15 @@
       "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
       "dev": true
     },
+    "node-gyp-build-optional-packages": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/node-gyp-build-optional-packages/-/node-gyp-build-optional-packages-5.1.1.tgz",
+      "integrity": "sha512-+P72GAjVAbTxjjwUmwjVrqrdZROD4nf8KgpBoDxqXXTiYZZt/ud60dE5yvCSr9lRO8e8yv6kgJIC0K0PfZFVQw==",
+      "optional": true,
+      "requires": {
+        "detect-libc": "^2.0.1"
+      }
+    },
     "node-releases": {
       "version": "2.0.13",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.13.tgz",
@@ -9388,6 +9658,23 @@
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
       "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw=="
     },
+    "peerjs": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/peerjs/-/peerjs-1.5.2.tgz",
+      "integrity": "sha512-pPrtNwPyWJHRPxy2y+rHcdlrG8UwUBB1nl+3Yj6r7FLwcbBpcB2NvGNvLvcrxAVGGGX9fsdA5VT5zBKTZcm1DQ==",
+      "requires": {
+        "@msgpack/msgpack": "^2.8.0",
+        "cbor-x": "1.5.4",
+        "eventemitter3": "^4.0.7",
+        "peerjs-js-binarypack": "^2.1.0",
+        "webrtc-adapter": "^8.0.0"
+      }
+    },
+    "peerjs-js-binarypack": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/peerjs-js-binarypack/-/peerjs-js-binarypack-2.1.0.tgz",
+      "integrity": "sha512-YIwCC+pTzp3Bi8jPI9UFKO0t0SLo6xALnHkiNt/iUFmUUZG0fEEmEyFKvjsDKweiFitzHRyhuh6NvyJZ4nNxMg=="
+    },
     "pend": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
@@ -9820,6 +10107,11 @@
         "loose-envify": "^1.1.0"
       }
     },
+    "sdp": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/sdp/-/sdp-3.2.0.tgz",
+      "integrity": "sha512-d7wDPgDV3DDiqulJjKiV2865wKsJ34YI+NDREbm+FySq6WuKOikwyNQcm+doLAZ1O6ltdO0SeKle2xMpN3Brgw=="
+    },
     "semver": {
       "version": "7.5.4",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
@@ -10318,6 +10610,14 @@
         "rollup": "^3.27.1"
       }
     },
+    "webrtc-adapter": {
+      "version": "8.2.3",
+      "resolved": "https://registry.npmjs.org/webrtc-adapter/-/webrtc-adapter-8.2.3.tgz",
+      "integrity": "sha512-gnmRz++suzmvxtp3ehQts6s2JtAGPuDPjA1F3a9ckNpG1kYdYuHWYpazoAnL9FS5/B21tKlhkorbdCXat0+4xQ==",
+      "requires": {
+        "sdp": "^3.2.0"
+      }
+    },
     "which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index aa964f08..f58e7089 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -18,6 +18,7 @@
     "@hookform/resolvers": "^3.3.2",
     "framer-motion": "^10.16.4",
     "js-cookie": "^3.0.5",
+    "peerjs": "^1.5.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.48.2",
diff --git a/frontend/src/pages/RoomCallPage.tsx b/frontend/src/pages/RoomCallPage.tsx
index 4eab0152..077fd86d 100644
--- a/frontend/src/pages/RoomCallPage.tsx
+++ b/frontend/src/pages/RoomCallPage.tsx
@@ -1,7 +1,11 @@
 import Footer from "../components/Footer";
 import Navbar from "../components/Navbar";
+import peer from "../peer/peer";
 
 function RoomCallPage() {
+    peer.on("call", (call) => {
+        console.log(call);
+    })
     return (
         <>
             <Navbar />
diff --git a/frontend/src/peer/peer.ts b/frontend/src/peer/peer.ts
new file mode 100644
index 00000000..b421825f
--- /dev/null
+++ b/frontend/src/peer/peer.ts
@@ -0,0 +1,8 @@
+import Peer from "peerjs";
+
+const peer = new Peer({
+    host: "/",
+    port: 8000
+});
+
+export default peer;
\ No newline at end of file

From dcd6f2dea3986df21bd9682053a207f0e83cfabf Mon Sep 17 00:00:00 2001
From: "j.krol" <janek01krol@gmail.com>
Date: Wed, 20 Mar 2024 17:16:19 +0100
Subject: [PATCH 06/64] Add peer server to compose yml

---
 compose.yml                         |  5 +++
 frontend/package-lock.json          | 49 ++++++++++++++++++++++++-----
 frontend/package.json               |  2 ++
 frontend/src/pages/RoomCallPage.tsx |  5 ++-
 4 files changed, 52 insertions(+), 9 deletions(-)

diff --git a/compose.yml b/compose.yml
index 2bf4d7b2..80c77799 100644
--- a/compose.yml
+++ b/compose.yml
@@ -22,6 +22,11 @@ services:
     ports:
       - 5173:80
 
+  peer:
+    build: ./peer
+    ports:
+      - 8000:8000
+
   backend:
     build: ./backend
     env_file:
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 71d08132..2a3a2a32 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -26,12 +26,14 @@
         "redux": "^4.2.1",
         "sass": "^1.69.2",
         "socket.io-client": "^4.7.2",
+        "uuid": "^9.0.1",
         "zod": "^3.22.4"
       },
       "devDependencies": {
         "@types/js-cookie": "^3.0.6",
         "@types/react": "^18.2.15",
         "@types/react-dom": "^18.2.7",
+        "@types/uuid": "^9.0.8",
         "@typescript-eslint/eslint-plugin": "^6.0.0",
         "@typescript-eslint/parser": "^6.0.0",
         "@vitejs/plugin-react": "^4.0.3",
@@ -541,6 +543,15 @@
         "node": ">= 6"
       }
     },
+    "node_modules/@cypress/request/node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "dev": true,
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/@cypress/xvfb": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/@cypress/xvfb/-/xvfb-1.2.4.tgz",
@@ -1488,6 +1499,12 @@
       "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
       "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA=="
     },
+    "node_modules/@types/uuid": {
+      "version": "9.0.8",
+      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.8.tgz",
+      "integrity": "sha512-jg+97EGIcY9AGHJJRaaPVgetKDsrTgbRjQ5Msgjh/DQKEFl0DtyRr/VCOyD1T2R1MNeWPK/u7JoGhlDZnKBAfA==",
+      "dev": true
+    },
     "node_modules/@types/yauzl": {
       "version": "2.10.3",
       "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.3.tgz",
@@ -6103,10 +6120,13 @@
       "dev": true
     },
     "node_modules/uuid": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
-      "dev": true,
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
+      "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
       "bin": {
         "uuid": "dist/bin/uuid"
       }
@@ -6684,6 +6704,14 @@
         "tough-cookie": "^4.1.3",
         "tunnel-agent": "^0.6.0",
         "uuid": "^8.3.2"
+      },
+      "dependencies": {
+        "uuid": {
+          "version": "8.3.2",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+          "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+          "dev": true
+        }
       }
     },
     "@cypress/xvfb": {
@@ -7349,6 +7377,12 @@
       "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
       "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA=="
     },
+    "@types/uuid": {
+      "version": "9.0.8",
+      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.8.tgz",
+      "integrity": "sha512-jg+97EGIcY9AGHJJRaaPVgetKDsrTgbRjQ5Msgjh/DQKEFl0DtyRr/VCOyD1T2R1MNeWPK/u7JoGhlDZnKBAfA==",
+      "dev": true
+    },
     "@types/yauzl": {
       "version": "2.10.3",
       "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.3.tgz",
@@ -10582,10 +10616,9 @@
       "dev": true
     },
     "uuid": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
-      "dev": true
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
+      "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA=="
     },
     "verror": {
       "version": "1.10.0",
diff --git a/frontend/package.json b/frontend/package.json
index f58e7089..0eb9cfb3 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -29,12 +29,14 @@
     "redux": "^4.2.1",
     "sass": "^1.69.2",
     "socket.io-client": "^4.7.2",
+    "uuid": "^9.0.1",
     "zod": "^3.22.4"
   },
   "devDependencies": {
     "@types/js-cookie": "^3.0.6",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
+    "@types/uuid": "^9.0.8",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
     "@vitejs/plugin-react": "^4.0.3",
diff --git a/frontend/src/pages/RoomCallPage.tsx b/frontend/src/pages/RoomCallPage.tsx
index 077fd86d..10b0aa6f 100644
--- a/frontend/src/pages/RoomCallPage.tsx
+++ b/frontend/src/pages/RoomCallPage.tsx
@@ -9,7 +9,10 @@ function RoomCallPage() {
     return (
         <>
             <Navbar />
-            <div>Room call page</div>
+            <div>
+                <video 
+                ></video>
+            </div>
             <Footer />
         </>
     )

From ef93ab242e3ecf93566399ee92aca696fdb45afb Mon Sep 17 00:00:00 2001
From: "j.krol" <janek01krol@gmail.com>
Date: Wed, 20 Mar 2024 17:22:24 +0100
Subject: [PATCH 07/64] Create fetchUserMedia function

---
 frontend/src/media/fetchUserMedia.ts | 9 +++++++++
 1 file changed, 9 insertions(+)
 create mode 100644 frontend/src/media/fetchUserMedia.ts

diff --git a/frontend/src/media/fetchUserMedia.ts b/frontend/src/media/fetchUserMedia.ts
new file mode 100644
index 00000000..cf639bea
--- /dev/null
+++ b/frontend/src/media/fetchUserMedia.ts
@@ -0,0 +1,9 @@
+async function fetchUserMedia() {
+    const localStream = await navigator.mediaDevices.getUserMedia({
+        video: true,
+        audio: true
+    });
+    return localStream;
+}
+
+export default fetchUserMedia;
\ No newline at end of file

From bd871f598c87193a092280a27ceebec22192de09 Mon Sep 17 00:00:00 2001
From: "j.krol" <janek01krol@gmail.com>
Date: Wed, 20 Mar 2024 17:52:45 +0100
Subject: [PATCH 08/64] Enable local media stream for room video tag

---
 frontend/src/pages/FriendsPage.tsx  |  1 +
 frontend/src/pages/RoomCallPage.tsx | 51 ++++++++++++++++++++++++-----
 2 files changed, 43 insertions(+), 9 deletions(-)

diff --git a/frontend/src/pages/FriendsPage.tsx b/frontend/src/pages/FriendsPage.tsx
index e21d1a5e..f1c6ef0b 100644
--- a/frontend/src/pages/FriendsPage.tsx
+++ b/frontend/src/pages/FriendsPage.tsx
@@ -139,6 +139,7 @@ function FriendsPage() {
                   <FontAwesomeIcon icon={faPlus}></FontAwesomeIcon>
                   <span className="ml-2">Create a room</span>
                 </button>
+                <button onClick={() => navigate(`/room/abcd`)}>Test room</button>
                 <h1 className="text-3xl font-bold">Friends:</h1>
                 <hr className="text-my-orange"></hr>
                 <ul className="">
diff --git a/frontend/src/pages/RoomCallPage.tsx b/frontend/src/pages/RoomCallPage.tsx
index 10b0aa6f..34679c84 100644
--- a/frontend/src/pages/RoomCallPage.tsx
+++ b/frontend/src/pages/RoomCallPage.tsx
@@ -1,18 +1,51 @@
+import { useEffect, useRef, useState } from "react";
 import Footer from "../components/Footer";
 import Navbar from "../components/Navbar";
-import peer from "../peer/peer";
-
+import fetchUserMedia from "../media/fetchUserMedia";
+import { useSelector } from "react-redux";
+import { RootState } from "../redux/store";
+import User from "../models/User";
+import { useUser } from "../helpers/UserProvider";
 function RoomCallPage() {
-    peer.on("call", (call) => {
-        console.log(call);
-    })
+    const localRef = useRef<HTMLVideoElement>(null);
+    const [localStream, setLocalStream] = useState<MediaStream | null>(null);
+    const friends: User[] = useSelector((state: RootState) => state.friends);
+    const {socket} = useUser();
+    const getStream = async () => {
+        const stream = await fetchUserMedia();
+        setLocalStream(stream);
+        localRef.current!.srcObject = stream;
+        localRef.current!.play();
+    }
+    const inviteFriendToRoom = async (friendId: string) => {
+        console.log(friendId);
+    }
+    useEffect(() => {
+        getStream();
+    }, []);
     return (
         <>
             <Navbar />
-            <div>
-                <video 
-                ></video>
-            </div>
+            {localStream ? <main>
+                <section>
+                    <div>
+                        <video 
+                            ref={localRef}
+                        ></video>
+                    </div>
+                </section>
+                <section>
+                    <h3><strong>Invite</strong></h3>
+                    <ul>
+                        {friends.map(friend => 
+                            <li key={friend.id}>
+                                <span>{`${friend.first_name} ${friend.last_name}`}</span>
+                                <button onClick={() => inviteFriendToRoom(friend.id)}> invite</button>
+                            </li>
+                        )}
+                    </ul>
+                </section>
+            </main> : null}
             <Footer />
         </>
     )

From 726ffd59bec186554c399be1de3a134e0c168850 Mon Sep 17 00:00:00 2001
From: "j.krol" <janek01krol@gmail.com>
Date: Wed, 20 Mar 2024 18:42:30 +0100
Subject: [PATCH 09/64] Create endpoints for room router

---
 backend/src/httpServer.ts           |  2 ++
 backend/src/routes/roomRoute.ts     | 50 +++++++++++++++++++++++++++++
 backend/src/socketServer.ts         |  4 +++
 frontend/src/pages/RoomCallPage.tsx | 18 +++++++++--
 4 files changed, 72 insertions(+), 2 deletions(-)
 create mode 100644 backend/src/routes/roomRoute.ts

diff --git a/backend/src/httpServer.ts b/backend/src/httpServer.ts
index ba40499c..c6f196d9 100644
--- a/backend/src/httpServer.ts
+++ b/backend/src/httpServer.ts
@@ -4,6 +4,7 @@ import usersRouter from "./routes/usersRoute";
 import authRouter from "./routes/authRoute";
 import chatRouter from "./routes/chatRoute";
 import { cleanUpData, importInitialData } from "./db";
+import roomRouter from "./routes/roomRoute";
 
 const { app } = servers;
 
@@ -15,3 +16,4 @@ importInitialData().then((res) => console.log(res));
 app.use("/users", usersRouter);
 app.use("/auth", authRouter);
 app.use("/chat", chatRouter);
+app.use("/room", roomRouter);
\ No newline at end of file
diff --git a/backend/src/routes/roomRoute.ts b/backend/src/routes/roomRoute.ts
new file mode 100644
index 00000000..37f2cfc3
--- /dev/null
+++ b/backend/src/routes/roomRoute.ts
@@ -0,0 +1,50 @@
+import { Router } from "express";
+import { isFriend } from "../users";
+import driver from "../driver/driver";
+const roomRouter = Router();
+
+roomRouter.get("/:userId", async (req, res) => {
+    try {
+        const userId = req.params.userId;
+        const session = driver.session();
+        const roomsQuery = await session.run(`
+            MATCH (room:Room)-[:INVITED]-(u:User {id: $userId})
+            RETURN room
+        `, {userId});
+        await session.close();
+        const rooms = roomsQuery.records.map((record) => record.get("room").properties);
+        return res.json({status: "ok", rooms});
+    } catch (err) {
+        console.log("Error:", err);
+        return res.status(404).json({ status: "error", errors: err as object });
+    }
+});
+
+roomRouter.post("/", async (req, res) => {
+    try {
+        const newRoomProps = req.body;
+        const {roomId, from, to} = newRoomProps;
+        const session = driver.session();
+        const areFriends = await isFriend(session, from, to);
+        if (!areFriends) {
+            await session.close();
+            return res
+                .status(400)
+                .json({ status: "error", errors: { id: "no friends" } });
+        }
+        await session.run(`CREATE (r: Room $room)`, {room: newRoomProps});
+        await session.run(`
+            MATCH (u:User {id: $userId})
+            MATCH (r:Room {roomId: $roomId})
+            CREATE (r)-[:INVITED]->(u)
+        `, {userId: to, roomId});
+        await session.close();
+        return res.json({status: "ok"});
+    } catch (err) {
+        console.log("Error:", err);
+        return res.status(404).json({ status: "error", errors: err as object });
+    }
+});
+
+
+export default roomRouter;
\ No newline at end of file
diff --git a/backend/src/socketServer.ts b/backend/src/socketServer.ts
index 395f50e0..7a40438f 100644
--- a/backend/src/socketServer.ts
+++ b/backend/src/socketServer.ts
@@ -143,6 +143,10 @@ io.on("connection", async (socket: Socket) => {
     });
   });
 
+  socket.on("newRoom", (roomId) => {
+    console.log("[NEW ROOM]: ", roomId);
+  });
+
   socket.on("disconnect", async (_reason) => {
     const session = driver.session();
     await leaveMeeting(session, userId);
diff --git a/frontend/src/pages/RoomCallPage.tsx b/frontend/src/pages/RoomCallPage.tsx
index 34679c84..75540710 100644
--- a/frontend/src/pages/RoomCallPage.tsx
+++ b/frontend/src/pages/RoomCallPage.tsx
@@ -6,11 +6,15 @@ import { useSelector } from "react-redux";
 import { RootState } from "../redux/store";
 import User from "../models/User";
 import { useUser } from "../helpers/UserProvider";
+import { useParams } from "react-router-dom";
+import dataService from "../services/data";
 function RoomCallPage() {
     const localRef = useRef<HTMLVideoElement>(null);
     const [localStream, setLocalStream] = useState<MediaStream | null>(null);
     const friends: User[] = useSelector((state: RootState) => state.friends);
-    const {socket} = useUser();
+    const {socket, userId, user} = useUser();
+    const params = useParams();
+    const roomId = params.roomId;
     const getStream = async () => {
         const stream = await fetchUserMedia();
         setLocalStream(stream);
@@ -18,7 +22,17 @@ function RoomCallPage() {
         localRef.current!.play();
     }
     const inviteFriendToRoom = async (friendId: string) => {
-        console.log(friendId);
+        const myFullName = `${user?.first_name} ${user?.last_name}`;
+        await dataService.fetchData("/room", "POST", {headers: {
+            "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+            roomId,
+            from: userId, 
+            to: friendId, 
+            userName: myFullName
+        }),});
+        socket?.emit("newRoom", {roomId, from: userId, to: friendId, userName: myFullName});
     }
     useEffect(() => {
         getStream();

From 03fddfec280822caceab103693718b040577a689 Mon Sep 17 00:00:00 2001
From: "j.krol" <janek01krol@gmail.com>
Date: Wed, 20 Mar 2024 18:55:15 +0100
Subject: [PATCH 10/64] Handle notifications via HTTP protocol

---
 backend/src/routes/roomRoute.ts          |  5 ++++-
 frontend/src/models/RoomNotification.ts  |  8 ++++++++
 frontend/src/pages/NotificationsPage.tsx | 23 ++++++++++++++++++++++-
 3 files changed, 34 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/models/RoomNotification.ts

diff --git a/backend/src/routes/roomRoute.ts b/backend/src/routes/roomRoute.ts
index 37f2cfc3..26a12e63 100644
--- a/backend/src/routes/roomRoute.ts
+++ b/backend/src/routes/roomRoute.ts
@@ -12,7 +12,10 @@ roomRouter.get("/:userId", async (req, res) => {
             RETURN room
         `, {userId});
         await session.close();
-        const rooms = roomsQuery.records.map((record) => record.get("room").properties);
+        const rooms = roomsQuery.records.map((record) => record.get("room").properties).map(record => ({
+            ...record,
+            title: "Join meeting",
+        }));
         return res.json({status: "ok", rooms});
     } catch (err) {
         console.log("Error:", err);
diff --git a/frontend/src/models/RoomNotification.ts b/frontend/src/models/RoomNotification.ts
new file mode 100644
index 00000000..8fb7657e
--- /dev/null
+++ b/frontend/src/models/RoomNotification.ts
@@ -0,0 +1,8 @@
+interface RoomNotification {
+    from: string; 
+    roomId: string;
+    title: string;
+    to: string;
+    userName: string;
+}
+export default RoomNotification;
\ No newline at end of file
diff --git a/frontend/src/pages/NotificationsPage.tsx b/frontend/src/pages/NotificationsPage.tsx
index 02d86a65..5e5b5b95 100644
--- a/frontend/src/pages/NotificationsPage.tsx
+++ b/frontend/src/pages/NotificationsPage.tsx
@@ -1,10 +1,31 @@
 import Navbar from "../components/Navbar";
 import Footer from "../components/Footer";
+import { useEffect, useState } from "react";
+import dataService from "../services/data";
+import { useUser } from "../helpers/UserProvider";
+import RoomNotification from "../models/RoomNotification";
 function NotificationsPage() {
+    const {userId} = useUser();
+    const [roomNotifications, setRoomNotifications] = useState<RoomNotification[]>([]);
+    useEffect(() => {
+        async function fetchRoomNoticifactions() {
+            const roomNotificationsRequest = await dataService.fetchData(`/room/${userId}`, "GET", {});
+            const roomNotifications = roomNotificationsRequest.rooms;
+            setRoomNotifications(roomNotifications);
+        }
+        fetchRoomNoticifactions();
+    }, []);
     return (
         <>
             <Navbar />
-            <div>notifications page</div>
+            <h1>List of notifications</h1>
+            <ul>
+                {roomNotifications.length > 0 ? roomNotifications.map(notification => <li key={notification.roomId}>
+                    <strong>{notification.title}</strong>
+                    <span> from: {notification.userName} </span>
+                    <button>click</button>
+                </li>) : null}
+            </ul>
             <Footer />
         </>
     )

From ba2435c1942ee5b5fecce966a2080f5feb491ac2 Mon Sep 17 00:00:00 2001
From: "j.krol" <janek01krol@gmail.com>
Date: Wed, 20 Mar 2024 19:34:48 +0100
Subject: [PATCH 11/64] Add notifications by WebSocket and Redux

---
 backend/src/socketServer.ts                     | 15 +++++++++++++--
 frontend/src/pages/NotificationsPage.tsx        | 17 +++++++++--------
 frontend/src/pages/ProfilePage.tsx              | 12 ++++++++++++
 frontend/src/pages/RoomCallPage.tsx             |  4 ++--
 frontend/src/redux/actions/addNotification.ts   |  8 ++++++++
 frontend/src/redux/actions/setNotifications.ts  |  9 +++++++++
 .../src/redux/reducers/notificationsReducer.ts  | 10 ++++++++++
 frontend/src/redux/store.ts                     |  2 ++
 8 files changed, 65 insertions(+), 12 deletions(-)
 create mode 100644 frontend/src/redux/actions/addNotification.ts
 create mode 100644 frontend/src/redux/actions/setNotifications.ts
 create mode 100644 frontend/src/redux/reducers/notificationsReducer.ts

diff --git a/backend/src/socketServer.ts b/backend/src/socketServer.ts
index 7a40438f..d83f297e 100644
--- a/backend/src/socketServer.ts
+++ b/backend/src/socketServer.ts
@@ -143,8 +143,19 @@ io.on("connection", async (socket: Socket) => {
     });
   });
 
-  socket.on("newRoom", (roomId) => {
-    console.log("[NEW ROOM]: ", roomId);
+  socket.on("newRoom", async ({roomId, from, to, userName}) => {
+    const session = driver.session();
+    const userSockets = await getAllSockets(session, to);
+    userSockets.forEach(userSocket => {
+      socket.to(userSocket.id).emit("newRoom", {
+        from,
+        roomId,
+        title: "Join room",
+        to,
+        userName
+      });
+    });
+    await session.close();
   });
 
   socket.on("disconnect", async (_reason) => {
diff --git a/frontend/src/pages/NotificationsPage.tsx b/frontend/src/pages/NotificationsPage.tsx
index 5e5b5b95..1b876c0b 100644
--- a/frontend/src/pages/NotificationsPage.tsx
+++ b/frontend/src/pages/NotificationsPage.tsx
@@ -4,16 +4,17 @@ import { useEffect, useState } from "react";
 import dataService from "../services/data";
 import { useUser } from "../helpers/UserProvider";
 import RoomNotification from "../models/RoomNotification";
+import { useDispatch, useSelector } from "react-redux";
+import { RootState } from "../redux/store";
+import addNotification from "../redux/actions/addNotification";
 function NotificationsPage() {
-    const {userId} = useUser();
-    const [roomNotifications, setRoomNotifications] = useState<RoomNotification[]>([]);
+    const {userId, socket} = useUser();
+    const dispatch = useDispatch();
+    const roomNotifications: RoomNotification[] = useSelector((state: RootState) => state.notifications);
     useEffect(() => {
-        async function fetchRoomNoticifactions() {
-            const roomNotificationsRequest = await dataService.fetchData(`/room/${userId}`, "GET", {});
-            const roomNotifications = roomNotificationsRequest.rooms;
-            setRoomNotifications(roomNotifications);
-        }
-        fetchRoomNoticifactions();
+        socket?.on("newRoom", (notification: RoomNotification) => {
+            dispatch(addNotification(notification));
+        });
     }, []);
     return (
         <>
diff --git a/frontend/src/pages/ProfilePage.tsx b/frontend/src/pages/ProfilePage.tsx
index 024d403f..6225892b 100644
--- a/frontend/src/pages/ProfilePage.tsx
+++ b/frontend/src/pages/ProfilePage.tsx
@@ -5,9 +5,13 @@ import Navbar from "../components/Navbar";
 import { useUser } from "../helpers/UserProvider";
 import Profile from "../components/Profile";
 import Transition from "../components/Transition";
+import dataService from "../services/data";
+import { useDispatch } from "react-redux";
+import setNotifications from "../redux/actions/setNotifications";
 
 function ProfilePage() {
   const navigate = useNavigate();
+  const dispatch = useDispatch();
   const { user, userId, meeting, deleteUser } = useUser();
 
   const [showAnimation, setShowAnim] = useState(false);
@@ -16,6 +20,10 @@ function ProfilePage() {
   const handleEditClick = () => {
     navigate("/edit");
   };
+  const fetchNotifications = async () => {
+    const roomNotificationsRequest = await dataService.fetchData(`/room/${userId}`, "GET", {});
+    dispatch(setNotifications(roomNotificationsRequest.rooms));
+  }
 
   useEffect(() => {
     setShowAnim(true);
@@ -34,6 +42,10 @@ function ProfilePage() {
     if (userId === null) navigate("/login");
   }, [userId]);
 
+  useEffect(() => {
+    fetchNotifications();
+  }, []);
+
   return (
     <>
       <Navbar />
diff --git a/frontend/src/pages/RoomCallPage.tsx b/frontend/src/pages/RoomCallPage.tsx
index 75540710..576768b6 100644
--- a/frontend/src/pages/RoomCallPage.tsx
+++ b/frontend/src/pages/RoomCallPage.tsx
@@ -53,8 +53,8 @@ function RoomCallPage() {
                     <ul>
                         {friends.map(friend => 
                             <li key={friend.id}>
-                                <span>{`${friend.first_name} ${friend.last_name}`}</span>
-                                <button onClick={() => inviteFriendToRoom(friend.id)}> invite</button>
+                                <span>{`${friend.first_name} ${friend.last_name}`} </span>
+                                <button onClick={() => inviteFriendToRoom(friend.id)}>click</button>
                             </li>
                         )}
                     </ul>
diff --git a/frontend/src/redux/actions/addNotification.ts b/frontend/src/redux/actions/addNotification.ts
new file mode 100644
index 00000000..9a7799c4
--- /dev/null
+++ b/frontend/src/redux/actions/addNotification.ts
@@ -0,0 +1,8 @@
+import RoomNotification from "../../models/RoomNotification";
+export default (notification: RoomNotification) => {
+    return {
+      type: "ADD_NOTIFICATION",
+      payload: { notification },
+    };
+};
+  
\ No newline at end of file
diff --git a/frontend/src/redux/actions/setNotifications.ts b/frontend/src/redux/actions/setNotifications.ts
new file mode 100644
index 00000000..62e4c3e8
--- /dev/null
+++ b/frontend/src/redux/actions/setNotifications.ts
@@ -0,0 +1,9 @@
+import RoomNotification from "../../models/RoomNotification";
+
+export default (notifications: RoomNotification[]) => {
+    return {
+      type: "SET_NOTIFICATIONS",
+      payload: { notifications },
+    };
+};
+  
\ No newline at end of file
diff --git a/frontend/src/redux/reducers/notificationsReducer.ts b/frontend/src/redux/reducers/notificationsReducer.ts
new file mode 100644
index 00000000..68e38236
--- /dev/null
+++ b/frontend/src/redux/reducers/notificationsReducer.ts
@@ -0,0 +1,10 @@
+export default (state = [], action: any) => {
+    if (action.type === "SET_NOTIFICATIONS") {
+      return action.payload.notifications;
+    } else if (action.type === "ADD_NOTIFICATION") {
+      return [...state, action.payload.notification];
+    } else {
+      return state;
+    }
+};
+  
\ No newline at end of file
diff --git a/frontend/src/redux/store.ts b/frontend/src/redux/store.ts
index 30ecd7c5..367af7a2 100644
--- a/frontend/src/redux/store.ts
+++ b/frontend/src/redux/store.ts
@@ -1,8 +1,10 @@
 import { combineReducers, createStore } from "redux";
 import friendsReducer from "./reducers/friendsReducer";
+import notificationsReducer from "./reducers/notificationsReducer";
 
 const rootReducer = combineReducers({
   friends: friendsReducer,
+  notifications: notificationsReducer
 });
 
 export const store = createStore(rootReducer);

From a3b525b9cb51b4ef4cbb8c7a5723a0cff54889b3 Mon Sep 17 00:00:00 2001
From: "j.krol" <janek01krol@gmail.com>
Date: Wed, 20 Mar 2024 19:35:35 +0100
Subject: [PATCH 12/64] Delete unused properties from Notifications Page

---
 frontend/src/pages/NotificationsPage.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/NotificationsPage.tsx b/frontend/src/pages/NotificationsPage.tsx
index 1b876c0b..12523d8d 100644
--- a/frontend/src/pages/NotificationsPage.tsx
+++ b/frontend/src/pages/NotificationsPage.tsx
@@ -1,14 +1,13 @@
 import Navbar from "../components/Navbar";
 import Footer from "../components/Footer";
-import { useEffect, useState } from "react";
-import dataService from "../services/data";
+import { useEffect } from "react";
 import { useUser } from "../helpers/UserProvider";
 import RoomNotification from "../models/RoomNotification";
 import { useDispatch, useSelector } from "react-redux";
 import { RootState } from "../redux/store";
 import addNotification from "../redux/actions/addNotification";
 function NotificationsPage() {
-    const {userId, socket} = useUser();
+    const {socket} = useUser();
     const dispatch = useDispatch();
     const roomNotifications: RoomNotification[] = useSelector((state: RootState) => state.notifications);
     useEffect(() => {

From fa26989cc8a8c8df786e50d3caea1a2ea54709a8 Mon Sep 17 00:00:00 2001
From: "j.krol" <janek01krol@gmail.com>
Date: Wed, 20 Mar 2024 19:42:44 +0100
Subject: [PATCH 13/64] Create delete endpoint for room

---
 backend/src/routes/roomRoute.ts          | 14 ++++++++++++++
 frontend/src/pages/NotificationsPage.tsx |  7 ++++++-
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/backend/src/routes/roomRoute.ts b/backend/src/routes/roomRoute.ts
index 26a12e63..d5d2abfd 100644
--- a/backend/src/routes/roomRoute.ts
+++ b/backend/src/routes/roomRoute.ts
@@ -50,4 +50,18 @@ roomRouter.post("/", async (req, res) => {
 });
 
 
+roomRouter.delete("/:roomId", async (req, res) => {
+    try {
+        const roomId = req.params.roomId;
+        const session = driver.session();
+        await session.run(`MATCH (r:Room {roomId: $roomId}) DETACH DELETE r`, {roomId});
+        await session.close();
+        return res.json({status: "ok"});
+    } catch (err) {
+        console.log("Error:", err);
+        return res.status(404).json({ status: "error", errors: err as object });
+    }
+});
+
+
 export default roomRouter;
\ No newline at end of file
diff --git a/frontend/src/pages/NotificationsPage.tsx b/frontend/src/pages/NotificationsPage.tsx
index 12523d8d..e00de686 100644
--- a/frontend/src/pages/NotificationsPage.tsx
+++ b/frontend/src/pages/NotificationsPage.tsx
@@ -6,10 +6,15 @@ import RoomNotification from "../models/RoomNotification";
 import { useDispatch, useSelector } from "react-redux";
 import { RootState } from "../redux/store";
 import addNotification from "../redux/actions/addNotification";
+import dataService from "../services/data";
 function NotificationsPage() {
     const {socket} = useUser();
     const dispatch = useDispatch();
     const roomNotifications: RoomNotification[] = useSelector((state: RootState) => state.notifications);
+    const handleRoomInvite = async (roomId: string) => {
+        const res = await dataService.fetchData(`/room/${roomId}`, "DELETE", {});
+        console.log(res);
+    } 
     useEffect(() => {
         socket?.on("newRoom", (notification: RoomNotification) => {
             dispatch(addNotification(notification));
@@ -23,7 +28,7 @@ function NotificationsPage() {
                 {roomNotifications.length > 0 ? roomNotifications.map(notification => <li key={notification.roomId}>
                     <strong>{notification.title}</strong>
                     <span> from: {notification.userName} </span>
-                    <button>click</button>
+                    <button onClick={() => handleRoomInvite(notification.roomId)}>click</button>
                 </li>) : null}
             </ul>
             <Footer />

From dcb3680a75ba9f160cd329cd66a7f057e48b80b1 Mon Sep 17 00:00:00 2001
From: "j.krol" <janek01krol@gmail.com>
Date: Thu, 21 Mar 2024 17:06:29 +0100
Subject: [PATCH 14/64] Configuring peer in room call page

---
 frontend/src/pages/RoomCallPage.tsx | 6 ++++++
 frontend/src/peer/peer.ts           | 8 --------
 2 files changed, 6 insertions(+), 8 deletions(-)
 delete mode 100644 frontend/src/peer/peer.ts

diff --git a/frontend/src/pages/RoomCallPage.tsx b/frontend/src/pages/RoomCallPage.tsx
index 576768b6..d43ede5f 100644
--- a/frontend/src/pages/RoomCallPage.tsx
+++ b/frontend/src/pages/RoomCallPage.tsx
@@ -8,13 +8,19 @@ import User from "../models/User";
 import { useUser } from "../helpers/UserProvider";
 import { useParams } from "react-router-dom";
 import dataService from "../services/data";
+import Peer from "peerjs";
 function RoomCallPage() {
     const localRef = useRef<HTMLVideoElement>(null);
+    const [peer, _setPeer] = useState<Peer>(new Peer({host: "/", port: 8000}));
+    const [peerId, setPeerId] = useState("");
     const [localStream, setLocalStream] = useState<MediaStream | null>(null);
     const friends: User[] = useSelector((state: RootState) => state.friends);
     const {socket, userId, user} = useUser();
     const params = useParams();
     const roomId = params.roomId;
+    peer.on("open", (peerId) => {
+        setPeerId(peerId);
+    });
     const getStream = async () => {
         const stream = await fetchUserMedia();
         setLocalStream(stream);
diff --git a/frontend/src/peer/peer.ts b/frontend/src/peer/peer.ts
deleted file mode 100644
index b421825f..00000000
--- a/frontend/src/peer/peer.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import Peer from "peerjs";
-
-const peer = new Peer({
-    host: "/",
-    port: 8000
-});
-
-export default peer;
\ No newline at end of file

From e8b5be6928b640e06f48858a7ad638abf42d9be8 Mon Sep 17 00:00:00 2001
From: "j.krol" <janek01krol@gmail.com>
Date: Thu, 21 Mar 2024 18:03:29 +0100
Subject: [PATCH 15/64] New user joins room

---
 backend/src/socketServer.ts                |  7 +++++++
 frontend/src/pages/NotificationsPage.tsx   |  7 +++++--
 frontend/src/pages/RoomCallPage.tsx        | 16 ++++++++--------
 frontend/src/redux/reducers/peerReducer.ts | 17 +++++++++++++++++
 frontend/src/redux/store.ts                |  4 +++-
 5 files changed, 40 insertions(+), 11 deletions(-)
 create mode 100644 frontend/src/redux/reducers/peerReducer.ts

diff --git a/backend/src/socketServer.ts b/backend/src/socketServer.ts
index d83f297e..3fe799aa 100644
--- a/backend/src/socketServer.ts
+++ b/backend/src/socketServer.ts
@@ -144,6 +144,7 @@ io.on("connection", async (socket: Socket) => {
   });
 
   socket.on("newRoom", async ({roomId, from, to, userName}) => {
+    await socket.join(roomId);
     const session = driver.session();
     const userSockets = await getAllSockets(session, to);
     userSockets.forEach(userSocket => {
@@ -158,6 +159,12 @@ io.on("connection", async (socket: Socket) => {
     await session.close();
   });
 
+  socket.on("joinRoom", async ({roomId, peerId}: any) => {
+    await socket.join(roomId);
+    socket.to(roomId).emit("userConnected", peerId);
+    console.log("[JOIN-ROOM]: sent ", peerId);
+  });
+
   socket.on("disconnect", async (_reason) => {
     const session = driver.session();
     await leaveMeeting(session, userId);
diff --git a/frontend/src/pages/NotificationsPage.tsx b/frontend/src/pages/NotificationsPage.tsx
index e00de686..8028d8ea 100644
--- a/frontend/src/pages/NotificationsPage.tsx
+++ b/frontend/src/pages/NotificationsPage.tsx
@@ -11,9 +11,12 @@ function NotificationsPage() {
     const {socket} = useUser();
     const dispatch = useDispatch();
     const roomNotifications: RoomNotification[] = useSelector((state: RootState) => state.notifications);
+    const peerConfig = useSelector((state: RootState) => state.peer);
+    const {peerId} = peerConfig;
+    console.log("PEER CONFIG", peerConfig);
     const handleRoomInvite = async (roomId: string) => {
-        const res = await dataService.fetchData(`/room/${roomId}`, "DELETE", {});
-        console.log(res);
+        await dataService.fetchData(`/room/${roomId}`, "DELETE", {});
+        socket?.emit("joinRoom", {roomId, peerId});
     } 
     useEffect(() => {
         socket?.on("newRoom", (notification: RoomNotification) => {
diff --git a/frontend/src/pages/RoomCallPage.tsx b/frontend/src/pages/RoomCallPage.tsx
index d43ede5f..e8a9c32e 100644
--- a/frontend/src/pages/RoomCallPage.tsx
+++ b/frontend/src/pages/RoomCallPage.tsx
@@ -8,20 +8,20 @@ import User from "../models/User";
 import { useUser } from "../helpers/UserProvider";
 import { useParams } from "react-router-dom";
 import dataService from "../services/data";
-import Peer from "peerjs";
 function RoomCallPage() {
     const localRef = useRef<HTMLVideoElement>(null);
-    const [peer, _setPeer] = useState<Peer>(new Peer({host: "/", port: 8000}));
-    const [peerId, setPeerId] = useState("");
+    //const peerConfig = useSelector((state: RootState) => state.peer);
+    //const {userId: peerId, peer} = peerConfig;
     const [localStream, setLocalStream] = useState<MediaStream | null>(null);
     const friends: User[] = useSelector((state: RootState) => state.friends);
     const {socket, userId, user} = useUser();
+    socket?.on("userConnected", (newPeerId) => {
+        console.log("[NEW USER]: ", newPeerId);
+    });
     const params = useParams();
     const roomId = params.roomId;
-    peer.on("open", (peerId) => {
-        setPeerId(peerId);
-    });
-    const getStream = async () => {
+    
+    const prepareWebRTC = async () => {
         const stream = await fetchUserMedia();
         setLocalStream(stream);
         localRef.current!.srcObject = stream;
@@ -41,7 +41,7 @@ function RoomCallPage() {
         socket?.emit("newRoom", {roomId, from: userId, to: friendId, userName: myFullName});
     }
     useEffect(() => {
-        getStream();
+        prepareWebRTC();
     }, []);
     return (
         <>
diff --git a/frontend/src/redux/reducers/peerReducer.ts b/frontend/src/redux/reducers/peerReducer.ts
new file mode 100644
index 00000000..bf967071
--- /dev/null
+++ b/frontend/src/redux/reducers/peerReducer.ts
@@ -0,0 +1,17 @@
+import Peer from "peerjs";
+
+const peer = new Peer({
+    host: "/",
+    port: 8000
+});
+const initState = {
+    peer,
+    peerId: ""
+}
+peer.on("open", (peerId) => {
+    initState.peerId = peerId;
+});
+
+export default (state = initState, _action: any) => {
+    return state;
+}
\ No newline at end of file
diff --git a/frontend/src/redux/store.ts b/frontend/src/redux/store.ts
index 367af7a2..371f597e 100644
--- a/frontend/src/redux/store.ts
+++ b/frontend/src/redux/store.ts
@@ -1,10 +1,12 @@
 import { combineReducers, createStore } from "redux";
 import friendsReducer from "./reducers/friendsReducer";
 import notificationsReducer from "./reducers/notificationsReducer";
+import peerReducer from "./reducers/peerReducer";
 
 const rootReducer = combineReducers({
   friends: friendsReducer,
-  notifications: notificationsReducer
+  notifications: notificationsReducer,
+  peer: peerReducer
 });
 
 export const store = createStore(rootReducer);

From ac4801cd8afca06b3850a6befa6deb4cf81a08e6 Mon Sep 17 00:00:00 2001
From: "j.krol" <janek01krol@gmail.com>
Date: Thu, 21 Mar 2024 18:32:27 +0100
Subject: [PATCH 16/64] Enable team meetings

---
 frontend/src/components/RoomPeerVideo.tsx | 21 ++++++++++++
 frontend/src/pages/NotificationsPage.tsx  |  3 ++
 frontend/src/pages/RoomCallPage.tsx       | 40 ++++++++++++++++++-----
 3 files changed, 56 insertions(+), 8 deletions(-)
 create mode 100644 frontend/src/components/RoomPeerVideo.tsx

diff --git a/frontend/src/components/RoomPeerVideo.tsx b/frontend/src/components/RoomPeerVideo.tsx
new file mode 100644
index 00000000..807f4f5d
--- /dev/null
+++ b/frontend/src/components/RoomPeerVideo.tsx
@@ -0,0 +1,21 @@
+import { useEffect, useRef } from "react";
+
+interface RoomPeerVideoProps {
+    remoteStream: MediaStream;
+}
+function RoomPeerVideo({remoteStream}: RoomPeerVideoProps) {
+    const remoteRef = useRef<HTMLVideoElement>(null);
+    useEffect(() => {
+        if (remoteStream) {
+            remoteRef.current!.srcObject = remoteStream;
+            remoteRef.current!.play();
+        }
+    }, []);
+    return (
+        <div><video
+            ref={remoteRef}
+        ></video></div>
+    )
+}
+
+export default RoomPeerVideo;
\ No newline at end of file
diff --git a/frontend/src/pages/NotificationsPage.tsx b/frontend/src/pages/NotificationsPage.tsx
index 8028d8ea..fd2dfdd5 100644
--- a/frontend/src/pages/NotificationsPage.tsx
+++ b/frontend/src/pages/NotificationsPage.tsx
@@ -7,9 +7,11 @@ import { useDispatch, useSelector } from "react-redux";
 import { RootState } from "../redux/store";
 import addNotification from "../redux/actions/addNotification";
 import dataService from "../services/data";
+import { useNavigate } from "react-router-dom";
 function NotificationsPage() {
     const {socket} = useUser();
     const dispatch = useDispatch();
+    const navigate = useNavigate();
     const roomNotifications: RoomNotification[] = useSelector((state: RootState) => state.notifications);
     const peerConfig = useSelector((state: RootState) => state.peer);
     const {peerId} = peerConfig;
@@ -17,6 +19,7 @@ function NotificationsPage() {
     const handleRoomInvite = async (roomId: string) => {
         await dataService.fetchData(`/room/${roomId}`, "DELETE", {});
         socket?.emit("joinRoom", {roomId, peerId});
+        navigate(`/room/${roomId}`);
     } 
     useEffect(() => {
         socket?.on("newRoom", (notification: RoomNotification) => {
diff --git a/frontend/src/pages/RoomCallPage.tsx b/frontend/src/pages/RoomCallPage.tsx
index e8a9c32e..f6085dc4 100644
--- a/frontend/src/pages/RoomCallPage.tsx
+++ b/frontend/src/pages/RoomCallPage.tsx
@@ -8,24 +8,41 @@ import User from "../models/User";
 import { useUser } from "../helpers/UserProvider";
 import { useParams } from "react-router-dom";
 import dataService from "../services/data";
+import RoomPeerVideo from "../components/RoomPeerVideo";
 function RoomCallPage() {
     const localRef = useRef<HTMLVideoElement>(null);
-    //const peerConfig = useSelector((state: RootState) => state.peer);
-    //const {userId: peerId, peer} = peerConfig;
+    const peerConfig = useSelector((state: RootState) => state.peer);
+    const {peer} = peerConfig;
     const [localStream, setLocalStream] = useState<MediaStream | null>(null);
+    const [remoteStreams, setRemoteStreams] = useState<Set<MediaStream>>(new Set());
     const friends: User[] = useSelector((state: RootState) => state.friends);
     const {socket, userId, user} = useUser();
-    socket?.on("userConnected", (newPeerId) => {
-        console.log("[NEW USER]: ", newPeerId);
-    });
     const params = useParams();
     const roomId = params.roomId;
-    
+    peer.on("call", async (call) => {
+        if (localStream) {
+            call.answer(localStream);
+        } else {
+            const stream = await fetchUserMedia();
+            setLocalStream(stream);
+            call.answer(stream);
+        }
+        call.on("stream", (remoteStream: MediaStream) => {
+            setRemoteStreams(prev => new Set([...prev, remoteStream]));
+        });
+    });
+    const connectToNewUser = (newPeerId: string, stream: MediaStream) => {
+        const call = peer.call(newPeerId, stream);
+        call.on("stream", (remoteStream: MediaStream) => {
+            setRemoteStreams(prev => new Set([...prev, remoteStream]));
+        });
+    }
     const prepareWebRTC = async () => {
         const stream = await fetchUserMedia();
         setLocalStream(stream);
-        localRef.current!.srcObject = stream;
-        localRef.current!.play();
+        socket?.on("userConnected", (newPeerId) => {
+            connectToNewUser(newPeerId, stream);
+        });
     }
     const inviteFriendToRoom = async (friendId: string) => {
         const myFullName = `${user?.first_name} ${user?.last_name}`;
@@ -43,6 +60,12 @@ function RoomCallPage() {
     useEffect(() => {
         prepareWebRTC();
     }, []);
+    useEffect(() => {
+        if (localRef.current && localStream) {
+            localRef.current.srcObject = localStream;
+            localRef.current.play();
+        }
+    }, [localRef.current, localStream]);
     return (
         <>
             <Navbar />
@@ -53,6 +76,7 @@ function RoomCallPage() {
                             ref={localRef}
                         ></video>
                     </div>
+                    {Array.from(remoteStreams).map((remoteStream,idx) => <RoomPeerVideo key={idx} remoteStream={remoteStream} />)}
                 </section>
                 <section>
                     <h3><strong>Invite</strong></h3>

From bc318c4c1ea3a35aa97771f27e1e95c75f4dbd33 Mon Sep 17 00:00:00 2001
From: "j.krol" <janek01krol@gmail.com>
Date: Fri, 22 Mar 2024 17:41:14 +0100
Subject: [PATCH 17/64] Rename 'peer' service to 'peer-server'

---
 compose.yml                      | 4 ++--
 {peer => peer-server}/Dockerfile | 0
 2 files changed, 2 insertions(+), 2 deletions(-)
 rename {peer => peer-server}/Dockerfile (100%)

diff --git a/compose.yml b/compose.yml
index 80c77799..44040d02 100644
--- a/compose.yml
+++ b/compose.yml
@@ -22,8 +22,8 @@ services:
     ports:
       - 5173:80
 
-  peer:
-    build: ./peer
+  peer-server:
+    build: ./peer-server
     ports:
       - 8000:8000
 
diff --git a/peer/Dockerfile b/peer-server/Dockerfile
similarity index 100%
rename from peer/Dockerfile
rename to peer-server/Dockerfile

From aeac431df0c228830946b8c70299162d5f743d28 Mon Sep 17 00:00:00 2001
From: "j.krol" <janek01krol@gmail.com>
Date: Fri, 22 Mar 2024 17:57:44 +0100
Subject: [PATCH 18/64] Fix friends fetching problem but moving fetching
 function higher to profile page

---
 frontend/src/pages/FriendsPage.tsx | 22 +++-------------------
 frontend/src/pages/ProfilePage.tsx | 15 +++++++++++++++
 2 files changed, 18 insertions(+), 19 deletions(-)

diff --git a/frontend/src/pages/FriendsPage.tsx b/frontend/src/pages/FriendsPage.tsx
index f1c6ef0b..fee8b60e 100644
--- a/frontend/src/pages/FriendsPage.tsx
+++ b/frontend/src/pages/FriendsPage.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { useDispatch } from "react-redux";
+import { useSelector } from "react-redux";
 import { useUser } from "../helpers/UserProvider";
 
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
@@ -10,19 +10,18 @@ import Footer from "../components/Footer";
 import FriendRequest from "../components/FriendRequest";
 import Navbar from "../components/Navbar";
 import User from "../models/User";
-import setUserFriends from "../redux/actions/setUserFriends";
 import dataService from "../services/data";
 import Transition from "../components/Transition";
 import FoundUser from "../components/FoundUser";
 import Friend from "../components/Friend";
 import Paginator from "../components/Paginator";
+import { RootState } from "../redux/store";
 
 function FriendsPage() {
   const navigate = useNavigate();
-  const dispatch = useDispatch();
   const { user, meeting, createMeeting, joinMeeting } = useUser();
 
-  const [friends, setFriends] = useState([]);
+  const friends = useSelector((state: RootState) => state.friends);
   const [friendsRequests, setFriendsRequests] = useState([]);
   const [refresh, setRefresh] = useState(false);
 
@@ -70,21 +69,6 @@ function FriendsPage() {
     fetchFriendRequests();
   }, [refresh]);
 
-  useEffect(() => {
-    const fetchFriends = async () => {
-      if (user) {
-        const friendsResponse = await dataService.fetchData(
-          `/users/${user.id}/friends`,
-          "GET",
-          {},
-        );
-        setFriends(friendsResponse.friends);
-        dispatch(setUserFriends(friendsResponse.friends));
-      }
-    };
-    fetchFriends();
-  }, [refresh]);
-
   const handleDeclineRequest = async (friend: User) => {
     if (user) {
       await dataService.fetchData(
diff --git a/frontend/src/pages/ProfilePage.tsx b/frontend/src/pages/ProfilePage.tsx
index 6225892b..1482453b 100644
--- a/frontend/src/pages/ProfilePage.tsx
+++ b/frontend/src/pages/ProfilePage.tsx
@@ -8,6 +8,7 @@ import Transition from "../components/Transition";
 import dataService from "../services/data";
 import { useDispatch } from "react-redux";
 import setNotifications from "../redux/actions/setNotifications";
+import setUserFriends from "../redux/actions/setUserFriends";
 
 function ProfilePage() {
   const navigate = useNavigate();
@@ -32,6 +33,20 @@ function ProfilePage() {
     }, 100);
   }, []);
 
+  useEffect(() => {
+    const fetchFriends = async () => {
+      if (user) {
+        const friendsResponse = await dataService.fetchData(
+          `/users/${user.id}/friends`,
+          "GET",
+          {},
+        );
+        dispatch(setUserFriends(friendsResponse.friends));
+      }
+    };
+    fetchFriends();
+  }, []);
+
   useEffect(() => {
     if (meeting?.id) {
       navigate("/meeting");

From 2eca4eed1299634e9b7b501b8970fe3319ebc773 Mon Sep 17 00:00:00 2001
From: "j.krol" <janek01krol@gmail.com>
Date: Fri, 22 Mar 2024 18:29:23 +0100
Subject: [PATCH 19/64] Change socket listening on notifications location on
 Profile Page

---
 frontend/src/pages/NotificationsPage.tsx | 12 ++----------
 frontend/src/pages/ProfilePage.tsx       |  9 ++++++++-
 2 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/frontend/src/pages/NotificationsPage.tsx b/frontend/src/pages/NotificationsPage.tsx
index fd2dfdd5..3c8af14b 100644
--- a/frontend/src/pages/NotificationsPage.tsx
+++ b/frontend/src/pages/NotificationsPage.tsx
@@ -1,31 +1,23 @@
 import Navbar from "../components/Navbar";
 import Footer from "../components/Footer";
-import { useEffect } from "react";
 import { useUser } from "../helpers/UserProvider";
 import RoomNotification from "../models/RoomNotification";
-import { useDispatch, useSelector } from "react-redux";
+import { useSelector } from "react-redux";
 import { RootState } from "../redux/store";
-import addNotification from "../redux/actions/addNotification";
 import dataService from "../services/data";
 import { useNavigate } from "react-router-dom";
 function NotificationsPage() {
     const {socket} = useUser();
-    const dispatch = useDispatch();
     const navigate = useNavigate();
     const roomNotifications: RoomNotification[] = useSelector((state: RootState) => state.notifications);
     const peerConfig = useSelector((state: RootState) => state.peer);
     const {peerId} = peerConfig;
-    console.log("PEER CONFIG", peerConfig);
     const handleRoomInvite = async (roomId: string) => {
         await dataService.fetchData(`/room/${roomId}`, "DELETE", {});
         socket?.emit("joinRoom", {roomId, peerId});
         navigate(`/room/${roomId}`);
     } 
-    useEffect(() => {
-        socket?.on("newRoom", (notification: RoomNotification) => {
-            dispatch(addNotification(notification));
-        });
-    }, []);
+    
     return (
         <>
             <Navbar />
diff --git a/frontend/src/pages/ProfilePage.tsx b/frontend/src/pages/ProfilePage.tsx
index 1482453b..35d7a4ba 100644
--- a/frontend/src/pages/ProfilePage.tsx
+++ b/frontend/src/pages/ProfilePage.tsx
@@ -9,11 +9,12 @@ import dataService from "../services/data";
 import { useDispatch } from "react-redux";
 import setNotifications from "../redux/actions/setNotifications";
 import setUserFriends from "../redux/actions/setUserFriends";
+import addNotification from "../redux/actions/addNotification";
 
 function ProfilePage() {
   const navigate = useNavigate();
   const dispatch = useDispatch();
-  const { user, userId, meeting, deleteUser } = useUser();
+  const { user, userId, meeting, deleteUser, socket } = useUser();
 
   const [showAnimation, setShowAnim] = useState(false);
   const [showContent, setShowContent] = useState(false);
@@ -61,6 +62,12 @@ function ProfilePage() {
     fetchNotifications();
   }, []);
 
+  useEffect(() => {
+    socket!.on("newRoom", (notification) => {
+      dispatch(addNotification(notification));
+    });
+  }, []);
+
   return (
     <>
       <Navbar />

From 064e06c947bedb2cda7d852c47eb846d26ccf944 Mon Sep 17 00:00:00 2001
From: "j.krol" <janek01krol@gmail.com>
Date: Fri, 22 Mar 2024 18:40:13 +0100
Subject: [PATCH 20/64] Add filtering to redux in order to make notifications
 unique

---
 frontend/src/redux/reducers/notificationsReducer.ts | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/frontend/src/redux/reducers/notificationsReducer.ts b/frontend/src/redux/reducers/notificationsReducer.ts
index 68e38236..e951b416 100644
--- a/frontend/src/redux/reducers/notificationsReducer.ts
+++ b/frontend/src/redux/reducers/notificationsReducer.ts
@@ -1,8 +1,15 @@
+const doesNotificationRepeat = (notification: any, notificationArray: any[]) => {
+  const doesExist = notificationArray.find(n => n.roomId === notification.roomId);
+  return !!doesExist;
+}
 export default (state = [], action: any) => {
     if (action.type === "SET_NOTIFICATIONS") {
-      return action.payload.notifications;
+      return action.payload.notifications.reduce((acum: any,item: any) => {
+        return doesNotificationRepeat(item, acum) ? acum : [...acum, item];
+      }, []);
     } else if (action.type === "ADD_NOTIFICATION") {
-      return [...state, action.payload.notification];
+      return doesNotificationRepeat(action.payload.notification, state) 
+      ? state : [...state, action.payload.notification];
     } else {
       return state;
     }

From ed3c313dc8450df3a5ab02907821edaf458d9181 Mon Sep 17 00:00:00 2001
From: "j.krol" <janek01krol@gmail.com>
Date: Fri, 22 Mar 2024 18:45:37 +0100
Subject: [PATCH 21/64] Generate uuid for rooms

---
 frontend/src/pages/FriendsPage.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/FriendsPage.tsx b/frontend/src/pages/FriendsPage.tsx
index fee8b60e..2e2d86f6 100644
--- a/frontend/src/pages/FriendsPage.tsx
+++ b/frontend/src/pages/FriendsPage.tsx
@@ -16,6 +16,7 @@ import FoundUser from "../components/FoundUser";
 import Friend from "../components/Friend";
 import Paginator from "../components/Paginator";
 import { RootState } from "../redux/store";
+import { v4 } from "uuid";
 
 function FriendsPage() {
   const navigate = useNavigate();
@@ -101,6 +102,11 @@ function FriendsPage() {
     }
   };
 
+  const createRoom = () => {
+    const roomId = v4();
+    navigate(`/room/${roomId}`);
+  }
+
   useEffect(() => {
     if (meeting?.id) {
       navigate("/meeting");
@@ -123,7 +129,7 @@ function FriendsPage() {
                   <FontAwesomeIcon icon={faPlus}></FontAwesomeIcon>
                   <span className="ml-2">Create a room</span>
                 </button>
-                <button onClick={() => navigate(`/room/abcd`)}>Test room</button>
+                <button onClick={() => createRoom()}>Test room</button>
                 <h1 className="text-3xl font-bold">Friends:</h1>
                 <hr className="text-my-orange"></hr>
                 <ul className="">

From 446bce8477c2b288abbdf964dc4144592c77bcc3 Mon Sep 17 00:00:00 2001
From: "j.krol" <janek01krol@gmail.com>
Date: Sat, 23 Mar 2024 13:25:48 +0100
Subject: [PATCH 22/64] Store current meeting members in collection

---
 backend/src/socketServer.ts              |  9 ++++++---
 frontend/src/pages/NotificationsPage.tsx |  5 +++--
 frontend/src/pages/RoomCallPage.tsx      | 18 +++++++++++++++---
 3 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/backend/src/socketServer.ts b/backend/src/socketServer.ts
index 3fe799aa..e83162a9 100644
--- a/backend/src/socketServer.ts
+++ b/backend/src/socketServer.ts
@@ -159,10 +159,13 @@ io.on("connection", async (socket: Socket) => {
     await session.close();
   });
 
-  socket.on("joinRoom", async ({roomId, peerId}: any) => {
+  socket.on("joinRoom", async ({roomId, peerId, userId, fullName}: any) => {
     await socket.join(roomId);
-    socket.to(roomId).emit("userConnected", peerId);
-    console.log("[JOIN-ROOM]: sent ", peerId);
+    socket.to(roomId).emit("userConnected", {peerId, userId, fullName, socketId: socket.id});
+  });
+
+  socket.on("alreadyInRoom", ({socketId, peerId, userId, fullName}) => {
+    socket.to(socketId).emit("alreadyInRoom", {peerId, userId, fullName});
   });
 
   socket.on("disconnect", async (_reason) => {
diff --git a/frontend/src/pages/NotificationsPage.tsx b/frontend/src/pages/NotificationsPage.tsx
index 3c8af14b..847107ae 100644
--- a/frontend/src/pages/NotificationsPage.tsx
+++ b/frontend/src/pages/NotificationsPage.tsx
@@ -7,14 +7,15 @@ import { RootState } from "../redux/store";
 import dataService from "../services/data";
 import { useNavigate } from "react-router-dom";
 function NotificationsPage() {
-    const {socket} = useUser();
+    const {socket, userId, user} = useUser();
     const navigate = useNavigate();
     const roomNotifications: RoomNotification[] = useSelector((state: RootState) => state.notifications);
     const peerConfig = useSelector((state: RootState) => state.peer);
     const {peerId} = peerConfig;
     const handleRoomInvite = async (roomId: string) => {
         await dataService.fetchData(`/room/${roomId}`, "DELETE", {});
-        socket?.emit("joinRoom", {roomId, peerId});
+        const fullName = `${user?.first_name} ${user?.last_name}`;
+        socket?.emit("joinRoom", {roomId, peerId, userId, fullName});
         navigate(`/room/${roomId}`);
     } 
     
diff --git a/frontend/src/pages/RoomCallPage.tsx b/frontend/src/pages/RoomCallPage.tsx
index f6085dc4..d69ff386 100644
--- a/frontend/src/pages/RoomCallPage.tsx
+++ b/frontend/src/pages/RoomCallPage.tsx
@@ -12,9 +12,10 @@ import RoomPeerVideo from "../components/RoomPeerVideo";
 function RoomCallPage() {
     const localRef = useRef<HTMLVideoElement>(null);
     const peerConfig = useSelector((state: RootState) => state.peer);
-    const {peer} = peerConfig;
+    const {peer, peerId} = peerConfig;
     const [localStream, setLocalStream] = useState<MediaStream | null>(null);
     const [remoteStreams, setRemoteStreams] = useState<Set<MediaStream>>(new Set());
+    const [roomMembers, setRoomMembers] = useState<any[]>([]);
     const friends: User[] = useSelector((state: RootState) => state.friends);
     const {socket, userId, user} = useUser();
     const params = useParams();
@@ -37,11 +38,17 @@ function RoomCallPage() {
             setRemoteStreams(prev => new Set([...prev, remoteStream]));
         });
     }
+    const sendCredentialsToIncomingUser = (socketId: string) => {
+        const fullName = `${user?.first_name} ${user?.last_name}`;
+        socket?.emit("alreadyInRoom", {socketId, peerId, userId, fullName});
+    }
     const prepareWebRTC = async () => {
         const stream = await fetchUserMedia();
         setLocalStream(stream);
-        socket?.on("userConnected", (newPeerId) => {
-            connectToNewUser(newPeerId, stream);
+        socket?.on("userConnected", ({peerId, userId, fullName, socketId}) => {
+            connectToNewUser(peerId, stream);
+            setRoomMembers(prev => [...prev, {peerId, userId, fullName}]);
+            sendCredentialsToIncomingUser(socketId);
         });
     }
     const inviteFriendToRoom = async (friendId: string) => {
@@ -57,6 +64,11 @@ function RoomCallPage() {
         }),});
         socket?.emit("newRoom", {roomId, from: userId, to: friendId, userName: myFullName});
     }
+    useEffect(() => {
+        socket?.on("alreadyInRoom", ({userId, fullName, peerId}) => {
+            setRoomMembers(prev => [...prev, {peerId, userId, fullName}]);
+        });
+    }, []);
     useEffect(() => {
         prepareWebRTC();
     }, []);

From 65eda3b71a58e521617bcb08178f531d4c2b5b87 Mon Sep 17 00:00:00 2001
From: "j.krol" <janek01krol@gmail.com>
Date: Sat, 23 Mar 2024 16:08:23 +0100
Subject: [PATCH 23/64] Add user's id to peer id

---
 frontend/src/pages/ProfilePage.tsx         |  5 +++++
 frontend/src/pages/RoomCallPage.tsx        |  8 +++----
 frontend/src/redux/actions/initPeer.ts     |  6 ++++++
 frontend/src/redux/reducers/peerReducer.ts | 25 ++++++++++------------
 4 files changed, 25 insertions(+), 19 deletions(-)
 create mode 100644 frontend/src/redux/actions/initPeer.ts

diff --git a/frontend/src/pages/ProfilePage.tsx b/frontend/src/pages/ProfilePage.tsx
index 35d7a4ba..5b550e6f 100644
--- a/frontend/src/pages/ProfilePage.tsx
+++ b/frontend/src/pages/ProfilePage.tsx
@@ -10,6 +10,7 @@ import { useDispatch } from "react-redux";
 import setNotifications from "../redux/actions/setNotifications";
 import setUserFriends from "../redux/actions/setUserFriends";
 import addNotification from "../redux/actions/addNotification";
+import initPeer from "../redux/actions/initPeer";
 
 function ProfilePage() {
   const navigate = useNavigate();
@@ -62,6 +63,10 @@ function ProfilePage() {
     fetchNotifications();
   }, []);
 
+  useEffect(() => {
+    dispatch(initPeer(userId!));
+  }, []);
+
   useEffect(() => {
     socket!.on("newRoom", (notification) => {
       dispatch(addNotification(notification));
diff --git a/frontend/src/pages/RoomCallPage.tsx b/frontend/src/pages/RoomCallPage.tsx
index d69ff386..93a660aa 100644
--- a/frontend/src/pages/RoomCallPage.tsx
+++ b/frontend/src/pages/RoomCallPage.tsx
@@ -15,7 +15,6 @@ function RoomCallPage() {
     const {peer, peerId} = peerConfig;
     const [localStream, setLocalStream] = useState<MediaStream | null>(null);
     const [remoteStreams, setRemoteStreams] = useState<Set<MediaStream>>(new Set());
-    const [roomMembers, setRoomMembers] = useState<any[]>([]);
     const friends: User[] = useSelector((state: RootState) => state.friends);
     const {socket, userId, user} = useUser();
     const params = useParams();
@@ -47,7 +46,6 @@ function RoomCallPage() {
         setLocalStream(stream);
         socket?.on("userConnected", ({peerId, userId, fullName, socketId}) => {
             connectToNewUser(peerId, stream);
-            setRoomMembers(prev => [...prev, {peerId, userId, fullName}]);
             sendCredentialsToIncomingUser(socketId);
         });
     }
@@ -64,11 +62,11 @@ function RoomCallPage() {
         }),});
         socket?.emit("newRoom", {roomId, from: userId, to: friendId, userName: myFullName});
     }
-    useEffect(() => {
+    /*useEffect(() => {
         socket?.on("alreadyInRoom", ({userId, fullName, peerId}) => {
-            setRoomMembers(prev => [...prev, {peerId, userId, fullName}]);
+            
         });
-    }, []);
+    }, []);*/
     useEffect(() => {
         prepareWebRTC();
     }, []);
diff --git a/frontend/src/redux/actions/initPeer.ts b/frontend/src/redux/actions/initPeer.ts
new file mode 100644
index 00000000..4ddca351
--- /dev/null
+++ b/frontend/src/redux/actions/initPeer.ts
@@ -0,0 +1,6 @@
+export default (userId: string) => {
+    return {
+      type: "INIT_PEER",
+      payload: { userId },
+    };
+};
\ No newline at end of file
diff --git a/frontend/src/redux/reducers/peerReducer.ts b/frontend/src/redux/reducers/peerReducer.ts
index bf967071..9b42c48a 100644
--- a/frontend/src/redux/reducers/peerReducer.ts
+++ b/frontend/src/redux/reducers/peerReducer.ts
@@ -1,17 +1,14 @@
 import Peer from "peerjs";
 
-const peer = new Peer({
-    host: "/",
-    port: 8000
-});
-const initState = {
-    peer,
-    peerId: ""
-}
-peer.on("open", (peerId) => {
-    initState.peerId = peerId;
-});
-
-export default (state = initState, _action: any) => {
-    return state;
+export default (state = null, action: any) => {
+    if (action.type === "INIT_PEER") {
+        const userId = action.payload.userId;
+        const peer = new Peer(userId, {
+            host: "/",
+            port: 8000
+        });
+        return peer;
+    } else {
+        return state
+    }
 }
\ No newline at end of file

From 22947816c8310309c153c18400c6c61546d4f755 Mon Sep 17 00:00:00 2001
From: "j.krol" <janek01krol@gmail.com>
Date: Sun, 24 Mar 2024 17:28:09 +0100
Subject: [PATCH 24/64] Add fixes to repair meetings

---
 frontend/src/pages/FriendsPage.tsx       |  1 +
 frontend/src/pages/NotificationsPage.tsx |  6 +++---
 frontend/src/pages/RoomCallPage.tsx      | 10 +++-------
 3 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/frontend/src/pages/FriendsPage.tsx b/frontend/src/pages/FriendsPage.tsx
index 2e2d86f6..66262758 100644
--- a/frontend/src/pages/FriendsPage.tsx
+++ b/frontend/src/pages/FriendsPage.tsx
@@ -20,6 +20,7 @@ import { v4 } from "uuid";
 
 function FriendsPage() {
   const navigate = useNavigate();
+  
   const { user, meeting, createMeeting, joinMeeting } = useUser();
 
   const friends = useSelector((state: RootState) => state.friends);
diff --git a/frontend/src/pages/NotificationsPage.tsx b/frontend/src/pages/NotificationsPage.tsx
index 847107ae..9365278c 100644
--- a/frontend/src/pages/NotificationsPage.tsx
+++ b/frontend/src/pages/NotificationsPage.tsx
@@ -6,16 +6,16 @@ import { useSelector } from "react-redux";
 import { RootState } from "../redux/store";
 import dataService from "../services/data";
 import { useNavigate } from "react-router-dom";
+import Peer from "peerjs";
 function NotificationsPage() {
     const {socket, userId, user} = useUser();
     const navigate = useNavigate();
     const roomNotifications: RoomNotification[] = useSelector((state: RootState) => state.notifications);
-    const peerConfig = useSelector((state: RootState) => state.peer);
-    const {peerId} = peerConfig;
+    const peer: Peer = useSelector((state: RootState) => state.peer);
     const handleRoomInvite = async (roomId: string) => {
         await dataService.fetchData(`/room/${roomId}`, "DELETE", {});
         const fullName = `${user?.first_name} ${user?.last_name}`;
-        socket?.emit("joinRoom", {roomId, peerId, userId, fullName});
+        socket?.emit("joinRoom", {roomId, peerId: peer.id, userId, fullName});
         navigate(`/room/${roomId}`);
     } 
     
diff --git a/frontend/src/pages/RoomCallPage.tsx b/frontend/src/pages/RoomCallPage.tsx
index 93a660aa..3945c80a 100644
--- a/frontend/src/pages/RoomCallPage.tsx
+++ b/frontend/src/pages/RoomCallPage.tsx
@@ -9,10 +9,10 @@ import { useUser } from "../helpers/UserProvider";
 import { useParams } from "react-router-dom";
 import dataService from "../services/data";
 import RoomPeerVideo from "../components/RoomPeerVideo";
+import Peer from "peerjs";
 function RoomCallPage() {
     const localRef = useRef<HTMLVideoElement>(null);
-    const peerConfig = useSelector((state: RootState) => state.peer);
-    const {peer, peerId} = peerConfig;
+    const peer: Peer = useSelector((state: RootState) => state.peer);
     const [localStream, setLocalStream] = useState<MediaStream | null>(null);
     const [remoteStreams, setRemoteStreams] = useState<Set<MediaStream>>(new Set());
     const friends: User[] = useSelector((state: RootState) => state.friends);
@@ -62,11 +62,7 @@ function RoomCallPage() {
         }),});
         socket?.emit("newRoom", {roomId, from: userId, to: friendId, userName: myFullName});
     }
-    /*useEffect(() => {
-        socket?.on("alreadyInRoom", ({userId, fullName, peerId}) => {
-            
-        });
-    }, []);*/
+
     useEffect(() => {
         prepareWebRTC();
     }, []);

From 7b9e4afd6a42ff374440b0e6195d4df6b7c2f74e Mon Sep 17 00:00:00 2001
From: "j.krol" <janek01krol@gmail.com>
Date: Sun, 24 Mar 2024 17:34:15 +0100
Subject: [PATCH 25/64] Add basic code cleanup

---
 backend/src/socketServer.ts         | 4 ----
 frontend/src/pages/RoomCallPage.tsx | 5 -----
 2 files changed, 9 deletions(-)

diff --git a/backend/src/socketServer.ts b/backend/src/socketServer.ts
index e83162a9..8d0f157c 100644
--- a/backend/src/socketServer.ts
+++ b/backend/src/socketServer.ts
@@ -164,10 +164,6 @@ io.on("connection", async (socket: Socket) => {
     socket.to(roomId).emit("userConnected", {peerId, userId, fullName, socketId: socket.id});
   });
 
-  socket.on("alreadyInRoom", ({socketId, peerId, userId, fullName}) => {
-    socket.to(socketId).emit("alreadyInRoom", {peerId, userId, fullName});
-  });
-
   socket.on("disconnect", async (_reason) => {
     const session = driver.session();
     await leaveMeeting(session, userId);
diff --git a/frontend/src/pages/RoomCallPage.tsx b/frontend/src/pages/RoomCallPage.tsx
index 3945c80a..90319443 100644
--- a/frontend/src/pages/RoomCallPage.tsx
+++ b/frontend/src/pages/RoomCallPage.tsx
@@ -37,16 +37,11 @@ function RoomCallPage() {
             setRemoteStreams(prev => new Set([...prev, remoteStream]));
         });
     }
-    const sendCredentialsToIncomingUser = (socketId: string) => {
-        const fullName = `${user?.first_name} ${user?.last_name}`;
-        socket?.emit("alreadyInRoom", {socketId, peerId, userId, fullName});
-    }
     const prepareWebRTC = async () => {
         const stream = await fetchUserMedia();
         setLocalStream(stream);
         socket?.on("userConnected", ({peerId, userId, fullName, socketId}) => {
             connectToNewUser(peerId, stream);
-            sendCredentialsToIncomingUser(socketId);
         });
     }
     const inviteFriendToRoom = async (friendId: string) => {

From 2e11dc6ccc7bac5dbc61c499b07f012f3f41790b Mon Sep 17 00:00:00 2001
From: "j.krol" <janek01krol@gmail.com>
Date: Sun, 24 Mar 2024 18:22:50 +0100
Subject: [PATCH 26/64] Create new interface RoomPeer

---
 frontend/src/components/RoomPeerVideo.tsx | 10 ++++++----
 frontend/src/models/RoomPeer.ts           |  6 ++++++
 frontend/src/pages/RoomCallPage.tsx       | 20 +++++++++++++-------
 3 files changed, 25 insertions(+), 11 deletions(-)
 create mode 100644 frontend/src/models/RoomPeer.ts

diff --git a/frontend/src/components/RoomPeerVideo.tsx b/frontend/src/components/RoomPeerVideo.tsx
index 807f4f5d..60caba9e 100644
--- a/frontend/src/components/RoomPeerVideo.tsx
+++ b/frontend/src/components/RoomPeerVideo.tsx
@@ -1,13 +1,15 @@
 import { useEffect, useRef } from "react";
+import RoomPeer from "../models/RoomPeer";
 
 interface RoomPeerVideoProps {
-    remoteStream: MediaStream;
+    remotePeer: RoomPeer;
 }
-function RoomPeerVideo({remoteStream}: RoomPeerVideoProps) {
+function RoomPeerVideo({remotePeer}: RoomPeerVideoProps) {
     const remoteRef = useRef<HTMLVideoElement>(null);
+    const {stream} = remotePeer;
     useEffect(() => {
-        if (remoteStream) {
-            remoteRef.current!.srcObject = remoteStream;
+        if (stream) {
+            remoteRef.current!.srcObject = stream;
             remoteRef.current!.play();
         }
     }, []);
diff --git a/frontend/src/models/RoomPeer.ts b/frontend/src/models/RoomPeer.ts
new file mode 100644
index 00000000..374a31d6
--- /dev/null
+++ b/frontend/src/models/RoomPeer.ts
@@ -0,0 +1,6 @@
+interface RoomPeer {
+    peerId: string;
+    stream: MediaStream;
+    fullName?: string;
+}
+export default RoomPeer;
\ No newline at end of file
diff --git a/frontend/src/pages/RoomCallPage.tsx b/frontend/src/pages/RoomCallPage.tsx
index 90319443..f02277bb 100644
--- a/frontend/src/pages/RoomCallPage.tsx
+++ b/frontend/src/pages/RoomCallPage.tsx
@@ -10,11 +10,12 @@ import { useParams } from "react-router-dom";
 import dataService from "../services/data";
 import RoomPeerVideo from "../components/RoomPeerVideo";
 import Peer from "peerjs";
+import RoomPeer from "../models/RoomPeer";
 function RoomCallPage() {
     const localRef = useRef<HTMLVideoElement>(null);
     const peer: Peer = useSelector((state: RootState) => state.peer);
     const [localStream, setLocalStream] = useState<MediaStream | null>(null);
-    const [remoteStreams, setRemoteStreams] = useState<Set<MediaStream>>(new Set());
+    const [remotePeers, setRemotePeers] = useState<RoomPeer[]>([]);
     const friends: User[] = useSelector((state: RootState) => state.friends);
     const {socket, userId, user} = useUser();
     const params = useParams();
@@ -28,20 +29,22 @@ function RoomCallPage() {
             call.answer(stream);
         }
         call.on("stream", (remoteStream: MediaStream) => {
-            setRemoteStreams(prev => new Set([...prev, remoteStream]));
+            console.log("[STREAM IN CALL]")
+            setRemotePeers(prev => [...prev, {peerId: call.peer, stream: remoteStream}]);   
         });
     });
-    const connectToNewUser = (newPeerId: string, stream: MediaStream) => {
+    const connectToNewUser = (newPeerId: string, fullName: string, stream: MediaStream) => {
         const call = peer.call(newPeerId, stream);
         call.on("stream", (remoteStream: MediaStream) => {
-            setRemoteStreams(prev => new Set([...prev, remoteStream]));
+            console.log("[STREAM IN CONNECT TO NEW USER]");
+            setRemotePeers(prev => [...prev, {peerId: newPeerId, stream: remoteStream, fullName}]);
         });
     }
     const prepareWebRTC = async () => {
         const stream = await fetchUserMedia();
         setLocalStream(stream);
-        socket?.on("userConnected", ({peerId, userId, fullName, socketId}) => {
-            connectToNewUser(peerId, stream);
+        socket?.on("userConnected", ({peerId, userId, fullName, socketId}): any => {
+            connectToNewUser(peerId, fullName, stream);
         });
     }
     const inviteFriendToRoom = async (friendId: string) => {
@@ -67,6 +70,9 @@ function RoomCallPage() {
             localRef.current.play();
         }
     }, [localRef.current, localStream]);
+    useEffect(() => {
+        console.log("[REMOTE-PEERS]: ", remotePeers);
+    }, [remotePeers]);
     return (
         <>
             <Navbar />
@@ -77,7 +83,7 @@ function RoomCallPage() {
                             ref={localRef}
                         ></video>
                     </div>
-                    {Array.from(remoteStreams).map((remoteStream,idx) => <RoomPeerVideo key={idx} remoteStream={remoteStream} />)}
+                    {remotePeers.map((remotePeer) => <RoomPeerVideo key={remotePeer.peerId} remotePeer={remotePeer} />)}
                 </section>
                 <section>
                     <h3><strong>Invite</strong></h3>

From ad3ced16caa6fc39b6cb35130607eae3005a7ba8 Mon Sep 17 00:00:00 2001
From: "j.krol" <janek01krol@gmail.com>
Date: Sun, 24 Mar 2024 19:14:56 +0100
Subject: [PATCH 27/64] Maintain version without interface list

---
 frontend/src/components/RoomPeerVideo.tsx |  9 ++++-----
 frontend/src/pages/RoomCallPage.tsx       | 14 ++++----------
 2 files changed, 8 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/RoomPeerVideo.tsx b/frontend/src/components/RoomPeerVideo.tsx
index 60caba9e..fd196d16 100644
--- a/frontend/src/components/RoomPeerVideo.tsx
+++ b/frontend/src/components/RoomPeerVideo.tsx
@@ -2,14 +2,13 @@ import { useEffect, useRef } from "react";
 import RoomPeer from "../models/RoomPeer";
 
 interface RoomPeerVideoProps {
-    remotePeer: RoomPeer;
+    remoteStream: MediaStream;
 }
-function RoomPeerVideo({remotePeer}: RoomPeerVideoProps) {
+function RoomPeerVideo({remoteStream}: RoomPeerVideoProps) {
     const remoteRef = useRef<HTMLVideoElement>(null);
-    const {stream} = remotePeer;
     useEffect(() => {
-        if (stream) {
-            remoteRef.current!.srcObject = stream;
+        if (remoteStream) {
+            remoteRef.current!.srcObject = remoteStream;
             remoteRef.current!.play();
         }
     }, []);
diff --git a/frontend/src/pages/RoomCallPage.tsx b/frontend/src/pages/RoomCallPage.tsx
index f02277bb..a7b35b64 100644
--- a/frontend/src/pages/RoomCallPage.tsx
+++ b/frontend/src/pages/RoomCallPage.tsx
@@ -10,12 +10,11 @@ import { useParams } from "react-router-dom";
 import dataService from "../services/data";
 import RoomPeerVideo from "../components/RoomPeerVideo";
 import Peer from "peerjs";
-import RoomPeer from "../models/RoomPeer";
 function RoomCallPage() {
     const localRef = useRef<HTMLVideoElement>(null);
     const peer: Peer = useSelector((state: RootState) => state.peer);
     const [localStream, setLocalStream] = useState<MediaStream | null>(null);
-    const [remotePeers, setRemotePeers] = useState<RoomPeer[]>([]);
+    const [remoteStreams, setRemoteStreams] = useState<Set<MediaStream>>(new Set());
     const friends: User[] = useSelector((state: RootState) => state.friends);
     const {socket, userId, user} = useUser();
     const params = useParams();
@@ -29,15 +28,13 @@ function RoomCallPage() {
             call.answer(stream);
         }
         call.on("stream", (remoteStream: MediaStream) => {
-            console.log("[STREAM IN CALL]")
-            setRemotePeers(prev => [...prev, {peerId: call.peer, stream: remoteStream}]);   
+            setRemoteStreams(prev => new Set([...prev, remoteStream]));
         });
     });
     const connectToNewUser = (newPeerId: string, fullName: string, stream: MediaStream) => {
         const call = peer.call(newPeerId, stream);
         call.on("stream", (remoteStream: MediaStream) => {
-            console.log("[STREAM IN CONNECT TO NEW USER]");
-            setRemotePeers(prev => [...prev, {peerId: newPeerId, stream: remoteStream, fullName}]);
+            setRemoteStreams(prev => new Set([...prev, remoteStream]));
         });
     }
     const prepareWebRTC = async () => {
@@ -70,9 +67,6 @@ function RoomCallPage() {
             localRef.current.play();
         }
     }, [localRef.current, localStream]);
-    useEffect(() => {
-        console.log("[REMOTE-PEERS]: ", remotePeers);
-    }, [remotePeers]);
     return (
         <>
             <Navbar />
@@ -83,7 +77,7 @@ function RoomCallPage() {
                             ref={localRef}
                         ></video>
                     </div>
-                    {remotePeers.map((remotePeer) => <RoomPeerVideo key={remotePeer.peerId} remotePeer={remotePeer} />)}
+                    {Array.from(remoteStreams).map((remoteStream,idx) => <RoomPeerVideo key={idx} remoteStream={remoteStream} />)}
                 </section>
                 <section>
                     <h3><strong>Invite</strong></h3>

From ddb99ea1eeab14728069149acde66681cf65bcd9 Mon Sep 17 00:00:00 2001
From: "j.krol" <janek01krol@gmail.com>
Date: Sun, 24 Mar 2024 19:38:22 +0100
Subject: [PATCH 28/64] Store data in object

---
 frontend/src/models/RoomPeer.ts     |  2 +-
 frontend/src/pages/RoomCallPage.tsx | 15 +++++++++++----
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/frontend/src/models/RoomPeer.ts b/frontend/src/models/RoomPeer.ts
index 374a31d6..31d77813 100644
--- a/frontend/src/models/RoomPeer.ts
+++ b/frontend/src/models/RoomPeer.ts
@@ -1,5 +1,5 @@
 interface RoomPeer {
-    peerId: string;
+    peerId?: string;
     stream: MediaStream;
     fullName?: string;
 }
diff --git a/frontend/src/pages/RoomCallPage.tsx b/frontend/src/pages/RoomCallPage.tsx
index a7b35b64..9cae422b 100644
--- a/frontend/src/pages/RoomCallPage.tsx
+++ b/frontend/src/pages/RoomCallPage.tsx
@@ -10,11 +10,12 @@ import { useParams } from "react-router-dom";
 import dataService from "../services/data";
 import RoomPeerVideo from "../components/RoomPeerVideo";
 import Peer from "peerjs";
+import RoomPeer from "../models/RoomPeer";
 function RoomCallPage() {
     const localRef = useRef<HTMLVideoElement>(null);
     const peer: Peer = useSelector((state: RootState) => state.peer);
     const [localStream, setLocalStream] = useState<MediaStream | null>(null);
-    const [remoteStreams, setRemoteStreams] = useState<Set<MediaStream>>(new Set());
+    const [roomPeers, setRoomPeers] = useState<{[key: string]: RoomPeer}>({});
     const friends: User[] = useSelector((state: RootState) => state.friends);
     const {socket, userId, user} = useUser();
     const params = useParams();
@@ -28,13 +29,19 @@ function RoomCallPage() {
             call.answer(stream);
         }
         call.on("stream", (remoteStream: MediaStream) => {
-            setRemoteStreams(prev => new Set([...prev, remoteStream]));
+            const peerId = call.peer;
+            const newPeerObj: {[key: string]: RoomPeer} = {};
+            newPeerObj[peerId] = {stream: remoteStream}
+            setRoomPeers(prev => ({...prev, ...newPeerObj}));
         });
     });
     const connectToNewUser = (newPeerId: string, fullName: string, stream: MediaStream) => {
         const call = peer.call(newPeerId, stream);
         call.on("stream", (remoteStream: MediaStream) => {
-            setRemoteStreams(prev => new Set([...prev, remoteStream]));
+            const peerId = newPeerId;
+            const newPeerObj: {[key: string]: RoomPeer} = {};
+            newPeerObj[peerId] = {stream: remoteStream};
+            setRoomPeers(prev => ({...prev, ...newPeerObj}));
         });
     }
     const prepareWebRTC = async () => {
@@ -77,7 +84,7 @@ function RoomCallPage() {
                             ref={localRef}
                         ></video>
                     </div>
-                    {Array.from(remoteStreams).map((remoteStream,idx) => <RoomPeerVideo key={idx} remoteStream={remoteStream} />)}
+                    {Object.entries(roomPeers).map((roomPeer) => <RoomPeerVideo key={roomPeer[0]} remoteStream={roomPeer[1].stream} />)}
                 </section>
                 <section>
                     <h3><strong>Invite</strong></h3>

From 1f1a6b64ff7da29bf5c365fdca04bbfaa027b53f Mon Sep 17 00:00:00 2001
From: "j.krol" <janek01krol@gmail.com>
Date: Sun, 24 Mar 2024 19:43:29 +0100
Subject: [PATCH 29/64] Add a little code clenup in RoomCallPage

---
 frontend/src/components/RoomPeerVideo.tsx |  4 ++--
 frontend/src/pages/RoomCallPage.tsx       | 11 +++++++----
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/RoomPeerVideo.tsx b/frontend/src/components/RoomPeerVideo.tsx
index fd196d16..9bdb007a 100644
--- a/frontend/src/components/RoomPeerVideo.tsx
+++ b/frontend/src/components/RoomPeerVideo.tsx
@@ -1,10 +1,10 @@
 import { useEffect, useRef } from "react";
-import RoomPeer from "../models/RoomPeer";
 
 interface RoomPeerVideoProps {
     remoteStream: MediaStream;
+    peerId: string;
 }
-function RoomPeerVideo({remoteStream}: RoomPeerVideoProps) {
+function RoomPeerVideo({remoteStream, peerId}: RoomPeerVideoProps) {
     const remoteRef = useRef<HTMLVideoElement>(null);
     useEffect(() => {
         if (remoteStream) {
diff --git a/frontend/src/pages/RoomCallPage.tsx b/frontend/src/pages/RoomCallPage.tsx
index 9cae422b..a6a25d7f 100644
--- a/frontend/src/pages/RoomCallPage.tsx
+++ b/frontend/src/pages/RoomCallPage.tsx
@@ -35,7 +35,7 @@ function RoomCallPage() {
             setRoomPeers(prev => ({...prev, ...newPeerObj}));
         });
     });
-    const connectToNewUser = (newPeerId: string, fullName: string, stream: MediaStream) => {
+    const connectToNewUser = (newPeerId: string, stream: MediaStream) => {
         const call = peer.call(newPeerId, stream);
         call.on("stream", (remoteStream: MediaStream) => {
             const peerId = newPeerId;
@@ -47,8 +47,8 @@ function RoomCallPage() {
     const prepareWebRTC = async () => {
         const stream = await fetchUserMedia();
         setLocalStream(stream);
-        socket?.on("userConnected", ({peerId, userId, fullName, socketId}): any => {
-            connectToNewUser(peerId, fullName, stream);
+        socket?.on("userConnected", ({peerId}): any => {
+            connectToNewUser(peerId, stream);
         });
     }
     const inviteFriendToRoom = async (friendId: string) => {
@@ -84,7 +84,10 @@ function RoomCallPage() {
                             ref={localRef}
                         ></video>
                     </div>
-                    {Object.entries(roomPeers).map((roomPeer) => <RoomPeerVideo key={roomPeer[0]} remoteStream={roomPeer[1].stream} />)}
+                    {Object.entries(roomPeers).map((roomPeer) => {
+                        const [id, peer] = roomPeer;
+                        return <RoomPeerVideo key={id} remoteStream={peer.stream} peerId={id}  />
+                    })}
                 </section>
                 <section>
                     <h3><strong>Invite</strong></h3>

From 2f6948a196af73eacf43abe4644ac57f2b359408 Mon Sep 17 00:00:00 2001
From: "j.krol" <janek01krol@gmail.com>
Date: Sun, 24 Mar 2024 19:50:15 +0100
Subject: [PATCH 30/64] Add endpoint to return user's full name

---
 backend/src/routes/usersRoute.ts | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/backend/src/routes/usersRoute.ts b/backend/src/routes/usersRoute.ts
index 27a0d71c..8b965e2d 100644
--- a/backend/src/routes/usersRoute.ts
+++ b/backend/src/routes/usersRoute.ts
@@ -205,6 +205,30 @@ usersRouter.get("/meetings/:userId", async (req: Request, res) => {
   }
 });
 
+usersRouter.get("/:userId/name", async (req, res) => {
+  try {
+    const userId = req.params.userId;
+    const session = driver.session();
+    const user = await userExists(session, { id: userId });
+    if (!user) {
+      return userNotFoundRes(res);
+    }
+    const userNameRequest = await session.run(
+      `MATCH (u:User {id: $userId}) return u`,
+      { userId },
+    );
+    await session.close();
+    const userData: User = userNameRequest.records.map((u) =>
+      filterUser(u.get("u").properties),
+    )[0];
+    const fullName = `${userData.first_name} ${userData.last_name}`;
+    return res.json({ status: "ok", fullName });
+  } catch (err) {
+    console.log("Error:", err);
+    return res.status(404).json({ status: "error", errors: err as object });
+  }
+});
+
 usersRouter.put("/meetings/:meetingId", async (req: Request, res) => {
   try {
     const session = driver.session();

From 4c84e5a1fc634d51f4fb4854843c4e0c833fbc9e Mon Sep 17 00:00:00 2001
From: "j.krol" <janek01krol@gmail.com>
Date: Sun, 24 Mar 2024 19:56:15 +0100
Subject: [PATCH 31/64] Handle users' names in under video tags

---
 frontend/src/components/RoomPeerVideo.tsx | 13 ++++++++++---
 frontend/src/pages/RoomCallPage.tsx       |  1 +
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/RoomPeerVideo.tsx b/frontend/src/components/RoomPeerVideo.tsx
index 9bdb007a..ffa43093 100644
--- a/frontend/src/components/RoomPeerVideo.tsx
+++ b/frontend/src/components/RoomPeerVideo.tsx
@@ -1,21 +1,28 @@
-import { useEffect, useRef } from "react";
-
+import { useEffect, useRef, useState } from "react";
+import dataService from "../services/data";
 interface RoomPeerVideoProps {
     remoteStream: MediaStream;
     peerId: string;
 }
 function RoomPeerVideo({remoteStream, peerId}: RoomPeerVideoProps) {
     const remoteRef = useRef<HTMLVideoElement>(null);
+    const [name, setName] = useState("");
+    const fetchFullName = async () => {
+        const fullNameRequest = await dataService.fetchData(`/users/${peerId}/name`, "GET", {});
+        const fullName = fullNameRequest.fullName;
+        setName(fullName);
+    }
     useEffect(() => {
         if (remoteStream) {
             remoteRef.current!.srcObject = remoteStream;
             remoteRef.current!.play();
         }
+        fetchFullName();
     }, []);
     return (
         <div><video
             ref={remoteRef}
-        ></video></div>
+        ></video><span>{name}</span></div>
     )
 }
 
diff --git a/frontend/src/pages/RoomCallPage.tsx b/frontend/src/pages/RoomCallPage.tsx
index a6a25d7f..54431d12 100644
--- a/frontend/src/pages/RoomCallPage.tsx
+++ b/frontend/src/pages/RoomCallPage.tsx
@@ -83,6 +83,7 @@ function RoomCallPage() {
                         <video 
                             ref={localRef}
                         ></video>
+                        <span>{`${user?.first_name} ${user?.last_name}`}</span>
                     </div>
                     {Object.entries(roomPeers).map((roomPeer) => {
                         const [id, peer] = roomPeer;

From 3535e0776ecd97f34f8efd9e2374848066f25df1 Mon Sep 17 00:00:00 2001
From: "j.krol" <janek01krol@gmail.com>
Date: Mon, 25 Mar 2024 16:57:21 +0100
Subject: [PATCH 32/64] Add mute buttons in rooms

---
 frontend/src/pages/RoomCallPage.tsx | 63 +++++++++++++++++++++++++++++
 1 file changed, 63 insertions(+)

diff --git a/frontend/src/pages/RoomCallPage.tsx b/frontend/src/pages/RoomCallPage.tsx
index 54431d12..4cf1775a 100644
--- a/frontend/src/pages/RoomCallPage.tsx
+++ b/frontend/src/pages/RoomCallPage.tsx
@@ -11,11 +11,20 @@ import dataService from "../services/data";
 import RoomPeerVideo from "../components/RoomPeerVideo";
 import Peer from "peerjs";
 import RoomPeer from "../models/RoomPeer";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+    faMicrophone,
+    faMicrophoneSlash,
+    faVideo,
+    faVideoSlash,
+  } from "@fortawesome/free-solid-svg-icons";
 function RoomCallPage() {
     const localRef = useRef<HTMLVideoElement>(null);
     const peer: Peer = useSelector((state: RootState) => state.peer);
     const [localStream, setLocalStream] = useState<MediaStream | null>(null);
     const [roomPeers, setRoomPeers] = useState<{[key: string]: RoomPeer}>({});
+    const [isAudio, setIsAudio] = useState(true);
+    const [isVideo, setIsVideo] = useState(true);
     const friends: User[] = useSelector((state: RootState) => state.friends);
     const {socket, userId, user} = useUser();
     const params = useParams();
@@ -51,6 +60,46 @@ function RoomCallPage() {
             connectToNewUser(peerId, stream);
         });
     }
+    /*
+    async function startStopAudio() {
+    if (stream) {
+      const tracks = stream.getAudioTracks();
+      if (audio) {
+        setAudio(false);
+        tracks.forEach((track) => (track.enabled = false));
+      } else {
+        setAudio(true);
+        tracks.forEach((track) => (track.enabled = true));
+      }
+    }
+  }
+    */
+    const startStopAudio = async () => {
+        if (localStream) {
+            const tracks = localStream.getAudioTracks();
+            if (isAudio) {
+                setIsAudio(false);
+                tracks.forEach((track) => (track.enabled = false));
+            } else {
+                setIsAudio(true);
+                tracks.forEach((track) => (track.enabled = true));
+            }
+        }
+    } 
+
+    const startStopVideo = async () => {
+        if (localStream) {
+            const tracks = localStream.getVideoTracks();
+            if (isVideo) {
+                setIsVideo(false);
+                tracks.forEach((track) => (track.enabled = false));
+            } else {
+                setIsVideo(true);
+                tracks.forEach((track) => (track.enabled = true));
+            }
+        }
+    } 
+
     const inviteFriendToRoom = async (friendId: string) => {
         const myFullName = `${user?.first_name} ${user?.last_name}`;
         await dataService.fetchData("/room", "POST", {headers: {
@@ -84,6 +133,20 @@ function RoomCallPage() {
                             ref={localRef}
                         ></video>
                         <span>{`${user?.first_name} ${user?.last_name}`}</span>
+                        <button className="btn p-6" onClick={() => startStopAudio()}>
+                            {isAudio ? (
+                                <FontAwesomeIcon icon={faMicrophone} />
+                            ) : (
+                                <FontAwesomeIcon icon={faMicrophoneSlash} />
+                            )}
+                        </button>
+                        <button className="btn p-6" onClick={() => startStopVideo()}>
+                            {isVideo ? (
+                                <FontAwesomeIcon icon={faVideo} />
+                            ) : (
+                                <FontAwesomeIcon icon={faVideoSlash} />
+                            )}
+                        </button>
                     </div>
                     {Object.entries(roomPeers).map((roomPeer) => {
                         const [id, peer] = roomPeer;

From 298ff99c4895e540a743f4273ec956ddaa0099a6 Mon Sep 17 00:00:00 2001
From: "j.krol" <janek01krol@gmail.com>
Date: Mon, 25 Mar 2024 18:08:27 +0100
Subject: [PATCH 33/64] Handle leave room

---
 backend/src/socketServer.ts         |  5 ++++
 frontend/src/pages/RoomCallPage.tsx | 46 +++++++++++++++++++----------
 2 files changed, 36 insertions(+), 15 deletions(-)

diff --git a/backend/src/socketServer.ts b/backend/src/socketServer.ts
index 8d0f157c..e7f1de67 100644
--- a/backend/src/socketServer.ts
+++ b/backend/src/socketServer.ts
@@ -164,6 +164,11 @@ io.on("connection", async (socket: Socket) => {
     socket.to(roomId).emit("userConnected", {peerId, userId, fullName, socketId: socket.id});
   });
 
+  socket.on("leftRoom", async ({userId, roomId}) => {
+    await socket.join(roomId);
+    socket.to(roomId).emit("leftRoom", userId);
+  });
+
   socket.on("disconnect", async (_reason) => {
     const session = driver.session();
     await leaveMeeting(session, userId);
diff --git a/frontend/src/pages/RoomCallPage.tsx b/frontend/src/pages/RoomCallPage.tsx
index 4cf1775a..348bdb17 100644
--- a/frontend/src/pages/RoomCallPage.tsx
+++ b/frontend/src/pages/RoomCallPage.tsx
@@ -6,13 +6,14 @@ import { useSelector } from "react-redux";
 import { RootState } from "../redux/store";
 import User from "../models/User";
 import { useUser } from "../helpers/UserProvider";
-import { useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import dataService from "../services/data";
 import RoomPeerVideo from "../components/RoomPeerVideo";
 import Peer from "peerjs";
 import RoomPeer from "../models/RoomPeer";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
+    faPhoneSlash,
     faMicrophone,
     faMicrophoneSlash,
     faVideo,
@@ -28,6 +29,7 @@ function RoomCallPage() {
     const friends: User[] = useSelector((state: RootState) => state.friends);
     const {socket, userId, user} = useUser();
     const params = useParams();
+    const navigate = useNavigate();
     const roomId = params.roomId;
     peer.on("call", async (call) => {
         if (localStream) {
@@ -53,27 +55,23 @@ function RoomCallPage() {
             setRoomPeers(prev => ({...prev, ...newPeerObj}));
         });
     }
+    
     const prepareWebRTC = async () => {
         const stream = await fetchUserMedia();
         setLocalStream(stream);
         socket?.on("userConnected", ({peerId}): any => {
             connectToNewUser(peerId, stream);
         });
+        socket?.on("leftRoom", (id) => {
+            setRoomPeers(prev => Object.fromEntries(
+                Object.entries(prev).filter(elem => {
+                    const [peerId, _peer] = elem;
+                    return peerId !== id;
+                })
+            ));
+        });
     }
-    /*
-    async function startStopAudio() {
-    if (stream) {
-      const tracks = stream.getAudioTracks();
-      if (audio) {
-        setAudio(false);
-        tracks.forEach((track) => (track.enabled = false));
-      } else {
-        setAudio(true);
-        tracks.forEach((track) => (track.enabled = true));
-      }
-    }
-  }
-    */
+    
     const startStopAudio = async () => {
         if (localStream) {
             const tracks = localStream.getAudioTracks();
@@ -100,6 +98,17 @@ function RoomCallPage() {
         }
     } 
 
+    const handleLeaveMeeting = () => {
+        if (localRef.current) {
+            (localRef.current.srcObject as MediaStream)
+            .getTracks().forEach((track) => {
+                track.stop();
+            });
+            socket?.emit("leftRoom", {roomId, userId});
+            navigate("/friends");
+        }
+    }
+
     const inviteFriendToRoom = async (friendId: string) => {
         const myFullName = `${user?.first_name} ${user?.last_name}`;
         await dataService.fetchData("/room", "POST", {headers: {
@@ -123,6 +132,7 @@ function RoomCallPage() {
             localRef.current.play();
         }
     }, [localRef.current, localStream]);
+    
     return (
         <>
             <Navbar />
@@ -147,6 +157,12 @@ function RoomCallPage() {
                                 <FontAwesomeIcon icon={faVideoSlash} />
                             )}
                         </button>
+                        <button
+                            onClick={() => handleLeaveMeeting()}
+                            className="btn bg-my-red p-6"
+                        >
+                            <FontAwesomeIcon icon={faPhoneSlash}></FontAwesomeIcon>
+                        </button>
                     </div>
                     {Object.entries(roomPeers).map((roomPeer) => {
                         const [id, peer] = roomPeer;

From 4a81598afccd949559d63cc841f45961275872c0 Mon Sep 17 00:00:00 2001
From: "j.krol" <janek01krol@gmail.com>
Date: Mon, 25 Mar 2024 18:14:04 +0100
Subject: [PATCH 34/64] Unable to invite a friend who has already been in
 meeting

---
 frontend/src/pages/RoomCallPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/pages/RoomCallPage.tsx b/frontend/src/pages/RoomCallPage.tsx
index 348bdb17..2bf3ccd0 100644
--- a/frontend/src/pages/RoomCallPage.tsx
+++ b/frontend/src/pages/RoomCallPage.tsx
@@ -172,7 +172,7 @@ function RoomCallPage() {
                 <section>
                     <h3><strong>Invite</strong></h3>
                     <ul>
-                        {friends.map(friend => 
+                        {friends.filter(friend => !(friend.id in roomPeers)).map(friend => 
                             <li key={friend.id}>
                                 <span>{`${friend.first_name} ${friend.last_name}`} </span>
                                 <button onClick={() => inviteFriendToRoom(friend.id)}>click</button>

From 332df49fbd386fe6ebb5c67b809aab8821755eae Mon Sep 17 00:00:00 2001
From: "j.krol" <janek01krol@gmail.com>
Date: Mon, 25 Mar 2024 18:17:07 +0100
Subject: [PATCH 35/64] Improve style of create team meeting button

---
 frontend/src/pages/FriendsPage.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/frontend/src/pages/FriendsPage.tsx b/frontend/src/pages/FriendsPage.tsx
index 66262758..b459a824 100644
--- a/frontend/src/pages/FriendsPage.tsx
+++ b/frontend/src/pages/FriendsPage.tsx
@@ -130,6 +130,13 @@ function FriendsPage() {
                   <FontAwesomeIcon icon={faPlus}></FontAwesomeIcon>
                   <span className="ml-2">Create a room</span>
                 </button>
+                <button
+                  onClick={createRoom}
+                  className="btn primary w-full mb-4"
+                >
+                  <FontAwesomeIcon icon={faPlus}></FontAwesomeIcon>
+                  <span className="ml-2">Create a team meeting</span>
+                </button>
                 <button onClick={() => createRoom()}>Test room</button>
                 <h1 className="text-3xl font-bold">Friends:</h1>
                 <hr className="text-my-orange"></hr>

From ccef59ce07c521411faabb662cf64d05d2cfcc36 Mon Sep 17 00:00:00 2001
From: "j.krol" <janek01krol@gmail.com>
Date: Mon, 25 Mar 2024 19:10:36 +0100
Subject: [PATCH 36/64] Add styles for notifications

---
 frontend/src/components/Notification.tsx      | 29 +++++++++++++++++++
 frontend/src/pages/NotificationsPage.tsx      | 28 ++++++++++++------
 .../src/redux/actions/deleteNotification.ts   |  7 +++++
 .../redux/reducers/notificationsReducer.ts    |  2 ++
 frontend/tailwind.config.js                   |  1 +
 5 files changed, 58 insertions(+), 9 deletions(-)
 create mode 100644 frontend/src/components/Notification.tsx
 create mode 100644 frontend/src/redux/actions/deleteNotification.ts

diff --git a/frontend/src/components/Notification.tsx b/frontend/src/components/Notification.tsx
new file mode 100644
index 00000000..697442ca
--- /dev/null
+++ b/frontend/src/components/Notification.tsx
@@ -0,0 +1,29 @@
+import RoomNotification from "../models/RoomNotification";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faTrash, faVideo } from "@fortawesome/free-solid-svg-icons";
+interface NotificationProps {
+    roomNotification: RoomNotification;
+    handleRoomInvite: (id: string) => void;
+    declineInvite: (id: string) => void;
+}
+function Notification({roomNotification, handleRoomInvite, declineInvite}: NotificationProps) {
+    return (
+        <div className="bg-my-light-dark p-3 text-xl rounded-2xl font-normal flex items-center gap-x-10">
+            {roomNotification.userName} has invited you to meeting
+            <button 
+                onClick={() => handleRoomInvite(roomNotification.roomId)} 
+                className="btn small bg-my-green flex gap-x-4"
+            >
+                <FontAwesomeIcon icon={faVideo} />
+                Accept
+            </button>
+            <button 
+                onClick={() => declineInvite(roomNotification.roomId)} 
+                className="btn bg-my-red small flex justify-center items-center"
+            >
+                <FontAwesomeIcon icon={faTrash} />
+            </button>
+        </div>
+    )
+}
+export default Notification;
\ No newline at end of file
diff --git a/frontend/src/pages/NotificationsPage.tsx b/frontend/src/pages/NotificationsPage.tsx
index 9365278c..18d420cd 100644
--- a/frontend/src/pages/NotificationsPage.tsx
+++ b/frontend/src/pages/NotificationsPage.tsx
@@ -2,14 +2,17 @@ import Navbar from "../components/Navbar";
 import Footer from "../components/Footer";
 import { useUser } from "../helpers/UserProvider";
 import RoomNotification from "../models/RoomNotification";
-import { useSelector } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { RootState } from "../redux/store";
 import dataService from "../services/data";
 import { useNavigate } from "react-router-dom";
 import Peer from "peerjs";
+import Notification from "../components/Notification";
+import deleteNotification from "../redux/actions/deleteNotification";
 function NotificationsPage() {
     const {socket, userId, user} = useUser();
     const navigate = useNavigate();
+    const dispatch = useDispatch();
     const roomNotifications: RoomNotification[] = useSelector((state: RootState) => state.notifications);
     const peer: Peer = useSelector((state: RootState) => state.peer);
     const handleRoomInvite = async (roomId: string) => {
@@ -18,18 +21,25 @@ function NotificationsPage() {
         socket?.emit("joinRoom", {roomId, peerId: peer.id, userId, fullName});
         navigate(`/room/${roomId}`);
     } 
+
+    const declineInvite = (inviteId: string) => {
+        dispatch(deleteNotification(inviteId));
+    }
     
     return (
         <>
             <Navbar />
-            <h1>List of notifications</h1>
-            <ul>
-                {roomNotifications.length > 0 ? roomNotifications.map(notification => <li key={notification.roomId}>
-                    <strong>{notification.title}</strong>
-                    <span> from: {notification.userName} </span>
-                    <button onClick={() => handleRoomInvite(notification.roomId)}>click</button>
-                </li>) : null}
-            </ul>
+            <div className="flex flex-col gap-y-3 p-3">
+                {roomNotifications.length > 0 ? 
+                roomNotifications.map(notification => 
+                    <Notification 
+                        key={notification.roomId} 
+                        roomNotification={notification} 
+                        handleRoomInvite={handleRoomInvite} 
+                        declineInvite={declineInvite}
+                    />) 
+                : null}
+            </div>
             <Footer />
         </>
     )
diff --git a/frontend/src/redux/actions/deleteNotification.ts b/frontend/src/redux/actions/deleteNotification.ts
new file mode 100644
index 00000000..d5dadff0
--- /dev/null
+++ b/frontend/src/redux/actions/deleteNotification.ts
@@ -0,0 +1,7 @@
+export default (id: string) => {
+    return {
+      type: "DELETE_NOTIFICATION",
+      payload: { id },
+    };
+};
+  
\ No newline at end of file
diff --git a/frontend/src/redux/reducers/notificationsReducer.ts b/frontend/src/redux/reducers/notificationsReducer.ts
index e951b416..7e354f65 100644
--- a/frontend/src/redux/reducers/notificationsReducer.ts
+++ b/frontend/src/redux/reducers/notificationsReducer.ts
@@ -10,6 +10,8 @@ export default (state = [], action: any) => {
     } else if (action.type === "ADD_NOTIFICATION") {
       return doesNotificationRepeat(action.payload.notification, state) 
       ? state : [...state, action.payload.notification];
+    } else if (action.type === "DELETE_NOTIFICATION") {
+      return state.filter((notification:any) => notification.roomId !== action.payload.id);
     } else {
       return state;
     }
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index dc4e2e01..b9691fdf 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -20,6 +20,7 @@ export default {
       "my-red": "#CA1A1A",
       "my-cancel": "#FF7976",
       "my-accept": "#10D019",
+      "my-light-dark": "#333B45",
       "my-dark": "#21262D",
       "my-darker": "#121519",
       "my-light": "#EDE9E9",

From b5bcb9a9cb6ef12d8cde7d3844afa4177c808001 Mon Sep 17 00:00:00 2001
From: "j.krol" <janek01krol@gmail.com>
Date: Mon, 25 Mar 2024 19:41:41 +0100
Subject: [PATCH 37/64] Center mute buttons in team eetings

---
 frontend/src/components/RoomPeerVideo.tsx | 10 +++++---
 frontend/src/pages/RoomCallPage.tsx       | 29 +++++++++++++----------
 2 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/RoomPeerVideo.tsx b/frontend/src/components/RoomPeerVideo.tsx
index ffa43093..49ab9365 100644
--- a/frontend/src/components/RoomPeerVideo.tsx
+++ b/frontend/src/components/RoomPeerVideo.tsx
@@ -20,9 +20,13 @@ function RoomPeerVideo({remoteStream, peerId}: RoomPeerVideoProps) {
         fetchFullName();
     }, []);
     return (
-        <div><video
-            ref={remoteRef}
-        ></video><span>{name}</span></div>
+        <div>
+            <video
+                className="h-full w-full rounded-lg"
+                ref={remoteRef}
+            ></video>
+            <div>{name}</div>
+        </div>
     )
 }
 
diff --git a/frontend/src/pages/RoomCallPage.tsx b/frontend/src/pages/RoomCallPage.tsx
index 2bf3ccd0..b0b559ea 100644
--- a/frontend/src/pages/RoomCallPage.tsx
+++ b/frontend/src/pages/RoomCallPage.tsx
@@ -137,19 +137,14 @@ function RoomCallPage() {
         <>
             <Navbar />
             {localStream ? <main>
-                <section>
-                    <div>
-                        <video 
-                            ref={localRef}
-                        ></video>
-                        <span>{`${user?.first_name} ${user?.last_name}`}</span>
-                        <button className="btn p-6" onClick={() => startStopAudio()}>
-                            {isAudio ? (
-                                <FontAwesomeIcon icon={faMicrophone} />
-                            ) : (
-                                <FontAwesomeIcon icon={faMicrophoneSlash} />
-                            )}
-                        </button>
+                <div className="flex justify-center p-1">
+                    <button className="btn p-6" onClick={() => startStopAudio()}>
+                        {isAudio ? (
+                            <FontAwesomeIcon icon={faMicrophone} />
+                        ) : (
+                            <FontAwesomeIcon icon={faMicrophoneSlash} />
+                        )}
+                    </button>
                         <button className="btn p-6" onClick={() => startStopVideo()}>
                             {isVideo ? (
                                 <FontAwesomeIcon icon={faVideo} />
@@ -163,6 +158,14 @@ function RoomCallPage() {
                         >
                             <FontAwesomeIcon icon={faPhoneSlash}></FontAwesomeIcon>
                         </button>
+                </div> 
+                <section className="grid p-3 grid-cols-3 gap-2">
+                    <div>
+                        <video 
+                            className="h-full w-full rounded-lg"
+                            ref={localRef}
+                        ></video>
+                        <div>{`${user?.first_name} ${user?.last_name}`}</div>
                     </div>
                     {Object.entries(roomPeers).map((roomPeer) => {
                         const [id, peer] = roomPeer;

From f737033ec4b864e4ad24bdc8cc80d3f15c28e3d3 Mon Sep 17 00:00:00 2001
From: "j.krol" <janek01krol@gmail.com>
Date: Wed, 27 Mar 2024 17:09:18 +0100
Subject: [PATCH 38/64] Center users' names under video tags

---
 frontend/src/components/RoomPeerVideo.tsx | 2 +-
 frontend/src/pages/RoomCallPage.tsx       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/RoomPeerVideo.tsx b/frontend/src/components/RoomPeerVideo.tsx
index 49ab9365..67ae01cf 100644
--- a/frontend/src/components/RoomPeerVideo.tsx
+++ b/frontend/src/components/RoomPeerVideo.tsx
@@ -25,7 +25,7 @@ function RoomPeerVideo({remoteStream, peerId}: RoomPeerVideoProps) {
                 className="h-full w-full rounded-lg"
                 ref={remoteRef}
             ></video>
-            <div>{name}</div>
+            <div className="text-center">{name}</div>
         </div>
     )
 }
diff --git a/frontend/src/pages/RoomCallPage.tsx b/frontend/src/pages/RoomCallPage.tsx
index b0b559ea..a3a8eab7 100644
--- a/frontend/src/pages/RoomCallPage.tsx
+++ b/frontend/src/pages/RoomCallPage.tsx
@@ -165,7 +165,7 @@ function RoomCallPage() {
                             className="h-full w-full rounded-lg"
                             ref={localRef}
                         ></video>
-                        <div>{`${user?.first_name} ${user?.last_name}`}</div>
+                        <div className="text-center">{`${user?.first_name} ${user?.last_name}`}</div>
                     </div>
                     {Object.entries(roomPeers).map((roomPeer) => {
                         const [id, peer] = roomPeer;

From ce1f0d0558f9e19de753aeb6f0b3e7ff3f268377 Mon Sep 17 00:00:00 2001
From: "j.krol" <janek01krol@gmail.com>
Date: Wed, 27 Mar 2024 17:40:35 +0100
Subject: [PATCH 39/64] Add styled list of potential peers

---
 frontend/src/components/PeerInvite.tsx | 36 +++++++++++++++++++
 frontend/src/pages/RoomCallPage.tsx    | 49 +++++++++++++-------------
 2 files changed, 60 insertions(+), 25 deletions(-)
 create mode 100644 frontend/src/components/PeerInvite.tsx

diff --git a/frontend/src/components/PeerInvite.tsx b/frontend/src/components/PeerInvite.tsx
new file mode 100644
index 00000000..5cb1a42c
--- /dev/null
+++ b/frontend/src/components/PeerInvite.tsx
@@ -0,0 +1,36 @@
+import User from "../models/User";
+
+export interface PeerInviteProps {
+    friend: User;
+    inviteFriendToRoom: (id: string) => void;
+}
+  
+function PeerInvite({friend, inviteFriendToRoom}: PeerInviteProps) {
+    return (
+      <li className="flex flex-row justify-center gap-4">
+        <img
+          src={friend.profile_picture}
+          className="rounded-full w-14 h-14 border-my-orange border-2 object-cover"
+        />
+        <div className="flex flex-col justify-evenly items-center gap-2">
+          <p className="font-semibold">
+            <span className="">
+              {" "}
+              {friend.first_name} {friend.last_name}{" "}
+            </span>
+          </p>
+          <div className="flex flex-col xl:flex-row">
+            <button
+              className={`btn small bg-my-green text-xs`}
+              onClick={() => inviteFriendToRoom(friend.id)}
+            >
+              invite
+            </button>
+          </div>
+        </div>
+      </li>
+    );
+  }
+  
+export default PeerInvite;
+  
\ No newline at end of file
diff --git a/frontend/src/pages/RoomCallPage.tsx b/frontend/src/pages/RoomCallPage.tsx
index a3a8eab7..96cac626 100644
--- a/frontend/src/pages/RoomCallPage.tsx
+++ b/frontend/src/pages/RoomCallPage.tsx
@@ -11,6 +11,7 @@ import dataService from "../services/data";
 import RoomPeerVideo from "../components/RoomPeerVideo";
 import Peer from "peerjs";
 import RoomPeer from "../models/RoomPeer";
+import PeerInvite from "../components/PeerInvite";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
     faPhoneSlash,
@@ -137,7 +138,7 @@ function RoomCallPage() {
         <>
             <Navbar />
             {localStream ? <main>
-                <div className="flex justify-center p-1">
+                <div className="flex justify-center p-2">
                     <button className="btn p-6" onClick={() => startStopAudio()}>
                         {isAudio ? (
                             <FontAwesomeIcon icon={faMicrophone} />
@@ -159,30 +160,28 @@ function RoomCallPage() {
                             <FontAwesomeIcon icon={faPhoneSlash}></FontAwesomeIcon>
                         </button>
                 </div> 
-                <section className="grid p-3 grid-cols-3 gap-2">
-                    <div>
-                        <video 
-                            className="h-full w-full rounded-lg"
-                            ref={localRef}
-                        ></video>
-                        <div className="text-center">{`${user?.first_name} ${user?.last_name}`}</div>
-                    </div>
-                    {Object.entries(roomPeers).map((roomPeer) => {
-                        const [id, peer] = roomPeer;
-                        return <RoomPeerVideo key={id} remoteStream={peer.stream} peerId={id}  />
-                    })}
-                </section>
-                <section>
-                    <h3><strong>Invite</strong></h3>
-                    <ul>
-                        {friends.filter(friend => !(friend.id in roomPeers)).map(friend => 
-                            <li key={friend.id}>
-                                <span>{`${friend.first_name} ${friend.last_name}`} </span>
-                                <button onClick={() => inviteFriendToRoom(friend.id)}>click</button>
-                            </li>
-                        )}
-                    </ul>
-                </section>
+                <div className="flex p-5">
+                    <section className="flex-3 grid p-3 grid-cols-3 gap-2">
+                        <div className="flex flex-col items-center gap-4">
+                            <video 
+                                ref={localRef}
+                            ></video>
+                            <div>{`${user?.first_name} ${user?.last_name}`}</div>
+                        </div>
+                        {Object.entries(roomPeers).map((roomPeer) => {
+                            const [id, peer] = roomPeer;
+                            return <RoomPeerVideo key={id} remoteStream={peer.stream} peerId={id}  />
+                        })}
+                    </section>
+                    <section className="flex-1 flex flex-col p-10 gap-10 rounded-xl bg-my-dark">
+                        <h1 className="text-center text-3xl font-bold">Invite</h1>
+                        <ul className="flex flex-col gap-5">
+                            {friends.filter(friend => !(friend.id in roomPeers)).map(friend => 
+                               <PeerInvite key={friend.id} friend={friend} inviteFriendToRoom={inviteFriendToRoom} />
+                            )}
+                        </ul>
+                    </section>
+                </div>
             </main> : null}
             <Footer />
         </>

From 197205d31c3ddd0a57c56935ac3a04cf84295904 Mon Sep 17 00:00:00 2001
From: "j.krol" <janek01krol@gmail.com>
Date: Wed, 27 Mar 2024 18:16:35 +0100
Subject: [PATCH 40/64] Add new types and remove as many 'any' types as
 possible

---
 backend/src/socketServer.ts                          |  2 +-
 frontend/src/pages/FriendsPage.tsx                   |  2 +-
 frontend/src/pages/RoomCallPage.tsx                  |  2 +-
 .../redux/reducers/action-models/FriendsAction.ts    |  9 +++++++++
 .../reducers/action-models/NotificationsAction.ts    | 11 +++++++++++
 .../src/redux/reducers/action-models/PeerAction.ts   |  7 +++++++
 frontend/src/redux/reducers/friendsReducer.ts        |  3 ++-
 frontend/src/redux/reducers/notificationsReducer.ts  | 12 +++++++-----
 frontend/src/redux/reducers/peerReducer.ts           |  3 ++-
 9 files changed, 41 insertions(+), 10 deletions(-)
 create mode 100644 frontend/src/redux/reducers/action-models/FriendsAction.ts
 create mode 100644 frontend/src/redux/reducers/action-models/NotificationsAction.ts
 create mode 100644 frontend/src/redux/reducers/action-models/PeerAction.ts

diff --git a/backend/src/socketServer.ts b/backend/src/socketServer.ts
index e7f1de67..28485384 100644
--- a/backend/src/socketServer.ts
+++ b/backend/src/socketServer.ts
@@ -159,7 +159,7 @@ io.on("connection", async (socket: Socket) => {
     await session.close();
   });
 
-  socket.on("joinRoom", async ({roomId, peerId, userId, fullName}: any) => {
+  socket.on("joinRoom", async ({roomId, peerId, userId, fullName}) => {
     await socket.join(roomId);
     socket.to(roomId).emit("userConnected", {peerId, userId, fullName, socketId: socket.id});
   });
diff --git a/frontend/src/pages/FriendsPage.tsx b/frontend/src/pages/FriendsPage.tsx
index b459a824..aa4c0247 100644
--- a/frontend/src/pages/FriendsPage.tsx
+++ b/frontend/src/pages/FriendsPage.tsx
@@ -23,7 +23,7 @@ function FriendsPage() {
   
   const { user, meeting, createMeeting, joinMeeting } = useUser();
 
-  const friends = useSelector((state: RootState) => state.friends);
+  const friends: User[] = useSelector((state: RootState) => state.friends);
   const [friendsRequests, setFriendsRequests] = useState([]);
   const [refresh, setRefresh] = useState(false);
 
diff --git a/frontend/src/pages/RoomCallPage.tsx b/frontend/src/pages/RoomCallPage.tsx
index 96cac626..d7e568ad 100644
--- a/frontend/src/pages/RoomCallPage.tsx
+++ b/frontend/src/pages/RoomCallPage.tsx
@@ -60,7 +60,7 @@ function RoomCallPage() {
     const prepareWebRTC = async () => {
         const stream = await fetchUserMedia();
         setLocalStream(stream);
-        socket?.on("userConnected", ({peerId}): any => {
+        socket?.on("userConnected", ({peerId}) => {
             connectToNewUser(peerId, stream);
         });
         socket?.on("leftRoom", (id) => {
diff --git a/frontend/src/redux/reducers/action-models/FriendsAction.ts b/frontend/src/redux/reducers/action-models/FriendsAction.ts
new file mode 100644
index 00000000..bc830a45
--- /dev/null
+++ b/frontend/src/redux/reducers/action-models/FriendsAction.ts
@@ -0,0 +1,9 @@
+import User from "../../../models/User";
+
+type FriendsAction = {
+    type: "SET_USER_FRIENDS";
+    payload: {
+        friends: User[];
+    }
+}
+export default FriendsAction;
\ No newline at end of file
diff --git a/frontend/src/redux/reducers/action-models/NotificationsAction.ts b/frontend/src/redux/reducers/action-models/NotificationsAction.ts
new file mode 100644
index 00000000..5206b490
--- /dev/null
+++ b/frontend/src/redux/reducers/action-models/NotificationsAction.ts
@@ -0,0 +1,11 @@
+import RoomNotification from "../../../models/RoomNotification";
+
+type NotificationsAction = {
+    type: "SET_NOTIFICATIONS" | "ADD_NOTIFICATION" | "DELETE_NOTIFICATION";
+    payload: {
+        id?: string;
+        notification?: RoomNotification;
+        notifications?: RoomNotification[];
+    }
+}
+export default NotificationsAction;
\ No newline at end of file
diff --git a/frontend/src/redux/reducers/action-models/PeerAction.ts b/frontend/src/redux/reducers/action-models/PeerAction.ts
new file mode 100644
index 00000000..08f44dbe
--- /dev/null
+++ b/frontend/src/redux/reducers/action-models/PeerAction.ts
@@ -0,0 +1,7 @@
+type PeerAction = {
+    type: "INIT_PEER",
+    payload: {
+        userId: string;
+    }
+}
+export default PeerAction;
\ No newline at end of file
diff --git a/frontend/src/redux/reducers/friendsReducer.ts b/frontend/src/redux/reducers/friendsReducer.ts
index 48649c87..c873fead 100644
--- a/frontend/src/redux/reducers/friendsReducer.ts
+++ b/frontend/src/redux/reducers/friendsReducer.ts
@@ -1,4 +1,5 @@
-export default (state = [], action: any) => {
+import FriendsAction from "./action-models/FriendsAction";
+export default (state = [], action: FriendsAction) => {
   if (action.type === "SET_USER_FRIENDS") {
     return action.payload.friends;
   } else {
diff --git a/frontend/src/redux/reducers/notificationsReducer.ts b/frontend/src/redux/reducers/notificationsReducer.ts
index 7e354f65..27dda556 100644
--- a/frontend/src/redux/reducers/notificationsReducer.ts
+++ b/frontend/src/redux/reducers/notificationsReducer.ts
@@ -1,17 +1,19 @@
-const doesNotificationRepeat = (notification: any, notificationArray: any[]) => {
+import RoomNotification from "../../models/RoomNotification";
+import NotificationsAction from "./action-models/NotificationsAction";
+const doesNotificationRepeat = (notification: RoomNotification, notificationArray: RoomNotification[]) => {
   const doesExist = notificationArray.find(n => n.roomId === notification.roomId);
   return !!doesExist;
 }
-export default (state = [], action: any) => {
+export default (state = [], action: NotificationsAction) => {
     if (action.type === "SET_NOTIFICATIONS") {
-      return action.payload.notifications.reduce((acum: any,item: any) => {
+      return action.payload.notifications!.reduce((acum: RoomNotification[],item: RoomNotification) => {
         return doesNotificationRepeat(item, acum) ? acum : [...acum, item];
       }, []);
     } else if (action.type === "ADD_NOTIFICATION") {
-      return doesNotificationRepeat(action.payload.notification, state) 
+      return doesNotificationRepeat(action.payload.notification!, state) 
       ? state : [...state, action.payload.notification];
     } else if (action.type === "DELETE_NOTIFICATION") {
-      return state.filter((notification:any) => notification.roomId !== action.payload.id);
+      return state.filter((notification:RoomNotification) => notification.roomId !== action.payload.id);
     } else {
       return state;
     }
diff --git a/frontend/src/redux/reducers/peerReducer.ts b/frontend/src/redux/reducers/peerReducer.ts
index 9b42c48a..eddc802c 100644
--- a/frontend/src/redux/reducers/peerReducer.ts
+++ b/frontend/src/redux/reducers/peerReducer.ts
@@ -1,6 +1,7 @@
 import Peer from "peerjs";
+import PeerAction from "./action-models/PeerAction";
 
-export default (state = null, action: any) => {
+export default (state = null, action: PeerAction) => {
     if (action.type === "INIT_PEER") {
         const userId = action.payload.userId;
         const peer = new Peer(userId, {

From d31e3df297489ea0bfc6ede42bc3b83455d95f00 Mon Sep 17 00:00:00 2001
From: "j.krol" <janek01krol@gmail.com>
Date: Wed, 27 Mar 2024 18:47:13 +0100
Subject: [PATCH 41/64] Make cleanup with flex videos in room call page

---
 frontend/src/components/RoomPeerVideo.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/RoomPeerVideo.tsx b/frontend/src/components/RoomPeerVideo.tsx
index 67ae01cf..1b9c03bb 100644
--- a/frontend/src/components/RoomPeerVideo.tsx
+++ b/frontend/src/components/RoomPeerVideo.tsx
@@ -20,12 +20,11 @@ function RoomPeerVideo({remoteStream, peerId}: RoomPeerVideoProps) {
         fetchFullName();
     }, []);
     return (
-        <div>
+        <div className="flex flex-col items-center gap-4">
             <video
-                className="h-full w-full rounded-lg"
                 ref={remoteRef}
             ></video>
-            <div className="text-center">{name}</div>
+            <div>{name}</div>
         </div>
     )
 }

From 3a70b9e7dd110068e64b8b6fd6be3b5a9eaf08f3 Mon Sep 17 00:00:00 2001
From: "j.krol" <janek01krol@gmail.com>
Date: Wed, 27 Mar 2024 18:48:38 +0100
Subject: [PATCH 42/64] Add prettier code styling

---
 backend/src/httpServer.ts                     |   2 +-
 backend/src/routes/roomRoute.ts               | 104 +++---
 backend/src/socketServer.ts                   |  14 +-
 frontend/src/components/Notification.tsx      |  50 +--
 frontend/src/components/PeerInvite.tsx        |  59 ++-
 frontend/src/components/RoomPeerVideo.tsx     |  52 +--
 frontend/src/media/fetchUserMedia.ts          |  12 +-
 frontend/src/models/RoomNotification.ts       |  12 +-
 frontend/src/models/RoomPeer.ts               |   8 +-
 frontend/src/pages/FriendsPage.tsx            |   4 +-
 frontend/src/pages/NotificationsPage.tsx      |  69 ++--
 frontend/src/pages/ProfilePage.tsx            |   8 +-
 frontend/src/pages/RoomCallPage.tsx           | 350 ++++++++++--------
 frontend/src/redux/actions/addNotification.ts |   9 +-
 .../src/redux/actions/deleteNotification.ts   |   9 +-
 frontend/src/redux/actions/initPeer.ts        |  10 +-
 .../src/redux/actions/setNotifications.ts     |   9 +-
 .../reducers/action-models/FriendsAction.ts   |  12 +-
 .../action-models/NotificationsAction.ts      |  16 +-
 .../reducers/action-models/PeerAction.ts      |  12 +-
 .../redux/reducers/notificationsReducer.ts    |  41 +-
 frontend/src/redux/reducers/peerReducer.ts    |  22 +-
 frontend/src/redux/store.ts                   |   2 +-
 23 files changed, 469 insertions(+), 417 deletions(-)

diff --git a/backend/src/httpServer.ts b/backend/src/httpServer.ts
index c6f196d9..23288624 100644
--- a/backend/src/httpServer.ts
+++ b/backend/src/httpServer.ts
@@ -16,4 +16,4 @@ importInitialData().then((res) => console.log(res));
 app.use("/users", usersRouter);
 app.use("/auth", authRouter);
 app.use("/chat", chatRouter);
-app.use("/room", roomRouter);
\ No newline at end of file
+app.use("/room", roomRouter);
diff --git a/backend/src/routes/roomRoute.ts b/backend/src/routes/roomRoute.ts
index d5d2abfd..419e1ddd 100644
--- a/backend/src/routes/roomRoute.ts
+++ b/backend/src/routes/roomRoute.ts
@@ -4,64 +4,72 @@ import driver from "../driver/driver";
 const roomRouter = Router();
 
 roomRouter.get("/:userId", async (req, res) => {
-    try {
-        const userId = req.params.userId;
-        const session = driver.session();
-        const roomsQuery = await session.run(`
+  try {
+    const userId = req.params.userId;
+    const session = driver.session();
+    const roomsQuery = await session.run(
+      `
             MATCH (room:Room)-[:INVITED]-(u:User {id: $userId})
             RETURN room
-        `, {userId});
-        await session.close();
-        const rooms = roomsQuery.records.map((record) => record.get("room").properties).map(record => ({
-            ...record,
-            title: "Join meeting",
-        }));
-        return res.json({status: "ok", rooms});
-    } catch (err) {
-        console.log("Error:", err);
-        return res.status(404).json({ status: "error", errors: err as object });
-    }
+        `,
+      { userId },
+    );
+    await session.close();
+    const rooms = roomsQuery.records
+      .map((record) => record.get("room").properties)
+      .map((record) => ({
+        ...record,
+        title: "Join meeting",
+      }));
+    return res.json({ status: "ok", rooms });
+  } catch (err) {
+    console.log("Error:", err);
+    return res.status(404).json({ status: "error", errors: err as object });
+  }
 });
 
 roomRouter.post("/", async (req, res) => {
-    try {
-        const newRoomProps = req.body;
-        const {roomId, from, to} = newRoomProps;
-        const session = driver.session();
-        const areFriends = await isFriend(session, from, to);
-        if (!areFriends) {
-            await session.close();
-            return res
-                .status(400)
-                .json({ status: "error", errors: { id: "no friends" } });
-        }
-        await session.run(`CREATE (r: Room $room)`, {room: newRoomProps});
-        await session.run(`
+  try {
+    const newRoomProps = req.body;
+    const { roomId, from, to } = newRoomProps;
+    const session = driver.session();
+    const areFriends = await isFriend(session, from, to);
+    if (!areFriends) {
+      await session.close();
+      return res
+        .status(400)
+        .json({ status: "error", errors: { id: "no friends" } });
+    }
+    await session.run(`CREATE (r: Room $room)`, { room: newRoomProps });
+    await session.run(
+      `
             MATCH (u:User {id: $userId})
             MATCH (r:Room {roomId: $roomId})
             CREATE (r)-[:INVITED]->(u)
-        `, {userId: to, roomId});
-        await session.close();
-        return res.json({status: "ok"});
-    } catch (err) {
-        console.log("Error:", err);
-        return res.status(404).json({ status: "error", errors: err as object });
-    }
+        `,
+      { userId: to, roomId },
+    );
+    await session.close();
+    return res.json({ status: "ok" });
+  } catch (err) {
+    console.log("Error:", err);
+    return res.status(404).json({ status: "error", errors: err as object });
+  }
 });
 
-
 roomRouter.delete("/:roomId", async (req, res) => {
-    try {
-        const roomId = req.params.roomId;
-        const session = driver.session();
-        await session.run(`MATCH (r:Room {roomId: $roomId}) DETACH DELETE r`, {roomId});
-        await session.close();
-        return res.json({status: "ok"});
-    } catch (err) {
-        console.log("Error:", err);
-        return res.status(404).json({ status: "error", errors: err as object });
-    }
+  try {
+    const roomId = req.params.roomId;
+    const session = driver.session();
+    await session.run(`MATCH (r:Room {roomId: $roomId}) DETACH DELETE r`, {
+      roomId,
+    });
+    await session.close();
+    return res.json({ status: "ok" });
+  } catch (err) {
+    console.log("Error:", err);
+    return res.status(404).json({ status: "error", errors: err as object });
+  }
 });
 
-
-export default roomRouter;
\ No newline at end of file
+export default roomRouter;
diff --git a/backend/src/socketServer.ts b/backend/src/socketServer.ts
index 28485384..b9544ff4 100644
--- a/backend/src/socketServer.ts
+++ b/backend/src/socketServer.ts
@@ -143,28 +143,30 @@ io.on("connection", async (socket: Socket) => {
     });
   });
 
-  socket.on("newRoom", async ({roomId, from, to, userName}) => {
+  socket.on("newRoom", async ({ roomId, from, to, userName }) => {
     await socket.join(roomId);
     const session = driver.session();
     const userSockets = await getAllSockets(session, to);
-    userSockets.forEach(userSocket => {
+    userSockets.forEach((userSocket) => {
       socket.to(userSocket.id).emit("newRoom", {
         from,
         roomId,
         title: "Join room",
         to,
-        userName
+        userName,
       });
     });
     await session.close();
   });
 
-  socket.on("joinRoom", async ({roomId, peerId, userId, fullName}) => {
+  socket.on("joinRoom", async ({ roomId, peerId, userId, fullName }) => {
     await socket.join(roomId);
-    socket.to(roomId).emit("userConnected", {peerId, userId, fullName, socketId: socket.id});
+    socket
+      .to(roomId)
+      .emit("userConnected", { peerId, userId, fullName, socketId: socket.id });
   });
 
-  socket.on("leftRoom", async ({userId, roomId}) => {
+  socket.on("leftRoom", async ({ userId, roomId }) => {
     await socket.join(roomId);
     socket.to(roomId).emit("leftRoom", userId);
   });
diff --git a/frontend/src/components/Notification.tsx b/frontend/src/components/Notification.tsx
index 697442ca..ea16af3b 100644
--- a/frontend/src/components/Notification.tsx
+++ b/frontend/src/components/Notification.tsx
@@ -2,28 +2,32 @@ import RoomNotification from "../models/RoomNotification";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faTrash, faVideo } from "@fortawesome/free-solid-svg-icons";
 interface NotificationProps {
-    roomNotification: RoomNotification;
-    handleRoomInvite: (id: string) => void;
-    declineInvite: (id: string) => void;
+  roomNotification: RoomNotification;
+  handleRoomInvite: (id: string) => void;
+  declineInvite: (id: string) => void;
 }
-function Notification({roomNotification, handleRoomInvite, declineInvite}: NotificationProps) {
-    return (
-        <div className="bg-my-light-dark p-3 text-xl rounded-2xl font-normal flex items-center gap-x-10">
-            {roomNotification.userName} has invited you to meeting
-            <button 
-                onClick={() => handleRoomInvite(roomNotification.roomId)} 
-                className="btn small bg-my-green flex gap-x-4"
-            >
-                <FontAwesomeIcon icon={faVideo} />
-                Accept
-            </button>
-            <button 
-                onClick={() => declineInvite(roomNotification.roomId)} 
-                className="btn bg-my-red small flex justify-center items-center"
-            >
-                <FontAwesomeIcon icon={faTrash} />
-            </button>
-        </div>
-    )
+function Notification({
+  roomNotification,
+  handleRoomInvite,
+  declineInvite,
+}: NotificationProps) {
+  return (
+    <div className="bg-my-light-dark p-3 text-xl rounded-2xl font-normal flex items-center gap-x-10">
+      {roomNotification.userName} has invited you to meeting
+      <button
+        onClick={() => handleRoomInvite(roomNotification.roomId)}
+        className="btn small bg-my-green flex gap-x-4"
+      >
+        <FontAwesomeIcon icon={faVideo} />
+        Accept
+      </button>
+      <button
+        onClick={() => declineInvite(roomNotification.roomId)}
+        className="btn bg-my-red small flex justify-center items-center"
+      >
+        <FontAwesomeIcon icon={faTrash} />
+      </button>
+    </div>
+  );
 }
-export default Notification;
\ No newline at end of file
+export default Notification;
diff --git a/frontend/src/components/PeerInvite.tsx b/frontend/src/components/PeerInvite.tsx
index 5cb1a42c..2e6d39a6 100644
--- a/frontend/src/components/PeerInvite.tsx
+++ b/frontend/src/components/PeerInvite.tsx
@@ -1,36 +1,35 @@
 import User from "../models/User";
 
 export interface PeerInviteProps {
-    friend: User;
-    inviteFriendToRoom: (id: string) => void;
+  friend: User;
+  inviteFriendToRoom: (id: string) => void;
 }
-  
-function PeerInvite({friend, inviteFriendToRoom}: PeerInviteProps) {
-    return (
-      <li className="flex flex-row justify-center gap-4">
-        <img
-          src={friend.profile_picture}
-          className="rounded-full w-14 h-14 border-my-orange border-2 object-cover"
-        />
-        <div className="flex flex-col justify-evenly items-center gap-2">
-          <p className="font-semibold">
-            <span className="">
-              {" "}
-              {friend.first_name} {friend.last_name}{" "}
-            </span>
-          </p>
-          <div className="flex flex-col xl:flex-row">
-            <button
-              className={`btn small bg-my-green text-xs`}
-              onClick={() => inviteFriendToRoom(friend.id)}
-            >
-              invite
-            </button>
-          </div>
+
+function PeerInvite({ friend, inviteFriendToRoom }: PeerInviteProps) {
+  return (
+    <li className="flex flex-row justify-center gap-4">
+      <img
+        src={friend.profile_picture}
+        className="rounded-full w-14 h-14 border-my-orange border-2 object-cover"
+      />
+      <div className="flex flex-col justify-evenly items-center gap-2">
+        <p className="font-semibold">
+          <span className="">
+            {" "}
+            {friend.first_name} {friend.last_name}{" "}
+          </span>
+        </p>
+        <div className="flex flex-col xl:flex-row">
+          <button
+            className={`btn small bg-my-green text-xs`}
+            onClick={() => inviteFriendToRoom(friend.id)}
+          >
+            invite
+          </button>
         </div>
-      </li>
-    );
-  }
-  
+      </div>
+    </li>
+  );
+}
+
 export default PeerInvite;
-  
\ No newline at end of file
diff --git a/frontend/src/components/RoomPeerVideo.tsx b/frontend/src/components/RoomPeerVideo.tsx
index 1b9c03bb..c4711545 100644
--- a/frontend/src/components/RoomPeerVideo.tsx
+++ b/frontend/src/components/RoomPeerVideo.tsx
@@ -1,32 +1,34 @@
 import { useEffect, useRef, useState } from "react";
 import dataService from "../services/data";
 interface RoomPeerVideoProps {
-    remoteStream: MediaStream;
-    peerId: string;
+  remoteStream: MediaStream;
+  peerId: string;
 }
-function RoomPeerVideo({remoteStream, peerId}: RoomPeerVideoProps) {
-    const remoteRef = useRef<HTMLVideoElement>(null);
-    const [name, setName] = useState("");
-    const fetchFullName = async () => {
-        const fullNameRequest = await dataService.fetchData(`/users/${peerId}/name`, "GET", {});
-        const fullName = fullNameRequest.fullName;
-        setName(fullName);
+function RoomPeerVideo({ remoteStream, peerId }: RoomPeerVideoProps) {
+  const remoteRef = useRef<HTMLVideoElement>(null);
+  const [name, setName] = useState("");
+  const fetchFullName = async () => {
+    const fullNameRequest = await dataService.fetchData(
+      `/users/${peerId}/name`,
+      "GET",
+      {},
+    );
+    const fullName = fullNameRequest.fullName;
+    setName(fullName);
+  };
+  useEffect(() => {
+    if (remoteStream) {
+      remoteRef.current!.srcObject = remoteStream;
+      remoteRef.current!.play();
     }
-    useEffect(() => {
-        if (remoteStream) {
-            remoteRef.current!.srcObject = remoteStream;
-            remoteRef.current!.play();
-        }
-        fetchFullName();
-    }, []);
-    return (
-        <div className="flex flex-col items-center gap-4">
-            <video
-                ref={remoteRef}
-            ></video>
-            <div>{name}</div>
-        </div>
-    )
+    fetchFullName();
+  }, []);
+  return (
+    <div className="flex flex-col items-center gap-4">
+      <video ref={remoteRef}></video>
+      <div>{name}</div>
+    </div>
+  );
 }
 
-export default RoomPeerVideo;
\ No newline at end of file
+export default RoomPeerVideo;
diff --git a/frontend/src/media/fetchUserMedia.ts b/frontend/src/media/fetchUserMedia.ts
index cf639bea..8eb24608 100644
--- a/frontend/src/media/fetchUserMedia.ts
+++ b/frontend/src/media/fetchUserMedia.ts
@@ -1,9 +1,9 @@
 async function fetchUserMedia() {
-    const localStream = await navigator.mediaDevices.getUserMedia({
-        video: true,
-        audio: true
-    });
-    return localStream;
+  const localStream = await navigator.mediaDevices.getUserMedia({
+    video: true,
+    audio: true,
+  });
+  return localStream;
 }
 
-export default fetchUserMedia;
\ No newline at end of file
+export default fetchUserMedia;
diff --git a/frontend/src/models/RoomNotification.ts b/frontend/src/models/RoomNotification.ts
index 8fb7657e..fcdea96a 100644
--- a/frontend/src/models/RoomNotification.ts
+++ b/frontend/src/models/RoomNotification.ts
@@ -1,8 +1,8 @@
 interface RoomNotification {
-    from: string; 
-    roomId: string;
-    title: string;
-    to: string;
-    userName: string;
+  from: string;
+  roomId: string;
+  title: string;
+  to: string;
+  userName: string;
 }
-export default RoomNotification;
\ No newline at end of file
+export default RoomNotification;
diff --git a/frontend/src/models/RoomPeer.ts b/frontend/src/models/RoomPeer.ts
index 31d77813..834d8b7e 100644
--- a/frontend/src/models/RoomPeer.ts
+++ b/frontend/src/models/RoomPeer.ts
@@ -1,6 +1,6 @@
 interface RoomPeer {
-    peerId?: string;
-    stream: MediaStream;
-    fullName?: string;
+  peerId?: string;
+  stream: MediaStream;
+  fullName?: string;
 }
-export default RoomPeer;
\ No newline at end of file
+export default RoomPeer;
diff --git a/frontend/src/pages/FriendsPage.tsx b/frontend/src/pages/FriendsPage.tsx
index aa4c0247..f98549f1 100644
--- a/frontend/src/pages/FriendsPage.tsx
+++ b/frontend/src/pages/FriendsPage.tsx
@@ -20,7 +20,7 @@ import { v4 } from "uuid";
 
 function FriendsPage() {
   const navigate = useNavigate();
-  
+
   const { user, meeting, createMeeting, joinMeeting } = useUser();
 
   const friends: User[] = useSelector((state: RootState) => state.friends);
@@ -106,7 +106,7 @@ function FriendsPage() {
   const createRoom = () => {
     const roomId = v4();
     navigate(`/room/${roomId}`);
-  }
+  };
 
   useEffect(() => {
     if (meeting?.id) {
diff --git a/frontend/src/pages/NotificationsPage.tsx b/frontend/src/pages/NotificationsPage.tsx
index 18d420cd..0b03029f 100644
--- a/frontend/src/pages/NotificationsPage.tsx
+++ b/frontend/src/pages/NotificationsPage.tsx
@@ -10,38 +10,41 @@ import Peer from "peerjs";
 import Notification from "../components/Notification";
 import deleteNotification from "../redux/actions/deleteNotification";
 function NotificationsPage() {
-    const {socket, userId, user} = useUser();
-    const navigate = useNavigate();
-    const dispatch = useDispatch();
-    const roomNotifications: RoomNotification[] = useSelector((state: RootState) => state.notifications);
-    const peer: Peer = useSelector((state: RootState) => state.peer);
-    const handleRoomInvite = async (roomId: string) => {
-        await dataService.fetchData(`/room/${roomId}`, "DELETE", {});
-        const fullName = `${user?.first_name} ${user?.last_name}`;
-        socket?.emit("joinRoom", {roomId, peerId: peer.id, userId, fullName});
-        navigate(`/room/${roomId}`);
-    } 
+  const { socket, userId, user } = useUser();
+  const navigate = useNavigate();
+  const dispatch = useDispatch();
+  const roomNotifications: RoomNotification[] = useSelector(
+    (state: RootState) => state.notifications,
+  );
+  const peer: Peer = useSelector((state: RootState) => state.peer);
+  const handleRoomInvite = async (roomId: string) => {
+    await dataService.fetchData(`/room/${roomId}`, "DELETE", {});
+    const fullName = `${user?.first_name} ${user?.last_name}`;
+    socket?.emit("joinRoom", { roomId, peerId: peer.id, userId, fullName });
+    navigate(`/room/${roomId}`);
+  };
 
-    const declineInvite = (inviteId: string) => {
-        dispatch(deleteNotification(inviteId));
-    }
-    
-    return (
-        <>
-            <Navbar />
-            <div className="flex flex-col gap-y-3 p-3">
-                {roomNotifications.length > 0 ? 
-                roomNotifications.map(notification => 
-                    <Notification 
-                        key={notification.roomId} 
-                        roomNotification={notification} 
-                        handleRoomInvite={handleRoomInvite} 
-                        declineInvite={declineInvite}
-                    />) 
-                : null}
-            </div>
-            <Footer />
-        </>
-    )
+  const declineInvite = (inviteId: string) => {
+    dispatch(deleteNotification(inviteId));
+  };
+
+  return (
+    <>
+      <Navbar />
+      <div className="flex flex-col gap-y-3 p-3">
+        {roomNotifications.length > 0
+          ? roomNotifications.map((notification) => (
+              <Notification
+                key={notification.roomId}
+                roomNotification={notification}
+                handleRoomInvite={handleRoomInvite}
+                declineInvite={declineInvite}
+              />
+            ))
+          : null}
+      </div>
+      <Footer />
+    </>
+  );
 }
-export default NotificationsPage;
\ No newline at end of file
+export default NotificationsPage;
diff --git a/frontend/src/pages/ProfilePage.tsx b/frontend/src/pages/ProfilePage.tsx
index 5b550e6f..8375a691 100644
--- a/frontend/src/pages/ProfilePage.tsx
+++ b/frontend/src/pages/ProfilePage.tsx
@@ -24,9 +24,13 @@ function ProfilePage() {
     navigate("/edit");
   };
   const fetchNotifications = async () => {
-    const roomNotificationsRequest = await dataService.fetchData(`/room/${userId}`, "GET", {});
+    const roomNotificationsRequest = await dataService.fetchData(
+      `/room/${userId}`,
+      "GET",
+      {},
+    );
     dispatch(setNotifications(roomNotificationsRequest.rooms));
-  }
+  };
 
   useEffect(() => {
     setShowAnim(true);
diff --git a/frontend/src/pages/RoomCallPage.tsx b/frontend/src/pages/RoomCallPage.tsx
index d7e568ad..5cf1f591 100644
--- a/frontend/src/pages/RoomCallPage.tsx
+++ b/frontend/src/pages/RoomCallPage.tsx
@@ -14,178 +14,200 @@ import RoomPeer from "../models/RoomPeer";
 import PeerInvite from "../components/PeerInvite";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
-    faPhoneSlash,
-    faMicrophone,
-    faMicrophoneSlash,
-    faVideo,
-    faVideoSlash,
-  } from "@fortawesome/free-solid-svg-icons";
+  faPhoneSlash,
+  faMicrophone,
+  faMicrophoneSlash,
+  faVideo,
+  faVideoSlash,
+} from "@fortawesome/free-solid-svg-icons";
 function RoomCallPage() {
-    const localRef = useRef<HTMLVideoElement>(null);
-    const peer: Peer = useSelector((state: RootState) => state.peer);
-    const [localStream, setLocalStream] = useState<MediaStream | null>(null);
-    const [roomPeers, setRoomPeers] = useState<{[key: string]: RoomPeer}>({});
-    const [isAudio, setIsAudio] = useState(true);
-    const [isVideo, setIsVideo] = useState(true);
-    const friends: User[] = useSelector((state: RootState) => state.friends);
-    const {socket, userId, user} = useUser();
-    const params = useParams();
-    const navigate = useNavigate();
-    const roomId = params.roomId;
-    peer.on("call", async (call) => {
-        if (localStream) {
-            call.answer(localStream);
-        } else {
-            const stream = await fetchUserMedia();
-            setLocalStream(stream);
-            call.answer(stream);
-        }
-        call.on("stream", (remoteStream: MediaStream) => {
-            const peerId = call.peer;
-            const newPeerObj: {[key: string]: RoomPeer} = {};
-            newPeerObj[peerId] = {stream: remoteStream}
-            setRoomPeers(prev => ({...prev, ...newPeerObj}));
-        });
-    });
-    const connectToNewUser = (newPeerId: string, stream: MediaStream) => {
-        const call = peer.call(newPeerId, stream);
-        call.on("stream", (remoteStream: MediaStream) => {
-            const peerId = newPeerId;
-            const newPeerObj: {[key: string]: RoomPeer} = {};
-            newPeerObj[peerId] = {stream: remoteStream};
-            setRoomPeers(prev => ({...prev, ...newPeerObj}));
-        });
+  const localRef = useRef<HTMLVideoElement>(null);
+  const peer: Peer = useSelector((state: RootState) => state.peer);
+  const [localStream, setLocalStream] = useState<MediaStream | null>(null);
+  const [roomPeers, setRoomPeers] = useState<{ [key: string]: RoomPeer }>({});
+  const [isAudio, setIsAudio] = useState(true);
+  const [isVideo, setIsVideo] = useState(true);
+  const friends: User[] = useSelector((state: RootState) => state.friends);
+  const { socket, userId, user } = useUser();
+  const params = useParams();
+  const navigate = useNavigate();
+  const roomId = params.roomId;
+  peer.on("call", async (call) => {
+    if (localStream) {
+      call.answer(localStream);
+    } else {
+      const stream = await fetchUserMedia();
+      setLocalStream(stream);
+      call.answer(stream);
     }
-    
-    const prepareWebRTC = async () => {
-        const stream = await fetchUserMedia();
-        setLocalStream(stream);
-        socket?.on("userConnected", ({peerId}) => {
-            connectToNewUser(peerId, stream);
-        });
-        socket?.on("leftRoom", (id) => {
-            setRoomPeers(prev => Object.fromEntries(
-                Object.entries(prev).filter(elem => {
-                    const [peerId, _peer] = elem;
-                    return peerId !== id;
-                })
-            ));
-        });
+    call.on("stream", (remoteStream: MediaStream) => {
+      const peerId = call.peer;
+      const newPeerObj: { [key: string]: RoomPeer } = {};
+      newPeerObj[peerId] = { stream: remoteStream };
+      setRoomPeers((prev) => ({ ...prev, ...newPeerObj }));
+    });
+  });
+  const connectToNewUser = (newPeerId: string, stream: MediaStream) => {
+    const call = peer.call(newPeerId, stream);
+    call.on("stream", (remoteStream: MediaStream) => {
+      const peerId = newPeerId;
+      const newPeerObj: { [key: string]: RoomPeer } = {};
+      newPeerObj[peerId] = { stream: remoteStream };
+      setRoomPeers((prev) => ({ ...prev, ...newPeerObj }));
+    });
+  };
+
+  const prepareWebRTC = async () => {
+    const stream = await fetchUserMedia();
+    setLocalStream(stream);
+    socket?.on("userConnected", ({ peerId }) => {
+      connectToNewUser(peerId, stream);
+    });
+    socket?.on("leftRoom", (id) => {
+      setRoomPeers((prev) =>
+        Object.fromEntries(
+          Object.entries(prev).filter((elem) => {
+            const [peerId, _peer] = elem;
+            return peerId !== id;
+          }),
+        ),
+      );
+    });
+  };
+
+  const startStopAudio = async () => {
+    if (localStream) {
+      const tracks = localStream.getAudioTracks();
+      if (isAudio) {
+        setIsAudio(false);
+        tracks.forEach((track) => (track.enabled = false));
+      } else {
+        setIsAudio(true);
+        tracks.forEach((track) => (track.enabled = true));
+      }
     }
-    
-    const startStopAudio = async () => {
-        if (localStream) {
-            const tracks = localStream.getAudioTracks();
-            if (isAudio) {
-                setIsAudio(false);
-                tracks.forEach((track) => (track.enabled = false));
-            } else {
-                setIsAudio(true);
-                tracks.forEach((track) => (track.enabled = true));
-            }
-        }
-    } 
+  };
 
-    const startStopVideo = async () => {
-        if (localStream) {
-            const tracks = localStream.getVideoTracks();
-            if (isVideo) {
-                setIsVideo(false);
-                tracks.forEach((track) => (track.enabled = false));
-            } else {
-                setIsVideo(true);
-                tracks.forEach((track) => (track.enabled = true));
-            }
-        }
-    } 
+  const startStopVideo = async () => {
+    if (localStream) {
+      const tracks = localStream.getVideoTracks();
+      if (isVideo) {
+        setIsVideo(false);
+        tracks.forEach((track) => (track.enabled = false));
+      } else {
+        setIsVideo(true);
+        tracks.forEach((track) => (track.enabled = true));
+      }
+    }
+  };
 
-    const handleLeaveMeeting = () => {
-        if (localRef.current) {
-            (localRef.current.srcObject as MediaStream)
-            .getTracks().forEach((track) => {
-                track.stop();
-            });
-            socket?.emit("leftRoom", {roomId, userId});
-            navigate("/friends");
-        }
+  const handleLeaveMeeting = () => {
+    if (localRef.current) {
+      (localRef.current.srcObject as MediaStream)
+        .getTracks()
+        .forEach((track) => {
+          track.stop();
+        });
+      socket?.emit("leftRoom", { roomId, userId });
+      navigate("/friends");
     }
+  };
+
+  const inviteFriendToRoom = async (friendId: string) => {
+    const myFullName = `${user?.first_name} ${user?.last_name}`;
+    await dataService.fetchData("/room", "POST", {
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        roomId,
+        from: userId,
+        to: friendId,
+        userName: myFullName,
+      }),
+    });
+    socket?.emit("newRoom", {
+      roomId,
+      from: userId,
+      to: friendId,
+      userName: myFullName,
+    });
+  };
 
-    const inviteFriendToRoom = async (friendId: string) => {
-        const myFullName = `${user?.first_name} ${user?.last_name}`;
-        await dataService.fetchData("/room", "POST", {headers: {
-            "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-            roomId,
-            from: userId, 
-            to: friendId, 
-            userName: myFullName
-        }),});
-        socket?.emit("newRoom", {roomId, from: userId, to: friendId, userName: myFullName});
+  useEffect(() => {
+    prepareWebRTC();
+  }, []);
+  useEffect(() => {
+    if (localRef.current && localStream) {
+      localRef.current.srcObject = localStream;
+      localRef.current.play();
     }
+  }, [localRef.current, localStream]);
 
-    useEffect(() => {
-        prepareWebRTC();
-    }, []);
-    useEffect(() => {
-        if (localRef.current && localStream) {
-            localRef.current.srcObject = localStream;
-            localRef.current.play();
-        }
-    }, [localRef.current, localStream]);
-    
-    return (
-        <>
-            <Navbar />
-            {localStream ? <main>
-                <div className="flex justify-center p-2">
-                    <button className="btn p-6" onClick={() => startStopAudio()}>
-                        {isAudio ? (
-                            <FontAwesomeIcon icon={faMicrophone} />
-                        ) : (
-                            <FontAwesomeIcon icon={faMicrophoneSlash} />
-                        )}
-                    </button>
-                        <button className="btn p-6" onClick={() => startStopVideo()}>
-                            {isVideo ? (
-                                <FontAwesomeIcon icon={faVideo} />
-                            ) : (
-                                <FontAwesomeIcon icon={faVideoSlash} />
-                            )}
-                        </button>
-                        <button
-                            onClick={() => handleLeaveMeeting()}
-                            className="btn bg-my-red p-6"
-                        >
-                            <FontAwesomeIcon icon={faPhoneSlash}></FontAwesomeIcon>
-                        </button>
-                </div> 
-                <div className="flex p-5">
-                    <section className="flex-3 grid p-3 grid-cols-3 gap-2">
-                        <div className="flex flex-col items-center gap-4">
-                            <video 
-                                ref={localRef}
-                            ></video>
-                            <div>{`${user?.first_name} ${user?.last_name}`}</div>
-                        </div>
-                        {Object.entries(roomPeers).map((roomPeer) => {
-                            const [id, peer] = roomPeer;
-                            return <RoomPeerVideo key={id} remoteStream={peer.stream} peerId={id}  />
-                        })}
-                    </section>
-                    <section className="flex-1 flex flex-col p-10 gap-10 rounded-xl bg-my-dark">
-                        <h1 className="text-center text-3xl font-bold">Invite</h1>
-                        <ul className="flex flex-col gap-5">
-                            {friends.filter(friend => !(friend.id in roomPeers)).map(friend => 
-                               <PeerInvite key={friend.id} friend={friend} inviteFriendToRoom={inviteFriendToRoom} />
-                            )}
-                        </ul>
-                    </section>
-                </div>
-            </main> : null}
-            <Footer />
-        </>
-    )
+  return (
+    <>
+      <Navbar />
+      {localStream ? (
+        <main>
+          <div className="flex justify-center p-2">
+            <button className="btn p-6" onClick={() => startStopAudio()}>
+              {isAudio ? (
+                <FontAwesomeIcon icon={faMicrophone} />
+              ) : (
+                <FontAwesomeIcon icon={faMicrophoneSlash} />
+              )}
+            </button>
+            <button className="btn p-6" onClick={() => startStopVideo()}>
+              {isVideo ? (
+                <FontAwesomeIcon icon={faVideo} />
+              ) : (
+                <FontAwesomeIcon icon={faVideoSlash} />
+              )}
+            </button>
+            <button
+              onClick={() => handleLeaveMeeting()}
+              className="btn bg-my-red p-6"
+            >
+              <FontAwesomeIcon icon={faPhoneSlash}></FontAwesomeIcon>
+            </button>
+          </div>
+          <div className="flex p-5">
+            <section className="flex-3 grid p-3 grid-cols-3 gap-2">
+              <div className="flex flex-col items-center gap-4">
+                <video ref={localRef}></video>
+                <div>{`${user?.first_name} ${user?.last_name}`}</div>
+              </div>
+              {Object.entries(roomPeers).map((roomPeer) => {
+                const [id, peer] = roomPeer;
+                return (
+                  <RoomPeerVideo
+                    key={id}
+                    remoteStream={peer.stream}
+                    peerId={id}
+                  />
+                );
+              })}
+            </section>
+            <section className="flex-1 flex flex-col p-10 gap-10 rounded-xl bg-my-dark">
+              <h1 className="text-center text-3xl font-bold">Invite</h1>
+              <ul className="flex flex-col gap-5">
+                {friends
+                  .filter((friend) => !(friend.id in roomPeers))
+                  .map((friend) => (
+                    <PeerInvite
+                      key={friend.id}
+                      friend={friend}
+                      inviteFriendToRoom={inviteFriendToRoom}
+                    />
+                  ))}
+              </ul>
+            </section>
+          </div>
+        </main>
+      ) : null}
+      <Footer />
+    </>
+  );
 }
 
-export default RoomCallPage;
\ No newline at end of file
+export default RoomCallPage;
diff --git a/frontend/src/redux/actions/addNotification.ts b/frontend/src/redux/actions/addNotification.ts
index 9a7799c4..ce135d8f 100644
--- a/frontend/src/redux/actions/addNotification.ts
+++ b/frontend/src/redux/actions/addNotification.ts
@@ -1,8 +1,7 @@
 import RoomNotification from "../../models/RoomNotification";
 export default (notification: RoomNotification) => {
-    return {
-      type: "ADD_NOTIFICATION",
-      payload: { notification },
-    };
+  return {
+    type: "ADD_NOTIFICATION",
+    payload: { notification },
+  };
 };
-  
\ No newline at end of file
diff --git a/frontend/src/redux/actions/deleteNotification.ts b/frontend/src/redux/actions/deleteNotification.ts
index d5dadff0..86a8096b 100644
--- a/frontend/src/redux/actions/deleteNotification.ts
+++ b/frontend/src/redux/actions/deleteNotification.ts
@@ -1,7 +1,6 @@
 export default (id: string) => {
-    return {
-      type: "DELETE_NOTIFICATION",
-      payload: { id },
-    };
+  return {
+    type: "DELETE_NOTIFICATION",
+    payload: { id },
+  };
 };
-  
\ No newline at end of file
diff --git a/frontend/src/redux/actions/initPeer.ts b/frontend/src/redux/actions/initPeer.ts
index 4ddca351..69cb4c83 100644
--- a/frontend/src/redux/actions/initPeer.ts
+++ b/frontend/src/redux/actions/initPeer.ts
@@ -1,6 +1,6 @@
 export default (userId: string) => {
-    return {
-      type: "INIT_PEER",
-      payload: { userId },
-    };
-};
\ No newline at end of file
+  return {
+    type: "INIT_PEER",
+    payload: { userId },
+  };
+};
diff --git a/frontend/src/redux/actions/setNotifications.ts b/frontend/src/redux/actions/setNotifications.ts
index 62e4c3e8..d358a7e5 100644
--- a/frontend/src/redux/actions/setNotifications.ts
+++ b/frontend/src/redux/actions/setNotifications.ts
@@ -1,9 +1,8 @@
 import RoomNotification from "../../models/RoomNotification";
 
 export default (notifications: RoomNotification[]) => {
-    return {
-      type: "SET_NOTIFICATIONS",
-      payload: { notifications },
-    };
+  return {
+    type: "SET_NOTIFICATIONS",
+    payload: { notifications },
+  };
 };
-  
\ No newline at end of file
diff --git a/frontend/src/redux/reducers/action-models/FriendsAction.ts b/frontend/src/redux/reducers/action-models/FriendsAction.ts
index bc830a45..aae6ea3c 100644
--- a/frontend/src/redux/reducers/action-models/FriendsAction.ts
+++ b/frontend/src/redux/reducers/action-models/FriendsAction.ts
@@ -1,9 +1,9 @@
 import User from "../../../models/User";
 
 type FriendsAction = {
-    type: "SET_USER_FRIENDS";
-    payload: {
-        friends: User[];
-    }
-}
-export default FriendsAction;
\ No newline at end of file
+  type: "SET_USER_FRIENDS";
+  payload: {
+    friends: User[];
+  };
+};
+export default FriendsAction;
diff --git a/frontend/src/redux/reducers/action-models/NotificationsAction.ts b/frontend/src/redux/reducers/action-models/NotificationsAction.ts
index 5206b490..196f1624 100644
--- a/frontend/src/redux/reducers/action-models/NotificationsAction.ts
+++ b/frontend/src/redux/reducers/action-models/NotificationsAction.ts
@@ -1,11 +1,11 @@
 import RoomNotification from "../../../models/RoomNotification";
 
 type NotificationsAction = {
-    type: "SET_NOTIFICATIONS" | "ADD_NOTIFICATION" | "DELETE_NOTIFICATION";
-    payload: {
-        id?: string;
-        notification?: RoomNotification;
-        notifications?: RoomNotification[];
-    }
-}
-export default NotificationsAction;
\ No newline at end of file
+  type: "SET_NOTIFICATIONS" | "ADD_NOTIFICATION" | "DELETE_NOTIFICATION";
+  payload: {
+    id?: string;
+    notification?: RoomNotification;
+    notifications?: RoomNotification[];
+  };
+};
+export default NotificationsAction;
diff --git a/frontend/src/redux/reducers/action-models/PeerAction.ts b/frontend/src/redux/reducers/action-models/PeerAction.ts
index 08f44dbe..a8e3d943 100644
--- a/frontend/src/redux/reducers/action-models/PeerAction.ts
+++ b/frontend/src/redux/reducers/action-models/PeerAction.ts
@@ -1,7 +1,7 @@
 type PeerAction = {
-    type: "INIT_PEER",
-    payload: {
-        userId: string;
-    }
-}
-export default PeerAction;
\ No newline at end of file
+  type: "INIT_PEER";
+  payload: {
+    userId: string;
+  };
+};
+export default PeerAction;
diff --git a/frontend/src/redux/reducers/notificationsReducer.ts b/frontend/src/redux/reducers/notificationsReducer.ts
index 27dda556..a64f106c 100644
--- a/frontend/src/redux/reducers/notificationsReducer.ts
+++ b/frontend/src/redux/reducers/notificationsReducer.ts
@@ -1,21 +1,32 @@
 import RoomNotification from "../../models/RoomNotification";
 import NotificationsAction from "./action-models/NotificationsAction";
-const doesNotificationRepeat = (notification: RoomNotification, notificationArray: RoomNotification[]) => {
-  const doesExist = notificationArray.find(n => n.roomId === notification.roomId);
+const doesNotificationRepeat = (
+  notification: RoomNotification,
+  notificationArray: RoomNotification[],
+) => {
+  const doesExist = notificationArray.find(
+    (n) => n.roomId === notification.roomId,
+  );
   return !!doesExist;
-}
+};
 export default (state = [], action: NotificationsAction) => {
-    if (action.type === "SET_NOTIFICATIONS") {
-      return action.payload.notifications!.reduce((acum: RoomNotification[],item: RoomNotification) => {
+  if (action.type === "SET_NOTIFICATIONS") {
+    return action.payload.notifications!.reduce(
+      (acum: RoomNotification[], item: RoomNotification) => {
         return doesNotificationRepeat(item, acum) ? acum : [...acum, item];
-      }, []);
-    } else if (action.type === "ADD_NOTIFICATION") {
-      return doesNotificationRepeat(action.payload.notification!, state) 
-      ? state : [...state, action.payload.notification];
-    } else if (action.type === "DELETE_NOTIFICATION") {
-      return state.filter((notification:RoomNotification) => notification.roomId !== action.payload.id);
-    } else {
-      return state;
-    }
+      },
+      [],
+    );
+  } else if (action.type === "ADD_NOTIFICATION") {
+    return doesNotificationRepeat(action.payload.notification!, state)
+      ? state
+      : [...state, action.payload.notification];
+  } else if (action.type === "DELETE_NOTIFICATION") {
+    return state.filter(
+      (notification: RoomNotification) =>
+        notification.roomId !== action.payload.id,
+    );
+  } else {
+    return state;
+  }
 };
-  
\ No newline at end of file
diff --git a/frontend/src/redux/reducers/peerReducer.ts b/frontend/src/redux/reducers/peerReducer.ts
index eddc802c..1cd689f2 100644
--- a/frontend/src/redux/reducers/peerReducer.ts
+++ b/frontend/src/redux/reducers/peerReducer.ts
@@ -2,14 +2,14 @@ import Peer from "peerjs";
 import PeerAction from "./action-models/PeerAction";
 
 export default (state = null, action: PeerAction) => {
-    if (action.type === "INIT_PEER") {
-        const userId = action.payload.userId;
-        const peer = new Peer(userId, {
-            host: "/",
-            port: 8000
-        });
-        return peer;
-    } else {
-        return state
-    }
-}
\ No newline at end of file
+  if (action.type === "INIT_PEER") {
+    const userId = action.payload.userId;
+    const peer = new Peer(userId, {
+      host: "/",
+      port: 8000,
+    });
+    return peer;
+  } else {
+    return state;
+  }
+};
diff --git a/frontend/src/redux/store.ts b/frontend/src/redux/store.ts
index 371f597e..727bf294 100644
--- a/frontend/src/redux/store.ts
+++ b/frontend/src/redux/store.ts
@@ -6,7 +6,7 @@ import peerReducer from "./reducers/peerReducer";
 const rootReducer = combineReducers({
   friends: friendsReducer,
   notifications: notificationsReducer,
-  peer: peerReducer
+  peer: peerReducer,
 });
 
 export const store = createStore(rootReducer);

From 98be0d984098ddc79b295e91e94644f9e3ece919 Mon Sep 17 00:00:00 2001
From: "j.krol" <janek01krol@gmail.com>
Date: Fri, 29 Mar 2024 16:24:02 +0100
Subject: [PATCH 43/64] Delete unused imports

---
 frontend/src/pages/FriendsPage.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/frontend/src/pages/FriendsPage.tsx b/frontend/src/pages/FriendsPage.tsx
index a81e0190..f6ebca16 100644
--- a/frontend/src/pages/FriendsPage.tsx
+++ b/frontend/src/pages/FriendsPage.tsx
@@ -1,6 +1,5 @@
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { useSelector } from "react-redux";
 import { useUser } from "../helpers/UserProvider";
 
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
@@ -14,8 +13,6 @@ import dataService from "../services/data";
 import Transition from "../components/Transition";
 import FoundUser from "../components/FoundUser";
 import Friend from "../components/Friend";
-import Paginator from "../components/Paginator";
-import { RootState } from "../redux/store";
 import { v4 } from "uuid";
 
 function FriendsPage() {
@@ -23,7 +20,6 @@ function FriendsPage() {
 
   const { user, meeting, createMeeting, joinMeeting } = useUser();
 
-  const friends: User[] = useSelector((state: RootState) => state.friends);
 
   const [friendsRequests, setFriendsRequests] = useState([]);
   const [refresh, setRefresh] = useState(false);

From 3d76e26243ff9cd6fc8cbeddb0fc3a5b8974dab5 Mon Sep 17 00:00:00 2001
From: JANKROL123 <JANKROL123@users.noreply.github.com>
Date: Fri, 29 Mar 2024 15:25:48 +0000
Subject: [PATCH 44/64] Apply formatting

---
 frontend/src/pages/FriendsPage.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/pages/FriendsPage.tsx b/frontend/src/pages/FriendsPage.tsx
index f6ebca16..b74dc31a 100644
--- a/frontend/src/pages/FriendsPage.tsx
+++ b/frontend/src/pages/FriendsPage.tsx
@@ -20,7 +20,6 @@ function FriendsPage() {
 
   const { user, meeting, createMeeting, joinMeeting } = useUser();
 
-
   const [friendsRequests, setFriendsRequests] = useState([]);
   const [refresh, setRefresh] = useState(false);
 

From 60b723ef64a1ce7ff5d91d564cbb15ee0cf8515d Mon Sep 17 00:00:00 2001
From: "j.krol" <janek01krol@gmail.com>
Date: Sat, 30 Mar 2024 17:35:19 +0100
Subject: [PATCH 45/64] Add friends fetching to UserProvider

---
 frontend/src/helpers/UserProvider.tsx | 20 ++++++++++++++++++++
 frontend/src/pages/RoomCallPage.tsx   |  4 +---
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/frontend/src/helpers/UserProvider.tsx b/frontend/src/helpers/UserProvider.tsx
index 0e260b3e..0d6dd56d 100644
--- a/frontend/src/helpers/UserProvider.tsx
+++ b/frontend/src/helpers/UserProvider.tsx
@@ -17,6 +17,7 @@ export interface UserContextValue {
   user: User | null | undefined;
   socket: Socket | null;
   meeting: Meeting | null;
+  friends: User[];
   setUser: React.Dispatch<React.SetStateAction<User | null | undefined>>;
   login: (mail: string, password: string) => Promise<void>;
   logout: () => Promise<boolean>;
@@ -48,6 +49,7 @@ function UserProvider({ children }: { children: React.ReactNode }) {
   const [token, setToken] = useState<object | null>(null);
   const [socket, setSocket] = useState<Socket | null>(null);
   const [meeting, setMeeting] = useState<Meeting | null>(null);
+  const [friends, setFriends] = useState<User[]>([]);
 
   useEffect(() => {
     if (!user) {
@@ -170,6 +172,19 @@ function UserProvider({ children }: { children: React.ReactNode }) {
     return false;
   };
 
+  const fetchFriends = async () => {
+    if (!user) return false;
+
+    const response = await dataService.fetchData(`/users/${user.id}/friends`, "GET");
+
+    if (response.status === "ok") {
+      setFriends(response.users);
+    }
+
+    console.error("Error from the server", response.errors);
+    return false;
+  }
+
   const createMeeting = async () => {
     if (!socket) return;
 
@@ -229,6 +244,10 @@ function UserProvider({ children }: { children: React.ReactNode }) {
     }
   }, [token]);
 
+  useEffect(() => {
+    fetchFriends();
+  }, [userId]);
+
   if (firstRefresh.current) {
     firstRefresh.current = false;
     getAccessToken();
@@ -246,6 +265,7 @@ function UserProvider({ children }: { children: React.ReactNode }) {
         setUser,
         socket,
         meeting,
+        friends,
         login,
         logout,
         updateUser,
diff --git a/frontend/src/pages/RoomCallPage.tsx b/frontend/src/pages/RoomCallPage.tsx
index 5cf1f591..9f532fb5 100644
--- a/frontend/src/pages/RoomCallPage.tsx
+++ b/frontend/src/pages/RoomCallPage.tsx
@@ -4,7 +4,6 @@ import Navbar from "../components/Navbar";
 import fetchUserMedia from "../media/fetchUserMedia";
 import { useSelector } from "react-redux";
 import { RootState } from "../redux/store";
-import User from "../models/User";
 import { useUser } from "../helpers/UserProvider";
 import { useNavigate, useParams } from "react-router-dom";
 import dataService from "../services/data";
@@ -27,8 +26,7 @@ function RoomCallPage() {
   const [roomPeers, setRoomPeers] = useState<{ [key: string]: RoomPeer }>({});
   const [isAudio, setIsAudio] = useState(true);
   const [isVideo, setIsVideo] = useState(true);
-  const friends: User[] = useSelector((state: RootState) => state.friends);
-  const { socket, userId, user } = useUser();
+  const { friends, socket, userId, user } = useUser();
   const params = useParams();
   const navigate = useNavigate();
   const roomId = params.roomId;

From 1803a40dd0ea661f81058af2c05c435b40974597 Mon Sep 17 00:00:00 2001
From: JANKROL123 <JANKROL123@users.noreply.github.com>
Date: Sat, 30 Mar 2024 16:37:04 +0000
Subject: [PATCH 46/64] Apply formatting

---
 frontend/src/helpers/UserProvider.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/frontend/src/helpers/UserProvider.tsx b/frontend/src/helpers/UserProvider.tsx
index 0d6dd56d..7ce637cd 100644
--- a/frontend/src/helpers/UserProvider.tsx
+++ b/frontend/src/helpers/UserProvider.tsx
@@ -175,7 +175,10 @@ function UserProvider({ children }: { children: React.ReactNode }) {
   const fetchFriends = async () => {
     if (!user) return false;
 
-    const response = await dataService.fetchData(`/users/${user.id}/friends`, "GET");
+    const response = await dataService.fetchData(
+      `/users/${user.id}/friends`,
+      "GET",
+    );
 
     if (response.status === "ok") {
       setFriends(response.users);
@@ -183,7 +186,7 @@ function UserProvider({ children }: { children: React.ReactNode }) {
 
     console.error("Error from the server", response.errors);
     return false;
-  }
+  };
 
   const createMeeting = async () => {
     if (!socket) return;

From 0668f7a72bdf4592da7ebf3844ba2cc690806918 Mon Sep 17 00:00:00 2001
From: "j.krol" <janek01krol@gmail.com>
Date: Sat, 30 Mar 2024 17:51:02 +0100
Subject: [PATCH 47/64] Delete all friends utils from redux

---
 frontend/src/pages/ProfilePage.tsx                | 15 ---------------
 frontend/src/redux/actions/setUserFriends.ts      |  8 --------
 .../redux/reducers/action-models/FriendsAction.ts |  9 ---------
 frontend/src/redux/reducers/friendsReducer.ts     |  8 --------
 frontend/src/redux/store.ts                       |  2 --
 5 files changed, 42 deletions(-)
 delete mode 100644 frontend/src/redux/actions/setUserFriends.ts
 delete mode 100644 frontend/src/redux/reducers/action-models/FriendsAction.ts
 delete mode 100644 frontend/src/redux/reducers/friendsReducer.ts

diff --git a/frontend/src/pages/ProfilePage.tsx b/frontend/src/pages/ProfilePage.tsx
index 8375a691..ed2d7c79 100644
--- a/frontend/src/pages/ProfilePage.tsx
+++ b/frontend/src/pages/ProfilePage.tsx
@@ -8,7 +8,6 @@ import Transition from "../components/Transition";
 import dataService from "../services/data";
 import { useDispatch } from "react-redux";
 import setNotifications from "../redux/actions/setNotifications";
-import setUserFriends from "../redux/actions/setUserFriends";
 import addNotification from "../redux/actions/addNotification";
 import initPeer from "../redux/actions/initPeer";
 
@@ -39,20 +38,6 @@ function ProfilePage() {
     }, 100);
   }, []);
 
-  useEffect(() => {
-    const fetchFriends = async () => {
-      if (user) {
-        const friendsResponse = await dataService.fetchData(
-          `/users/${user.id}/friends`,
-          "GET",
-          {},
-        );
-        dispatch(setUserFriends(friendsResponse.friends));
-      }
-    };
-    fetchFriends();
-  }, []);
-
   useEffect(() => {
     if (meeting?.id) {
       navigate("/meeting");
diff --git a/frontend/src/redux/actions/setUserFriends.ts b/frontend/src/redux/actions/setUserFriends.ts
deleted file mode 100644
index 529f4b2b..00000000
--- a/frontend/src/redux/actions/setUserFriends.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import User from "../../models/User";
-
-export default (friends: User[]) => {
-  return {
-    type: "SET_USER_FRIENDS",
-    payload: { friends },
-  };
-};
diff --git a/frontend/src/redux/reducers/action-models/FriendsAction.ts b/frontend/src/redux/reducers/action-models/FriendsAction.ts
deleted file mode 100644
index aae6ea3c..00000000
--- a/frontend/src/redux/reducers/action-models/FriendsAction.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import User from "../../../models/User";
-
-type FriendsAction = {
-  type: "SET_USER_FRIENDS";
-  payload: {
-    friends: User[];
-  };
-};
-export default FriendsAction;
diff --git a/frontend/src/redux/reducers/friendsReducer.ts b/frontend/src/redux/reducers/friendsReducer.ts
deleted file mode 100644
index c873fead..00000000
--- a/frontend/src/redux/reducers/friendsReducer.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import FriendsAction from "./action-models/FriendsAction";
-export default (state = [], action: FriendsAction) => {
-  if (action.type === "SET_USER_FRIENDS") {
-    return action.payload.friends;
-  } else {
-    return state;
-  }
-};
diff --git a/frontend/src/redux/store.ts b/frontend/src/redux/store.ts
index 727bf294..afcdb601 100644
--- a/frontend/src/redux/store.ts
+++ b/frontend/src/redux/store.ts
@@ -1,10 +1,8 @@
 import { combineReducers, createStore } from "redux";
-import friendsReducer from "./reducers/friendsReducer";
 import notificationsReducer from "./reducers/notificationsReducer";
 import peerReducer from "./reducers/peerReducer";
 
 const rootReducer = combineReducers({
-  friends: friendsReducer,
   notifications: notificationsReducer,
   peer: peerReducer,
 });

From ecb78483a3d6339ae1cd83803dec004ea208e955 Mon Sep 17 00:00:00 2001
From: "j.krol" <janek01krol@gmail.com>
Date: Sat, 30 Mar 2024 17:55:29 +0100
Subject: [PATCH 48/64] Add return true in fetch friends

---
 frontend/src/helpers/UserProvider.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/helpers/UserProvider.tsx b/frontend/src/helpers/UserProvider.tsx
index 7ce637cd..fd1d7f0f 100644
--- a/frontend/src/helpers/UserProvider.tsx
+++ b/frontend/src/helpers/UserProvider.tsx
@@ -182,6 +182,7 @@ function UserProvider({ children }: { children: React.ReactNode }) {
 
     if (response.status === "ok") {
       setFriends(response.users);
+      return true;
     }
 
     console.error("Error from the server", response.errors);

From 94eda93196a1012e68b11e4c70ff2b836a35f7aa Mon Sep 17 00:00:00 2001
From: "j.krol" <janek01krol@gmail.com>
Date: Sat, 30 Mar 2024 18:46:11 +0100
Subject: [PATCH 49/64] Fix problems if peer doesn't exist

---
 frontend/src/pages/RoomCallPage.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/RoomCallPage.tsx b/frontend/src/pages/RoomCallPage.tsx
index 9f532fb5..6450b49d 100644
--- a/frontend/src/pages/RoomCallPage.tsx
+++ b/frontend/src/pages/RoomCallPage.tsx
@@ -30,7 +30,7 @@ function RoomCallPage() {
   const params = useParams();
   const navigate = useNavigate();
   const roomId = params.roomId;
-  peer.on("call", async (call) => {
+  peer?.on("call", async (call) => {
     if (localStream) {
       call.answer(localStream);
     } else {
@@ -145,7 +145,7 @@ function RoomCallPage() {
   return (
     <>
       <Navbar />
-      {localStream ? (
+      {localStream && peer ? (
         <main>
           <div className="flex justify-center p-2">
             <button className="btn p-6" onClick={() => startStopAudio()}>

From 976223b89416fe3b63ff394ae5179bdd3ad69fdc Mon Sep 17 00:00:00 2001
From: "j.krol" <janek01krol@gmail.com>
Date: Sun, 31 Mar 2024 20:38:13 +0200
Subject: [PATCH 50/64] Fix problem where we see blank page after going from
 /room to /profile

---
 frontend/src/pages/ProfilePage.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/frontend/src/pages/ProfilePage.tsx b/frontend/src/pages/ProfilePage.tsx
index ed2d7c79..5701efc3 100644
--- a/frontend/src/pages/ProfilePage.tsx
+++ b/frontend/src/pages/ProfilePage.tsx
@@ -57,10 +57,12 @@ function ProfilePage() {
   }, []);
 
   useEffect(() => {
-    socket!.on("newRoom", (notification) => {
-      dispatch(addNotification(notification));
-    });
-  }, []);
+    if (socket !== null) {
+      socket.on("newRoom", (notification) => {
+        dispatch(addNotification(notification));
+      });
+    }
+  }, [socket]);
 
   return (
     <>

From 144fd6b9f1eb5406b89ab2b98c9182ae09fdf7a7 Mon Sep 17 00:00:00 2001
From: "j.krol" <janek01krol@gmail.com>
Date: Mon, 1 Apr 2024 17:19:06 +0200
Subject: [PATCH 51/64] Add browser dependencies

---
 frontend/package-lock.json | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 2a3a2a32..b7522d73 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -2189,9 +2189,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001547",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001547.tgz",
-      "integrity": "sha512-W7CrtIModMAxobGhz8iXmDfuJiiKg1WADMO/9x7/CLNin5cpSbuBjooyoIUVB5eyCc36QuTVlkVa1iB2S5+/eA==",
+      "version": "1.0.30001603",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001603.tgz",
+      "integrity": "sha512-iL2iSS0eDILMb9n5yKQoTBim9jMZ0Yrk8g0N9K7UzYyWnfIKzXBZD5ngpM37ZcL/cv0Mli8XtVMRYMQAfFpi5Q==",
       "dev": true,
       "funding": [
         {
@@ -7807,9 +7807,9 @@
       "dev": true
     },
     "caniuse-lite": {
-      "version": "1.0.30001547",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001547.tgz",
-      "integrity": "sha512-W7CrtIModMAxobGhz8iXmDfuJiiKg1WADMO/9x7/CLNin5cpSbuBjooyoIUVB5eyCc36QuTVlkVa1iB2S5+/eA==",
+      "version": "1.0.30001603",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001603.tgz",
+      "integrity": "sha512-iL2iSS0eDILMb9n5yKQoTBim9jMZ0Yrk8g0N9K7UzYyWnfIKzXBZD5ngpM37ZcL/cv0Mli8XtVMRYMQAfFpi5Q==",
       "dev": true
     },
     "caseless": {

From ecb20e645f1cf1d549bf6aeb11ddeea07f165201 Mon Sep 17 00:00:00 2001
From: "j.krol" <janek01krol@gmail.com>
Date: Mon, 1 Apr 2024 17:30:43 +0200
Subject: [PATCH 52/64] Redirect to login page if peer or user is not defined

---
 frontend/src/pages/RoomCallPage.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/frontend/src/pages/RoomCallPage.tsx b/frontend/src/pages/RoomCallPage.tsx
index 6450b49d..9d9dcd8c 100644
--- a/frontend/src/pages/RoomCallPage.tsx
+++ b/frontend/src/pages/RoomCallPage.tsx
@@ -133,6 +133,10 @@ function RoomCallPage() {
   };
 
   useEffect(() => {
+    if (!user || !peer) {
+      navigate("/");
+      return;
+    }
     prepareWebRTC();
   }, []);
   useEffect(() => {

From c5ce88f4ddfddaaf868850fce5a17c53e037966c Mon Sep 17 00:00:00 2001
From: "j.krol" <janek01krol@gmail.com>
Date: Mon, 1 Apr 2024 18:52:06 +0200
Subject: [PATCH 53/64] Move peer and notifications from redux to user provider

---
 frontend/src/helpers/UserProvider.tsx    | 48 ++++++++++++++++++++++++
 frontend/src/pages/NotificationsPage.tsx | 26 +++++++------
 frontend/src/pages/ProfilePage.tsx       | 26 +------------
 3 files changed, 65 insertions(+), 35 deletions(-)

diff --git a/frontend/src/helpers/UserProvider.tsx b/frontend/src/helpers/UserProvider.tsx
index fd1d7f0f..196dd14c 100644
--- a/frontend/src/helpers/UserProvider.tsx
+++ b/frontend/src/helpers/UserProvider.tsx
@@ -11,13 +11,19 @@ import dataService from "../services/data";
 import User from "../models/User";
 import { Socket, io } from "socket.io-client";
 import Meeting from "../models/Meeting";
+import RoomNotification from "../models/RoomNotification";
+import Peer from "peerjs";
 
 export interface UserContextValue {
   userId: string | null | undefined;
   user: User | null | undefined;
   socket: Socket | null;
   meeting: Meeting | null;
+  peer: Peer | null;
   friends: User[];
+  notifications: RoomNotification[];
+  addNotification: (notification: RoomNotification) => void;
+  deleteNotification: (notificationId: string) => void;
   setUser: React.Dispatch<React.SetStateAction<User | null | undefined>>;
   login: (mail: string, password: string) => Promise<void>;
   logout: () => Promise<boolean>;
@@ -50,6 +56,8 @@ function UserProvider({ children }: { children: React.ReactNode }) {
   const [socket, setSocket] = useState<Socket | null>(null);
   const [meeting, setMeeting] = useState<Meeting | null>(null);
   const [friends, setFriends] = useState<User[]>([]);
+  const [notifications, setNotifications] = useState<RoomNotification[]>([]);
+  const [peer, setPeer] = useState<Peer | null>(null);
 
   useEffect(() => {
     if (!user) {
@@ -60,6 +68,15 @@ function UserProvider({ children }: { children: React.ReactNode }) {
     setSocket(io("http://localhost:5000", { auth: { userId } }));
   }, [user]);
 
+  useEffect(() => {
+    if (userId) {
+      setPeer(new Peer(userId, {
+        host: "/",
+        port: 8000,
+      }));
+    }
+  }, [userId, peer]);
+
   const firstRefresh = useRef(true);
 
   const trySetToken = (tokenStr: string | null): boolean => {
@@ -189,6 +206,29 @@ function UserProvider({ children }: { children: React.ReactNode }) {
     return false;
   };
 
+  const fetchNotifications = async () => {
+    if (!userId) return false;
+    const roomNotificationsRequest = await dataService.fetchData(
+      `/room/${userId}`,
+      "GET",
+      {},
+    );
+    if (roomNotificationsRequest.status === "ok") {
+      setNotifications(roomNotificationsRequest.rooms);
+      return true;
+    }
+    console.error("Error from the server", roomNotificationsRequest.errors);
+    return false;
+  }
+
+  const addNotification = (notification: RoomNotification) => {
+    setNotifications(prev => [...prev, notification]);
+  }
+
+  const deleteNotification = (notificationId: string) => {
+    setNotifications(prev => prev.filter(notification => notification.roomId !== notificationId));
+  }
+
   const createMeeting = async () => {
     if (!socket) return;
 
@@ -252,6 +292,10 @@ function UserProvider({ children }: { children: React.ReactNode }) {
     fetchFriends();
   }, [userId]);
 
+  useEffect(() => {
+    fetchNotifications();
+  }, [userId]);
+
   if (firstRefresh.current) {
     firstRefresh.current = false;
     getAccessToken();
@@ -268,8 +312,12 @@ function UserProvider({ children }: { children: React.ReactNode }) {
         user,
         setUser,
         socket,
+        peer,
         meeting,
         friends,
+        notifications,
+        addNotification,
+        deleteNotification,
         login,
         logout,
         updateUser,
diff --git a/frontend/src/pages/NotificationsPage.tsx b/frontend/src/pages/NotificationsPage.tsx
index 0b03029f..be4cd433 100644
--- a/frontend/src/pages/NotificationsPage.tsx
+++ b/frontend/src/pages/NotificationsPage.tsx
@@ -1,39 +1,43 @@
 import Navbar from "../components/Navbar";
 import Footer from "../components/Footer";
 import { useUser } from "../helpers/UserProvider";
-import RoomNotification from "../models/RoomNotification";
-import { useDispatch, useSelector } from "react-redux";
+import { useSelector } from "react-redux";
 import { RootState } from "../redux/store";
 import dataService from "../services/data";
 import { useNavigate } from "react-router-dom";
 import Peer from "peerjs";
 import Notification from "../components/Notification";
-import deleteNotification from "../redux/actions/deleteNotification";
+import { useEffect } from "react";
 function NotificationsPage() {
-  const { socket, userId, user } = useUser();
+  const { deleteNotification, notifications, socket, userId, user } = useUser();
   const navigate = useNavigate();
-  const dispatch = useDispatch();
-  const roomNotifications: RoomNotification[] = useSelector(
-    (state: RootState) => state.notifications,
-  );
   const peer: Peer = useSelector((state: RootState) => state.peer);
   const handleRoomInvite = async (roomId: string) => {
+    console.log("[HANDLE ROOM INVITE]: starts");
     await dataService.fetchData(`/room/${roomId}`, "DELETE", {});
+    console.log("[HANDLE ROOM INVITE]: delete invite from DB");
     const fullName = `${user?.first_name} ${user?.last_name}`;
+    console.log("[HANDLE ROOM INVITE]: create full name: ", fullName);
+    console.log("[PEER]: ", peer);
     socket?.emit("joinRoom", { roomId, peerId: peer.id, userId, fullName });
+    console.log("[HANDLE ROOM INVITE]: emitted joinRoom");
     navigate(`/room/${roomId}`);
   };
 
   const declineInvite = (inviteId: string) => {
-    dispatch(deleteNotification(inviteId));
+    deleteNotification(inviteId);
   };
 
+  useEffect(() => {
+    console.log("[NOTIFICATIONS]: ", notifications);
+  }, []);
+
   return (
     <>
       <Navbar />
       <div className="flex flex-col gap-y-3 p-3">
-        {roomNotifications.length > 0
-          ? roomNotifications.map((notification) => (
+        {notifications.length > 0
+          ? notifications.map((notification) => (
               <Notification
                 key={notification.roomId}
                 roomNotification={notification}
diff --git a/frontend/src/pages/ProfilePage.tsx b/frontend/src/pages/ProfilePage.tsx
index 5701efc3..609ae364 100644
--- a/frontend/src/pages/ProfilePage.tsx
+++ b/frontend/src/pages/ProfilePage.tsx
@@ -5,16 +5,10 @@ import Navbar from "../components/Navbar";
 import { useUser } from "../helpers/UserProvider";
 import Profile from "../components/Profile";
 import Transition from "../components/Transition";
-import dataService from "../services/data";
-import { useDispatch } from "react-redux";
-import setNotifications from "../redux/actions/setNotifications";
-import addNotification from "../redux/actions/addNotification";
-import initPeer from "../redux/actions/initPeer";
 
 function ProfilePage() {
   const navigate = useNavigate();
-  const dispatch = useDispatch();
-  const { user, userId, meeting, deleteUser, socket } = useUser();
+  const { addNotification, user, userId, meeting, deleteUser, socket } = useUser();
 
   const [showAnimation, setShowAnim] = useState(false);
   const [showContent, setShowContent] = useState(false);
@@ -22,14 +16,6 @@ function ProfilePage() {
   const handleEditClick = () => {
     navigate("/edit");
   };
-  const fetchNotifications = async () => {
-    const roomNotificationsRequest = await dataService.fetchData(
-      `/room/${userId}`,
-      "GET",
-      {},
-    );
-    dispatch(setNotifications(roomNotificationsRequest.rooms));
-  };
 
   useEffect(() => {
     setShowAnim(true);
@@ -48,18 +34,10 @@ function ProfilePage() {
     if (userId === null) navigate("/login");
   }, [userId]);
 
-  useEffect(() => {
-    fetchNotifications();
-  }, []);
-
-  useEffect(() => {
-    dispatch(initPeer(userId!));
-  }, []);
-
   useEffect(() => {
     if (socket !== null) {
       socket.on("newRoom", (notification) => {
-        dispatch(addNotification(notification));
+        addNotification(notification);
       });
     }
   }, [socket]);

From 9413a4710852a9bcd07f4a70b7fe1b859d9e33a7 Mon Sep 17 00:00:00 2001
From: JANKROL123 <JANKROL123@users.noreply.github.com>
Date: Mon, 1 Apr 2024 16:54:26 +0000
Subject: [PATCH 54/64] Apply formatting

---
 frontend/src/helpers/UserProvider.tsx | 22 +++++++++++++---------
 frontend/src/pages/ProfilePage.tsx    |  3 ++-
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/frontend/src/helpers/UserProvider.tsx b/frontend/src/helpers/UserProvider.tsx
index 196dd14c..3e2993fc 100644
--- a/frontend/src/helpers/UserProvider.tsx
+++ b/frontend/src/helpers/UserProvider.tsx
@@ -70,10 +70,12 @@ function UserProvider({ children }: { children: React.ReactNode }) {
 
   useEffect(() => {
     if (userId) {
-      setPeer(new Peer(userId, {
-        host: "/",
-        port: 8000,
-      }));
+      setPeer(
+        new Peer(userId, {
+          host: "/",
+          port: 8000,
+        }),
+      );
     }
   }, [userId, peer]);
 
@@ -219,15 +221,17 @@ function UserProvider({ children }: { children: React.ReactNode }) {
     }
     console.error("Error from the server", roomNotificationsRequest.errors);
     return false;
-  }
+  };
 
   const addNotification = (notification: RoomNotification) => {
-    setNotifications(prev => [...prev, notification]);
-  }
+    setNotifications((prev) => [...prev, notification]);
+  };
 
   const deleteNotification = (notificationId: string) => {
-    setNotifications(prev => prev.filter(notification => notification.roomId !== notificationId));
-  }
+    setNotifications((prev) =>
+      prev.filter((notification) => notification.roomId !== notificationId),
+    );
+  };
 
   const createMeeting = async () => {
     if (!socket) return;
diff --git a/frontend/src/pages/ProfilePage.tsx b/frontend/src/pages/ProfilePage.tsx
index 609ae364..273c6faf 100644
--- a/frontend/src/pages/ProfilePage.tsx
+++ b/frontend/src/pages/ProfilePage.tsx
@@ -8,7 +8,8 @@ import Transition from "../components/Transition";
 
 function ProfilePage() {
   const navigate = useNavigate();
-  const { addNotification, user, userId, meeting, deleteUser, socket } = useUser();
+  const { addNotification, user, userId, meeting, deleteUser, socket } =
+    useUser();
 
   const [showAnimation, setShowAnim] = useState(false);
   const [showContent, setShowContent] = useState(false);

From 129df8db02d0c996e753aff4ce81efa692c414a7 Mon Sep 17 00:00:00 2001
From: "j.krol" <janek01krol@gmail.com>
Date: Mon, 1 Apr 2024 20:27:41 +0200
Subject: [PATCH 55/64] Create local peer server based on express server

---
 backend/package-lock.json             | 417 ++++++++++++++++++++++++--
 backend/package.json                  |   1 +
 backend/src/server.ts                 |   4 +
 frontend/src/helpers/UserProvider.tsx |   4 +-
 4 files changed, 396 insertions(+), 30 deletions(-)

diff --git a/backend/package-lock.json b/backend/package-lock.json
index 5c82df73..c18c6e3e 100644
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
@@ -20,6 +20,7 @@
         "mongoose": "^8.0.3",
         "neo4j-driver": "^5.13.0",
         "nodemon": "^3.0.1",
+        "peer": "^1.0.2",
         "socket.io": "^4.7.2",
         "ts-node": "^10.9.1",
         "unidecode": "^0.1.8",
@@ -753,7 +754,6 @@
       "version": "1.19.3",
       "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.3.tgz",
       "integrity": "sha512-oyl4jvAfTGX9Bt6Or4H9ni1Z447/tQuxnZsytsCaExKlmJiU8sFgnIBRzJUpKwB5eWn9HuBYlUlVA74q/yN0eQ==",
-      "dev": true,
       "dependencies": {
         "@types/connect": "*",
         "@types/node": "*"
@@ -778,7 +778,6 @@
       "version": "3.4.36",
       "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.36.tgz",
       "integrity": "sha512-P63Zd/JUGq+PdrM1lv0Wv5SBYeA2+CORvbrXbngriYY0jzLUWfQMQQxOhjONEz/wlHOAxOdY7CY65rgQdTjq2w==",
-      "dev": true,
       "dependencies": {
         "@types/node": "*"
       }
@@ -814,7 +813,6 @@
       "version": "4.17.18",
       "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.18.tgz",
       "integrity": "sha512-Sxv8BSLLgsBYmcnGdGjjEjqET2U+AKAdCRODmMiq02FgjwuV75Ut85DRpvFjyw/Mk0vgUOliGRU0UUmuuZHByQ==",
-      "dev": true,
       "dependencies": {
         "@types/body-parser": "*",
         "@types/express-serve-static-core": "^4.17.33",
@@ -826,7 +824,6 @@
       "version": "4.17.37",
       "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.37.tgz",
       "integrity": "sha512-ZohaCYTgGFcOP7u6aJOhY9uIZQgZ2vxC2yWoArY+FeDXlqeH66ZVBjgvg+RLVAS/DWNq4Ap9ZXu1+SUQiiWYMg==",
-      "dev": true,
       "dependencies": {
         "@types/node": "*",
         "@types/qs": "*",
@@ -837,8 +834,7 @@
     "node_modules/@types/http-errors": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/@types/http-errors/-/http-errors-2.0.2.tgz",
-      "integrity": "sha512-lPG6KlZs88gef6aD85z3HNkztpj7w2R7HmR3gygjfXCQmsLloWNARFkMuzKiiY8FGdh1XDpgBdrSf4aKDiA7Kg==",
-      "dev": true
+      "integrity": "sha512-lPG6KlZs88gef6aD85z3HNkztpj7w2R7HmR3gygjfXCQmsLloWNARFkMuzKiiY8FGdh1XDpgBdrSf4aKDiA7Kg=="
     },
     "node_modules/@types/istanbul-lib-coverage": {
       "version": "2.0.5",
@@ -857,8 +853,7 @@
     "node_modules/@types/mime": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.3.tgz",
-      "integrity": "sha512-Ys+/St+2VF4+xuY6+kDIXGxbNRO0mesVg0bbxEfB97Od1Vjpjx9KD1qxs64Gcb3CWPirk9Xe+PT4YiiHQ9T+eg==",
-      "dev": true
+      "integrity": "sha512-Ys+/St+2VF4+xuY6+kDIXGxbNRO0mesVg0bbxEfB97Od1Vjpjx9KD1qxs64Gcb3CWPirk9Xe+PT4YiiHQ9T+eg=="
     },
     "node_modules/@types/node": {
       "version": "20.8.4",
@@ -871,20 +866,17 @@
     "node_modules/@types/qs": {
       "version": "6.9.8",
       "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.8.tgz",
-      "integrity": "sha512-u95svzDlTysU5xecFNTgfFG5RUWu1A9P0VzgpcIiGZA9iraHOdSzcxMxQ55DyeRaGCSxQi7LxXDI4rzq/MYfdg==",
-      "dev": true
+      "integrity": "sha512-u95svzDlTysU5xecFNTgfFG5RUWu1A9P0VzgpcIiGZA9iraHOdSzcxMxQ55DyeRaGCSxQi7LxXDI4rzq/MYfdg=="
     },
     "node_modules/@types/range-parser": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.5.tgz",
-      "integrity": "sha512-xrO9OoVPqFuYyR/loIHjnbvvyRZREYKLjxV4+dY6v3FQR3stQ9ZxIGkaclF7YhI9hfjpuTbu14hZEy94qKLtOA==",
-      "dev": true
+      "integrity": "sha512-xrO9OoVPqFuYyR/loIHjnbvvyRZREYKLjxV4+dY6v3FQR3stQ9ZxIGkaclF7YhI9hfjpuTbu14hZEy94qKLtOA=="
     },
     "node_modules/@types/send": {
       "version": "0.17.2",
       "resolved": "https://registry.npmjs.org/@types/send/-/send-0.17.2.tgz",
       "integrity": "sha512-aAG6yRf6r0wQ29bkS+x97BIs64ZLxeE/ARwyS6wrldMm3C1MdKwCcnnEwMC1slI8wuxJOpiUH9MioC0A0i+GJw==",
-      "dev": true,
       "dependencies": {
         "@types/mime": "^1",
         "@types/node": "*"
@@ -894,7 +886,6 @@
       "version": "1.15.3",
       "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.15.3.tgz",
       "integrity": "sha512-yVRvFsEMrv7s0lGhzrggJjNOSmZCdgCjw9xWrPr/kNNLp6FaDfMC1KaYl3TSJ0c58bECwNBMoQrZJ8hA8E1eFg==",
-      "dev": true,
       "dependencies": {
         "@types/http-errors": "*",
         "@types/mime": "*",
@@ -927,6 +918,14 @@
         "@types/webidl-conversions": "*"
       }
     },
+    "node_modules/@types/ws": {
+      "version": "8.5.10",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.10.tgz",
+      "integrity": "sha512-vmQSUcfalpIq0R9q7uTo2lXs6eGIpt9wtnLdMv9LVpIjCA/+ufZRozlVoVelIYixx1ugCBKDhn89vnsEGOCx9A==",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@vitest/coverage-v8": {
       "version": "0.34.6",
       "resolved": "https://registry.npmjs.org/@vitest/coverage-v8/-/coverage-v8-0.34.6.tgz",
@@ -1396,6 +1395,35 @@
         "node": ">=10"
       }
     },
+    "node_modules/cliui": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+      "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.1",
+        "wrap-ansi": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
     "node_modules/color-support": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
@@ -1500,6 +1528,14 @@
       "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
       "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ=="
     },
+    "node_modules/data-uri-to-buffer": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz",
+      "integrity": "sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/debug": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -1706,6 +1742,14 @@
         "@esbuild/win32-x64": "0.20.2"
       }
     },
+    "node_modules/escalade": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.2.tgz",
+      "integrity": "sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/escape-html": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
@@ -1760,6 +1804,28 @@
         "node": ">= 0.10.0"
       }
     },
+    "node_modules/fetch-blob": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/fetch-blob/-/fetch-blob-3.2.0.tgz",
+      "integrity": "sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/jimmywarting"
+        },
+        {
+          "type": "paypal",
+          "url": "https://paypal.me/jimmywarting"
+        }
+      ],
+      "dependencies": {
+        "node-domexception": "^1.0.0",
+        "web-streams-polyfill": "^3.0.3"
+      },
+      "engines": {
+        "node": "^12.20 || >= 14.13"
+      }
+    },
     "node_modules/fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -1820,6 +1886,17 @@
         "node": ">= 6"
       }
     },
+    "node_modules/formdata-polyfill": {
+      "version": "4.0.10",
+      "resolved": "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz",
+      "integrity": "sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==",
+      "dependencies": {
+        "fetch-blob": "^3.1.2"
+      },
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
     "node_modules/forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -1903,6 +1980,14 @@
         "node": ">=10"
       }
     },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
     "node_modules/get-func-name": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/get-func-name/-/get-func-name-2.0.2.tgz",
@@ -2709,6 +2794,24 @@
       "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-5.1.0.tgz",
       "integrity": "sha512-eh0GgfEkpnoWDq+VY8OyvYhFEzBk6jIYbRKdIlyTiAXIVJ8PyBaKb0rp7oDtoddbdoHWhq8wwr+XZ81F1rpNdA=="
     },
+    "node_modules/node-domexception": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz",
+      "integrity": "sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/jimmywarting"
+        },
+        {
+          "type": "github",
+          "url": "https://paypal.me/jimmywarting"
+        }
+      ],
+      "engines": {
+        "node": ">=10.5.0"
+      }
+    },
     "node_modules/node-fetch": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
@@ -2906,6 +3009,47 @@
         "node": "*"
       }
     },
+    "node_modules/peer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/peer/-/peer-1.0.2.tgz",
+      "integrity": "sha512-ZObVEhAaoskd3KuSxr5DJLM8QuqQW4w3i0MqrI8H7Bzz8DjRC3DjUg2XtQQGfdc36+8Xk+wIPT/tL5wE+KnIqg==",
+      "dependencies": {
+        "@types/express": "^4.17.3",
+        "@types/ws": "^7.2.3 || ^8.0.0",
+        "cors": "^2.8.5",
+        "express": "^4.17.1",
+        "node-fetch": "^3.3.0",
+        "ws": "^7.2.3 || ^8.0.0",
+        "yargs": "^17.6.2"
+      },
+      "bin": {
+        "peerjs": "dist/bin/peerjs.js"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/peer"
+      }
+    },
+    "node_modules/peer/node_modules/node-fetch": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.3.2.tgz",
+      "integrity": "sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==",
+      "dependencies": {
+        "data-uri-to-buffer": "^4.0.0",
+        "fetch-blob": "^3.1.4",
+        "formdata-polyfill": "^4.0.10"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/node-fetch"
+      }
+    },
     "node_modules/picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@@ -3070,6 +3214,14 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -3892,6 +4044,14 @@
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
       "dev": true
     },
+    "node_modules/web-streams-polyfill": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.3.3.tgz",
+      "integrity": "sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw==",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/webidl-conversions": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
@@ -3936,6 +4096,36 @@
         "string-width": "^1.0.2 || 2 || 3 || 4"
       }
     },
+    "node_modules/wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
@@ -3961,11 +4151,44 @@
         }
       }
     },
+    "node_modules/y18n": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
     },
+    "node_modules/yargs": {
+      "version": "17.7.2",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+      "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
+      "dependencies": {
+        "cliui": "^8.0.1",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.3",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^21.1.1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "21.1.1",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/yn": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
@@ -4384,7 +4607,6 @@
       "version": "1.19.3",
       "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.3.tgz",
       "integrity": "sha512-oyl4jvAfTGX9Bt6Or4H9ni1Z447/tQuxnZsytsCaExKlmJiU8sFgnIBRzJUpKwB5eWn9HuBYlUlVA74q/yN0eQ==",
-      "dev": true,
       "requires": {
         "@types/connect": "*",
         "@types/node": "*"
@@ -4409,7 +4631,6 @@
       "version": "3.4.36",
       "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.36.tgz",
       "integrity": "sha512-P63Zd/JUGq+PdrM1lv0Wv5SBYeA2+CORvbrXbngriYY0jzLUWfQMQQxOhjONEz/wlHOAxOdY7CY65rgQdTjq2w==",
-      "dev": true,
       "requires": {
         "@types/node": "*"
       }
@@ -4445,7 +4666,6 @@
       "version": "4.17.18",
       "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.18.tgz",
       "integrity": "sha512-Sxv8BSLLgsBYmcnGdGjjEjqET2U+AKAdCRODmMiq02FgjwuV75Ut85DRpvFjyw/Mk0vgUOliGRU0UUmuuZHByQ==",
-      "dev": true,
       "requires": {
         "@types/body-parser": "*",
         "@types/express-serve-static-core": "^4.17.33",
@@ -4457,7 +4677,6 @@
       "version": "4.17.37",
       "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.37.tgz",
       "integrity": "sha512-ZohaCYTgGFcOP7u6aJOhY9uIZQgZ2vxC2yWoArY+FeDXlqeH66ZVBjgvg+RLVAS/DWNq4Ap9ZXu1+SUQiiWYMg==",
-      "dev": true,
       "requires": {
         "@types/node": "*",
         "@types/qs": "*",
@@ -4468,8 +4687,7 @@
     "@types/http-errors": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/@types/http-errors/-/http-errors-2.0.2.tgz",
-      "integrity": "sha512-lPG6KlZs88gef6aD85z3HNkztpj7w2R7HmR3gygjfXCQmsLloWNARFkMuzKiiY8FGdh1XDpgBdrSf4aKDiA7Kg==",
-      "dev": true
+      "integrity": "sha512-lPG6KlZs88gef6aD85z3HNkztpj7w2R7HmR3gygjfXCQmsLloWNARFkMuzKiiY8FGdh1XDpgBdrSf4aKDiA7Kg=="
     },
     "@types/istanbul-lib-coverage": {
       "version": "2.0.5",
@@ -4488,8 +4706,7 @@
     "@types/mime": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.3.tgz",
-      "integrity": "sha512-Ys+/St+2VF4+xuY6+kDIXGxbNRO0mesVg0bbxEfB97Od1Vjpjx9KD1qxs64Gcb3CWPirk9Xe+PT4YiiHQ9T+eg==",
-      "dev": true
+      "integrity": "sha512-Ys+/St+2VF4+xuY6+kDIXGxbNRO0mesVg0bbxEfB97Od1Vjpjx9KD1qxs64Gcb3CWPirk9Xe+PT4YiiHQ9T+eg=="
     },
     "@types/node": {
       "version": "20.8.4",
@@ -4502,20 +4719,17 @@
     "@types/qs": {
       "version": "6.9.8",
       "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.8.tgz",
-      "integrity": "sha512-u95svzDlTysU5xecFNTgfFG5RUWu1A9P0VzgpcIiGZA9iraHOdSzcxMxQ55DyeRaGCSxQi7LxXDI4rzq/MYfdg==",
-      "dev": true
+      "integrity": "sha512-u95svzDlTysU5xecFNTgfFG5RUWu1A9P0VzgpcIiGZA9iraHOdSzcxMxQ55DyeRaGCSxQi7LxXDI4rzq/MYfdg=="
     },
     "@types/range-parser": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.5.tgz",
-      "integrity": "sha512-xrO9OoVPqFuYyR/loIHjnbvvyRZREYKLjxV4+dY6v3FQR3stQ9ZxIGkaclF7YhI9hfjpuTbu14hZEy94qKLtOA==",
-      "dev": true
+      "integrity": "sha512-xrO9OoVPqFuYyR/loIHjnbvvyRZREYKLjxV4+dY6v3FQR3stQ9ZxIGkaclF7YhI9hfjpuTbu14hZEy94qKLtOA=="
     },
     "@types/send": {
       "version": "0.17.2",
       "resolved": "https://registry.npmjs.org/@types/send/-/send-0.17.2.tgz",
       "integrity": "sha512-aAG6yRf6r0wQ29bkS+x97BIs64ZLxeE/ARwyS6wrldMm3C1MdKwCcnnEwMC1slI8wuxJOpiUH9MioC0A0i+GJw==",
-      "dev": true,
       "requires": {
         "@types/mime": "^1",
         "@types/node": "*"
@@ -4525,7 +4739,6 @@
       "version": "1.15.3",
       "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.15.3.tgz",
       "integrity": "sha512-yVRvFsEMrv7s0lGhzrggJjNOSmZCdgCjw9xWrPr/kNNLp6FaDfMC1KaYl3TSJ0c58bECwNBMoQrZJ8hA8E1eFg==",
-      "dev": true,
       "requires": {
         "@types/http-errors": "*",
         "@types/mime": "*",
@@ -4558,6 +4771,14 @@
         "@types/webidl-conversions": "*"
       }
     },
+    "@types/ws": {
+      "version": "8.5.10",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.10.tgz",
+      "integrity": "sha512-vmQSUcfalpIq0R9q7uTo2lXs6eGIpt9wtnLdMv9LVpIjCA/+ufZRozlVoVelIYixx1ugCBKDhn89vnsEGOCx9A==",
+      "requires": {
+        "@types/node": "*"
+      }
+    },
     "@vitest/coverage-v8": {
       "version": "0.34.6",
       "resolved": "https://registry.npmjs.org/@vitest/coverage-v8/-/coverage-v8-0.34.6.tgz",
@@ -4890,6 +5111,29 @@
       "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
       "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ=="
     },
+    "cliui": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+      "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+      "requires": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.1",
+        "wrap-ansi": "^7.0.0"
+      }
+    },
+    "color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "requires": {
+        "color-name": "~1.1.4"
+      }
+    },
+    "color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
     "color-support": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
@@ -4972,6 +5216,11 @@
       "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
       "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ=="
     },
+    "data-uri-to-buffer": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz",
+      "integrity": "sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A=="
+    },
     "debug": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -5125,6 +5374,11 @@
         "@esbuild/win32-x64": "0.20.2"
       }
     },
+    "escalade": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.2.tgz",
+      "integrity": "sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA=="
+    },
     "escape-html": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
@@ -5173,6 +5427,15 @@
         "vary": "~1.1.2"
       }
     },
+    "fetch-blob": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/fetch-blob/-/fetch-blob-3.2.0.tgz",
+      "integrity": "sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==",
+      "requires": {
+        "node-domexception": "^1.0.0",
+        "web-streams-polyfill": "^3.0.3"
+      }
+    },
     "fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -5210,6 +5473,14 @@
         "mime-types": "^2.1.12"
       }
     },
+    "formdata-polyfill": {
+      "version": "4.0.10",
+      "resolved": "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz",
+      "integrity": "sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==",
+      "requires": {
+        "fetch-blob": "^3.1.2"
+      }
+    },
     "forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -5270,6 +5541,11 @@
         "wide-align": "^1.1.2"
       }
     },
+    "get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg=="
+    },
     "get-func-name": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/get-func-name/-/get-func-name-2.0.2.tgz",
@@ -5850,6 +6126,11 @@
       "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-5.1.0.tgz",
       "integrity": "sha512-eh0GgfEkpnoWDq+VY8OyvYhFEzBk6jIYbRKdIlyTiAXIVJ8PyBaKb0rp7oDtoddbdoHWhq8wwr+XZ81F1rpNdA=="
     },
+    "node-domexception": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz",
+      "integrity": "sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ=="
+    },
     "node-fetch": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
@@ -5997,6 +6278,32 @@
       "integrity": "sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==",
       "dev": true
     },
+    "peer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/peer/-/peer-1.0.2.tgz",
+      "integrity": "sha512-ZObVEhAaoskd3KuSxr5DJLM8QuqQW4w3i0MqrI8H7Bzz8DjRC3DjUg2XtQQGfdc36+8Xk+wIPT/tL5wE+KnIqg==",
+      "requires": {
+        "@types/express": "^4.17.3",
+        "@types/ws": "^7.2.3 || ^8.0.0",
+        "cors": "^2.8.5",
+        "express": "^4.17.1",
+        "node-fetch": "^3.3.0",
+        "ws": "^7.2.3 || ^8.0.0",
+        "yargs": "^17.6.2"
+      },
+      "dependencies": {
+        "node-fetch": {
+          "version": "3.3.2",
+          "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.3.2.tgz",
+          "integrity": "sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==",
+          "requires": {
+            "data-uri-to-buffer": "^4.0.0",
+            "fetch-blob": "^3.1.4",
+            "formdata-polyfill": "^4.0.10"
+          }
+        }
+      }
+    },
     "picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@@ -6111,6 +6418,11 @@
         "picomatch": "^2.2.1"
       }
     },
+    "require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q=="
+    },
     "rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -6659,6 +6971,11 @@
         }
       }
     },
+    "web-streams-polyfill": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.3.3.tgz",
+      "integrity": "sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw=="
+    },
     "webidl-conversions": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
@@ -6691,6 +7008,26 @@
         "string-width": "^1.0.2 || 2 || 3 || 4"
       }
     },
+    "wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "requires": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        }
+      }
+    },
     "wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
@@ -6702,11 +7039,35 @@
       "integrity": "sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==",
       "requires": {}
     },
+    "y18n": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA=="
+    },
     "yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
     },
+    "yargs": {
+      "version": "17.7.2",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+      "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
+      "requires": {
+        "cliui": "^8.0.1",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.3",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^21.1.1"
+      }
+    },
+    "yargs-parser": {
+      "version": "21.1.1",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw=="
+    },
     "yn": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
diff --git a/backend/package.json b/backend/package.json
index 223488d9..5288e4cf 100644
--- a/backend/package.json
+++ b/backend/package.json
@@ -25,6 +25,7 @@
     "mongoose": "^8.0.3",
     "neo4j-driver": "^5.13.0",
     "nodemon": "^3.0.1",
+    "peer": "^1.0.2",
     "socket.io": "^4.7.2",
     "ts-node": "^10.9.1",
     "unidecode": "^0.1.8",
diff --git a/backend/src/server.ts b/backend/src/server.ts
index da7dc5e8..6d398d68 100644
--- a/backend/src/server.ts
+++ b/backend/src/server.ts
@@ -7,6 +7,7 @@ import { connect } from "mongoose";
 import cookieParser from "cookie-parser";
 import ServerToClientEvents from "./events/ServerToClientEvents";
 import ClientToServerEvents from "./events/ClientToServerEvents";
+import { ExpressPeerServer } from "peer";
 
 dotenv.config();
 
@@ -29,6 +30,9 @@ app.use(express.json({ limit: "10mb" }));
 
 const expressServer = createServer(app);
 
+const peerServer = ExpressPeerServer(expressServer, {});
+app.use("/peer", peerServer);
+
 const io = new SocketServer<ClientToServerEvents, ServerToClientEvents>(
   expressServer,
   {
diff --git a/frontend/src/helpers/UserProvider.tsx b/frontend/src/helpers/UserProvider.tsx
index 3e2993fc..b78fc7f2 100644
--- a/frontend/src/helpers/UserProvider.tsx
+++ b/frontend/src/helpers/UserProvider.tsx
@@ -72,8 +72,8 @@ function UserProvider({ children }: { children: React.ReactNode }) {
     if (userId) {
       setPeer(
         new Peer(userId, {
-          host: "/",
-          port: 8000,
+          host: "/peer",
+          port: 5000,
         }),
       );
     }

From c332caffec2333f06f871d5dfd447a180c5e581a Mon Sep 17 00:00:00 2001
From: "j.krol" <janek01krol@gmail.com>
Date: Tue, 2 Apr 2024 17:57:36 +0200
Subject: [PATCH 56/64] Fix peer problems and using container again

---
 backend/src/server.ts                 |  4 ----
 frontend/src/helpers/UserProvider.tsx |  6 +++---
 frontend/src/pages/RoomCallPage.tsx   | 10 +++-------
 3 files changed, 6 insertions(+), 14 deletions(-)

diff --git a/backend/src/server.ts b/backend/src/server.ts
index 6d398d68..da7dc5e8 100644
--- a/backend/src/server.ts
+++ b/backend/src/server.ts
@@ -7,7 +7,6 @@ import { connect } from "mongoose";
 import cookieParser from "cookie-parser";
 import ServerToClientEvents from "./events/ServerToClientEvents";
 import ClientToServerEvents from "./events/ClientToServerEvents";
-import { ExpressPeerServer } from "peer";
 
 dotenv.config();
 
@@ -30,9 +29,6 @@ app.use(express.json({ limit: "10mb" }));
 
 const expressServer = createServer(app);
 
-const peerServer = ExpressPeerServer(expressServer, {});
-app.use("/peer", peerServer);
-
 const io = new SocketServer<ClientToServerEvents, ServerToClientEvents>(
   expressServer,
   {
diff --git a/frontend/src/helpers/UserProvider.tsx b/frontend/src/helpers/UserProvider.tsx
index b78fc7f2..265b1195 100644
--- a/frontend/src/helpers/UserProvider.tsx
+++ b/frontend/src/helpers/UserProvider.tsx
@@ -72,12 +72,12 @@ function UserProvider({ children }: { children: React.ReactNode }) {
     if (userId) {
       setPeer(
         new Peer(userId, {
-          host: "/peer",
-          port: 5000,
+          host: "/",
+          port: 8000,
         }),
       );
     }
-  }, [userId, peer]);
+  }, [userId]);
 
   const firstRefresh = useRef(true);
 
diff --git a/frontend/src/pages/RoomCallPage.tsx b/frontend/src/pages/RoomCallPage.tsx
index 9d9dcd8c..566c2a02 100644
--- a/frontend/src/pages/RoomCallPage.tsx
+++ b/frontend/src/pages/RoomCallPage.tsx
@@ -2,13 +2,10 @@ import { useEffect, useRef, useState } from "react";
 import Footer from "../components/Footer";
 import Navbar from "../components/Navbar";
 import fetchUserMedia from "../media/fetchUserMedia";
-import { useSelector } from "react-redux";
-import { RootState } from "../redux/store";
 import { useUser } from "../helpers/UserProvider";
 import { useNavigate, useParams } from "react-router-dom";
 import dataService from "../services/data";
 import RoomPeerVideo from "../components/RoomPeerVideo";
-import Peer from "peerjs";
 import RoomPeer from "../models/RoomPeer";
 import PeerInvite from "../components/PeerInvite";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -21,12 +18,11 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 function RoomCallPage() {
   const localRef = useRef<HTMLVideoElement>(null);
-  const peer: Peer = useSelector((state: RootState) => state.peer);
   const [localStream, setLocalStream] = useState<MediaStream | null>(null);
   const [roomPeers, setRoomPeers] = useState<{ [key: string]: RoomPeer }>({});
   const [isAudio, setIsAudio] = useState(true);
   const [isVideo, setIsVideo] = useState(true);
-  const { friends, socket, userId, user } = useUser();
+  const { friends, socket, userId, user, peer } = useUser();
   const params = useParams();
   const navigate = useNavigate();
   const roomId = params.roomId;
@@ -46,8 +42,8 @@ function RoomCallPage() {
     });
   });
   const connectToNewUser = (newPeerId: string, stream: MediaStream) => {
-    const call = peer.call(newPeerId, stream);
-    call.on("stream", (remoteStream: MediaStream) => {
+    const call = peer?.call(newPeerId, stream);
+    call?.on("stream", (remoteStream: MediaStream) => {
       const peerId = newPeerId;
       const newPeerObj: { [key: string]: RoomPeer } = {};
       newPeerObj[peerId] = { stream: remoteStream };

From 9d5a72f7baaefd09182ede5f51b43249ef6819df Mon Sep 17 00:00:00 2001
From: "j.krol" <janek01krol@gmail.com>
Date: Tue, 2 Apr 2024 18:03:51 +0200
Subject: [PATCH 57/64] Fix peer problems in notifications page

---
 frontend/src/pages/NotificationsPage.tsx | 29 ++++++++++++------------
 1 file changed, 15 insertions(+), 14 deletions(-)

diff --git a/frontend/src/pages/NotificationsPage.tsx b/frontend/src/pages/NotificationsPage.tsx
index be4cd433..5f49c298 100644
--- a/frontend/src/pages/NotificationsPage.tsx
+++ b/frontend/src/pages/NotificationsPage.tsx
@@ -1,27 +1,28 @@
 import Navbar from "../components/Navbar";
 import Footer from "../components/Footer";
 import { useUser } from "../helpers/UserProvider";
-import { useSelector } from "react-redux";
-import { RootState } from "../redux/store";
 import dataService from "../services/data";
 import { useNavigate } from "react-router-dom";
-import Peer from "peerjs";
 import Notification from "../components/Notification";
 import { useEffect } from "react";
 function NotificationsPage() {
-  const { deleteNotification, notifications, socket, userId, user } = useUser();
+  const { peer, deleteNotification, notifications, socket, userId, user } = useUser();
   const navigate = useNavigate();
-  const peer: Peer = useSelector((state: RootState) => state.peer);
   const handleRoomInvite = async (roomId: string) => {
-    console.log("[HANDLE ROOM INVITE]: starts");
-    await dataService.fetchData(`/room/${roomId}`, "DELETE", {});
-    console.log("[HANDLE ROOM INVITE]: delete invite from DB");
-    const fullName = `${user?.first_name} ${user?.last_name}`;
-    console.log("[HANDLE ROOM INVITE]: create full name: ", fullName);
-    console.log("[PEER]: ", peer);
-    socket?.emit("joinRoom", { roomId, peerId: peer.id, userId, fullName });
-    console.log("[HANDLE ROOM INVITE]: emitted joinRoom");
-    navigate(`/room/${roomId}`);
+    if (peer) {
+      console.log("[HANDLE ROOM INVITE]: starts");
+      await dataService.fetchData(`/room/${roomId}`, "DELETE", {});
+      console.log("[HANDLE ROOM INVITE]: delete invite from DB");
+      const fullName = `${user?.first_name} ${user?.last_name}`;
+      console.log("[HANDLE ROOM INVITE]: create full name: ", fullName);
+      console.log("[PEER]: ", peer);
+      socket?.emit("joinRoom", { roomId, peerId: peer.id, userId, fullName });
+      console.log("[HANDLE ROOM INVITE]: emitted joinRoom");
+      navigate(`/room/${roomId}`);
+      return;
+    }
+    navigate("/profile");
+    return;
   };
 
   const declineInvite = (inviteId: string) => {

From dc500832f88246fe7bdfb7dc7f74bccfa44f1344 Mon Sep 17 00:00:00 2001
From: "j.krol" <janek01krol@gmail.com>
Date: Tue, 2 Apr 2024 18:18:34 +0200
Subject: [PATCH 58/64] Disable invite button if invitation has already been
 sent

---
 frontend/src/components/PeerInvite.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/PeerInvite.tsx b/frontend/src/components/PeerInvite.tsx
index 2e6d39a6..e25cbc2d 100644
--- a/frontend/src/components/PeerInvite.tsx
+++ b/frontend/src/components/PeerInvite.tsx
@@ -1,3 +1,4 @@
+import { useRef } from "react";
 import User from "../models/User";
 
 export interface PeerInviteProps {
@@ -6,6 +7,11 @@ export interface PeerInviteProps {
 }
 
 function PeerInvite({ friend, inviteFriendToRoom }: PeerInviteProps) {
+  const inviteButtonRef = useRef<HTMLButtonElement>(null);
+  const handleInviteFriendToRoom = (friendId: string) => {
+    inviteFriendToRoom(friendId);
+    inviteButtonRef.current!.disabled = true;
+  }
   return (
     <li className="flex flex-row justify-center gap-4">
       <img
@@ -21,8 +27,9 @@ function PeerInvite({ friend, inviteFriendToRoom }: PeerInviteProps) {
         </p>
         <div className="flex flex-col xl:flex-row">
           <button
+            ref={inviteButtonRef}
             className={`btn small bg-my-green text-xs`}
-            onClick={() => inviteFriendToRoom(friend.id)}
+            onClick={() => handleInviteFriendToRoom(friend.id)}
           >
             invite
           </button>

From 779384fa4024e89e141f8ab7def5ec292b1000e8 Mon Sep 17 00:00:00 2001
From: "j.krol" <janek01krol@gmail.com>
Date: Tue, 2 Apr 2024 18:31:02 +0200
Subject: [PATCH 59/64] Restore previous version with no disabling button

---
 frontend/src/components/PeerInvite.tsx | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/frontend/src/components/PeerInvite.tsx b/frontend/src/components/PeerInvite.tsx
index e25cbc2d..2e6d39a6 100644
--- a/frontend/src/components/PeerInvite.tsx
+++ b/frontend/src/components/PeerInvite.tsx
@@ -1,4 +1,3 @@
-import { useRef } from "react";
 import User from "../models/User";
 
 export interface PeerInviteProps {
@@ -7,11 +6,6 @@ export interface PeerInviteProps {
 }
 
 function PeerInvite({ friend, inviteFriendToRoom }: PeerInviteProps) {
-  const inviteButtonRef = useRef<HTMLButtonElement>(null);
-  const handleInviteFriendToRoom = (friendId: string) => {
-    inviteFriendToRoom(friendId);
-    inviteButtonRef.current!.disabled = true;
-  }
   return (
     <li className="flex flex-row justify-center gap-4">
       <img
@@ -27,9 +21,8 @@ function PeerInvite({ friend, inviteFriendToRoom }: PeerInviteProps) {
         </p>
         <div className="flex flex-col xl:flex-row">
           <button
-            ref={inviteButtonRef}
             className={`btn small bg-my-green text-xs`}
-            onClick={() => handleInviteFriendToRoom(friend.id)}
+            onClick={() => inviteFriendToRoom(friend.id)}
           >
             invite
           </button>

From 34d3d7eaef306c7c73f1d8c65b78abe81174dbd4 Mon Sep 17 00:00:00 2001
From: "j.krol" <janek01krol@gmail.com>
Date: Tue, 2 Apr 2024 18:58:49 +0200
Subject: [PATCH 60/64] Delete notification with HTTP method after declining it

---
 frontend/src/helpers/UserProvider.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/helpers/UserProvider.tsx b/frontend/src/helpers/UserProvider.tsx
index 265b1195..3786d0a4 100644
--- a/frontend/src/helpers/UserProvider.tsx
+++ b/frontend/src/helpers/UserProvider.tsx
@@ -227,7 +227,8 @@ function UserProvider({ children }: { children: React.ReactNode }) {
     setNotifications((prev) => [...prev, notification]);
   };
 
-  const deleteNotification = (notificationId: string) => {
+  const deleteNotification = async (notificationId: string) => {
+    await dataService.fetchData(`/room/${notificationId}`, "DELETE", {})
     setNotifications((prev) =>
       prev.filter((notification) => notification.roomId !== notificationId),
     );

From cc065baef17363e8ca63402d6db5fca7d5f4e498 Mon Sep 17 00:00:00 2001
From: "j.krol" <janek01krol@gmail.com>
Date: Sat, 6 Apr 2024 10:00:35 +0200
Subject: [PATCH 61/64] Create rooms in Neo4j with MERGE command

---
 backend/src/routes/roomRoute.ts | 8 +++++---
 backend/src/socketServer.ts     | 1 +
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/backend/src/routes/roomRoute.ts b/backend/src/routes/roomRoute.ts
index 419e1ddd..c44fe22a 100644
--- a/backend/src/routes/roomRoute.ts
+++ b/backend/src/routes/roomRoute.ts
@@ -21,6 +21,7 @@ roomRouter.get("/:userId", async (req, res) => {
         ...record,
         title: "Join meeting",
       }));
+    console.log("[ROOMS]: ", rooms)
     return res.json({ status: "ok", rooms });
   } catch (err) {
     console.log("Error:", err);
@@ -40,12 +41,13 @@ roomRouter.post("/", async (req, res) => {
         .status(400)
         .json({ status: "error", errors: { id: "no friends" } });
     }
-    await session.run(`CREATE (r: Room $room)`, { room: newRoomProps });
+
+    // await session.run(`CREATE (r: Room $room)`, { room: newRoomProps });
     await session.run(
       `
             MATCH (u:User {id: $userId})
-            MATCH (r:Room {roomId: $roomId})
-            CREATE (r)-[:INVITED]->(u)
+            MERGE (r:Room {roomId: $roomId})
+            MERGE (r)-[:INVITED]->(u)
         `,
       { userId: to, roomId },
     );
diff --git a/backend/src/socketServer.ts b/backend/src/socketServer.ts
index b9544ff4..480ca679 100644
--- a/backend/src/socketServer.ts
+++ b/backend/src/socketServer.ts
@@ -148,6 +148,7 @@ io.on("connection", async (socket: Socket) => {
     const session = driver.session();
     const userSockets = await getAllSockets(session, to);
     userSockets.forEach((userSocket) => {
+      console.log("[user socket]: ", userSocket);
       socket.to(userSocket.id).emit("newRoom", {
         from,
         roomId,

From 5c46ad97d5d9702a553f25125cbfc891d4f9652e Mon Sep 17 00:00:00 2001
From: "j.krol" <janek01krol@gmail.com>
Date: Sat, 6 Apr 2024 10:40:16 +0200
Subject: [PATCH 62/64] Move socket listening on 'newRoom' event to
 UserProvider

---
 frontend/src/helpers/UserProvider.tsx |  6 +++++-
 frontend/src/pages/ProfilePage.tsx    | 10 +---------
 2 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/frontend/src/helpers/UserProvider.tsx b/frontend/src/helpers/UserProvider.tsx
index 3786d0a4..39be25aa 100644
--- a/frontend/src/helpers/UserProvider.tsx
+++ b/frontend/src/helpers/UserProvider.tsx
@@ -65,7 +65,11 @@ function UserProvider({ children }: { children: React.ReactNode }) {
       return;
     }
     if (socket && socket.connected) return;
-    setSocket(io("http://localhost:5000", { auth: { userId } }));
+    const newSocket = io("http://localhost:5000", { auth: { userId } })
+    newSocket.on("newRoom", (notification) => {
+      addNotification(notification);
+    });
+    setSocket(newSocket);
   }, [user]);
 
   useEffect(() => {
diff --git a/frontend/src/pages/ProfilePage.tsx b/frontend/src/pages/ProfilePage.tsx
index 273c6faf..fa0f7dd3 100644
--- a/frontend/src/pages/ProfilePage.tsx
+++ b/frontend/src/pages/ProfilePage.tsx
@@ -8,7 +8,7 @@ import Transition from "../components/Transition";
 
 function ProfilePage() {
   const navigate = useNavigate();
-  const { addNotification, user, userId, meeting, deleteUser, socket } =
+  const { user, userId, meeting, deleteUser } =
     useUser();
 
   const [showAnimation, setShowAnim] = useState(false);
@@ -35,14 +35,6 @@ function ProfilePage() {
     if (userId === null) navigate("/login");
   }, [userId]);
 
-  useEffect(() => {
-    if (socket !== null) {
-      socket.on("newRoom", (notification) => {
-        addNotification(notification);
-      });
-    }
-  }, [socket]);
-
   return (
     <>
       <Navbar />

From 7344a39989e01ba89ff220dfcca10116526cd86e Mon Sep 17 00:00:00 2001
From: "j.krol" <janek01krol@gmail.com>
Date: Sun, 7 Apr 2024 12:06:29 +0200
Subject: [PATCH 63/64] Add clearing rooms in Neo4j for cleanUpData function

---
 backend/src/db.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/backend/src/db.ts b/backend/src/db.ts
index a6b1bd93..7dd0b721 100644
--- a/backend/src/db.ts
+++ b/backend/src/db.ts
@@ -101,5 +101,6 @@ export async function cleanUpData() {
   const session = driver.session();
   await session.run(`MATCH (m:Meeting) DETACH DELETE m`);
   await session.run(`MATCH (s:Socket) DETACH DELETE s`);
+  await session.run(`MATCH (r:Room) DETACH DELETE r`);
   session.close();
 }

From 32619b868109bac98ebc1b14e380a0e3007e14b4 Mon Sep 17 00:00:00 2001
From: "j.krol" <janek01krol@gmail.com>
Date: Sun, 7 Apr 2024 12:10:25 +0200
Subject: [PATCH 64/64] Add prettier to code

---
 backend/src/routes/roomRoute.ts          | 2 +-
 frontend/src/helpers/UserProvider.tsx    | 4 ++--
 frontend/src/pages/NotificationsPage.tsx | 3 ++-
 frontend/src/pages/ProfilePage.tsx       | 3 +--
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/backend/src/routes/roomRoute.ts b/backend/src/routes/roomRoute.ts
index c44fe22a..34196501 100644
--- a/backend/src/routes/roomRoute.ts
+++ b/backend/src/routes/roomRoute.ts
@@ -21,7 +21,7 @@ roomRouter.get("/:userId", async (req, res) => {
         ...record,
         title: "Join meeting",
       }));
-    console.log("[ROOMS]: ", rooms)
+    console.log("[ROOMS]: ", rooms);
     return res.json({ status: "ok", rooms });
   } catch (err) {
     console.log("Error:", err);
diff --git a/frontend/src/helpers/UserProvider.tsx b/frontend/src/helpers/UserProvider.tsx
index 39be25aa..066c89c3 100644
--- a/frontend/src/helpers/UserProvider.tsx
+++ b/frontend/src/helpers/UserProvider.tsx
@@ -65,7 +65,7 @@ function UserProvider({ children }: { children: React.ReactNode }) {
       return;
     }
     if (socket && socket.connected) return;
-    const newSocket = io("http://localhost:5000", { auth: { userId } })
+    const newSocket = io("http://localhost:5000", { auth: { userId } });
     newSocket.on("newRoom", (notification) => {
       addNotification(notification);
     });
@@ -232,7 +232,7 @@ function UserProvider({ children }: { children: React.ReactNode }) {
   };
 
   const deleteNotification = async (notificationId: string) => {
-    await dataService.fetchData(`/room/${notificationId}`, "DELETE", {})
+    await dataService.fetchData(`/room/${notificationId}`, "DELETE", {});
     setNotifications((prev) =>
       prev.filter((notification) => notification.roomId !== notificationId),
     );
diff --git a/frontend/src/pages/NotificationsPage.tsx b/frontend/src/pages/NotificationsPage.tsx
index 5f49c298..24939d42 100644
--- a/frontend/src/pages/NotificationsPage.tsx
+++ b/frontend/src/pages/NotificationsPage.tsx
@@ -6,7 +6,8 @@ import { useNavigate } from "react-router-dom";
 import Notification from "../components/Notification";
 import { useEffect } from "react";
 function NotificationsPage() {
-  const { peer, deleteNotification, notifications, socket, userId, user } = useUser();
+  const { peer, deleteNotification, notifications, socket, userId, user } =
+    useUser();
   const navigate = useNavigate();
   const handleRoomInvite = async (roomId: string) => {
     if (peer) {
diff --git a/frontend/src/pages/ProfilePage.tsx b/frontend/src/pages/ProfilePage.tsx
index fa0f7dd3..024d403f 100644
--- a/frontend/src/pages/ProfilePage.tsx
+++ b/frontend/src/pages/ProfilePage.tsx
@@ -8,8 +8,7 @@ import Transition from "../components/Transition";
 
 function ProfilePage() {
   const navigate = useNavigate();
-  const { user, userId, meeting, deleteUser } =
-    useUser();
+  const { user, userId, meeting, deleteUser } = useUser();
 
   const [showAnimation, setShowAnim] = useState(false);
   const [showContent, setShowContent] = useState(false);