lint jsx files

src/components/Toolbar.jsx

@@ -4,7 +4,7 @@ import { bindActionCreators } from 'redux'
 import * as actions from '../actions'
 import * as selectors from '../selectors'
 
-import { Tab, Tabs, TabList, TabPanel } from 'react-tabs'
+import { Tabs, TabPanel } from 'react-tabs'
 import Search from './Search.jsx'
 import TagListPanel from './TagListPanel.jsx'
 import ToolbarBottomActions from './ToolbarBottomActions.jsx'
@@ -12,25 +12,25 @@ import copy from '../js/data/copy.json'
 import { trimAndEllipse } from '../js/utilities.js'
 
 class Toolbar extends React.Component {
-  constructor(props) {
+  constructor (props) {
     super(props)
     this.state = { _selected: -1 }
   }
 
-  selectTab(selected) {
+  selectTab (selected) {
     const _selected = (this.state._selected === selected) ? -1 : selected
     this.setState({ _selected })
   }
 
-  renderClosePanel() {
+  renderClosePanel () {
     return (
-      <div className="panel-header" onClick={() => this.selectTab(-1)}>
-        <div className="caret"></div>
+      <div className='panel-header' onClick={() => this.selectTab(-1)}>
+        <div className='caret' />
       </div>
-     )
+    )
   }
 
-  renderSearch() {
+  renderSearch () {
     if (process.env.features.USE_SEARCH) {
       return (
         <TabPanel>
@@ -47,19 +47,19 @@ class Toolbar extends React.Component {
     }
   }
 
-  goToNarrative(narrative) {
+  goToNarrative (narrative) {
     this.selectTab(-1) // set all unselected within this component
     this.props.methods.onSelectNarrative(narrative)
   }
 
-  renderToolbarNarrativePanel() {
+  renderToolbarNarrativePanel () {
     return (
       <TabPanel>
         <h2>{copy[this.props.language].toolbar.narrative_panel_title}</h2>
         <p>{copy[this.props.language].toolbar.narrative_summary}</p>
         {this.props.narratives.map((narr) => {
           return (
-            <div className="panel-action action">
+            <div className='panel-action action'>
               <button style={{ backgroundColor: '#000' }} onClick={() => { this.goToNarrative(narr) }}>
                 <p>{narr.label}</p>
                 <p><small>{trimAndEllipse(narr.description, 120)}</small></p>
@@ -71,7 +71,7 @@ class Toolbar extends React.Component {
     )
   }
 
-  renderToolbarTagPanel() {
+  renderToolbarTagPanel () {
     if (process.env.features.USE_TAGS &&
       this.props.tags.children) {
       return (
@@ -91,19 +91,20 @@ class Toolbar extends React.Component {
     return ''
   }
 
-  renderToolbarTab(_selected, label, icon_key) {
+  renderToolbarTab (_selected, label, iconKey) {
+    console.log(label)
     const isActive = (this.state._selected === _selected)
     let classes = (isActive) ? 'toolbar-tab active' : 'toolbar-tab'
 
     return (
       <div className={classes} onClick={() => { this.selectTab(_selected) }}>
-        <i className="material-icons">{icon_key}</i>
-        <div className="tab-caption">{label}</div>
+        <i className='material-icons'>{iconKey}</i>
+        <div className='tab-caption'>{label}</div>
       </div>
     )
   }
 
-  renderToolbarPanels() {
+  renderToolbarPanels () {
     let classes = (this.state._selected >= 0) ? 'toolbar-panels' : 'toolbar-panels folded'
     return (
       <div className={classes}>
@@ -116,7 +117,7 @@ class Toolbar extends React.Component {
     )
   }
 
-  renderToolbarNavs() {
+  renderToolbarNavs () {
     if (this.props.narratives) {
       return this.props.narratives.map((nar, idx) => {
         const isActive = (idx === this.state._selected)
@@ -125,7 +126,7 @@ class Toolbar extends React.Component {
 
         return (
           <div className={classes} onClick={() => { this.selectTab(idx) }}>
-            <div className="tab-caption">{nar.label}</div>
+            <div className='tab-caption'>{nar.label}</div>
           </div>
         )
       })
@@ -133,36 +134,35 @@ class Toolbar extends React.Component {
     return ''
   }
 
-  renderToolbarTabs() {
+  renderToolbarTabs () {
     let title = copy[this.props.language].toolbar.title
     if (process.env.title) title = process.env.title
-    const narratives_label = copy[this.props.language].toolbar.narratives_label
-    const tags_label = copy[this.props.language].toolbar.tags_label
+    const narrativesLabel = copy[this.props.language].toolbar.narratives_label
+    const tagsLabel = copy[this.props.language].toolbar.tags_label
     const isTags = this.props.tags && this.props.tags.children
 
     return (
-      <div className="toolbar">
-        <div className="toolbar-header"><p>{title}</p></div>
-        <div className="toolbar-tabs">
-          {/*this.renderToolbarTab(0, 'search')*/}
-          {this.renderToolbarTab(0, narratives_label, 'timeline')}
-          {(isTags) ? this.renderToolbarTab(1, tags_label, 'style') : ''}
+      <div className='toolbar'>
+        <div className='toolbar-header'><p>{title}</p></div>
+        <div className='toolbar-tabs'>
+          {this.renderToolbarTab(0, narrativesLabel, 'timeline')}
+          {(isTags) ? this.renderToolbarTab(1, tagsLabel, 'style') : ''}
         </div>
         <ToolbarBottomActions
           sites={{
             enabled: this.props.sitesShowing,
-            toggle: this.props.actions.toggleSites,
+            toggle: this.props.actions.toggleSites
           }}
         />
       </div>
     )
   }
 
-  render() {
+  render () {
     const { isNarrative } = this.props
 
     return (
-      <div id="toolbar-wrapper" className={`toolbar-wrapper ${(isNarrative) ? 'narrative-mode' : ''}`}>
+      <div id='toolbar-wrapper' className={`toolbar-wrapper ${(isNarrative) ? 'narrative-mode' : ''}`}>
         {this.renderToolbarTabs()}
         {this.renderToolbarPanels()}
       </div>
@@ -170,7 +170,7 @@ class Toolbar extends React.Component {
   }
 }
 
-function mapStateToProps(state) {
+function mapStateToProps (state) {
   return {
     tags: selectors.getTagTree(state),
     categories: selectors.getCategories(state),
@@ -185,7 +185,7 @@ function mapStateToProps(state) {
   }
 }
 
-function mapDispatchToProps(dispatch) {
+function mapDispatchToProps (dispatch) {
   return {
     actions: bindActionCreators(actions, dispatch)
   }