refactor(Tooltip): migrate reducer to ts

Author: artemmufazalov

src/components/ClusterInfo/ClusterInfo.tsx

@@ -58,7 +58,7 @@ interface ClusterInfoProps {
     className?: string;
     cluster?: ICluster;
     hideTooltip: VoidFunction;
-    showTooltip: VoidFunction;
+    showTooltip: Function;
     setHeader: any;
     getClusterInfo: (clusterName: string) => void;
     clusterTitle?: string;

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

@@ -1,27 +1,38 @@
-import {toolTipConstants} from '../../utils/actionsConstants';
+import isEqual from 'lodash/isEqual';
+import type {Reducer} from 'redux';
+
 import {tooltipTemplates} from '../../utils/tooltip';
-import _ from 'lodash';
 
-const initialState = {
+import {
+    ITooltipAction,
+    ITooltipPositions,
+    ITooltipState,
+    ITooltipTemplateType,
+} from '../../types/store/tooltip';
+
+const HIDE_TOOLTIP = 'tooltip/HIDE_TOOLTIP';
+const UPDATE_REF = 'tooltip/UPDATE_REF';
+
+const initialState: ITooltipState = {
     toolTipVisible: false,
     currentHoveredRef: undefined,
     data: undefined,
     templateType: 'pool',
     template: tooltipTemplates['pool'],
 };
 
-const tooltip = (state = initialState, action) => {
+const tooltip: Reducer<ITooltipState, ITooltipAction> = (state = initialState, action) => {
     switch (action.type) {
-        case toolTipConstants.HIDE_TOOLTIP: {
+        case HIDE_TOOLTIP: {
             return {
                 ...state,
                 currentHoveredRef: undefined,
                 toolTipVisible: false,
             };
         }
 
-        case toolTipConstants.UPDATE_REF: {
-            if (action.templateType === 'cell' && _.isEqual(action.node, state.currentHoveredRef)) {
+        case UPDATE_REF: {
+            if (action.templateType === 'cell' && isEqual(action.node, state.currentHoveredRef)) {
                 return {
                     ...state,
                     currentHoveredRef: undefined,
@@ -36,7 +47,7 @@ const tooltip = (state = initialState, action) => {
                 positions: action.positions,
                 data: action.data,
                 additionalData: action.additionalData,
-                type: action.templateType,
+                templateType: action.templateType,
                 template: tooltipTemplates[action.templateType],
             };
         }
@@ -47,12 +58,18 @@ const tooltip = (state = initialState, action) => {
 };
 
 export const hideTooltip = () => {
-    return {type: toolTipConstants.HIDE_TOOLTIP};
+    return {type: HIDE_TOOLTIP} as const;
 };
 
-export const showTooltip = (node, data, templateType, additionalData, positions) => {
+export const showTooltip = (
+    node: EventTarget,
+    data: any,
+    templateType: ITooltipTemplateType,
+    additionalData?: any,
+    positions?: ITooltipPositions,
+) => {
     return {
-        type: toolTipConstants.UPDATE_REF,
+        type: UPDATE_REF,
         node,
         data,
         templateType,

src/types/store/tooltip.ts

@@ -0,0 +1,25 @@
+import {hideTooltip, showTooltip} from '../../store/reducers/tooltip';
+import {tooltipTemplates} from '../../utils/tooltip';
+
+export type ITooltipTemplateType = keyof typeof tooltipTemplates;
+
+export interface ITooltipPositions {
+    left: number;
+    top: number;
+}
+
+export interface ITooltipState {
+    toolTipVisible: boolean;
+    positions?: ITooltipPositions;
+    currentHoveredRef?: EventTarget;
+    template: (data: any) => JSX.Element;
+    templateType: ITooltipTemplateType;
+    data?: any;
+    additionalData?: any;
+}
+
+export type ITooltipAction = ReturnType<typeof hideTooltip> | ReturnType<typeof showTooltip>;
+
+export interface ITooltipRootStateSlice {
+    tooltip: ITooltipState;
+}

src/utils/actionsConstants.js

@@ -122,12 +122,14 @@ const NodeEndpointsTooltip = (props) => {
                                 <td className={nodeB('value')}>{data.Rack}</td>
                             </tr>
                         )}
-                        {data.Endpoints && data.Endpoints.length && data.Endpoints.map(({Name, Address}) => (
-                            <tr key={Name}>
-                                <td className={nodeB('label')}>{Name}</td>
-                                <td className={nodeB('value')}>{Address}</td>
-                            </tr>
-                        ))}
+                        {data.Endpoints &&
+                            data.Endpoints.length &&
+                            data.Endpoints.map(({Name, Address}) => (
+                                <tr key={Name}>
+                                    <td className={nodeB('label')}>{Name}</td>
+                                    <td className={nodeB('value')}>{Address}</td>
+                                </tr>
+                            ))}
                     </tbody>
                 </table>
             </div>