/
index.jsx
119 lines (106 loc) · 3.43 KB
/
index.jsx
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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
import React, { Component } from 'react';
import { string, shape, func, arrayOf } from 'prop-types';
import { pipe, map, sort as rSort } from 'ramda';
import memoize from 'fast-memoize';
import { camelCase } from 'change-case/change-case';
import { ListItemText } from '@material-ui/core';
import TableRow from '@material-ui/core/TableRow';
import TableCell from '@material-ui/core/TableCell';
import LinkIcon from 'mdi-react/LinkIcon';
import TableCellItem from '../TableCellItem';
import sort from '../../utils/sort';
import ConnectionDataTable from '../ConnectionDataTable';
import { VIEW_ROLES_PAGE_SIZE } from '../../utils/constants';
import { pageInfo, role } from '../../utils/prop-types';
import Link from '../../utils/Link';
const sorted = pipe(
rSort((a, b) => sort(a.node.roleId, b.node.roleId)),
map(({ node: { roleId } }) => roleId)
);
const tableHeaders = ['Role ID'];
export default class RolesTable extends Component {
static defaultProps = {
searchTerm: null,
};
static propTypes = {
rolesConnection: shape({
edges: arrayOf(role),
pageInfo,
}).isRequired,
onPageChange: func.isRequired,
/** A search term to refine the list of roles */
searchTerm: string,
};
state = {
sortBy: tableHeaders[0],
sortDirection: 'asc',
};
createSortedRolesConnection = memoize(
(rolesConnection, sortBy, sortDirection) => {
const sortByProperty = camelCase(sortBy);
if (!sortBy) {
return rolesConnection;
}
return {
...rolesConnection,
edges: [...rolesConnection.edges].sort((a, b) => {
const firstElement =
sortDirection === 'desc'
? b.node[sortByProperty]
: a.node[sortByProperty];
const secondElement =
sortDirection === 'desc'
? a.node[sortByProperty]
: b.node[sortByProperty];
return sort(firstElement, secondElement);
}),
};
},
{
serializer: ([rolesConnection, sortBy, sortDirection]) => {
const ids = sorted(rolesConnection.edges);
return `${ids.join('-')}-${sortBy}-${sortDirection}`;
},
}
);
handleHeaderClick = sortBy => {
const toggled = this.state.sortDirection === 'desc' ? 'asc' : 'desc';
const sortDirection = this.state.sortBy === sortBy ? toggled : 'desc';
this.setState({ sortBy, sortDirection });
};
render() {
const { onPageChange, rolesConnection } = this.props;
const { sortBy, sortDirection } = this.state;
const iconSize = 16;
const sortedRolesConnection = this.createSortedRolesConnection(
rolesConnection,
sortBy,
sortDirection
);
return (
<ConnectionDataTable
connection={sortedRolesConnection}
pageSize={VIEW_ROLES_PAGE_SIZE}
onHeaderClick={this.handleHeaderClick}
onPageChange={onPageChange}
headers={tableHeaders}
sortByHeader={sortBy}
sortDirection={sortDirection}
renderRow={({ node: role }) => (
<TableRow key={role.roleId}>
<TableCell padding="dense">
<TableCellItem
dense
button
component={Link}
to={`/auth/roles/${encodeURIComponent(role.roleId)}`}>
<ListItemText primary={role.roleId} />
<LinkIcon size={iconSize} />
</TableCellItem>
</TableCell>
</TableRow>
)}
/>
);
}
}