refactor(Nodes): migrate reducer to ts

Author: artemmufazalov

src/components/UptimeFIlter/UptimeFilter.tsx

@@ -3,13 +3,14 @@ import {RadioButton} from '@gravity-ui/uikit';
 import {NodesUptimeFilterValues, NodesUptimeFilterTitles} from '../../utils/nodes';
 
 interface UptimeFilterProps {
-    value: keyof typeof NodesUptimeFilterValues;
+    value: NodesUptimeFilterValues;
     onChange: (value: string) => void;
+    className?: string;
 }
 
-export const UptimeFilter = ({value, onChange}: UptimeFilterProps) => {
+export const UptimeFilter = ({value, onChange, className}: UptimeFilterProps) => {
     return (
-        <RadioButton value={value} onUpdate={onChange}>
+        <RadioButton value={value} onUpdate={onChange} className={className}>
             <RadioButton.Option value={NodesUptimeFilterValues.All}>
                 {NodesUptimeFilterTitles[NodesUptimeFilterValues.All]}
             </RadioButton.Option>

src/store/reducers/nodes.js renamed to src/store/reducers/nodes.ts

@@ -1,8 +1,12 @@
-import {createRequestActionTypes, createApiRequest} from '../utils';
+import type {Reducer} from 'redux';
+
 import '../../services/api';
 import {NodesUptimeFilterValues} from '../../utils/nodes';
+import {INodesAction, INodesRootStateSlice, INodesState} from '../../types/store/nodes';
+
+import {createRequestActionTypes, createApiRequest} from '../utils';
 
-const FETCH_NODES = createRequestActionTypes('nodes', 'FETCH_NODES');
+export const FETCH_NODES = createRequestActionTypes('nodes', 'FETCH_NODES');
 
 const CLEAR_NODES = 'nodes/CLEAR_NODES';
 const SET_NODES_UPTIME_FILTER = 'nodes/SET_NODES_UPTIME_FILTER';
@@ -14,13 +18,12 @@ const initialState = {
     nodesUptimeFilter: NodesUptimeFilterValues.All,
 };
 
-const nodes = (state = initialState, action) => {
+const nodes: Reducer<INodesState, INodesAction> = (state = initialState, action) => {
     switch (action.type) {
         case FETCH_NODES.REQUEST: {
             return {
                 ...state,
                 loading: true,
-                requestTime: new Date().getTime(),
             };
         }
         case FETCH_NODES.SUCCESS: {
@@ -45,13 +48,15 @@ const nodes = (state = initialState, action) => {
                 loading: true,
                 data: undefined,
                 wasLoaded: false,
-                requestTime: new Date().getTime(),
                 error: undefined,
             };
         }
 
         case SET_NODES_UPTIME_FILTER: {
-            return {...state, nodesUptimeFilter: action.data};
+            return {
+                ...state,
+                nodesUptimeFilter: action.data,
+            };
         }
         case SET_DATA_WAS_NOT_LOADED: {
             return {
@@ -64,26 +69,27 @@ const nodes = (state = initialState, action) => {
     }
 };
 
-export function getNodes(path) {
+export function getNodes(path: string) {
     return createApiRequest({
         request: window.api.getNodes(path),
         actions: FETCH_NODES,
     });
 }
 
-export const clearNodes = () => ({type: CLEAR_NODES});
+export const clearNodes = () => ({type: CLEAR_NODES} as const);
 
-export const setNodesUptimeFilter = (value) => ({
-    type: SET_NODES_UPTIME_FILTER,
-    data: value,
-});
+export const setNodesUptimeFilter = (value: NodesUptimeFilterValues) =>
+    ({
+        type: SET_NODES_UPTIME_FILTER,
+        data: value,
+    } as const);
 
 export const setDataWasNotLoaded = () => {
     return {
         type: SET_DATA_WAS_NOT_LOADED,
-    };
+    } as const;
 };
 
-export const getNodesUptimeFilter = (state) => state.nodes.nodesUptimeFilter;
+export const getNodesUptimeFilter = (state: INodesRootStateSlice) => state.nodes.nodesUptimeFilter;
 
 export default nodes;

src/types/api/nodes.ts

@@ -12,7 +12,7 @@ export interface TNodesInfo {
     FoundNodes: string;
 }
 
-interface TNodeInfo {
+export interface TNodeInfo {
     NodeId: number;
     SystemState: TSystemStateInfo;
     PDisks?: TPDiskStateInfo[];

src/types/store/nodes.ts

@@ -0,0 +1,32 @@
+import {NodesUptimeFilterValues} from '../../utils/nodes';
+import {
+    FETCH_NODES,
+    clearNodes,
+    setDataWasNotLoaded,
+    setNodesUptimeFilter,
+} from '../../store/reducers/nodes';
+import {ApiRequestAction} from '../../store/utils';
+import {IResponseError} from '../api/error';
+import {TNodesInfo} from '../api/nodes';
+
+export interface INodesState {
+    loading: boolean;
+    wasLoaded: boolean;
+    nodesUptimeFilter: NodesUptimeFilterValues;
+    data?: TNodesInfo;
+    error?: IResponseError;
+}
+
+type INodesApiRequestAction = ApiRequestAction<typeof FETCH_NODES, TNodesInfo, IResponseError>;
+
+export type INodesAction =
+    | INodesApiRequestAction
+    | (
+          | ReturnType<typeof clearNodes>
+          | ReturnType<typeof setDataWasNotLoaded>
+          | ReturnType<typeof setNodesUptimeFilter>
+      );
+
+export interface INodesRootStateSlice {
+    nodes: INodesState;
+}

src/utils/nodes.ts

@@ -1,7 +1,7 @@
-export const NodesUptimeFilterValues = {
-    All: 'All',
-    SmallUptime: 'SmallUptime',
-};
+export enum NodesUptimeFilterValues {
+    'All' = 'All',
+    'SmallUptime' = 'SmallUptime',
+}
 
 export const NodesUptimeFilterTitles = {
     [NodesUptimeFilterValues.All]: 'All',