refactor: migrate node reducer to ts (#414)

Author: artemmufazalov

src/containers/Node/Node.tsx

@@ -15,7 +15,7 @@ import NodeStructure from './NodeStructure/NodeStructure';
 import {Loader} from '../../components/Loader';
 import {BasicNodeViewer} from '../../components/BasicNodeViewer';
 
-import {getNodeInfo, resetNode} from '../../store/reducers/node';
+import {getNodeInfo, resetNode} from '../../store/reducers/node/node';
 import routes, {CLUSTER_PAGES, createHref} from '../../routes';
 import {setHeader} from '../../store/reducers/header';
 import {AutoFetcher} from '../../utils/autofetcher';

src/containers/Node/NodeStructure/NodeStructure.tsx

@@ -1,16 +1,19 @@
 import {useEffect, useRef, useMemo} from 'react';
-import {useDispatch, useSelector} from 'react-redux';
+import {useDispatch} from 'react-redux';
 import url from 'url';
 import _ from 'lodash';
 
 import cn from 'bem-cn-lite';
 
-import {PDisk} from './Pdisk';
 import {Loader} from '../.././../components/Loader';
 
-import {getNodeStructure, selectNodeStructure} from '../../../store/reducers/node';
+import {getNodeStructure} from '../../../store/reducers/node/node';
+import {selectNodeStructure} from '../../../store/reducers/node/selectors';
 
 import {AutoFetcher} from '../../../utils/autofetcher';
+import {useTypedSelector} from '../../../utils/hooks';
+
+import {PDisk} from './Pdisk';
 
 import './NodeStructure.scss';
 
@@ -32,20 +35,19 @@ interface NodeStructureProps {
 
 const autofetcher = new AutoFetcher();
 
-function NodeStructure(props: NodeStructureProps) {
+function NodeStructure({nodeId, className, additionalNodesInfo}: NodeStructureProps) {
     const dispatch = useDispatch();
 
-    const nodeStructure: any = useSelector(selectNodeStructure);
+    const nodeStructure = useTypedSelector(selectNodeStructure);
 
-    const loadingStructure = useSelector((state: any) => state.node.loadingStructure);
-    const wasLoadedStructure = useSelector((state: any) => state.node.wasLoadedStructure);
-    const nodeData = useSelector((state: any) => state.node?.data?.SystemStateInfo?.[0]);
+    const {loadingStructure, wasLoadedStructure} = useTypedSelector((state) => state.node);
+    const nodeData = useTypedSelector((state) => state.node?.data?.SystemStateInfo?.[0]);
 
     const nodeHref = useMemo(() => {
-        return props.additionalNodesInfo?.getNodeRef
-            ? props.additionalNodesInfo.getNodeRef(nodeData)
+        return additionalNodesInfo?.getNodeRef
+            ? additionalNodesInfo.getNodeRef(nodeData)
             : undefined;
-    }, [nodeData, props.additionalNodesInfo]);
+    }, [nodeData, additionalNodesInfo]);
 
     const {pdiskId: pdiskIdFromUrl, vdiskId: vdiskIdFromUrl} = url.parse(
         window.location.href,
@@ -71,16 +73,16 @@ function NodeStructure(props: NodeStructureProps) {
     }, []);
 
     useEffect(() => {
-        dispatch(getNodeStructure(props.nodeId));
+        dispatch(getNodeStructure(nodeId));
         autofetcher.start();
-        autofetcher.fetch(() => dispatch(getNodeStructure(props.nodeId)));
+        autofetcher.fetch(() => dispatch(getNodeStructure(nodeId)));
 
         return () => {
             scrolled.current = false;
             isReady.current = false;
             autofetcher.stop();
         };
-    }, [props.nodeId, dispatch]);
+    }, [nodeId, dispatch]);
 
     useEffect(() => {
         if (!_.isEmpty(nodeStructure) && scrollContainer) {
@@ -98,9 +100,9 @@ function NodeStructure(props: NodeStructureProps) {
 
             if (vdiskIdFromUrl) {
                 const vDisks = nodeStructure[pdiskIdFromUrl as string]?.vDisks;
-                const vDisk = vDisks?.find((el: any) => el.id === vdiskIdFromUrl);
+                const vDisk = vDisks?.find((el) => el.id === vdiskIdFromUrl);
                 const dataTable = vDisk ? document.querySelector('.data-table') : undefined;
-                const order = vDisk?.order;
+                const order = vDisk?.order || 0;
 
                 if (dataTable) {
                     scrollToVdisk += (dataTable as HTMLElement).offsetTop + 40 * order;
@@ -147,7 +149,7 @@ function NodeStructure(props: NodeStructureProps) {
 
     return (
         <div className={b()} ref={scrollContainerRef}>
-            <div className={props.className}>{renderContent()}</div>
+            <div className={className}>{renderContent()}</div>
         </div>
     );
 }

src/services/api.ts

@@ -99,8 +99,8 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
             filter,
             nodeId,
         }: {
-            tenant: string;
-            filter: string;
+            tenant?: string;
+            filter?: string;
             nodeId: string;
         },
         {concurrentId}: AxiosOptions = {},

src/store/reducers/index.ts

@@ -5,7 +5,7 @@ import cluster from './cluster/cluster';
 import clusterNodes from './clusterNodes/clusterNodes';
 import tenant from './tenant/tenant';
 import storage from './storage';
-import node from './node';
+import node from './node/node';
 import tooltip from './tooltip';
 import tablets from './tablets';
 import heatmap from './heatmap';

src/store/reducers/node.js

@@ -0,0 +1,102 @@
+import {Reducer} from 'redux';
+
+import '../../../services/api';
+import {createRequestActionTypes, createApiRequest} from '../../utils';
+
+import type {NodeAction, NodeState} from './types';
+
+export const FETCH_NODE = createRequestActionTypes('node', 'FETCH_NODE');
+export const FETCH_NODE_STRUCTURE = createRequestActionTypes('node', 'FETCH_NODE_STRUCTURE');
+
+const RESET_NODE = 'node/RESET_NODE';
+
+const initialState = {
+    data: {},
+    loading: true,
+    wasLoaded: false,
+    nodeStructure: {},
+    loadingStructure: true,
+    wasLoadedStructure: false,
+};
+
+const node: Reducer<NodeState, NodeAction> = (state = initialState, action) => {
+    switch (action.type) {
+        case FETCH_NODE.REQUEST: {
+            return {
+                ...state,
+                loading: true,
+            };
+        }
+        case FETCH_NODE.SUCCESS: {
+            return {
+                ...state,
+                data: action.data,
+                loading: false,
+                wasLoaded: true,
+                error: undefined,
+            };
+        }
+        case FETCH_NODE.FAILURE: {
+            return {
+                ...state,
+                error: action.error,
+                loading: false,
+            };
+        }
+        case FETCH_NODE_STRUCTURE.REQUEST: {
+            return {
+                ...state,
+                loadingStructure: true,
+            };
+        }
+        case FETCH_NODE_STRUCTURE.SUCCESS: {
+            return {
+                ...state,
+                nodeStructure: action.data,
+                loadingStructure: false,
+                wasLoadedStructure: true,
+                errorStructure: undefined,
+            };
+        }
+        case FETCH_NODE_STRUCTURE.FAILURE: {
+            return {
+                ...state,
+                errorStructure: action.error,
+                loadingStructure: false,
+            };
+        }
+        case RESET_NODE: {
+            return {
+                ...state,
+                data: {},
+                wasLoaded: false,
+                nodeStructure: {},
+                wasLoadedStructure: false,
+            };
+        }
+        default:
+            return state;
+    }
+};
+
+export const getNodeInfo = (id: string) => {
+    return createApiRequest({
+        request: window.api.getNodeInfo(id),
+        actions: FETCH_NODE,
+    });
+};
+
+export const getNodeStructure = (nodeId: string) => {
+    return createApiRequest({
+        request: window.api.getStorageInfo({nodeId}, {concurrentId: 'getNodeStructure'}),
+        actions: FETCH_NODE_STRUCTURE,
+    });
+};
+
+export function resetNode() {
+    return {
+        type: RESET_NODE,
+    } as const;
+}
+
+export default node;