From 688a6d40bfb518f02e3eca6a2cb945ad599d54db Mon Sep 17 00:00:00 2001
From: Maksym <maksimgrs98@gmail.com>
Date: Sun, 20 Oct 2024 15:56:10 +0200
Subject: [PATCH] 	modified:   src/app/page.tsx

---
 src/app/page.tsx | 48 +++++++++++++++++++++++++-----------------------
 1 file changed, 25 insertions(+), 23 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index fd56116..1765326 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -50,7 +50,25 @@ export default function Home() {
       }),
     []
   );
-  let apiUrl: string;
+  const isSnackBarHidden = useMemo(() => {
+    if (typeof localStorage === "undefined") return false;
+    return localStorage.getItem("snackBarHidden") === "true";
+  }, []);
+  const [snackBarVisible, setSnackBarVisibility] = useState(false);
+  const [values, setValues] = useState<{
+    buses: BusProps["values"][];
+    strips: StripProps["values"][];
+  }>();
+  const [width, setWidth] = useState(1000);
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  let [apiUrl, setApiUrl] = useState<string>();
+
+  const isItMobileDevice = useMemo(
+    () =>
+      typeof window !== "undefined" ? isItMobile(navigator.userAgent) : "",
+    []
+  );
   function sendApi(
     path: string,
     method: RequestInit["method"] = "GET",
@@ -106,32 +124,17 @@ export default function Home() {
         break;
     }
   }
-  const isSnackBarHidden = useMemo(() => {
-    if (typeof localStorage === "undefined") return false;
-    return localStorage.getItem("snackBarHidden") === "true";
-  }, []);
-  const [snackBarVisible, setSnackBarVisibility] = useState(false);
-  const [values, setValues] = useState<{
-    buses: BusProps["values"][];
-    strips: StripProps["values"][];
-  }>();
-  const [width, setWidth] = useState(1000);
-  const [isLoaded, setIsLoaded] = useState(false);
-
-  const isItMobileDevice = useMemo(
-    () =>
-      typeof window !== "undefined" ? isItMobile(navigator.userAgent) : "",
-    []
-  );
   const toggleFullscreen = () => {
-    if (document.fullscreenElement === null)
-      document.documentElement.requestFullscreen();
-    else document.exitFullscreen();
+    new Promise((r) => {
+      if (document.fullscreenElement === null)
+        r(document.documentElement.requestFullscreen());
+      else r(document.exitFullscreen());
+    }).then(() => setIsFullscreen(document.fullscreenElement !== null));
   };
-  let isFullscreen: boolean = false;
   useEffect(() => {
     const _apiUrl = new URL(document.URL);
     _apiUrl.port = "3001";
+    setApiUrl(_apiUrl.toString());
     apiUrl = _apiUrl.toString();
 
     sendApi("/values")
@@ -155,7 +158,6 @@ export default function Home() {
     window.onresize = () => {
       setWidth(window.innerWidth);
     };
-    isFullscreen = document.fullscreenElement !== null;
   }, []);
   const strips = { virtual: 3, physical: 5 };
   const buses = { virtual: 3, physical: 5 };