eslint commands and apply some style fixes (#1021)

* auto eslint and add commands for eslint

* eslint the entire frontend folder

frontend/src/Metamaps/Cable.js

@@ -1,5 +1,7 @@
 /* global $, ActionCable */
 
+import { indexOf } from 'lodash'
+
 import Active from './Active'
 import Control from './Control'
 import DataModel from './DataModel'
@@ -42,14 +44,14 @@ const Cable = {
     if (t1.authorizeToShow(m) && t2.authorizeToShow(m) && s.authorizeToShow(m) && !DataModel.Synapses.get(event.synapse.id)) {
       // refactor the heck outta this, its adding wicked wait time
       var topic1, topic2, node1, node2, synapse, mapping, cancel, mapper
- 
-      function waitThenRenderSynapse() {
+
+      const waitThenRenderSynapse = () => {
         if (synapse && mapping && mapper) {
           topic1 = synapse.getTopic1()
           node1 = topic1.get('node')
           topic2 = synapse.getTopic2()
           node2 = topic2.get('node')
-    
+
           Synapse.renderSynapse(mapping, synapse, node1, node2, false)
         } else if (!cancel) {
           setTimeout(waitThenRenderSynapse, 10)
@@ -108,7 +110,7 @@ const Cable = {
       if (edge.getData('mappings').length - 1 === 0) {
         Control.hideEdge(edge)
       }
-  
+
       var index = indexOf(edge.getData('synapses'), synapse)
       edge.getData('mappings').splice(index, 1)
       edge.getData('synapses').splice(index, 1)
@@ -129,15 +131,15 @@ const Cable = {
     if (t.authorizeToShow(m) && !DataModel.Topics.get(event.topic.id)) {
       // refactor the heck outta this, its adding wicked wait time
       var topic, mapping, mapper, cancel
-    
-      function waitThenRenderTopic() {
+
+      const waitThenRenderTopic = () => {
         if (topic && mapping && mapper) {
           Topic.renderTopic(mapping, topic, false, false)
         } else if (!cancel) {
           setTimeout(waitThenRenderTopic, 10)
         }
       }
-    
+
       mapper = DataModel.Mappers.get(event.topic.user_id)
       if (mapper === undefined) {
         Mapper.get(event.topic.user_id, function(m) {

frontend/src/Metamaps/Control.js

@@ -1,5 +1,3 @@
-/* global $ */
-
 import _ from 'lodash'
 import outdent from 'outdent'
 
@@ -7,7 +5,6 @@ import Active from './Active'
 import DataModel from './DataModel'
 import Filter from './Filter'
 import GlobalUI from './GlobalUI'
-import JIT from './JIT'
 import Mouse from './Mouse'
 import Selected from './Selected'
 import Settings from './Settings'
@@ -98,7 +95,6 @@ const Control = {
 
     var permToDelete = Active.Mapper.id === topic.get('user_id') || Active.Mapper.get('admin')
     if (permToDelete) {
-      var mappableid = topic.id
       var mapping = node.getData('mapping')
       topic.destroy()
       DataModel.Mappings.remove(mapping)
@@ -148,7 +144,6 @@ const Control = {
     }
 
     var topic = node.getData('topic')
-    var mappableid = topic.id
     var mapping = node.getData('mapping')
     mapping.destroy()
     DataModel.Topics.remove(topic)
@@ -267,7 +262,6 @@ const Control = {
       if (edge.getData('synapses').length - 1 === 0) {
         Control.hideEdge(edge)
       }
-      var mappableid = synapse.id
       synapse.destroy()
 
       // the server will destroy the mapping, we just need to remove it here
@@ -318,7 +312,6 @@ const Control = {
 
     var synapse = edge.getData('synapses')[index]
     var mapping = edge.getData('mappings')[index]
-    var mappableid = synapse.id
     mapping.destroy()
 
     DataModel.Synapses.remove(synapse)

frontend/src/Metamaps/Create.js

@@ -291,18 +291,18 @@ const Create = {
           },
           source: synapseBloodhound
         },
-          {
-            name: 'existing_synapses',
-            limit: 50,
-            display: function(s) { return s.label },
-            templates: {
-              suggestion: function(s) {
-                return Hogan.compile($('#synapseAutocompleteTemplate').html()).render(s)
-              },
-              header: '<h3>Existing synapses</h3>'
+        {
+          name: 'existing_synapses',
+          limit: 50,
+          display: function(s) { return s.label },
+          templates: {
+            suggestion: function(s) {
+              return Hogan.compile($('#synapseAutocompleteTemplate').html()).render(s)
             },
-            source: existingSynapseBloodhound
-          }]
+            header: '<h3>Existing synapses</h3>'
+          },
+          source: existingSynapseBloodhound
+        }]
       )
 
       $('#synapse_desc').keyup(function(e) {

frontend/src/Metamaps/DataModel/Map.js

@@ -7,7 +7,6 @@ try { Backbone.$ = window.$ } catch (err) {}
 import Active from '../Active'
 import InfoBox from '../Map/InfoBox'
 import Mapper from '../Mapper'
-import Realtime from '../Realtime'
 
 const Map = Backbone.Model.extend({
   urlRoot: '/maps',

frontend/src/Metamaps/DataModel/Synapse.js

@@ -1,5 +1,3 @@
-/* global $ */
-
 import _ from 'lodash'
 import outdent from 'outdent'
 import Backbone from 'backbone'
@@ -7,8 +5,6 @@ try { Backbone.$ = window.$ } catch (err) {}
 
 import Active from '../Active'
 import Filter from '../Filter'
-import JIT from '../JIT'
-import Realtime from '../Realtime'
 import SynapseCard from '../SynapseCard'
 import Visualize from '../Visualize'
 

frontend/src/Metamaps/DataModel/Topic.js

@@ -1,13 +1,9 @@
-/* global $ */
-
 import _ from 'lodash'
 import Backbone from 'backbone'
 try { Backbone.$ = window.$ } catch (err) {}
 
 import Active from '../Active'
 import Filter from '../Filter'
-import JIT from '../JIT'
-import Realtime from '../Realtime'
 import TopicCard from '../TopicCard'
 import Visualize from '../Visualize'
 

frontend/src/Metamaps/PasteInput.js

@@ -6,6 +6,7 @@ import Visualize from './Visualize'
 
 const PasteInput = {
   // thanks to https://github.com/kevva/url-regex
+  // eslint-disable-next-line no-useless-escape
   URL_REGEX: new RegExp('^(?:(?:(?:[a-z]+:)?//)|www\.)(?:\S+(?::\S*)?@)?(?:localhost|(?:25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9][0-9]|[0-9])(?:\.(?:25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9][0-9]|[0-9])){3}|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,}))\.?)(?::\d{2,5})?(?:[/?#][^\s"]*)?$'),
 
   init: function() {

frontend/src/Metamaps/Realtime/events.js

@@ -14,7 +14,7 @@ module.exports = {
   SEND_COORDS: 'SEND_COORDS',
   DRAG_TOPIC: 'DRAG_TOPIC',
 
-  /* EVENTS RECEIVABLE FROM NODE SERVER*/
+  /* EVENTS RECEIVABLE FROM NODE SERVER */
   JUNTO_UPDATED: 'JUNTO_UPDATED',
   INVITED_TO_CALL: 'INVITED_TO_CALL',
   INVITED_TO_JOIN: 'INVITED_TO_JOIN',
@@ -29,5 +29,5 @@ module.exports = {
   NEW_MAPPER: 'NEW_MAPPER',
   LOST_MAPPER: 'LOST_MAPPER',
   TOPIC_DRAGGED: 'TOPIC_DRAGGED',
-  PEER_COORDS_UPDATED: 'PEER_COORDS_UPDATED',
+  PEER_COORDS_UPDATED: 'PEER_COORDS_UPDATED'
 }

frontend/src/Metamaps/Realtime/index.js

@@ -8,8 +8,7 @@ import Cable from '../Cable'
 import DataModel from '../DataModel'
 import JIT from '../JIT'
 import Util from '../Util'
-import Views from '../Views'
-import { ChatView } from '../Views'
+import Views, { ChatView } from '../Views'
 import Visualize from '../Visualize'
 
 import {
@@ -152,7 +151,7 @@ let Realtime = {
         config: { DOUBLE_CLICK_TOLERANCE: 200 }
       })
       self.room.videoAdded(self.handleVideoAdded)
-      
+
       self.startActiveMap()
     } // if Active.Mapper
   },

frontend/src/Metamaps/Realtime/receivable.js

@@ -4,18 +4,12 @@
 everthing in this file happens as a result of websocket events
 */
 
-import { indexOf } from 'lodash'
-
 import { JUNTO_UPDATED } from './events'
 
 import Active from '../Active'
 import { ChatView } from '../Views'
 import DataModel from '../DataModel'
 import GlobalUI from '../GlobalUI'
-import Control from '../Control'
-import Mapper from '../Mapper'
-import Topic from '../Topic'
-import Synapse from '../Synapse'
 import Util from '../Util'
 import Visualize from '../Visualize'
 
@@ -210,7 +204,7 @@ export const callInProgress = self => () => {
   GlobalUI.notifyUser(notifyText, true)
   $('#toast button.yes').click(e => self.joinCall())
   $('#toast button.no').click(e => GlobalUI.clearNotify())
-  ChatView.conversationInProgress() 
+  ChatView.conversationInProgress()
 }
 
 export const callStarted = self => () => {

frontend/src/Metamaps/Synapse.js

@@ -4,7 +4,6 @@ import Active from './Active'
 import Control from './Control'
 import Create from './Create'
 import DataModel from './DataModel'
-import JIT from './JIT'
 import Map from './Map'
 import Selected from './Selected'
 import Settings from './Settings'

frontend/src/Metamaps/Views/ChatView.js

@@ -49,7 +49,7 @@ const ChatView = {
     $('#' + ChatView.domId).hide()
   },
   render: () => {
-    if (!Active.Map) return    
+    if (!Active.Map) return
     const self = ChatView
     self.mapChat = ReactDOM.render(React.createElement(MapChat, {
       conversationLive: self.conversationLive,
@@ -111,7 +111,7 @@ const ChatView = {
   conversationInProgress: participating => {
     ChatView.conversationLive = true
     ChatView.isParticipating = participating
-    ChatView.render() 
+    ChatView.render()
   },
   conversationEnded: () => {
     ChatView.conversationLive = false
@@ -144,7 +144,7 @@ const ChatView = {
   },
   addMessage: (message, isInitial, wasMe) => {
     const self = ChatView
-    if (!isInitial) self.mapChat.newMessage() 
+    if (!isInitial) self.mapChat.newMessage()
     if (!wasMe && !isInitial && self.alertSound) self.sound.play('receivechat')
     self.messages.add(message)
     self.render()

frontend/src/Metamaps/Views/Room.js

@@ -1,13 +1,7 @@
 /* global $ */
 
-import Backbone from 'backbone'
 import attachMediaStream from 'attachmediastream'
 
-// TODO is this line good or bad
-// Backbone.$ = window.$
-
-import Active from '../Active'
-import DataModel from '../DataModel'
 import Realtime from '../Realtime'
 import VideoView from './VideoView'
 

frontend/src/Metamaps/Views/index.js

@@ -9,7 +9,7 @@ import { JUNTO_UPDATED } from '../Realtime/events'
 const Views = {
   init: (serverData) => {
     $(document).on(JUNTO_UPDATED, () => ExploreMaps.render())
-    ChatView.init([serverData['sounds/MM_sounds.mp3'],serverData['sounds/MM_sounds.ogg']])
+    ChatView.init([serverData['sounds/MM_sounds.mp3'], serverData['sounds/MM_sounds.ogg']])
   },
   ExploreMaps,
   ChatView,

frontend/src/components/MapChat/Message.js

@@ -11,25 +11,25 @@ function addZero(i) {
   return i
 }
 
-function formatDate(created_at) {
-  let date = new Date(created_at)
+function formatDate(createdAt) {
+  let date = new Date(createdAt)
   let formatted = (date.getMonth() + 1) + '/' + date.getDate()
   formatted += ' ' + addZero(date.getHours()) + ':' + addZero(date.getMinutes())
   return formatted
 }
 
 const Message = props => {
-  const { user_image, user_name, message, created_at, heading } = props
+  const { user_image: userImage, user_name: userName, message, created_at: createdAt, heading } = props
   const messageHtml = {__html: linker.link(Util.addEmoji(message, { emoticons: false }))}
 
   return (
     <div className="chat-message">
       <div className="chat-message-user">
-        {heading && <img src={user_image} />}
+        {heading && <img src={userImage} />}
       </div>
       {heading && <div className="chat-message-meta">
-        <span className='chat-message-username'>{user_name}</span>&nbsp;
-        <span className='chat-message-time'>{formatDate(created_at)}</span>
+        <span className='chat-message-username'>{userName}</span>&nbsp;
+        <span className='chat-message-time'>{formatDate(createdAt)}</span>
       </div>}
       <div className="chat-message-text" dangerouslySetInnerHTML={messageHtml}></div>
       <div className="clearfloat"></div>

frontend/src/components/MapChat/Participant.js

@@ -2,28 +2,28 @@ import React, { PropTypes, Component } from 'react'
 
 class Participant extends Component {
   render() {
-    const { conversationLive, mapperIsLive, isParticipating, isPending, id, self, image, username, selfName, color } = this.props
+    const { conversationLive, mapperIsLive, isParticipating, isPending, id, self, image, username, color } = this.props
     return (
-			<div className={`participant participant-${id} ${self ? 'is-self' : ''}`}>
-				<div className="chat-participant-image">
-					<img src={image} style={{ border: `2px solid ${color}`}} />
-				</div>
-				<div className="chat-participant-name">
-					{username} {self ? '(me)' : ''}
-				</div>
-				{!self && !conversationLive && <button
-					className={`button chat-participant-invite-call ${isPending ? 'pending' : ''}`}
-					onClick={() => !isPending && this.props.inviteACall(id)} // Realtime.inviteACall(id)
-				/>}
-				{!self && mapperIsLive && !isParticipating && <button
-					className={`button chat-participant-invite-join ${isPending ? 'pending' : ''}`}
-					onClick={() => !isPending && this.props.inviteToJoin(id)} // Realtime.inviteToJoin(id)
-				/>}
-				{isParticipating && <span className="chat-participant-participating">
-					<div className="green-dot"></div>
-				</span>}
-				<div className="clearfloat"></div>
-			</div>
+      <div className={`participant participant-${id} ${self ? 'is-self' : ''}`}>
+        <div className="chat-participant-image">
+          <img src={image} style={{ border: `2px solid ${color}` }} />
+        </div>
+        <div className="chat-participant-name">
+          {username} {self ? '(me)' : ''}
+        </div>
+        {!self && !conversationLive && <button
+          className={`button chat-participant-invite-call ${isPending ? 'pending' : ''}`}
+          onClick={() => !isPending && this.props.inviteACall(id)} // Realtime.inviteACall(id)
+        />}
+        {!self && mapperIsLive && !isParticipating && <button
+          className={`button chat-participant-invite-join ${isPending ? 'pending' : ''}`}
+          onClick={() => !isPending && this.props.inviteToJoin(id)} // Realtime.inviteToJoin(id)
+        />}
+        {isParticipating && <span className="chat-participant-participating">
+          <div className="green-dot"></div>
+        </span>}
+        <div className="clearfloat"></div>
+      </div>
     )
   }
 }

frontend/src/components/Maps/Header.js

@@ -41,7 +41,7 @@ class Header extends Component {
                 linkClass={activeClass('active')}
                 data-router="true"
                 text="All Maps"
-              /> 
+              />
               <MapLink show={signedIn && explore}
                 href="/explore/mine"
                 linkClass={activeClass('my')}

package.json

@@ -5,7 +5,9 @@
   "scripts": {
     "build": "webpack",
     "build:watch": "webpack --watch",
-    "test": "mocha --compilers js:babel-core/register frontend/test"
+    "test": "mocha --compilers js:babel-core/register frontend/test",
+    "eslint": "eslint frontend",
+    "eslint:fix": "eslint --fix frontend"
   },
   "repository": {
     "type": "git",