Skip to content

Commit d2ac9f6

Browse files
markeriksonmarkerikson
committed
Extract a separate UnitInfoForm component
1 parent 8ceeece commit d2ac9f6

File tree

2 files changed

+105
-86
lines changed

2 files changed

+105
-86
lines changed

‎src/features/unitInfo/UnitInfo/UnitInfo.jsx‎

Lines changed: 3 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -1,103 +1,20 @@
11
import React, {Component} from "react";
2-
import {connect} from "react-redux";
32
import {
4-
Form,
5-
Dropdown,
63
Segment
74
} from "semantic-ui-react";
85

9-
import {selectUnitInfo} from "../unitInfoSelectors";
10-
import {updateUnitInfo, setUnitColor} from "../unitInfoActions";
11-
import {showColorPicker} from "common/components/ColorPicker/colorPickerActions";
12-
import {getValueFromEvent} from "common/utils/clientUtils";
13-
14-
import FormEditWrapper from "common/components/FormEditWrapper";
15-
import ColorPickerButton from "common/components/ColorPicker/ColorPickerButton";
16-
17-
const FACTIONS = [
18-
{value : "cc", text : "Capellan Confederation"},
19-
{value : "dc", text : "Draconis Combine"},
20-
{value : "elh", text : "Eridani Light Horse"},
21-
{value : "fs", text : "Federated Suns"},
22-
{value : "fwl", text : "Free Worlds League"},
23-
{value : "hr", text : "Hansen's Roughriders"},
24-
{value : "lc", text : "Lyran Commonwealth"},
25-
{value : "wd", text : "Wolf's Dragoons"},
26-
];
27-
28-
const mapState = (state) => ({
29-
unitInfo : selectUnitInfo(state),
30-
});
31-
32-
const actions = {
33-
updateUnitInfo,
34-
showColorPicker,
35-
};
6+
import UnitInfoForm from "./UnitInfoForm";
367

378
class UnitInfo extends Component {
389

39-
onAffiliationChanged = (e, result) => {
40-
const {name, value} = result;
41-
42-
const newValues = { [name] : value};
43-
this.props.updateUnitInfo(newValues);
44-
}
45-
46-
onNameChanged = (e) => {
47-
const newValues = getValueFromEvent(e);
48-
this.props.updateUnitInfo(newValues);
49-
}
50-
51-
onColorClicked = () => {
52-
const onColorPickedAction = setUnitColor();
53-
54-
this.props.showColorPicker(this.props.unitInfo.color, onColorPickedAction);
55-
}
56-
57-
5810
render() {
59-
const {unitInfo, updateUnitInfo} = this.props;
60-
const {name, affiliation, color} = unitInfo;
61-
6211
return (
6312
<Segment attached="bottom">
64-
<Form size="large">
65-
<Form.Field name="name" width={6}>
66-
<label>Unit Name</label>
67-
<FormEditWrapper
68-
singleValue={true}
69-
value={ {name} }
70-
onChange={updateUnitInfo}
71-
passIsEditing={false}
72-
>
73-
<input
74-
placeholder="Name"
75-
name="name"
76-
/>
77-
</FormEditWrapper>
78-
</Form.Field>
79-
<Form.Field name="affiliation" width={6}>
80-
<label>Affiliation</label>
81-
<Dropdown
82-
name="affiliation"
83-
selection
84-
options={FACTIONS}
85-
value={affiliation}
86-
onChange={this.onAffiliationChanged}
87-
/>
88-
</Form.Field>
89-
<Form.Field name="color">
90-
<label>Color</label>
91-
<ColorPickerButton
92-
value={color}
93-
onClick={this.onColorClicked}
94-
/>
95-
</Form.Field>
96-
</Form>
13+
<UnitInfoForm />
9714
</Segment>
9815
);
9916
}
10017
}
10118

10219

103-
export default connect(mapState, actions)(UnitInfo);
20+
export default UnitInfo;

‎src/features/unitInfo/UnitInfo/UnitInfoForm.jsx‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
import React, {Component} from "react";
2+
import {connect} from "react-redux";
3+
import {
4+
Form,
5+
Dropdown,
6+
Segment
7+
} from "semantic-ui-react";
8+
9+
import {selectUnitInfo} from "../unitInfoSelectors";
10+
import {updateUnitInfo, setUnitColor} from "../unitInfoActions";
11+
import {showColorPicker} from "common/components/ColorPicker/colorPickerActions";
12+
import {getValueFromEvent} from "common/utils/clientUtils";
13+
14+
import FormEditWrapper from "common/components/FormEditWrapper";
15+
import ColorPickerButton from "common/components/ColorPicker/ColorPickerButton";
16+
17+
const FACTIONS = [
18+
{value : "cc", text : "Capellan Confederation"},
19+
{value : "dc", text : "Draconis Combine"},
20+
{value : "elh", text : "Eridani Light Horse"},
21+
{value : "fs", text : "Federated Suns"},
22+
{value : "fwl", text : "Free Worlds League"},
23+
{value : "hr", text : "Hansen's Roughriders"},
24+
{value : "lc", text : "Lyran Commonwealth"},
25+
{value : "wd", text : "Wolf's Dragoons"},
26+
];
27+
28+
const mapState = (state) => ({
29+
unitInfo : selectUnitInfo(state),
30+
});
31+
32+
const actions = {
33+
updateUnitInfo,
34+
showColorPicker,
35+
};
36+
37+
class UnitInfoForm extends Component {
38+
39+
onAffiliationChanged = (e, result) => {
40+
const {name, value} = result;
41+
42+
const newValues = { [name] : value};
43+
this.props.updateUnitInfo(newValues);
44+
}
45+
46+
onNameChanged = (e) => {
47+
const newValues = getValueFromEvent(e);
48+
this.props.updateUnitInfo(newValues);
49+
}
50+
51+
onColorClicked = () => {
52+
const onColorPickedAction = setUnitColor();
53+
54+
this.props.showColorPicker(this.props.unitInfo.color, onColorPickedAction);
55+
}
56+
57+
58+
render() {
59+
const {unitInfo, updateUnitInfo} = this.props;
60+
const {name, affiliation, color} = unitInfo;
61+
62+
return (
63+
<Form size="large">
64+
65+
<Form.Field name="name" width={6}>
66+
<label>Unit Name</label>
67+
<FormEditWrapper
68+
singleValue={true}
69+
value={ {name} }
70+
onChange={updateUnitInfo}
71+
passIsEditing={false}
72+
>
73+
<input
74+
placeholder="Name"
75+
name="name"
76+
/>
77+
</FormEditWrapper>
78+
</Form.Field>
79+
<Form.Field name="affiliation" width={6}>
80+
<label>Affiliation</label>
81+
<Dropdown
82+
name="affiliation"
83+
selection
84+
options={FACTIONS}
85+
value={affiliation}
86+
onChange={this.onAffiliationChanged}
87+
/>
88+
</Form.Field>
89+
<Form.Field name="color">
90+
<label>Color</label>
91+
<ColorPickerButton
92+
value={color}
93+
onClick={this.onColorClicked}
94+
/>
95+
</Form.Field>
96+
</Form>
97+
);
98+
}
99+
}
100+
101+
102+
export default connect(mapState, actions)(UnitInfoForm);

0 commit comments

Comments
 (0)