-
Notifications
You must be signed in to change notification settings - Fork 41
/
PilotsListRow.jsx
98 lines (81 loc) · 2.5 KB
/
PilotsListRow.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
import React from "react";
import {connect} from "react-redux";
import {
Table,
Button,
Icon,
} from "semantic-ui-react";
import _ from "lodash";
import {getEntitiesSession} from "features/entities/entitySelectors";
import {deleteEntity} from "features/entities/entityActions";
const mapState = (state, ownProps) => {
const session = getEntitiesSession(state);
const {Pilot} = session;
let pilot;
if(Pilot.hasId(ownProps.pilotID)) {
const pilotModel = Pilot.withId(ownProps.pilotID);
// Access the underlying plain JS object using the "ref" field,
// and make a shallow copy of it
pilot = {
...pilotModel.ref
};
// We want to look up pilotModel.mech.mechType. Just in case the
// relational fields are null, we'll do a couple safety checks as we go.
// Look up the associated Mech instance using the foreign-key
// field that we defined in the Pilot Model class
const {mech} = pilotModel;
// If there actually is an associated mech, include the
// mech type's ID as a field in the data passed to the component
if(mech && mech.type) {
pilot.mechType = mech.type.id;
}
}
return {pilot};
}
const actions = {
deleteEntity,
};
const PilotsListRow = ({pilot={}, onPilotClicked=_.noop, selected, deleteEntity}) => {
const {
id = null,
name = "",
rank = "",
age = "",
gunnery = "",
piloting = "",
mechType = "",
} = pilot;
const onDeleteClicked = () => deleteEntity("Pilot", id);
return (
<Table.Row onClick={() => onPilotClicked(id)} active={selected}>
<Table.Cell>
{name}
</Table.Cell>
<Table.Cell>
{rank}
</Table.Cell>
<Table.Cell>
{age}
</Table.Cell>
<Table.Cell>
{gunnery}/{piloting}
</Table.Cell>
<Table.Cell>
{mechType}
</Table.Cell>
<Table.Cell>
<Button
compact
basic
circular
size="tiny"
color="red"
icon={<Icon name="delete" />}
onClick={onDeleteClicked}
>
</Button>
</Table.Cell>
</Table.Row>
);
}
export default connect(mapState, actions)(PilotsListRow);