Skip to content

Commit 64847a6

Browse files
refactor(Tooltip): migrate reducer to ts
1 parent f365dd8 commit 64847a6

File tree

5 files changed

+62
-22
lines changed

5 files changed

+62
-22
lines changed

src/components/ClusterInfo/ClusterInfo.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ interface ClusterInfoProps {
5858
className?: string;
5959
cluster?: ICluster;
6060
hideTooltip: VoidFunction;
61-
showTooltip: VoidFunction;
61+
showTooltip: Function;
6262
setHeader: any;
6363
getClusterInfo: (clusterName: string) => void;
6464
clusterTitle?: string;

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

Lines changed: 28 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,38 @@
1-
import {toolTipConstants} from '../../utils/actionsConstants';
1+
import isEqual from 'lodash/isEqual';
2+
import type {Reducer} from 'redux';
3+
24
import {tooltipTemplates} from '../../utils/tooltip';
3-
import _ from 'lodash';
45

5-
const initialState = {
6+
import {
7+
ITooltipAction,
8+
ITooltipPositions,
9+
ITooltipState,
10+
ITooltipTemplateType,
11+
} from '../../types/store/tooltip';
12+
13+
const HIDE_TOOLTIP = 'tooltip/HIDE_TOOLTIP';
14+
const UPDATE_REF = 'tooltip/UPDATE_REF';
15+
16+
const initialState: ITooltipState = {
617
toolTipVisible: false,
718
currentHoveredRef: undefined,
819
data: undefined,
920
templateType: 'pool',
1021
template: tooltipTemplates['pool'],
1122
};
1223

13-
const tooltip = (state = initialState, action) => {
24+
const tooltip: Reducer<ITooltipState, ITooltipAction> = (state = initialState, action) => {
1425
switch (action.type) {
15-
case toolTipConstants.HIDE_TOOLTIP: {
26+
case HIDE_TOOLTIP: {
1627
return {
1728
...state,
1829
currentHoveredRef: undefined,
1930
toolTipVisible: false,
2031
};
2132
}
2233

23-
case toolTipConstants.UPDATE_REF: {
24-
if (action.templateType === 'cell' && _.isEqual(action.node, state.currentHoveredRef)) {
34+
case UPDATE_REF: {
35+
if (action.templateType === 'cell' && isEqual(action.node, state.currentHoveredRef)) {
2536
return {
2637
...state,
2738
currentHoveredRef: undefined,
@@ -36,7 +47,7 @@ const tooltip = (state = initialState, action) => {
3647
positions: action.positions,
3748
data: action.data,
3849
additionalData: action.additionalData,
39-
type: action.templateType,
50+
templateType: action.templateType,
4051
template: tooltipTemplates[action.templateType],
4152
};
4253
}
@@ -47,12 +58,18 @@ const tooltip = (state = initialState, action) => {
4758
};
4859

4960
export const hideTooltip = () => {
50-
return {type: toolTipConstants.HIDE_TOOLTIP};
61+
return {type: HIDE_TOOLTIP} as const;
5162
};
5263

53-
export const showTooltip = (node, data, templateType, additionalData, positions) => {
64+
export const showTooltip = (
65+
node: EventTarget,
66+
data: any,
67+
templateType: ITooltipTemplateType,
68+
additionalData?: any,
69+
positions?: ITooltipPositions,
70+
) => {
5471
return {
55-
type: toolTipConstants.UPDATE_REF,
72+
type: UPDATE_REF,
5673
node,
5774
data,
5875
templateType,

src/types/store/tooltip.ts

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import {hideTooltip, showTooltip} from '../../store/reducers/tooltip';
2+
import {tooltipTemplates} from '../../utils/tooltip';
3+
4+
export type ITooltipTemplateType = keyof typeof tooltipTemplates;
5+
6+
export interface ITooltipPositions {
7+
left: number;
8+
top: number;
9+
}
10+
11+
export interface ITooltipState {
12+
toolTipVisible: boolean;
13+
positions?: ITooltipPositions;
14+
currentHoveredRef?: EventTarget;
15+
template: (data: any) => JSX.Element;
16+
templateType: ITooltipTemplateType;
17+
data?: any;
18+
additionalData?: any;
19+
}
20+
21+
export type ITooltipAction = ReturnType<typeof hideTooltip> | ReturnType<typeof showTooltip>;
22+
23+
export interface ITooltipRootStateSlice {
24+
tooltip: ITooltipState;
25+
}

src/utils/actionsConstants.js

Lines changed: 0 additions & 4 deletions
This file was deleted.

src/utils/tooltip.js

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -122,12 +122,14 @@ const NodeEndpointsTooltip = (props) => {
122122
<td className={nodeB('value')}>{data.Rack}</td>
123123
</tr>
124124
)}
125-
{data.Endpoints && data.Endpoints.length && data.Endpoints.map(({Name, Address}) => (
126-
<tr key={Name}>
127-
<td className={nodeB('label')}>{Name}</td>
128-
<td className={nodeB('value')}>{Address}</td>
129-
</tr>
130-
))}
125+
{data.Endpoints &&
126+
data.Endpoints.length &&
127+
data.Endpoints.map(({Name, Address}) => (
128+
<tr key={Name}>
129+
<td className={nodeB('label')}>{Name}</td>
130+
<td className={nodeB('value')}>{Address}</td>
131+
</tr>
132+
))}
131133
</tbody>
132134
</table>
133135
</div>

0 commit comments

Comments
 (0)