Skip to content

Commit

Permalink
Refactor Measure component to use less state
Browse files Browse the repository at this point in the history
  • Loading branch information
@Gnafu
Gnafu committed Oct 7, 2016
1 parent 2e2d2f7 commit 0e960ad
Show file tree
Hide file tree
Showing 10 changed files with 74 additions and 147 deletions.
8 changes: 4 additions & 4 deletions web/client/actions/measurement.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,13 @@
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree.
*/
const CHANGE_MEASUREMENT = 'CHANGE_MEASUREMENT';
const CHANGE_MEASUREMENT_TOOL = 'CHANGE_MEASUREMENT_TOOL';
const CHANGE_MEASUREMENT_STATE = 'CHANGE_MEASUREMENT_STATE';

function changeMeasurement(measurement) {
return {
type: CHANGE_MEASUREMENT,
measurement: measurement
type: CHANGE_MEASUREMENT_TOOL,
...measurement
};
}

Expand All @@ -31,7 +31,7 @@ function changeMeasurementState(measureState) {
}

module.exports = {
CHANGE_MEASUREMENT,
CHANGE_MEASUREMENT_TOOL,
CHANGE_MEASUREMENT_STATE,
changeMeasurement,
changeMeasurementState
Expand Down
2 changes: 1 addition & 1 deletion web/client/components/TOC/fragments/LayersTool.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const LayersTool = React.createClass({
onClick: React.PropTypes.func,
style: React.PropTypes.object,
glyph: React.PropTypes.string,
tooltip: React.PropTypes.tooltip
tooltip: React.PropTypes.string
},
getDefaultProps() {
return {
Expand Down
99 changes: 21 additions & 78 deletions web/client/components/mapcontrols/measure/MeasureComponent.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,11 +36,15 @@ const MeasureComponent = React.createClass({
areaLabel: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.element]),
bearingLabel: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.element]),
uom: React.PropTypes.shape({
length: React.PropTypes.shape({ unit: React.PropTypes.string.isRequired,
label: React.PropTypes.string.isRequired}),
area: React.PropTypes.shape({ unit: React.PropTypes.string.isRequired,
label: React.PropTypes.string.isRequired})
}),
length: React.PropTypes.shape({
unit: React.PropTypes.string.isRequired,
label: React.PropTypes.string.isRequired
}),
area: React.PropTypes.shape({
unit: React.PropTypes.string.isRequired,
label: React.PropTypes.string.isRequired
})
}),
toggleMeasure: React.PropTypes.func,
measurement: React.PropTypes.object,
lineMeasureEnabled: React.PropTypes.bool,
Expand Down Expand Up @@ -84,85 +88,24 @@ const MeasureComponent = React.createClass({
return !isEqual(nextProps, this.props);
},
onLineClick: function() {
var newMeasureState;
if (this.props.lineMeasureEnabled === false) {
newMeasureState = {
lineMeasureEnabled: true,
areaMeasureEnabled: false,
bearingMeasureEnabled: false,
geomType: 'LineString',
// reset old measurements
len: 0,
area: 0,
bearing: 0
};
this.props.toggleMeasure(newMeasureState);
} else {
newMeasureState = {
lineMeasureEnabled: false,
areaMeasureEnabled: false,
bearingMeasureEnabled: false
};
this.props.toggleMeasure(newMeasureState);
}
this.props.toggleMeasure({
geomType: 'LineString'
});
},
onAreaClick: function() {
var newMeasureState;
if (this.props.areaMeasureEnabled === false) {
newMeasureState = {
lineMeasureEnabled: false,
areaMeasureEnabled: true,
bearingMeasureEnabled: false,
geomType: 'Polygon',
// reset old measurements
len: 0,
area: 0,
bearing: 0
};
this.props.toggleMeasure(newMeasureState);
} else {
newMeasureState = {
lineMeasureEnabled: false,
areaMeasureEnabled: false,
bearingMeasureEnabled: false
};
this.props.toggleMeasure(newMeasureState);
}
this.props.toggleMeasure({
geomType: 'Polygon'
});
},
onBearingClick: function() {
var newMeasureState;
if (this.props.bearingMeasureEnabled === false) {
newMeasureState = {
lineMeasureEnabled: false,
areaMeasureEnabled: false,
bearingMeasureEnabled: true,
geomType: 'Bearing',
// reset old measurements
len: 0,
area: 0,
bearing: 0
};
this.props.toggleMeasure(newMeasureState);
} else {
newMeasureState = {
lineMeasureEnabled: false,
areaMeasureEnabled: false,
bearingMeasureEnabled: false
};
this.props.toggleMeasure(newMeasureState);
}
this.props.toggleMeasure({
geomType: 'Bearing'
});
},
onResetClick: function() {
var resetMeasureState = {
lineMeasureEnabled: false,
areaMeasureEnabled: false,
bearingMeasureEnabled: false,
geomType: null,
len: 0,
area: 0,
bearing: 0
};
this.props.toggleMeasure(resetMeasureState);
this.props.toggleMeasure({
geomType: null
});
},
getToolTips() {
return {
Expand Down
14 changes: 9 additions & 5 deletions web/client/components/mapcontrols/measure/MeasureResults.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,11 +28,15 @@ const MeasureResults = React.createClass({
areaLabel: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.element]),
bearingLabel: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.element]),
uom: React.PropTypes.shape({
length: React.PropTypes.shape({ unit: React.PropTypes.string.isRequired,
label: React.PropTypes.string.isRequired}),
area: React.PropTypes.shape({ unit: React.PropTypes.string.isRequired,
label: React.PropTypes.string.isRequired})
}),
length: React.PropTypes.shape({
unit: React.PropTypes.string.isRequired,
label: React.PropTypes.string.isRequired
}),
area: React.PropTypes.shape({
unit: React.PropTypes.string.isRequired,
label: React.PropTypes.string.isRequired
})
}),
toggleMeasure: React.PropTypes.func,
measurement: React.PropTypes.object,
lineMeasureEnabled: React.PropTypes.bool,
Expand Down
43 changes: 9 additions & 34 deletions web/client/components/mapcontrols/measure/__tests__/MeasureComponent-test.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,13 +55,7 @@ describe("test the MeasureComponent", () => {
it('test line activation', () => {
let newMeasureState;
let measurement = {
lineMeasureEnabled: false,
areaMeasureEnabled: false,
bearingMeasureEnabled: false,
geomType: 'LineString',
len: 0,
area: 0,
bearing: 0
geomType: null
};
const cmp = ReactDOM.render(
<MeasureComponent
Expand All @@ -83,19 +77,13 @@ describe("test the MeasureComponent", () => {
lineBtn.click();

expect(newMeasureState).toExist();
expect(newMeasureState.lineMeasureEnabled).toBe(true);
expect(newMeasureState.geomType).toBe('LineString');
});

it('test area activation', () => {
let newMeasureState;
let measurement = {
lineMeasureEnabled: false,
areaMeasureEnabled: false,
bearingMeasureEnabled: false,
geomType: 'LineString',
len: 0,
area: 0,
bearing: 0
geomType: null
};
const cmp = ReactDOM.render(
<MeasureComponent
Expand All @@ -117,19 +105,13 @@ describe("test the MeasureComponent", () => {
areaBtn.click();

expect(newMeasureState).toExist();
expect(newMeasureState.areaMeasureEnabled).toBe(true);
expect(newMeasureState.geomType).toBe('Polygon');
});

it('test bearing activation', () => {
let newMeasureState;
let measurement = {
lineMeasureEnabled: false,
areaMeasureEnabled: false,
bearingMeasureEnabled: false,
geomType: 'LineString',
len: 0,
area: 0,
bearing: 0
geomType: null
};
const cmp = ReactDOM.render(
<MeasureComponent
Expand All @@ -151,19 +133,13 @@ describe("test the MeasureComponent", () => {
bearingBtn.click();

expect(newMeasureState).toExist();
expect(newMeasureState.bearingMeasureEnabled).toBe(true);
expect(newMeasureState.geomType).toBe('Bearing');
});

it('test measurements resetting', () => {
let newMeasureState;
let measurement = {
lineMeasureEnabled: false,
areaMeasureEnabled: false,
bearingMeasureEnabled: false,
geomType: 'LineString',
len: 0,
area: 0,
bearing: 0
geomType: null
};
const cmp = ReactDOM.render(
<MeasureComponent
Expand All @@ -183,14 +159,13 @@ describe("test the MeasureComponent", () => {
const bearingBtn = buttons.item(2);
// Activate
bearingBtn.click();
expect(newMeasureState.geomType).toBe('Bearing');

// Dectivate
bearingBtn.click();

expect(newMeasureState).toExist();
expect(newMeasureState.lineMeasureEnabled).toBe(false);
expect(newMeasureState.areaMeasureEnabled).toBe(false);
expect(newMeasureState.bearingMeasureEnabled).toBe(false);
expect(newMeasureState.geomType).toBe(null);
});

it('test bearing format', () => {
Expand Down
34 changes: 19 additions & 15 deletions web/client/localConfig.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,16 @@
"method": "basic"
}
],
"plugins": {
"mobile": [{
"name": "Map",
"cfg": {
"zoomControl": false,
"tools": ["locate"]
}
},
{
"plugins": {
"mobile": [
{
"name": "Map",
"cfg": {
"zoomControl": false,
"tools": ["locate"]
}
},
{
"name": "DrawerMenu",
"cfg": {
"glyph": "1-stilo",
Expand Down Expand Up @@ -217,8 +218,9 @@
"cfg":{
"className": "square-button"
}
}],
"desktop": [{
}
],
"desktop": [{
"name": "Map",
"cfg": {
"toolsOptions": {
Expand Down Expand Up @@ -254,7 +256,7 @@
"name": "Identify",
"showIn": ["IdentifyBar", "Settings"],
"cfg": {
"panelClassName": "modal-dialog info-panel modal-content",
"panelClassName": "modal-dialog info-panel modal-content",
"headerClassName": "modal-header",
"bodyClassName": "modal-body info-wrap",
"asPanel": false,
Expand Down Expand Up @@ -482,7 +484,9 @@
"alwaysVisible": true
}
}
}, {
},
"OmniBar",
{
"name": "Login",
"cfg": {
"nav": false,
Expand All @@ -507,7 +511,6 @@
}]
}
},
"OmniBar",
{
"name" : "Save",
"cfg": {
Expand Down Expand Up @@ -544,7 +547,8 @@
"className": "square-button"
}
}
}], "embedded": [
}],
"embedded": [
{
"name": "Map",
"cfg": {
Expand Down
4 changes: 2 additions & 2 deletions web/client/plugins/Measure.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const lineRuleIcon = require('./toolbar/assets/img/line-ruler.png');

const assign = require('object-assign');

const {changeMeasurementState} = require('../actions/measurement');
const {changeMeasurement} = require('../actions/measurement');

const Measure = require('../components/mapcontrols/measure/MeasureComponent');

Expand All @@ -40,7 +40,7 @@ const MeasurePlugin = connect((state) => {
bearingMeasureEnabled: state.measurement && state.measurement.bearingMeasureEnabled || false
};
}, {
toggleMeasure: changeMeasurementState
toggleMeasure: changeMeasurement
})(MeasureComponent);

module.exports = {
Expand Down
4 changes: 2 additions & 2 deletions web/client/plugins/MeasureResults.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const {connect} = require('react-redux');

const Message = require('./locale/Message');

const {changeMeasurementState} = require('../actions/measurement');
const {changeMeasurement} = require('../actions/measurement');

const MeasureRes = require('../components/mapcontrols/measure/MeasureResults');

Expand All @@ -33,7 +33,7 @@ const MeasureResultsPlugin = connect((state) => {
bearingMeasureEnabled: state.measurement && state.measurement.bearingMeasureEnabled || false
};
}, {
toggleMeasure: changeMeasurementState
toggleMeasure: changeMeasurement
})(MeasureComponent);

module.exports = {
Expand Down
Loading

0 comments on commit 0e960ad

Please sign in to comment.