fix: some refactoring

Author: astandrik

src/containers/Drawer/Drawer.scss renamed to src/components/Drawer/Drawer.scss

@@ -4,31 +4,16 @@ import {DrawerItem, Drawer as GravityDrawer} from '@gravity-ui/navigation';
 
 import {cn} from '../../utils/cn';
 
+import {useDrawerContext} from './DrawerContext';
+
 const DEFAULT_DRAWER_WIDTH_PERCENTS = 60;
 const DEFAULT_DRAWER_WIDTH = 600;
 const DRAWER_WIDTH_KEY = 'drawer-width';
 const b = cn('ydb-drawer');
 
 import './Drawer.scss';
 
-// Create a context for sharing container dimensions
-interface DrawerContextType {
-    containerWidth: number;
-    setContainerWidth: React.Dispatch<React.SetStateAction<number>>;
-}
-
-const DrawerContext = React.createContext<DrawerContextType | undefined>(undefined);
-
-// Custom hook to use the drawer context
-const useDrawerContext = () => {
-    const context = React.useContext(DrawerContext);
-    if (context === undefined) {
-        return {containerWidth: 0, setContainerWidth: () => {}};
-    }
-    return context;
-};
-
-interface ContentWrapperProps {
+interface DrawerPaneContentWrapperProps {
     isVisible: boolean;
     onClose: () => void;
     children: React.ReactNode;
@@ -41,7 +26,7 @@ interface ContentWrapperProps {
     isPercentageWidth?: boolean;
 }
 
-const ContentWrapper = ({
+const DrawerPaneContentWrapper = ({
     isVisible,
     onClose,
     children,
@@ -52,7 +37,7 @@ const ContentWrapper = ({
     className,
     detectClickOutside = false,
     isPercentageWidth,
-}: ContentWrapperProps) => {
+}: DrawerPaneContentWrapperProps) => {
     const [drawerWidth, setDrawerWidth] = React.useState(() => {
         const savedWidth = localStorage.getItem(storageKey);
         return savedWidth ? Number(savedWidth) : defaultWidth;
@@ -126,12 +111,7 @@ const ContentWrapper = ({
     );
 };
 
-interface ContainerProps {
-    children: React.ReactNode;
-    className?: string;
-}
-
-interface ItemWrapperProps {
+interface DrawerPaneProps {
     children: React.ReactNode;
     renderDrawerContent: () => React.ReactNode;
     isDrawerVisible: boolean;
@@ -145,80 +125,40 @@ interface ItemWrapperProps {
     isPercentageWidth?: boolean;
 }
 
-export const Drawer = {
-    Container: ({children, className}: ContainerProps) => {
-        const [containerWidth, setContainerWidth] = React.useState(0);
-        const containerRef = React.useRef<HTMLDivElement>(null);
-
-        React.useEffect(() => {
-            if (!containerRef.current) {
-                return undefined;
-            }
-
-            const updateWidth = () => {
-                if (containerRef.current) {
-                    setContainerWidth(containerRef.current.clientWidth);
-                }
-            };
-
-            // Set initial width
-            updateWidth();
-
-            // Update width on resize
-            const resizeObserver = new ResizeObserver(updateWidth);
-            resizeObserver.observe(containerRef.current);
-
-            return () => {
-                if (containerRef.current) {
-                    resizeObserver.disconnect();
-                }
-            };
-        }, []);
-
-        return (
-            <DrawerContext.Provider value={{containerWidth, setContainerWidth}}>
-                <div ref={containerRef} className={b('drawer-container', className)}>
-                    {children}
-                </div>
-            </DrawerContext.Provider>
-        );
-    },
-
-    ItemWrapper: ({
-        children,
-        renderDrawerContent,
-        isDrawerVisible,
-        onCloseDrawer,
-        drawerId,
-        storageKey,
-        defaultWidth,
-        direction,
-        className,
-        detectClickOutside,
-        isPercentageWidth,
-    }: ItemWrapperProps) => {
-        React.useEffect(() => {
-            return () => {
-                onCloseDrawer();
-            };
-        }, [onCloseDrawer]);
-        return (
-            <React.Fragment>
-                {children}
-                <ContentWrapper
-                    isVisible={isDrawerVisible}
-                    onClose={onCloseDrawer}
-                    drawerId={drawerId}
-                    storageKey={storageKey}
-                    defaultWidth={defaultWidth}
-                    direction={direction}
-                    className={className}
-                    detectClickOutside={detectClickOutside}
-                    isPercentageWidth={isPercentageWidth}
-                >
-                    {renderDrawerContent()}
-                </ContentWrapper>
-            </React.Fragment>
-        );
-    },
+export const DrawerWrapper = ({
+    children,
+    renderDrawerContent,
+    isDrawerVisible,
+    onCloseDrawer,
+    drawerId,
+    storageKey,
+    defaultWidth,
+    direction,
+    className,
+    detectClickOutside,
+    isPercentageWidth,
+}: DrawerPaneProps) => {
+    React.useEffect(() => {
+        return () => {
+            onCloseDrawer();
+        };
+    }, [onCloseDrawer]);
+    return (
+        <React.Fragment>
+            {children}
+            <DrawerPaneContentWrapper
+                isVisible={isDrawerVisible}
+                onClose={onCloseDrawer}
+                drawerId={drawerId}
+                storageKey={storageKey}
+                defaultWidth={defaultWidth}
+                direction={direction}
+                className={className}
+                detectClickOutside={detectClickOutside}
+                isPercentageWidth={isPercentageWidth}
+            >
+                {renderDrawerContent()}
+            </DrawerPaneContentWrapper>
+        </React.Fragment>
+    );
 };

src/containers/Drawer/Drawer.tsx renamed to src/components/Drawer/Drawer.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+
+import {cn} from '../../utils/cn';
+
+const b = cn('ydb-drawer');
+
+export interface DrawerContextType {
+    containerWidth: number;
+    setContainerWidth: React.Dispatch<React.SetStateAction<number>>;
+}
+
+const DrawerContext = React.createContext<DrawerContextType>({
+    containerWidth: 0,
+    setContainerWidth: () => {},
+});
+
+interface DrawerContextProviderProps {
+    children: React.ReactNode;
+    className?: string;
+}
+
+export const DrawerContextProvider = ({children, className}: DrawerContextProviderProps) => {
+    const [containerWidth, setContainerWidth] = React.useState(0);
+    const containerRef = React.useRef<HTMLDivElement>(null);
+
+    React.useEffect(() => {
+        if (!containerRef.current) {
+            return undefined;
+        }
+
+        const updateWidth = () => {
+            if (containerRef.current) {
+                setContainerWidth(containerRef.current.clientWidth);
+            }
+        };
+
+        // Set initial width
+        updateWidth();
+
+        // Update width on resize
+        const resizeObserver = new ResizeObserver(updateWidth);
+        resizeObserver.observe(containerRef.current);
+
+        return () => {
+            if (containerRef.current) {
+                resizeObserver.disconnect();
+            }
+        };
+    }, []);
+
+    // Memoize the context value to prevent unnecessary re-renders
+    const value = React.useMemo(
+        () => ({
+            containerWidth,
+            setContainerWidth,
+        }),
+        [containerWidth],
+    );
+
+    return (
+        <DrawerContext.Provider value={value}>
+            <div ref={containerRef} className={b('drawer-container', className)}>
+                {children}
+            </div>
+        </DrawerContext.Provider>
+    );
+};
+
+export const useDrawerContext = (): DrawerContextType => {
+    const context = React.useContext(DrawerContext);
+
+    if (context === undefined) {
+        throw Error('useDrawerContext must be used within a DrawerContextProvider');
+    }
+
+    return context;
+};

src/components/Drawer/DrawerContext.tsx

@@ -0,0 +1,3 @@
+export {DrawerWrapper} from './Drawer';
+export {useDrawerContext} from './DrawerContext';
+export type {DrawerContextType} from './DrawerContext';

src/components/Drawer/index.ts

@@ -6,14 +6,14 @@ import {Link} from 'react-router-dom';
 import {StringParam, useQueryParams} from 'use-query-params';
 
 import {AutoRefreshControl} from '../../../components/AutoRefreshControl/AutoRefreshControl';
+import {DrawerContextProvider} from '../../../components/Drawer/DrawerContext';
 import {useFeatureFlagsAvailable} from '../../../store/reducers/capabilities/hooks';
 import {TENANT_DIAGNOSTICS_TABS_IDS} from '../../../store/reducers/tenant/constants';
 import {setDiagnosticsTab} from '../../../store/reducers/tenant/tenant';
 import type {AdditionalNodesProps, AdditionalTenantsProps} from '../../../types/additionalProps';
 import type {EPathType} from '../../../types/api/schema';
 import {cn} from '../../../utils/cn';
 import {useTypedDispatch, useTypedSelector} from '../../../utils/hooks';
-import {Drawer} from '../../Drawer/Drawer';
 import {Heatmap} from '../../Heatmap';
 import {Nodes} from '../../Nodes/Nodes';
 import {Operations} from '../../Operations';
@@ -195,11 +195,11 @@ function Diagnostics(props: DiagnosticsProps) {
                 </Helmet>
             ) : null}
             {renderTabs()}
-            <Drawer.Container>
+            <DrawerContextProvider>
                 <div className={b('page-wrapper')} ref={containerRef}>
                     {renderTabContent()}
                 </div>
-            </Drawer.Container>
+            </DrawerContextProvider>
         </div>
     );
 }