code style

.eslintrc.js

@@ -1,6 +1,11 @@
 module.exports = {
   "sourceType": "module",
   "parser": "babel-eslint",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
   "extends": "standard",
   "installedESLint": true,
   "env": {
@@ -13,6 +18,8 @@ module.exports = {
     "react"
   ],
   "rules": {
+    "react/jsx-uses-react": [2],
+    "react/jsx-uses-vars": [2],
     "yoda": [2, "never", { "exceptRange": true }]
   }
 }

frontend/src/Metamaps/GlobalUI/ImportDialog.js

@@ -1,3 +1,5 @@
+/* global $ */
+
 import React from 'react'
 import ReactDOM from 'react-dom'
 import outdent from 'outdent'
@@ -10,7 +12,7 @@ const ImportDialog = {
   openLightbox: null,
   closeLightbox: null,
 
-  init: function(serverData, openLightbox, closeLightbox) {
+  init: function (serverData, openLightbox, closeLightbox) {
     const self = ImportDialog
     self.openLightbox = openLightbox
     self.closeLightbox = closeLightbox
@@ -22,14 +24,14 @@ const ImportDialog = {
     `))
     ReactDOM.render(React.createElement(ImportDialogBox, {
       onFileAdded: PasteInput.handleFile,
-      exampleImageUrl: serverData['import-example.png'],
+      exampleImageUrl: serverData['import-example.png']
     }), $('.importDialogWrapper').get(0))
   },
-  show: function() {
-    self.openLightbox('import-dialog')
+  show: function () {
+    ImportDialog.openLightbox('import-dialog')
   },
-  hide: function() {
-    self.closeLightbox('import-dialog')
+  hide: function () {
+    ImportDialog.closeLightbox('import-dialog')
   }
 }
 

frontend/src/Metamaps/Map/index.js

@@ -1,8 +1,6 @@
 /* global Metamaps, $ */
 
 import outdent from 'outdent'
-import React from 'react'
-import ReactDOM from 'react-dom'
 
 import Active from '../Active'
 import AutoLayout from '../AutoLayout'
@@ -47,7 +45,6 @@ const Map = {
       return false
     })
 
-
     $('.starMap').click(function () {
       if ($(this).is('.starred')) self.unstar()
       else self.star()

frontend/src/Metamaps/PasteInput.js

@@ -45,7 +45,7 @@ const PasteInput = {
 
   handleFile: (file, coords = null) => {
     var self = PasteInput
-    var fileReader = new FileReader()
+    var fileReader = new window.FileReader()
     fileReader.readAsText(file)
     fileReader.onload = function(e) {
       var text = e.currentTarget.result

frontend/src/components/ImportDialogBox.js

@@ -2,7 +2,7 @@ import React, { PropTypes, Component } from 'react'
 import Dropzone from 'react-dropzone'
 
 class ImportDialogBox extends Component {
-  constructor(props) {
+  constructor (props) {
     super(props)
 
     this.state = {
@@ -16,6 +16,7 @@ class ImportDialogBox extends Component {
 
   handleFile = (files, e) => {
     // for some reason it uploads twice, so we need this debouncer
+    // eslint-disable-next-line no-return-assign
     this.debouncer = this.debouncer || window.setTimeout(() => this.debouncer = null, 10)
     if (!this.debouncer) {
       this.props.onFileAdded(files[0])

frontend/src/components/Maps/Header.js

@@ -21,15 +21,15 @@ class Header extends Component {
     const { signedIn, section } = this.props
 
     const activeClass = (title) => {
-      let forClass = "exploreMapsButton"
-      forClass += " " + title + "Maps"
-      if (title == "my" && section == "mine" ||
-          title == section) forClass += " active"
+      let forClass = 'exploreMapsButton'
+      forClass += ' ' + title + 'Maps'
+      if (title === 'my' && section === 'mine' ||
+          title === section) forClass += ' active'
       return forClass
     }
 
-    const explore = section == "mine" || section == "active" || section == "starred" || section == "shared" || section == "featured"
-    const mapper = section == "mapper"
+    const explore = section === 'mine' || section === 'active' || section === 'starred' || section === 'shared' || section === 'featured'
+    const mapper = section === 'mapper'
 
     return (
       <div id="exploreMapsHeader">
@@ -38,31 +38,31 @@ class Header extends Component {
             <div className="exploreMapsCenter">
               <MapLink show={signedIn && explore}
                 href="/explore/mine"
-                linkClass={activeClass("my")}
+                linkClass={activeClass('my')}
                 data-router="true"
                 text="My Maps"
               />
               <MapLink show={signedIn && explore}
                 href="/explore/shared"
-                linkClass={activeClass("shared")}
+                linkClass={activeClass('shared')}
                 data-router="true"
                 text="Shared With Me"
               />
               <MapLink show={signedIn && explore}
                 href="/explore/starred"
-                linkClass={activeClass("starred")}
+                linkClass={activeClass('starred')}
                 data-router="true"
                 text="Starred By Me"
               />
               <MapLink show={explore}
-                href={signedIn ? "/" : "/explore/active"}
-                linkClass={activeClass("active")}
+                href={signedIn ? '/' : '/explore/active'}
+                linkClass={activeClass('active')}
                 data-router="true"
                 text="Global"
               />
               <MapLink show={!signedIn && explore}
                 href="/explore/featured"
-                linkClass={activeClass("featured")}
+                linkClass={activeClass('featured')}
                 data-router="true"
                 text="Featured Maps"
               />

frontend/src/components/Maps/MapCard.js

@@ -3,7 +3,7 @@ import React, { Component, PropTypes } from 'react'
 class MapCard extends Component {
   render = () => {
     const { map, currentUser } = this.props
-    
+
     function capitalize (string) {
       return string.charAt(0).toUpperCase() + string.slice(1)
     }
@@ -16,12 +16,12 @@ class MapCard extends Component {
     const truncatedName = n ? (n.length > maxNameLength ? n.substring(0, maxNameLength) + '...' : n) : ''
     const truncatedDesc = d ? (d.length > maxDescLength ? d.substring(0, maxDescLength) + '...' : d) : ''
     const editPermission = map.authorizeToEdit(currentUser) ? 'canEdit' : 'cannotEdit'
-    
+
     return (
       <div className="map" id={ map.id }>
         <a href={ '/maps/' + map.id } data-router="true">
           <div className={ 'permission ' + editPermission }>
-  	        <div className="mapCard">                                         
+            <div className="mapCard">
               <span className="title" title={ map.get('name') }>
                 { truncatedName }
               </span>
@@ -46,7 +46,7 @@ class MapCard extends Component {
                     { map.get('topic_count') }
                   </span>
                   { map.get('topic_count') === 1 ? ' topic' : ' topics' }
-                  </div> 
+                  </div>
                 <div className="metadataSection mapPermission">
                   { map.get('permission') ? capitalize(map.get('permission')) : 'Commons' }
                 </div>
@@ -57,7 +57,7 @@ class MapCard extends Component {
                   { map.get('synapse_count') === 1 ? ' synapse' : ' synapses' }
                 </div>
                 <div className="clearfloat"></div>
-              </div>                                         
+              </div>
             </div>
           </div>
         </a>

frontend/src/components/Maps/MapperCard.js

@@ -3,14 +3,14 @@ import React, { Component, PropTypes } from 'react'
 class MapperCard extends Component {
   render = () => {
     const { user } = this.props
-    
+
     return (
       <div className="mapper">
-        <div className="mapperCard">                                                 
+        <div className="mapperCard">
           <div className="mapperImage">
             <img src={ user.image } width="96" height="96" />
-          </div> 
-          <div className="mapperName" title={ user.name }>                                                  
+          </div>
+          <div className="mapperName" title={ user.name }>
             { user.name }
           </div>
           <div className="mapperInfo">
@@ -19,10 +19,10 @@ class MapperCard extends Component {
           </div>
           <div className="mapperMetadata">
              <div className="metadataSection metadataMaps"><div>{ user.numMaps }</div>maps</div>
-             <div className="metadataSection metadataTopics"><div>{ user.numTopics }</div>topics</div> 
-             <div className="metadataSection metadataSynapses"><div>{ user.numSynapses }</div>synapses</div> 
-             <div className="clearfloat"></div>                               
-          </div>                                         
+             <div className="metadataSection metadataTopics"><div>{ user.numTopics }</div>topics</div>
+             <div className="metadataSection metadataSynapses"><div>{ user.numSynapses }</div>synapses</div>
+             <div className="clearfloat"></div>
+          </div>
         </div>
       </div>
     )

frontend/src/components/Maps/index.js

@@ -9,12 +9,11 @@ class Maps extends Component {
     const { maps, currentUser, section, displayStyle, user, moreToLoad, loadMore } = this.props
     let mapElements
 
-    if (displayStyle == 'grid') {
+    if (displayStyle === 'grid') {
       mapElements = maps.models.map(function (map) {
         return <MapCard key={ map.id } map={ map } currentUser={ currentUser } />
       })
-    }
-    else if (displayStyle == 'list') {
+    } else if (displayStyle === 'list') {
       mapElements = maps.models.map(function (map) {
         return <MapListItem key={ map.id } map={ map } />
       })
@@ -28,9 +27,10 @@ class Maps extends Component {
             { currentUser && !user ? <div className="map newMap"><a href="/maps/new"><div className="newMapImage"></div><span>Create new map...</span></a></div> : null }
             { mapElements }
             <div className='clearfloat'></div>
-            { moreToLoad ? 
-                [<button className="button loadMore" onClick={ loadMore }>load more</button>, <div className='clearfloat'></div>]
-                : null }
+            {!moreToLoad ? null : [
+              <button className="button loadMore" onClick={ loadMore }>load more</button>,
+              <div className='clearfloat'></div>
+            ]}
           </div>
         </div>
         <Header signedIn={ !!currentUser }