This repository has been archived by the owner on Dec 5, 2022. It is now read-only.
/
NavProtoItem.tsx
100 lines (86 loc) · 2.76 KB
/
NavProtoItem.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
import { MethodDefinition } from '@grpc/proto-loader';
import * as React from 'react';
import { connect } from 'react-redux';
import logger from '../../libs/logger';
import { IProto } from '../../types/protos';
import {
NavProtoItemContainer,
NavProtoItemHeader,
NavProtoItemHeaderContainer,
NavProtoItemHeaderIcon,
NavProtoItemServicesItem,
NavProtoItemServicesList,
} from './NavProtoList.components';
import { INotification, notificationTypes } from '../../types/layout';
import { addNotification } from '../../store/layout/layout.actions';
import { removeProtoFromProject } from '../../store/projects/projects.actions';
import cuid = require('cuid');
export interface INavProtoItemProps {
newTabHandler: (
e: React.MouseEvent,
proto: IProto,
service: MethodDefinition<{}, {}>
) => void;
notify: (item: INotification) => void
proto: IProto;
removeProto: (proto: IProto) => void
}
const handleRemoveProto = (
proto: IProto, removeProto: (proto: IProto) => void, notify: (item: INotification) => void,
) => {
removeProto(proto);
notify({
id: cuid(),
message: `"${proto.name}" deleted`,
title: 'Deleted',
type: notificationTypes.success,
});
};
const NavProtoItem: React.SFC<INavProtoItemProps> = ({
proto, newTabHandler, notify, removeProto,
}) => {
const { pkgDef } = proto;
if (!pkgDef) {
logger.error('Package definitions not present in proto definition');
return null;
}
// Service name
const pkgIndex = Object.keys(pkgDef)[0];
const pkgName = (pkgIndex.match(/\.[^.]*$/) || [''])[0].replace('.', '');
const servicesObj = pkgDef[pkgIndex];
const services = Object.keys(servicesObj)
.map(key => servicesObj[key])
.sort((a, b) => {
const aName = a.originalName || '';
const bName = b.originalName || '';
return aName.localeCompare(bName, 'en', {
sensitivity: 'base',
});
});
return (
<NavProtoItemContainer>
<NavProtoItemHeaderContainer>
<NavProtoItemHeader>{pkgName}</NavProtoItemHeader>
<NavProtoItemHeaderIcon
className="ti-trash"
onClick={() => handleRemoveProto(proto, removeProto, notify)}
/>
</NavProtoItemHeaderContainer>
<NavProtoItemServicesList>
{services.map(service => (
<NavProtoItemServicesItem
key={service.originalName}
onClick={e => newTabHandler(e, proto, service)}
>
{service.originalName}
</NavProtoItemServicesItem>
))}
</NavProtoItemServicesList>
</NavProtoItemContainer>
);
};
const mapDispatchToProps = {
notify: (item: INotification) => addNotification(item),
removeProto: (proto: IProto) => removeProtoFromProject(proto),
};
export default connect(null, mapDispatchToProps)(NavProtoItem);