Updated lint rule and made fixes

Long live `comma-dangle`!

.eslintrc

@@ -25,6 +25,7 @@
     "jsx-quotes"           : [2, "prefer-single"],
     "max-len"              : [2, 120, 2],
     "object-curly-spacing" : [2, "always"],
-    "no-var"               : 2
+    "no-var"               : 2,
+    "comma-dangle"         : [2, "always-multiline"]
   }
 }

config/webpack.custom.config.js

@@ -5,10 +5,10 @@ const config = {
     rules: [
       {
         test: /\.icon\.txt$/,
-        use: 'svg-inline-loader?classPrefix'
-      }
-    ]
-  }
+        use: 'svg-inline-loader?classPrefix',
+      },
+    ],
+  },
 }
 
 if (process.env.NODE_ENV === 'development') {
@@ -22,7 +22,7 @@ if (process.env.NODE_ENV === 'development') {
     if (sketchesPath) {
       devServerOptions = {
         contentBase: sketchesPath,
-        watchContentBase: true
+        watchContentBase: true,
       }
     }
   }

src/components/AddSketch/index.js

@@ -39,9 +39,9 @@ AddSketch.propTypes = {
   items: PropTypes.arrayOf(
     PropTypes.shape({
       title: PropTypes.string,
-      id: PropTypes.string
+      id: PropTypes.string,
     })
-  ).isRequired
+  ).isRequired,
 }
 
 export default AddSketch

src/components/App/index.js

@@ -69,5 +69,5 @@ App.propTypes = {
   stats: PropTypes.object.isRequired,
   leftWidth: PropTypes.number.isRequired,
   onLeftDrag: PropTypes.func.isRequired,
-  onWrapperClick: PropTypes.func.isRequired
+  onWrapperClick: PropTypes.func.isRequired,
 }

src/components/AudioAnalyzer/index.js

@@ -118,12 +118,12 @@ class AudioAnalyzer extends React.Component {
 }
 
 AudioAnalyzer.contextTypes = {
-  store: PropTypes.object.isRequired
+  store: PropTypes.object.isRequired,
 }
 AudioAnalyzer.propTypes = {
   isOpen: PropTypes.bool,
   onAnalyzerClick: PropTypes.func.isRequired,
-  onWrapperClick: PropTypes.func.isRequired
+  onWrapperClick: PropTypes.func.isRequired,
 }
 
 export default AudioAnalyzer

src/components/BankSelect/index.js

@@ -17,7 +17,7 @@ const BankSelect = ({ deviceId }) => (
 )
 
 BankSelect.propTypes = {
-  deviceId: PropTypes.string.isRequired
+  deviceId: PropTypes.string.isRequired,
 }
 
 export default BankSelect

src/components/BankSelectItem/index.js

