Put bottom actions in its own component

src/components/TagListPanel.jsx

@@ -65,6 +65,7 @@ class TagListPanel extends React.Component {
   }
 
   render() {
+
     return (
       <div className="react-innertabpanel">
         <h2>Explore data by tag</h2>

src/components/Toolbar.jsx

@@ -5,88 +5,24 @@ import * as selectors from '../selectors'
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
 import Search from './Search.jsx';
 import TagListPanel from './TagListPanel.jsx';
-import SitesIcon from './presentational/Icons/SitesIcon.js';
-import RefreshIcon from './presentational/Icons/RefreshIcon.js';
-import CoeventIcon from './presentational/Icons/CoeventIcon.js';
-import RouteIcon from './presentational/Icons/RouteIcon.js';
+import ToolbarBottomActions from './ToolbarBottomActions.jsx';
 import copy from '../js/data/copy.json';
-// NB: i think this entire component can actually be part of a future feature...
 
 class Toolbar extends React.Component {
 
-    constructor(props) {
-      super(props);
+  constructor(props) {
+    super(props);
 
-      this.state = {
-        tabNum: -1
-      };
-    }
+    this.state = {
+      tabNum: -1
+    };
+  }
 
-    toggleTab(tabNum) {
-      this.setState({ tabNum: (this.state.tabNum === tabNum) ? -1 : tabNum });
-    }
+  toggleTab(tabNum) {
+    this.setState({ tabNum: (this.state.tabNum === tabNum) ? -1 : tabNum });
+  }
 
-    resetAllFilters() {
-      this.props.actions.resetAllFilters();
-    }
-
-    toggleInfoPopup() {
-      this.props.actions.toggleInfoPopup();
-    }
-
-    toggleLanguage() {
-      this.props.actions.toggleLanguage();
-    }
-
-    toggleMapViews(layer) {
-      this.props.actions.toggleMapView(layer);
-    }
-
-    toggleGuidedMode() {
-      this.props.actions.toggleGuidedMode();
-    }
-
-    renderMapActions() {
-      return (
-        <div className="bottom-action-block">
-            <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}
-            />
-        </div>
-      );
-    }
-
-    renderBottomActions() {
-      return (
-        <div className="bottom-actions">
-          <button onClick={() => { this.toggleGuidedMode(); }}>Toggle mode</button>
-          {/*}{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>*/}
-        </div>
-      );
-    }
-
-
-  renderPanelHeader() {
+  renderClosePanel() {
     return (
       <div className="panel-header" onClick={() => this.toggleTab(-1)}>
         <div className="caret"></div>
@@ -94,46 +30,21 @@ class Toolbar extends React.Component {
      );
   }
 
-  renderToolbarTab(tabNum, key) {
-    const isActive = (tabNum === this.state.tab);
-
-    let classes = (isActive) ? 'toolbar-tab active' : 'toolbar-tab';
-    return (
-      <div className={classes} onClick={() => { this.toggleTab(tabNum); }}>
-        <div className="tab-caption">{key}</div>
-      </div>
-    );
-  }
-
-  renderToolbarTagRoot() {
-    if (this.props.features.USE_TAGS &&
-      this.props.tags.children) {
-      const roots = Object.values(this.props.tags.children);
-      return roots.map((root, idx) => {
-        return this.renderToolbarTab(idx, root.key);
-      })
-    }
-    return '';
-  }
-
-  renderTagListPanel(tagType) {
-      const panels_lang = copy[this.props.language].toolbar.panels;
-      const title = (panels_lang[tagType]) ? panels_lang[tagType].title : tagType;
-      const overview = (panels_lang[tagType]) ? panels_lang[tagType].overview : '';
-
+  renderSearch() {
+    if (this.props.features.USE_SEARCH) {
       return (
-        <TagListPanel
-          tags={this.props.tags}
-          categories={this.props.categories}
-          tagFilters={this.props.tagFilters}
-          categoryFilters={this.props.categoryFilters}
-          filter={this.props.onFilter}
-          title={title}
-          overview={overview}
-          language={this.props.language}
-          tagType={tagType}
-        />
-       );
+        <TabPanel>
+            <Search
+              language={this.props.language}
+              tags={this.props.tags}
+              categories={this.props.categories}
+              tagFilters={this.props.tagFilters}
+              categoryFilters={this.props.categoryFilters}
+              filter={this.props.filter}
+            />
+        </TabPanel>
+      )
+    }
   }
 
   renderToolbarNarrativePanel() {
@@ -155,56 +66,32 @@ class Toolbar extends React.Component {
     );
   }
 
-  renderSearch() {
-    if (this.props.features.USE_SEARCH) {
-      return (
-        <TabPanel>
-            <Search
-              language={this.props.language}
-              tags={this.props.tags}
-              categories={this.props.categories}
-              tagFilters={this.props.tagFilters}
-              categoryFilters={this.props.categoryFilters}
-              filter={this.props.onFilter}
-            />
-        </TabPanel>
-      )
-    }
-  }
-
-  renderToolbarTagList() {
+  renderToolbarTagPanel() {
     if (this.props.features.USE_TAGS &&
       this.props.tags.children) {
-      const roots = Object.values(this.props.tags.children);
-      return roots.map((root, idx) => {
-        return (
-          <TabPanel>
-              {this.renderTagListPanel(root.key)}
-          </TabPanel>
-        )
-      })
+      return (
+        <TabPanel>
+          <TagListPanel
+            tags={this.props.tags}
+            categories={this.props.categories}
+            tagFilters={this.props.tagFilters}
+            categoryFilters={this.props.categoryFilters}
+            filter={this.props.filter}
+            language={this.props.language}
+          />
+        </TabPanel>
+      )
     }
     return '';
   }
 
-  renderToolbarNarratives() {
-    const isActive = (this.state.tabNum === 0);
+  renderToolbarTab(tabNum, label) {
+    const isActive = (this.state.tabNum === tabNum);
     let classes = (isActive) ? 'toolbar-tab active' : 'toolbar-tab';
 
     return (
-      <div className={classes} onClick={() => { this.toggleTab(0); }}>
-        <div className="tab-caption">Focus stories</div>
-      </div>
-    );
-  }
-
-  renderToolbarTags() {
-    const isActive = (this.state.tabNum === 1);
-    let classes = (isActive) ? 'toolbar-tab active' : 'toolbar-tab';
-
-    return (
-      <div className={classes} onClick={() => { this.toggleTab(1); }}>
-        <div className="tab-caption">Explore freely</div>
+      <div className={classes} onClick={() => { this.toggleTab(tabNum); }}>
+        <div className="tab-caption">{label}</div>
       </div>
     );
   }
@@ -216,10 +103,12 @@ class Toolbar extends React.Component {
         <div className="toolbar-header"><p>{title}</p></div>
         <div className="toolbar-tabs">
           {/*this.renderToolbarTab(0, 'search')*/}
-          {this.renderToolbarNarratives()}
-          {this.renderToolbarTags()}
+          {this.renderToolbarTab(0, 'Focus stories')}
+          {this.renderToolbarTab(1, 'Explore freely')}
         </div>
-        {this.renderBottomActions()}
+        <ToolbarBottomActions
+          actions={this.props.actions}
+        />
       </div>
     )
   }
@@ -229,10 +118,10 @@ class Toolbar extends React.Component {
 
     return (
       <div className={classes}>
-        {this.renderPanelHeader()}
+        {this.renderClosePanel()}
         <Tabs selectedIndex={this.state.tabNum}>
           {this.renderToolbarNarrativePanel()}
-          {this.renderToolbarTagList()}
+          {this.renderToolbarTagPanel()}
         </Tabs>
       </div>
     )

src/components/ToolbarBottomActions.jsx

@@ -0,0 +1,69 @@
+import React from 'react';
+
+import SitesIcon from './presentational/Icons/SitesIcon.js';
+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);
+  }
+
+  toggleGuidedMode() {
+    this.props.actions.toggleGuidedMode();
+  }
+
+  renderMapActions() {
+    return (
+      <div className="bottom-action-block">
+          <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}
+          />
+      </div>
+    );
+  }
+
+  render() {
+    return (
+      <div className="bottom-actions">
+        <button onClick={() => { this.toggleGuidedMode(); }}>Toggle mode</button>
+        {/*}{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>*/}
+      </div>
+    );
+  }
+}
+
+export default ToolbarBottomActions;

src/scss/toolbar.scss

@@ -161,10 +161,12 @@
   }
 
   .toolbar-tab {
-    display: inline-block;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     height: 60px;
     width: 110px;
-    padding: 10px 0 5px 0;
+    padding: 5px 0 5px 0;
     font-weight: 400;
     text-overflow: ellipsis;
     overflow: hidden;