Externalized maptype selectors (#1817)

* Externalized maptype selectors to improve testability and reusability

* add documentation for selectors

docma-config.json

@@ -120,6 +120,10 @@
             "web/client/actions/maptype.js",
             "web/client/actions/search.js",
 
+            "web/client/selectors/index.jsdoc",
+            "web/client/selectors/map.js",
+            "web/client/selectors/maptype.js",
+
             "web/client/reducers/index.jsdoc",
             "web/client/reducers/controls.js",
             "web/client/reducers/globeswitcher.js",

web/client/plugins/GlobeViewSwitcher.jsx

@@ -12,6 +12,8 @@ const assign = require('object-assign');
 const globeswitcher = require('../reducers/globeswitcher');
 const epics = require('../epics/globeswitcher');
 const {toggle3d} = require('../actions/globeswitcher');
+const {mapTypeSelector, isCesium} = require('../selectors/maptype');
+const {createSelector} = require('reselect');
 const GlobeViewSwitcherButton = require('../components/buttons/GlobeViewSwitcherButton');
 
 /**
@@ -23,12 +25,14 @@ const GlobeViewSwitcherButton = require('../components/buttons/GlobeViewSwitcher
   * @prop {string} cfg.id identifier of the Plugin
   *
   */
-const GlobeViewSwitcher = connect( ({maptype = {}} = {}) => ({
-    active: maptype && maptype.mapType === "cesium",
+
+let globeSelector = createSelector([mapTypeSelector, isCesium], (mapType = "leaflet", cesium) => ({
+    active: cesium,
     options: {
-        originalMapType: maptype && maptype.mapType || "leaflet"
+        originalMapType: mapType
     }
-}), {
+}));
+const GlobeViewSwitcher = connect(globeSelector, {
     onClick: (pressed, options) => toggle3d(pressed, options.originalMapType)
 })(GlobeViewSwitcherButton);
 

web/client/selectors/__tests__/maptype-test.js

@@ -0,0 +1,27 @@
+/*
+* Copyright 2017, GeoSolutions Sas.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+
+const expect = require('expect');
+const {mapTypeSelector, isCesium} = require('../maptype');
+
+describe('Test maptype', () => {
+    it('test mapTypeSelector', () => {
+        const mapType = mapTypeSelector({maptype: {mapType: "cesium"}});
+
+        expect(mapType).toExist();
+        expect(mapType).toBe("cesium");
+    });
+
+    it('test isCesium', () => {
+        const bool = isCesium({maptype: {mapType: "cesium"}});
+        expect(bool).toExist();
+        expect(bool).toBe(true);
+        expect(isCesium({maptype: {mapType: "leaflet"}})).toBe(false);
+    });
+});

web/client/selectors/maptype.js

@@ -0,0 +1,29 @@
+/*
+* Copyright 2017, GeoSolutions Sas.
+* All rights reserved.
+*
+* This source code is licensed under the BSD-style license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+/**
+ * selects maptype from state
+ * @memberof selectors.maptype
+ * @param  {object} state the state
+ * @return {string}       the maptype in the state
+ */
+const mapTypeSelector = (state) => state && state.maptype && state.maptype.mapType;
+
+/**
+ * Check if the mapType is cesium
+ * @function
+ * @memberof selectors.maptype
+ * @param  {object} state the state
+ * @return {boolean}
+ */
+const isCesium = state => mapTypeSelector(state) === "cesium";
+
+module.exports = {
+    mapTypeSelector,
+    isCesium
+};