From 182fdbf1582158202b6da1ca735b37a1d831e645 Mon Sep 17 00:00:00 2001
From: GRZ4NA <grzanatv@gmail.com>
Date: Tue, 5 Oct 2021 16:34:24 +0200
Subject: [PATCH] popups create their own containers in HTML

---
 client/public/index.html              |  1 -
 client/src/utils/popups/spawnPopup.js | 14 ++++++--------
 2 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/client/public/index.html b/client/public/index.html
index 9f901d7..5dc1a87 100644
--- a/client/public/index.html
+++ b/client/public/index.html
@@ -15,6 +15,5 @@
                 <img src="%PUBLIC_URL%/leaf.svg" alt="eco-meet logo" style="width: 15%; height: 15%" />
             </div>
         </div>
-        <div id="popup-container" style="display: none; overflow: hidden; width: 100vw; height: 100vh; z-index: 20; position: fixed; top: 0; left: 0"></div>
     </body>
 </html>
diff --git a/client/src/utils/popups/spawnPopup.js b/client/src/utils/popups/spawnPopup.js
index 9a0dab1..8c3db68 100644
--- a/client/src/utils/popups/spawnPopup.js
+++ b/client/src/utils/popups/spawnPopup.js
@@ -3,11 +3,13 @@ import { Window } from "../../components/Window";
 import { window as windowClass } from "../../components/Window/index.module.scss";
 
 export const spawnPopup = async (elements, windowStyles) => {
-    const container = document.getElementById("popup-container");
+    const container = document.createElement("div");
     const backgroundColor = "rgba(0,0,0,0.75)";
     const animationDuration = 300;
 
-    return new Promise((resolve, reject) => {
+    container.style = "display: block; overflow: hidden; width: 100vw; height: 100vh; z-index: 20; position: fixed; top: 0; left: 0";
+
+    return new Promise((resolve) => {
         const closeWindow = (value) => {
             container.animate([{ backgroundColor: backgroundColor }, { backgroundColor: "rgba(0,0,0,0)" }], {
                 easing: "ease",
@@ -26,16 +28,12 @@ export const spawnPopup = async (elements, windowStyles) => {
             );
             setTimeout(() => {
                 ReactDOM.unmountComponentAtNode(container);
-                container.style.display = "none";
+                container.remove();
                 resolve(value ?? null);
             }, animationDuration);
         };
 
-        if (container.innerHTML !== "") {
-            reject("Another popup is active");
-        }
-
-        container.style.display = "block";
+        document.body.appendChild(container);
         ReactDOM.render(<Window style={windowStyles ?? {}}>{elements(closeWindow)}</Window>, container);
         const window = document.getElementsByClassName(windowClass)[0];
         container.animate([{ backgroundColor: "rgba(0,0,0,0)" }, { backgroundColor: backgroundColor }], {