@@ -31,7 +31,7 @@ const BankSelectItem = ({ index, onClick, isActive }) => (
 BankSelectItem.propTypes = {
   index: PropTypes.number.isRequired,
   onClick: PropTypes.func.isRequired,
-  isActive: PropTypes.bool
+  isActive: PropTypes.bool,
 }
 
 export default BankSelectItem

src/components/Button/index.js

@@ -7,13 +7,13 @@ import { Link as RouterLink } from 'react-router-dom'
 
 const sizes = {
   large: '1.5rem',
-  small: '0.7rem'
+  small: '0.7rem',
 }
 
 const colors = {
   channelA: theme.channelAColor,
   channelB: theme.channelBColor,
-  danger: theme.dangerColor
+  danger: theme.dangerColor,
 }
 
 const Inner = styled.span`
@@ -81,7 +81,7 @@ const Button = ({ onClick, ...props }) =>
 Button.propTypes = {
   to: PropTypes.string,
   children: PropTypes.node.isRequired,
-  onClick: PropTypes.func
+  onClick: PropTypes.func,
 }
 
 export default Button

src/components/Clock/index.js

@@ -52,7 +52,7 @@ Clock.propTypes = {
   phrase: PropTypes.number.isRequired,
   bpm: PropTypes.number,
   onResetClick: PropTypes.func.isRequired,
-  onTapTempoClick: PropTypes.func.isRequired
+  onTapTempoClick: PropTypes.func.isRequired,
 }
 
 export default Clock

src/components/Control/index.js

@@ -16,7 +16,7 @@ const Control = ({ nodeId, type }) => {
 
 Control.propTypes = {
   nodeId: PropTypes.string.isRequired,
-  type: PropTypes.string.isRequired
+  type: PropTypes.string.isRequired,
 }
 
 export default Control

src/components/Crossfader/index.js

@@ -66,7 +66,7 @@ Crossfader.propTypes = {
   titleA: PropTypes.string,
   titleB: PropTypes.string,
   onClickA: PropTypes.func.isRequired,
-  onClickB: PropTypes.func.isRequired
+  onClickB: PropTypes.func.isRequired,
 }
 
 export default Crossfader

src/components/CurrentScene/index.js

@@ -12,7 +12,7 @@ const CurrentScene = ({ match }) => (
 )
 
 CurrentScene.propTypes = {
-  match: PropTypes.object.isRequired
+  match: PropTypes.object.isRequired,
 }
 
 export default CurrentScene

src/components/CurrentSketch/index.js

@@ -12,7 +12,7 @@ const CurrentSketch = (props) =>
     </div>
 
 CurrentSketch.propTypes = {
-  isSketch: PropTypes.bool
+  isSketch: PropTypes.bool,
 }
 
 export default CurrentSketch

src/components/Devices/index.js

@@ -55,8 +55,8 @@ Devices.propTypes = {
   items: PropTypes.arrayOf(PropTypes.shape({
     title: PropTypes.string.isRequired,
     id: PropTypes.string.isRequired,
-    manufacturer:  PropTypes.string.isRequired
-  }))
+    manufacturer:  PropTypes.string.isRequired,
+  })),
 }
 
 export default Devices

src/components/EditingOverlay/index.js

@@ -19,9 +19,9 @@ EditingOverlay.propTypes = {
   title: PropTypes.string,
   id: PropTypes.oneOfType([
     PropTypes.string,
-    PropTypes.bool
+    PropTypes.bool,
   ]),
-  type: PropTypes.string
+  type: PropTypes.string,
 }
 
 export default EditingOverlay

src/components/EditingOverlayForm/index.js

@@ -17,7 +17,7 @@ class EditingOverlayForm extends React.Component {
 }
 
 EditingOverlayForm.propTypes = {
-  handleSubmit: PropTypes.func.isRequired
+  handleSubmit: PropTypes.func.isRequired,
 }
 
 export default EditingOverlayForm

src/components/ErrorOverlay/index.js

@@ -46,7 +46,7 @@ ErrorOverlay.propTypes = {
   onCancelClick: PropTypes.func,
   code: PropTypes.string,
   message: PropTypes.string,
-  onChooseSketchFolderClick: PropTypes.func.isRequired
+  onChooseSketchFolderClick: PropTypes.func.isRequired,
 }
 
 export default ErrorOverlay

src/components/Home/index.js

@@ -49,7 +49,7 @@ const Home = ({ onChooseFolderClick, onLoadClick }) =>
 
 Home.propTypes = {
   onChooseFolderClick: PropTypes.func.isRequired,
-  onLoadClick: PropTypes.func.isRequired
+  onLoadClick: PropTypes.func.isRequired,
 }
 
 export default Home

src/components/Icon/index.js

@@ -17,7 +17,7 @@ const Icon = (props) => {
   )
 }
 Icon.propTypes = {
-  glyph: PropTypes.string.isRequired
+  glyph: PropTypes.string.isRequired,
 }
 
 export default Icon

src/components/Input/index.js

@@ -56,7 +56,7 @@ Input.propTypes = {
   label: PropTypes.string,
   type: PropTypes.string,
   id: PropTypes.string,
-  name: PropTypes.string.isRequired
+  name: PropTypes.string.isRequired,
 }
 
 export default Input

src/components/InputLink/index.js

@@ -107,7 +107,7 @@ InputLink.propTypes = {
   id: PropTypes.string.isRequired,
   sequencerGridId: PropTypes.string,
   toggleActionId: PropTypes.string.isRequired,
-  isActivateVisible: PropTypes.bool
+  isActivateVisible: PropTypes.bool,
 }
 
 export default InputLink

src/components/InputLinkMidiControl/index.js

@@ -19,7 +19,7 @@ const InputLinkMidiControl = ({ onAssignClick, inputLinkIds }) => (
 
 InputLinkMidiControl.propTypes = {
   onAssignClick: PropTypes.func.isRequired,
-  inputLinkIds: PropTypes.array.isRequired
+  inputLinkIds: PropTypes.array.isRequired,
 }
 
 export default InputLinkMidiControl

src/components/InputLinkTags/index.js

@@ -24,7 +24,7 @@ const InputLinkTags = ({ ids }) => (
 )
 
 InputLinkTags.propTypes = {
-  ids: PropTypes.arrayOf(PropTypes.string)
+  ids: PropTypes.arrayOf(PropTypes.string),
 }
 
 export default InputLinkTags

src/components/InputLinkUI/index.js

@@ -69,10 +69,10 @@ InputLinkUI.propTypes = {
     ).isRequired,
     toggledActive: PropTypes.arrayOf(
       PropTypes.string
-    ).isRequired
+    ).isRequired,
   }).isRequired,
   nodeId: PropTypes.string.isRequired,
-  currentInputLinkId: PropTypes.string
+  currentInputLinkId: PropTypes.string,
 }
 
 export default InputLinkUI

src/components/InputSelect/index.js

@@ -23,7 +23,7 @@ InputSelect.propTypes = {
   onInputChange: PropTypes.func.isRequired,
   options: PropTypes.arrayOf(
     PropTypes.object
-  ).isRequired
+  ).isRequired,
 }
 
 export default InputSelect

src/components/Item/index.js

@@ -12,7 +12,7 @@ const Item = ({ children }) => (
 )
 
 Item.propTypes = {
-  children: PropTypes.node
+  children: PropTypes.node,
 }
 
 export default Item

src/components/Items/index.js

@@ -15,7 +15,7 @@ const Items = ({ children, direction }) => (
 
 Items.propTypes = {
   children: PropTypes.node,
-  direction: PropTypes.string
+  direction: PropTypes.string,
 }
 
 export default Items

src/components/MacroItem/index.js

@@ -29,7 +29,7 @@ const Button = styled(ButtonComponent)`
 const MacroItem = ({
   nodeId, onLearningClick, onDeleteClick, paramLinks, inputLinkIds, isLearning,
   macroId, inputSettingsAreVisible, paramLinksAreVisible, isOpen, title, onOpenClick, numInputs,
-  inputLinkTitle, onRenameClick
+  inputLinkTitle, onRenameClick,
 }) => (
   <div>
     <Param
@@ -92,7 +92,7 @@ MacroItem.propTypes = {
   onOpenClick: PropTypes.func.isRequired,
   numInputs: PropTypes.number.isRequired,
   inputLinkTitle: PropTypes.string,
-  onRenameClick: PropTypes.func.isRequired
+  onRenameClick: PropTypes.func.isRequired,
 }
 
 export default MacroItem

src/components/MacroLink/index.js

@@ -38,7 +38,7 @@ const MacroLink = (
 MacroLink.propTypes = {
   title: PropTypes.string.isRequired,
   nodeId: PropTypes.string.isRequired,
-  onDeleteClick: PropTypes.func.isRequired
+  onDeleteClick: PropTypes.func.isRequired,
 }
 
 export default MacroLink

src/components/Macros/index.js

@@ -34,9 +34,9 @@ Macros.propTypes = {
   items: PropTypes.arrayOf(
     PropTypes.shape({
       id: PropTypes.string,
-      title: PropTypes.string
+      title: PropTypes.string,
     })
-  )
+  ),
 }
 
 export default Macros

src/components/MainViewOuter/index.js

@@ -53,5 +53,5 @@ MainViewOuter.propTypes = {
   notificationText: PropTypes.string,
   notificationButtonText: PropTypes.string,
   onNotificationButtonClick: PropTypes.func,
-  isActive: PropTypes.bool
+  isActive: PropTypes.bool,
 }

src/components/MidiButton/index.js

@@ -17,7 +17,7 @@ const MidiButton = ({ onClick }) => (
 )
 
 MidiButton.propTypes = {
-  onClick: PropTypes.func.isRequired
+  onClick: PropTypes.func.isRequired,
 }
 
 export default MidiButton

src/components/MidiLearn/index.js

@@ -16,5 +16,5 @@ export default MidiLearn
 
 MidiLearn.propTypes = {
   isVisible: PropTypes.bool,
-  onCancelClick: PropTypes.func.isRequired
+  onCancelClick: PropTypes.func.isRequired,
 }

src/components/Modifier/index.js

@@ -33,7 +33,7 @@ const Modifier = (
 Modifier.propTypes = {
   title: PropTypes.string.isRequired,
   nodeId: PropTypes.string.isRequired,
-  onAssignClick: PropTypes.func.isRequired
+  onAssignClick: PropTypes.func.isRequired,
 }
 
 export default Modifier

src/components/NavItem/index.js

@@ -51,7 +51,7 @@ const NavItem = (props) => {
 }
 
 NavItem.propTypes = {
-  to: PropTypes.string
+  to: PropTypes.string,
 }
 
 export default NavItem

src/components/NodeInputInfo/index.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import InputLinkTags from '../InputLinkTags'
 
 const NodeInputInfo = ({
-  inputLinkIds, isLearningMidi
+  inputLinkIds, isLearningMidi,
 }) => (
   <div>
     {isLearningMidi
@@ -17,7 +17,7 @@ NodeInputInfo.propTypes = {
   inputLinkIds: PropTypes.arrayOf(
     PropTypes.string
   ),
-  isLearningMidi: PropTypes.bool
+  isLearningMidi: PropTypes.bool,
 }
 
 export default NodeInputInfo

src/components/NodeTabItem/index.js

@@ -44,7 +44,7 @@ NodeTabItem.propTypes = {
   title: PropTypes.string.isRequired,
   isSelected: PropTypes.bool,
   isActive: PropTypes.bool,
-  onClick: PropTypes.func.isRequired
+  onClick: PropTypes.func.isRequired,
 }
 
 export default NodeTabItem