refactor(Node): useTypedSelector (#424)

Author: artemmufazalov

src/containers/Node/Node.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {useRouteMatch} from 'react-router';
 import cn from 'bem-cn-lite';
-import {useDispatch, useSelector} from 'react-redux';
+import {useDispatch} from 'react-redux';
 import _ from 'lodash';
 
 import {Tabs} from '@gravity-ui/uikit';
@@ -19,6 +19,7 @@ import {getNodeInfo, resetNode} from '../../store/reducers/node/node';
 import routes, {createHref} from '../../routes';
 import {HeaderItemType, setHeader} from '../../store/reducers/header';
 import {AutoFetcher} from '../../utils/autofetcher';
+import {useTypedSelector} from '../../utils/hooks';
 import {clusterTabsIds, getClusterPath} from '../Cluster/utils';
 
 import './Node.scss';
@@ -37,12 +38,8 @@ interface NodeProps {
 function Node(props: NodeProps) {
     const dispatch = useDispatch();
 
-    const wasLoaded = useSelector((state: any) => state.node.wasLoaded);
-    const loading = useSelector((state: any) => state.node.loading);
-    const error = useSelector((state: any) => state.node.error);
-
-    const node = useSelector((state: any) => state.node?.data?.SystemStateInfo?.[0]);
-
+    const {loading, wasLoaded, error, data} = useTypedSelector((state) => state.node);
+    const node = data?.SystemStateInfo?.[0];
     const nodeHost = node?.Host;
 
     const match =

src/containers/Node/NodePages.ts

@@ -1,4 +1,4 @@
-import routes, {createHref} from '../../routes';
+import routes, {Query, createHref} from '../../routes';
 
 export const STORAGE = 'storage';
 export const TABLETS = 'tablets';
@@ -21,9 +21,13 @@ export const NODE_PAGES = [
     },
 ];
 
-export function getDefaultNodePath(nodeId: string | number) {
-    return createHref(routes.node, {
-        id: nodeId,
-        activeTab: OVERVIEW,
-    });
+export function getDefaultNodePath(nodeId: string | number, query: Query = {}) {
+    return createHref(
+        routes.node,
+        {
+            id: nodeId,
+            activeTab: OVERVIEW,
+        },
+        query,
+    );
 }

src/routes.ts

@@ -13,10 +13,12 @@ const routes = {
     auth: '/auth',
 };
 
+export type Query = Record<string | number, string | number | string[] | number[] | undefined>;
+
 export function createHref(
     route: string,
     params?: Record<string, string | number>,
-    query: Record<string | number, string | number | string[] | number[] | undefined> = {},
+    query: Query = {},
 ) {
     let extendedQuery = query;
 

src/store/reducers/node/types.ts

@@ -28,10 +28,12 @@ export interface NodeState {
     data: TEvSystemStateResponse;
     loading: boolean;
     wasLoaded: boolean;
+    error?: IResponseError;
 
     nodeStructure: TStorageInfo;
     loadingStructure: boolean;
     wasLoadedStructure: boolean;
+    errorStructure?: IResponseError;
 }
 
 export type NodeAction =