add toggle button for sites

src/components/Map.jsx

@@ -43,13 +43,13 @@ class Map extends React.Component {
         this.map.setView([eventPoint.latitude, eventPoint.longitude]);
       }
     }
-  }  
+  }
 
   initializeMap() {
     /**
      * Creates a Leaflet map and a tilelayer for the map background
      */
-    const map = 
+    const map =
       L.map(this.props.mapId)
         .setView(this.props.app.mapAnchor, 14)
         .setMinZoom(10)
@@ -95,7 +95,7 @@ class Map extends React.Component {
       .getComputedStyle(mapNode)
       .getPropertyValue('transform');
 
-    // Offset with leaflet map transform boundaries    
+    // Offset with leaflet map transform boundaries
     this.setState({
       mapTransformX: +transform.split(',')[4],
       mapTransformY: +transform.split(',')[5].split(')')[0]
@@ -126,7 +126,7 @@ class Map extends React.Component {
         >
         </svg>
       </Portal>
-    );      
+    );
   }
 
   renderSites() {
@@ -197,6 +197,7 @@ class Map extends React.Component {
 
 
   render() {
+    const { isShowingSites } = this.props.app.flags
     const classes = this.props.app.narrative ? 'map-wrapper narrative-mode' : 'map-wrapper';
 
     return (
@@ -204,7 +205,7 @@ class Map extends React.Component {
         <div id={this.props.mapId} />
         {(this.map !== null) ? this.renderSVG() : ''}
         {(this.map !== null) ? this.renderMarkers() : ''}
-        {(this.map !== null) ? this.renderSites() : ''}
+        {(this.map !== null) && isShowingSites ? this.renderSites() : ''}
         {(this.map !== null) ? this.renderEvents() : ''}
         {(this.map !== null) ? this.renderNarratives() : ''}
         {(this.map !== null) ? this.renderSelected() : ''}
@@ -226,7 +227,10 @@ function mapStateToProps(state) {
       selected: state.app.selected,
       highlighted: state.app.highlighted,
       mapAnchor: state.app.mapAnchor,
-      narrative: state.app.narrative
+      narrative: state.app.narrative,
+      flags: {
+        isShowingSites: state.app.flags.isShowingSites
+      }
     },
     ui: {
       dom: state.ui.dom,

src/components/Toolbar.jsx

@@ -1,11 +1,13 @@
 import React from 'react';
 import { connect } from 'react-redux'
+import { bindActionCreators } from 'redux'
+import * as actions from '../actions'
 import * as selectors from '../selectors'
 
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
 import Search from './Search.jsx';
 import TagListPanel from './TagListPanel.jsx';
-// import ToolbarBottomActions from './ToolbarBottomActions.jsx';
+import ToolbarBottomActions from './ToolbarBottomActions.jsx';
 import copy from '../js/data/copy.json';
 import { trimAndEllipse } from '../js/utilities.js';
 
@@ -112,7 +114,6 @@ class Toolbar extends React.Component {
           {this.renderToolbarTab(0, 'Focus stories')}
           {this.renderToolbarTab(1, 'Explore freely')}
         </div>
-        {/* <ToolbarBottomActions /> */}
       </div>
     )
   }
@@ -124,7 +125,7 @@ class Toolbar extends React.Component {
         {this.renderClosePanel()}
         <Tabs selectedIndex={this.state._selected}>
           {this.renderToolbarNarrativePanel()}
-          {this.renderToolbarTagPanel()}
+          {/* {this.renderToolbarTagPanel()} */}
         </Tabs>
       </div>
     )
@@ -159,7 +160,12 @@ class Toolbar extends React.Component {
           {this.renderToolbarTab(0, 'Narratives')}
           {(isTags) ? this.renderToolbarTab(1, 'Explore by tag') : ''}
         </div>
-        {/* <ToolbarBottomActions /> */}
+        <ToolbarBottomActions
+          sites={{
+            enabled: this.props.sitesShowing,
+            toggle: this.props.actions.toggleSites,
+          }}
+        />
       </div>
     )
   }
@@ -187,7 +193,14 @@ function mapStateToProps(state) {
     viewFilters: state.app.filters.views,
     features: state.app.features,
     narrative: state.app.narrative,
+    sitesShowing: state.app.flags.isShowingSites
   }
 }
 
-export default connect(mapStateToProps)(Toolbar)
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators(actions, dispatch)
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Toolbar)

src/components/ToolbarBottomActions.jsx

@@ -5,60 +5,42 @@ import RefreshIcon from './presentational/Icons/RefreshIcon.js';
 import CoeventIcon from './presentational/Icons/CoeventIcon.js';
 import RouteIcon from './presentational/Icons/RouteIcon.js';
 
-class ToolbarBottomActions extends React.Component {
-  resetAllFilters() {
-    this.props.actions.resetAllFilters();
-  }
-
-  toggleInfoPopup() {
-    this.props.actions.toggleInfoPopup();
-  }
-
-  toggleLanguage() {
-    this.props.actions.toggleLanguage();
-  }
-
-  toggleMapViews(layer) {
-    this.props.actions.toggleMapView(layer);
-  }
-
-  renderMapActions() {
+function ToolbarBottomActions (props) {
+  function renderMapActions() {
     return (
       <div className="bottom-action-block">
-          <RouteIcon
-            onClick={(view) => this.toggleMapViews(view)}
-            isEnabled={this.props.viewFilters.routes}
-          />
+          {/* <RouteIcon */}
+          {/*   onClick={(view) => this.toggleMapViews(view)} */}
+          {/*   isEnabled={this.props.viewFilters.routes} */}
+          {/* /> */}
           <SitesIcon
-            onClick={(view) => this.toggleMapViews(view)}
-            isEnabled={this.props.viewFilters.sites}
-          />
-          <CoeventIcon
-            onClick={(view) => this.toggleMapViews(view)}
-            isEnabled={this.props.viewFilters.coevents}
+            isEnabled={props.sites.enabled}
+            onClickHandler={props.sites.toggle}
           />
+          {/* <CoeventIcon */}
+          {/*   onClick={(view) => this.toggleMapViews(view)} */}
+          {/*   isEnabled={this.props.viewFilters.coevents} */}
+          {/* /> */}
       </div>
     );
   }
 
-  render() {
-    return (
-      <div className="bottom-actions">
-        {/*}{this.renderMapActions()}
-        <div className="bottom-action-block">
-          <button className="action-button tiny default" onClick={() => { this.toggleLanguage()}}>
-            {(this.props.language === 'es-MX') ? 'ES' : 'EN' }
-          </button>
-          <button className="action-button info tiny default" onClick={() => { this.toggleInfoPopup()}}>
-            i
-          </button>
-          <button className="action-button tiny" onClick={() => this.resetAllFilters()}>
-            <RefreshIcon />
-          </button>
-        </div>*/}
+  return (
+    <div className="bottom-actions">
+      {renderMapActions()}
+      <div className="bottom-action-block">
+        {/* <button className="action-button tiny default" onClick={() => { toggleLanguage()}}> */}
+        {/*   {(props.language === 'es-MX') ? 'ES' : 'EN' } */}
+        {/* </button> */}
+        {/* <button className="action-button info tiny default" onClick={() => { this.toggleInfoPopup()}}> */}
+        {/*   i */}
+        {/* </button> */}
+        {/* <button className="action-button tiny" onClick={() => this.resetAllFilters()}> */}
+        {/*   <RefreshIcon /> */}
+        {/* </button> */}
       </div>
-    );
-  }
+    </div>
+  )
 }
 
 export default ToolbarBottomActions;

src/components/presentational/Icons/SitesIcon.js

@@ -1,19 +1,18 @@
 import React from 'react';
 
-const SitesIcon = ({ isEnabled, toggleMapViews }) => {
-
-  const classes = (isEnabled) ? 'action-button active disabled' : 'action-button disabled';
+const SitesIcon = ({ isEnabled, onClickHandler }) => {
+  const classes = (isEnabled) ? 'action-button enabled' : 'action-button disabled';
 
   return (
     <button
-      className={sitesClass}
-      onClick={() => toggleMapViews('sites')}
+      className={classes}
+      onClick={onClickHandler}
     >
       <svg x="0px" y="0px" width="30px" height="20px" viewBox="0 0 30 20" enableBackground="new 0 0 30 20">
         <path d="M24.615,6.793H5.385c-2.761,0-3,0.239-3,3v0.414c0,2.762,0.239,3,3,3h7.621l1.996,2.432l1.996-2.432h7.618c2.762,0,3-0.238,3-3V9.793C27.615,7.032,27.377,6.793,24.615,6.793z"/>
       </svg>
     </button>
-  );
+  )
 }
 
 export default SitesIcon;