fix: small refactoring

Author: astandrik

src/components/PaginatedTable/PaginatedTable.tsx

@@ -32,7 +32,7 @@ export interface PaginatedTableProps<T, F> {
     columns: Column<T>[];
     getRowClassName?: GetRowClassName<T>;
     rowHeight?: number;
-    parentRef?: React.RefObject<HTMLElement> | null;
+    parentRef?: React.RefObject<HTMLElement>;
     initialSortParams?: SortParams;
     onColumnsResize?: HandleTableColumnsResize;
     renderControls?: RenderControls;

src/components/PaginatedTable/useScrollBasedChunks.ts

@@ -2,60 +2,65 @@ import React from 'react';
 
 import {throttle} from 'lodash';
 
+import {getArray} from '../../utils';
+
 interface UseScrollBasedChunksProps {
-    containerRef: React.RefObject<HTMLElement> | null;
+    containerRef: React.RefObject<HTMLElement>;
     totalItems: number;
     itemHeight: number;
     chunkSize: number;
 }
 
-const THROTTLING_TIMEOUT = 100;
+const THROTTLE_DELAY = 100;
 
 export const useScrollBasedChunks = ({
     containerRef,
     totalItems,
     itemHeight,
     chunkSize,
-}: UseScrollBasedChunksProps) => {
+}: UseScrollBasedChunksProps): number[] => {
     const [activeChunks, setActiveChunks] = React.useState<number[]>([0]);
 
-    const handleScroll = React.useCallback(() => {
-        if (!containerRef?.current) {
+    const calculateActiveChunks = React.useCallback(() => {
+        const container = containerRef.current;
+        if (!container) {
             return;
         }
 
-        const {scrollTop, clientHeight} = containerRef.current;
-
+        const {scrollTop, clientHeight} = container;
         const visibleStartIndex = Math.floor(scrollTop / itemHeight);
         const visibleEndIndex = Math.min(
             Math.ceil((scrollTop + clientHeight) / itemHeight),
-            Math.max(totalItems - 1, 0),
+            totalItems - 1,
         );
 
         const startChunk = Math.floor(visibleStartIndex / chunkSize);
         const endChunk = Math.floor(visibleEndIndex / chunkSize);
 
-        const newActiveChunks = Array.from(
-            {length: endChunk - startChunk + 1},
-            (_, index) => startChunk + index,
+        const newActiveChunks = getArray(endChunk - startChunk + 1).map(
+            (index) => startChunk + index,
         );
 
         setActiveChunks(newActiveChunks);
     }, [chunkSize, containerRef, itemHeight, totalItems]);
 
+    const throttledCalculateActiveChunks = React.useMemo(
+        () => throttle(calculateActiveChunks, THROTTLE_DELAY),
+        [calculateActiveChunks],
+    );
+
     React.useEffect(() => {
-        const containerElement = containerRef?.current;
-        if (!containerElement) {
+        const container = containerRef.current;
+        if (!container) {
             return undefined;
         }
 
-        const throttledHandleScroll = throttle(handleScroll, THROTTLING_TIMEOUT);
-        containerElement.addEventListener('scroll', throttledHandleScroll);
-
+        container.addEventListener('scroll', throttledCalculateActiveChunks);
         return () => {
-            containerElement.removeEventListener('scroll', throttledHandleScroll);
+            container.removeEventListener('scroll', throttledCalculateActiveChunks);
+            throttledCalculateActiveChunks.cancel();
         };
-    }, [containerRef, handleScroll]);
+    }, [containerRef, throttledCalculateActiveChunks]);
 
     return activeChunks;
 };

src/containers/Nodes/PaginatedNodes.tsx

@@ -44,7 +44,7 @@ const b = cn('ydb-nodes');
 interface NodesProps {
     path?: string;
     database?: string;
-    parentRef?: React.RefObject<HTMLElement> | null;
+    parentRef?: React.RefObject<HTMLElement>;
     additionalNodesProps?: AdditionalNodesProps;
 }
 

src/containers/Storage/PaginatedStorage.tsx

@@ -12,7 +12,7 @@ export interface PaginatedStorageProps {
 
     viewContext: StorageViewContext;
 
-    parentRef?: React.RefObject<HTMLElement> | null;
+    parentRef?: React.RefObject<HTMLElement>;
 
     initialEntitiesCount?: number;
 }

src/containers/Storage/StorageGroups/PaginatedStorageGroupsTable.tsx

@@ -32,7 +32,7 @@ interface PaginatedStorageGroupsTableProps {
     visibleEntities: VisibleEntities;
     onShowAll: VoidFunction;
 
-    parentRef?: React.RefObject<HTMLElement> | null;
+    parentRef?: React.RefObject<HTMLElement>;
     renderControls?: RenderControls;
     renderErrorMessage: RenderErrorMessage;
     initialEntitiesCount?: number;

src/containers/Storage/StorageNodes/PaginatedStorageNodesTable.tsx

@@ -29,7 +29,7 @@ interface PaginatedStorageNodesTableProps {
     nodesUptimeFilter: NodesUptimeFilterValues;
     onShowAll: VoidFunction;
 
-    parentRef?: React.RefObject<HTMLElement> | null;
+    parentRef?: React.RefObject<HTMLElement>;
     renderControls?: RenderControls;
     renderErrorMessage: RenderErrorMessage;
     initialEntitiesCount?: number;

src/containers/Storage/StorageWrapper.tsx

@@ -11,7 +11,7 @@ interface StorageWrapperProps {
     pDiskId?: string | number;
     groupId?: string | number;
     vDiskSlotId?: string | number;
-    parentRef?: React.RefObject<HTMLElement> | null;
+    parentRef?: React.RefObject<HTMLElement>;
 }
 
 export const StorageWrapper = ({parentRef, ...props}: StorageWrapperProps) => {