fix: review

Author: artemmufazalov

src/components/Fullscreen/Fullscreen.tsx

@@ -7,6 +7,8 @@ import {cn} from '../../utils/cn';
 import {useTypedDispatch, useTypedSelector} from '../../utils/hooks';
 import {Portal} from '../Portal/Portal';
 
+import {useFullscreenContext} from './FullscreenContext';
+
 import disableFullscreenIcon from '../../assets/icons/disableFullscreen.svg';
 
 import './Fullscreen.scss';
@@ -21,11 +23,7 @@ interface FullscreenProps {
 export function Fullscreen({children, className}: FullscreenProps) {
     const isFullscreen = useTypedSelector((state) => state.fullscreen);
     const dispatch = useTypedDispatch();
-
-    const fullscreenRoot = React.useMemo(
-        () => document.getElementById('fullscreen-root') ?? undefined,
-        [],
-    );
+    const fullscreenRootRef = useFullscreenContext();
 
     const onDisableFullScreen = React.useCallback(() => {
         dispatch(disableFullscreen());
@@ -47,25 +45,25 @@ export function Fullscreen({children, className}: FullscreenProps) {
     const [container, setContainer] = React.useState<HTMLDivElement | null>(null);
     React.useEffect(() => {
         const div = document.createElement('div');
-        fullscreenRoot?.appendChild(div);
+        fullscreenRootRef.current?.appendChild(div);
         div.style.display = 'contents';
         setContainer(div);
         return () => {
             setContainer(null);
             div.remove();
         };
-    }, [fullscreenRoot]);
+    }, [fullscreenRootRef]);
 
     const ref = React.useRef<HTMLDivElement>(null);
     React.useLayoutEffect(() => {
         if (container) {
             if (isFullscreen) {
-                fullscreenRoot?.appendChild(container);
+                fullscreenRootRef.current?.appendChild(container);
             } else {
                 ref.current?.appendChild(container);
             }
         }
-    }, [container, fullscreenRoot, isFullscreen]);
+    }, [container, fullscreenRootRef, isFullscreen]);
 
     if (!container) {
         return null;

src/components/Fullscreen/FullscreenContext.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+const FullscreenContext = React.createContext<React.RefObject<HTMLDivElement> | null>(null);
+
+export function useFullscreenContext() {
+    const context = React.useContext(FullscreenContext);
+    if (!context) {
+        throw new Error('useFullscreenContext must be used within a FullscreenProvider');
+    }
+    return context;
+}
+
+export function FullscreenProvider({
+    children,
+    fullscreenRootRef,
+}: {
+    children: React.ReactNode;
+    fullscreenRootRef: React.RefObject<HTMLDivElement>;
+}) {
+    return (
+        <FullscreenContext.Provider value={fullscreenRootRef}>
+            {children}
+        </FullscreenContext.Provider>
+    );
+}

src/containers/App/App.tsx

@@ -5,6 +5,7 @@ import type {History} from 'history';
 import {Helmet} from 'react-helmet-async';
 
 import {componentsRegistry} from '../../components/ComponentsProvider/componentsRegistry';
+import {FullscreenProvider} from '../../components/Fullscreen/FullscreenContext';
 import {useTypedSelector} from '../../utils/hooks';
 import ReduxTooltip from '../ReduxTooltip/ReduxTooltip';
 import type {YDBEmbeddedUISettings} from '../UserSettings/settings';
@@ -47,19 +48,22 @@ function AppContent({
 }) {
     const {appTitle} = useAppTitle();
     const singleClusterMode = useTypedSelector((state) => state.singleClusterMode);
+    const fullscreenRootRef = React.useRef<HTMLDivElement>(null);
 
     return (
         <React.Fragment>
             <Helmet defaultTitle={appTitle} titleTemplate={`%s — ${appTitle}`} />
-            <ContentWrapper>
-                <NavigationWrapper
-                    singleClusterMode={singleClusterMode}
-                    userSettings={userSettings}
-                >
-                    <Content singleClusterMode={singleClusterMode}>{children}</Content>
-                    <div id="fullscreen-root"></div>
-                </NavigationWrapper>
-            </ContentWrapper>
+            <FullscreenProvider fullscreenRootRef={fullscreenRootRef}>
+                <ContentWrapper>
+                    <NavigationWrapper
+                        singleClusterMode={singleClusterMode}
+                        userSettings={userSettings}
+                    >
+                        <Content singleClusterMode={singleClusterMode}>{children}</Content>
+                        <div ref={fullscreenRootRef}></div>
+                    </NavigationWrapper>
+                </ContentWrapper>
+            </FullscreenProvider>
         </React.Fragment>
     );
 }