UI Formatting Cleanup

.esprintrc

@@ -0,0 +1,9 @@
+{
+  "paths": [
+    "frontend/src/**/*.js"
+  ],
+  "ignored": [
+    "**/node_modules/**/*"
+  ],
+  "port": 5004
+}

build-appveyor.cake

@@ -1,4 +1,5 @@
 #addin "Cake.Npm"
+#addin "Cake.Yarn"
 #addin "SharpZipLib"
 #addin "Cake.Compression"
 

build.sh

@@ -74,6 +74,17 @@ BuildWithXbuild()
     CheckExitCode xbuild /p:Configuration=Release /p:Platform=x86 /t:Build /p:AllowedReferenceRelatedFileExtensions=.pdb $slnFile
 }
 
+LintUI()
+{
+    ProgressStart 'ESLint'
+    CheckExitCode yarn eslint
+    ProgressEnd 'ESLint'
+
+    ProgressStart 'Stylelint'
+    CheckExitCode yarn stylelint
+    ProgressEnd 'Stylelint'
+}
+
 Build()
 {
     echo "##teamcity[progressStart 'Build']"
@@ -98,13 +109,14 @@ Build()
 
 RunGulp()
 {
-    echo "##teamcity[progressStart 'npm install']"
-    npm-cache install npm || CheckExitCode npm install --no-optional --no-bin-links
-    echo "##teamcity[progressFinish 'npm install']"
+    ProgressStart 'npm install'
+    yarn install
+    #npm-cache install npm || CheckExitCode npm install --no-optional --no-bin-links
+    ProgressEnd 'npm install'
 
-    echo "##teamcity[progressStart 'Running gulp']"
+    ProgressStart 'Running gulp'
     CheckExitCode npm run build -- --production
-    echo "##teamcity[progressFinish 'Running gulp']"
+    ProgressEnd 'Running gulp'
 }
 
 CreateMdbs()
@@ -253,6 +265,7 @@ case "$(uname -s)" in
         ;;
 esac
 
+LintUI
 Build
 RunGulp
 PackageMono

frontend/.eslintrc

@@ -11,7 +11,7 @@
   "globals": {
     "expect": false,
     "chai": false,
-    "sinon": false,
+    "sinon": false
   },
 
   "parserOptions": {
@@ -20,7 +20,7 @@
     "ecmaFeatures": {
       "modules": true,
       "impliedStrict": true
-    },
+    }
   },
 
   "plugins": [
@@ -33,32 +33,32 @@
 
     # ECMAScript 6
 
-    arrow-body-style: [0],
-    arrow-parens: ["error", "always"],
-    arrow-spacing: ["error", { "before": true, "after": true }],
-    constructor-super: "error",
-    generator-star-spacing: "off",
-    no-class-assign: "error",
-    no-confusing-arrow: "error",
-    no-const-assign: "error",
-    no-dupe-class-members: "error",
-    no-duplicate-imports: "error",
-    no-new-symbol: "error",
-    no-this-before-super: "error",
-    no-useless-escape: "error",
-    no-useless-computed-key: "error",
-    no-useless-constructor: "error",
-    no-var: "warn",
-    object-shorthand: ["error", "properties"],
-    prefer-arrow-callback: "error",
-    prefer-const: "warn",
-    prefer-reflect: "off",
-    prefer-rest-params: "off",
-    prefer-spread: "warn",
-    prefer-template: "error",
-    require-yield: "off",
-    template-curly-spacing: ["error", "never"],
-    yield-star-spacing: "off",
+    "arrow-body-style": [0],
+    "arrow-parens": ["error", "always"],
+    "arrow-spacing": ["error", { "before": true, "after": true }],
+    "constructor-super": "error",
+    "generator-star-spacing": "off",
+    "no-class-assign": "error",
+    "no-confusing-arrow": "error",
+    "no-const-assign": "error",
+    "no-dupe-class-members": "error",
+    "no-duplicate-imports": "error",
+    "no-new-symbol": "error",
+    "no-this-before-super": "error",
+    "no-useless-escape": "error",
+    "no-useless-computed-key": "error",
+    "no-useless-constructor": "error",
+    "no-var": "warn",
+    "object-shorthand": ["error", "properties"],
+    "prefer-arrow-callback": "error",
+    "prefer-const": "warn",
+    "prefer-reflect": "off",
+    "prefer-rest-params": "off",
+    "prefer-spread": "warn",
+    "prefer-template": "error",
+    "require-yield": "off",
+    "template-curly-spacing": ["error", "never"],
+    "yield-star-spacing": "off",
 
     # Possible Errors
 
@@ -110,7 +110,7 @@
     "no-div-regex": "error",
     "no-else-return": "error",
     "no-empty-function": ["error", {"allow": ["arrowFunctions"]}],
-    no-empty-pattern: "error",
+    "no-empty-pattern": "error",
     "no-eval": "error",
     "no-extend-native": "error",
     "no-extra-bind": "error",
@@ -122,158 +122,159 @@
         "string": true,
         "allow": [/* "!!", "~", "*", "+" */]
     }],
-    no-implicit-globals: "error",
-    no-implied-eval: "error",
-    no-invalid-this: "off",
-    no-iterator: "error",
-    no-labels: "error",
-    no-lone-blocks: "error",
-    no-loop-func: "error",
-    no-magic-numbers: ["off", {"ignoreArrayIndexes": true, "ignore": [0, 1] }],
-    no-multi-spaces: "error",
-    no-multi-str: "error",
+    "no-implicit-globals": "error",
+    "no-implied-eval": "error",
+    "no-invalid-this": "off",
+    "no-iterator": "error",
+    "no-labels": "error",
+    "no-lone-blocks": "error",
+    "no-loop-func": "error",
+    "no-magic-numbers": ["off", {"ignoreArrayIndexes": true, "ignore": [0, 1] }],
+    "no-multi-spaces": "error",
+    "no-multi-str": "error",
     "no-native-reassign": ["error", {"exceptions": ["console"]}],
-    no-new: "off",
-    no-new-func: "error",
-    no-new-wrappers: "error",
-    no-octal: "error",
-    no-octal-escape: "error",
-    no-param-reassign: "off",
-    no-process-env: "off",
-    no-proto: "error",
-    no-redeclare: "error",
-    no-return-assign: "warn",
-    no-script-url: "error",
-    no-self-assign: "error",
-    no-self-compare: "error",
-    no-sequences: "error",
-    no-throw-literal: "error",
-    no-unmodified-loop-condition: "error",
-    no-unused-expressions: "error",
-    no-unused-labels: "error",
-    no-useless-call: "error",
-    no-useless-concat: "error",
-    no-void: "error",
-    no-warning-comments: "off",
-    no-with: "error",
-    radix: ["error", "as-needed"],
-    vars-on-top: "off",
-    wrap-iife: ["error", "inside"],
-    yoda: "error",
+    "no-new": "off",
+    "no-new-func": "error",
+    "no-new-wrappers": "error",
+    "no-octal": "error",
+    "no-octal-escape": "error",
+    "no-param-reassign": "off",
+    "no-process-env": "off",
+    "no-proto": "error",
+    "no-redeclare": "error",
+    "no-return-assign": "warn",
+    "no-script-url": "error",
+    "no-self-assign": "error",
+    "no-self-compare": "error",
+    "no-sequences": "error",
+    "no-throw-literal": "error",
+    "no-unmodified-loop-condition": "error",
+    "no-unused-expressions": "error",
+    "no-unused-labels": "error",
+    "no-useless-call": "error",
+    "no-useless-concat": "error",
+    "no-void": "error",
+    "no-warning-comments": "off",
+    "no-with": "error",
+    "radix": ["error", "as-needed"],
+    "vars-on-top": "off",
+    "wrap-iife": ["error", "inside"],
+    "yoda": "error",
 
     # Strict Mode
 
-    strict: ["error", "never"],
+    "strict": ["error", "never"],
 
     # Variables
 
-    init-declarations: ["error", "always"],
-    no-catch-shadow: "error",
-    no-delete-var: "error",
-    no-label-var: "error",
-    no-restricted-globals: "off",
-    no-shadow: "error",
-    no-shadow-restricted-names: "error",
-    no-undef: "error",
-    no-undef-init: "off",
-    no-undefined: "off",
-    no-unused-vars: ["error", { "args": "none" }],
-    no-use-before-define: "error",
+    "init-declarations": ["error", "always"],
+    "no-catch-shadow": "error",
+    "no-delete-var": "error",
+    "no-label-var": "error",
+    "no-restricted-globals": "off",
+    "no-shadow": "error",
+    "no-shadow-restricted-names": "error",
+    "no-undef": "error",
+    "no-undef-init": "off",
+    "no-undefined": "off",
+    "no-unused-vars": ["error", { "args": "none" }],
+    "no-use-before-define": "error",
 
     # Node.js and CommonJS
 
-    callback-return: "warn",
-    global-require: "error",
-    handle-callback-err: "warn",
-    no-mixed-requires: "error",
-    no-new-require: "error",
-    no-path-concat: "error",
-    no-process-exit: "error",
+    "callback-return": "warn",
+    "global-require": "error",
+    "handle-callback-err": "warn",
+    "no-mixed-requires": "error",
+    "no-new-require": "error",
+    "no-path-concat": "error",
+    "no-process-exit": "error",
 
     # Stylistic Issues
 
-    array-bracket-spacing: ["error", "never"],
-    block-spacing: ["error", "always"],
-    brace-style: ["error", "1tbs", { "allowSingleLine": false }],
-    camelcase: "off",
-    comma-spacing: ["error", {"before": false, "after": true}],
-    comma-style: ["error", "last"],
-    computed-property-spacing: ["error", "never"],
-    consistent-this: ["error", "self"],
-    eol-last: "error",
-    func-names: "off",
-    func-style: ["error", "declaration"],
-    indent: ["error", 2, {"SwitchCase": 1}],
-    key-spacing: ["error", {"beforeColon": false, "afterColon": true}],
-    keyword-spacing: ["error", {before: true, after: true}],
-    lines-around-comment: ["error", { "beforeBlockComment": true, "afterBlockComment": false }],
-    max-depth: ["error", {"maximum": 5}],
-    max-nested-callbacks: ["error", 4],
-    max-params: ["error", 4],
-    max-statements: "off",
-    max-statements-per-line: ["error", { "max": 1 }],
-    new-cap: ["error", {"capIsNewExceptions": ["$.Deferred"]}],
-    new-parens: "error",
-    newline-after-var: "off",
-    newline-before-return: "off",
-    newline-per-chained-call: "off",
-    no-array-constructor: "error",
-    no-bitwise: "error",
-    no-continue: "error",
-    no-inline-comments: "off",
-    no-lonely-if: "warn",
-    no-mixed-spaces-and-tabs: "error",
-    no-multiple-empty-lines: ["error", {max: 1}],
-    no-negated-condition: "warn",
-    no-nested-ternary: "error",
-    no-new-object: "error",
-    no-plusplus: "off",
-    no-restricted-syntax: "off",
-    no-spaced-func: "error",
-    no-ternary: "off",
-    no-trailing-spaces: "error",
-    no-underscore-dangle: ["error", { "allowAfterThis": true }],
-    no-unneeded-ternary: "error",
-    no-whitespace-before-property: "error",
-    object-curly-spacing: ["error", "always"],
-    one-var: ["error", "never"],
-    one-var-declaration-per-line: ["error", "always"],
-    operator-assignment: ["off", "never"],
-    operator-linebreak: ["error", "after"],
-    quote-props: ["error", "as-needed"],
-    quotes: ["error", "single"],
-    require-jsdoc: "off",
-    semi: "error",
-    semi-spacing: ["error", { "before": false, "after": true }],
-    sort-vars: "off",
-    space-before-blocks: ["error", "always"],
-    space-before-function-paren: ["error", "never"],
-    space-in-parens: "off",
-    space-infix-ops: "off",
-    space-unary-ops: "off",
-    spaced-comment: "error",
-    wrap-regex: "error",
+    "array-bracket-spacing": ["error", "never"],
+    "block-spacing": ["error", "always"],
+    "brace-style": ["error", "1tbs", { "allowSingleLine": false }],
+    "camelcase": "off",
+    "comma-spacing": ["error", {"before": false, "after": true}],
+    "comma-style": ["error", "last"],
+    "computed-property-spacing": ["error", "never"],
+    "consistent-this": ["error", "self"],
+    "eol-last": "error",
+    "func-names": "off",
+    "func-style": ["error", "declaration"],
+    "indent": ["error", 2, {"SwitchCase": 1}],
+    "key-spacing": ["error", {"beforeColon": false, "afterColon": true}],
+    "keyword-spacing": ["error", {before: true, after: true}],
+    "lines-around-comment": ["error", { "beforeBlockComment": true, "afterBlockComment": false }],
+    "max-depth": ["error", {"maximum": 5}],
+    "max-nested-callbacks": ["error", 4],
+    "max-params": ["error", 4],
+    "max-statements": "off",
+    "max-statements-per-line": ["error", { "max": 1 }],
+    "new-cap": ["error", {"capIsNewExceptions": ["$.Deferred"]}],
+    "new-parens": "error",
+    "newline-after-var": "off",
+    "newline-before-return": "off",
+    "newline-per-chained-call": "off",
+    "no-array-constructor": "error",
+    "no-bitwise": "error",
+    "no-continue": "error",
+    "no-inline-comments": "off",
+    "no-lonely-if": "warn",
+    "no-mixed-spaces-and-tabs": "error",
+    "no-multiple-empty-lines": ["error", {max: 1}],
+    "no-negated-condition": "warn",
+    "no-nested-ternary": "error",
+    "no-new-object": "error",
+    "no-plusplus": "off",
+    "no-restricted-syntax": "off",
+    "no-spaced-func": "error",
+    "no-ternary": "off",
+    "no-trailing-spaces": "error",
+    "no-underscore-dangle": ["error", { "allowAfterThis": true }],
+    "no-unneeded-ternary": "error",
+    "no-whitespace-before-property": "error",
+    "object-curly-spacing": ["error", "always"],
+    "one-var": ["error", "never"],
+    "one-var-declaration-per-line": ["error", "always"],
+    "operator-assignment": ["off", "never"],
+    "operator-linebreak": ["error", "after"],
+    "quote-props": ["error", "as-needed"],
+    "quotes": ["error", "single"],
+    "require-jsdoc": "off",
+    "semi": "error",
+    "semi-spacing": ["error", { "before": false, "after": true }],
+    "sort-vars": "off",
+    "space-before-blocks": ["error", "always"],
+    "space-before-function-paren": ["error", "never"],
+    "space-in-parens": "off",
+    "space-infix-ops": "off",
+    "space-unary-ops": "off",
+    "spaced-comment": "error",
+    "wrap-regex": "error",
 
     # React
 
     "react/jsx-boolean-value": [2, "always"],
     "react/jsx-uses-vars": 2,
     "react/jsx-closing-bracket-location": 2,
-    "react/jsx-space-before-closing": 2,
+    "react/jsx-tag-spacing": ["error"],
     "react/jsx-curly-spacing": [2, "never"],
     "react/jsx-equals-spacing": [2, "never"],
     "react/jsx-indent-props": [2, 2],
     "react/jsx-indent": [2, 2],
     "react/jsx-key": 2,
-    "react/jsx-no-bind": [2, { allowArrowFunctions: true }],
+    "react/jsx-no-bind": [2, { "allowArrowFunctions": true }],
     "react/jsx-no-duplicate-props": [2, { "ignoreCase": true }],
     "react/jsx-max-props-per-line": [2, { "maximum": 2 }],
     "react/jsx-handler-names": [2, { "eventHandlerPrefix": "on", "eventHandlerPropPrefix": "on" }],
     "react/jsx-no-undef": 2,
     "react/jsx-pascal-case": 2,
     "react/jsx-uses-react": 2,
-    "react/no-did-mount-set-state": 2,
-    "react/no-did-update-set-state": 2,
+    // Explicitly disabled in case we want to enable them again
+    "react/no-did-mount-set-state": 0,
+    "react/no-did-update-set-state": 0,
     "react/no-direct-mutation-state": 2,
     "react/no-multi-comp": [2, { "ignoreStateless": true }],
     "react/no-unknown-property": 2,

frontend/.stylelintrc

@@ -2,6 +2,10 @@
 "plugins": [
   "stylelint-order"
 ],
+"ignoreFiles": [
+  "frontend/src/Styles/scaffolding.css",
+  "frontend/src/Content/Fonts/font-awesome.css"
+],
 "rules": {
     "at-rule-empty-line-before": [
       "always",

frontend/postcss.config.js

@@ -3,6 +3,11 @@ const reload = require('require-nocache')(module);
 module.exports = (ctx, configPath, options) => {
   const config = {
     plugins: {
+      'postcss-mixins': {
+        mixinsDir: [
+          'frontend/src/Styles/Mixins'
+        ]
+      },
       'postcss-simple-vars': {
         variables: () =>
           ctx.options.cssVarsFiles.reduce((acc, vars) => {
@@ -10,11 +15,6 @@ module.exports = (ctx, configPath, options) => {
           }, {})
       },
       'postcss-nested': {},
-      'postcss-mixins': {
-        mixinsDir: [
-          'frontend/src/Styles/Mixins'
-        ]
-      },
       autoprefixer: {
         browsers: [
           'Chrome >= 30',

frontend/src/Activity/Blacklist/BlacklistRow.js

@@ -142,6 +142,8 @@ class BlacklistRow extends Component {
                 </TableRowCell>
               );
             }
+
+            return null;
           })
         }
 

frontend/src/Activity/History/HistoryRow.js

@@ -205,6 +205,8 @@ class HistoryRow extends Component {
                 </TableRowCell>
               );
             }
+
+            return null;
           })
         }
 

frontend/src/Activity/Queue/QueueRow.js

@@ -268,6 +268,8 @@ class QueueRow extends Component {
                 </TableRowCell>
               );
             }
+
+            return null;
           })
         }
 

frontend/src/AddArtist/AddNewArtist/AddNewArtist.js

@@ -161,9 +161,7 @@ class AddNewArtist extends Component {
               </div>
           }
 
-          <div>
-
-          </div>
+          <div />
         </PageContentBodyConnector>
       </PageContent>
     );

frontend/src/AddArtist/AddNewArtist/AddNewArtistModalContent.css

@@ -9,7 +9,7 @@
 
 .poster {
   flex: 0 0 170px;
-  margin-right: 20px; 
+  margin-right: 20px;
   height: 250px;
 }
 

frontend/src/AddArtist/ImportArtist/Import/ImportArtistFooter.js

@@ -202,7 +202,7 @@ class ImportArtistFooter extends Component {
             </SpinnerButton>
 
             {
-            isLookingUpArtist &&
+              isLookingUpArtist &&
               <LoadingIndicator
                 className={styles.loading}
                 size={24}

frontend/src/AddArtist/ImportArtist/Import/SelectArtist/ImportArtistSelectArtist.css

@@ -66,7 +66,6 @@
 .searchInput {
   composes: text from 'Components/Form/TextInput.css';
 
-  /*border-left: 0;*/
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }

frontend/src/AddArtist/ImportArtist/Import/SelectArtist/ImportArtistSelectArtist.js

@@ -116,8 +116,7 @@ class ImportArtistSelectArtist extends Component {
       isPopulated,
       error,
       items,
-      queued,
-      onArtistSelect
+      queued
     } = this.props;
 
     const errorMessage = error &&

frontend/src/AddArtist/ImportArtist/SelectFolder/ImportArtistSelectFolderConnector.js

@@ -4,7 +4,6 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { push } from 'react-router-redux';
-import hasDifferentItems from 'Utilities/Object/hasDifferentItems';
 import { fetchRootFolders, addRootFolder, deleteRootFolder } from 'Store/Actions/rootFolderActions';
 import ImportArtistSelectFolder from './ImportArtistSelectFolder';
 

frontend/src/AlbumStudio/AlbumStudioConnector.js

@@ -62,9 +62,9 @@ AlbumStudioConnector.propTypes = {
 };
 
 export default connectSection(
-                createMapStateToProps,
-                mapDispatchToProps,
-                undefined,
-                undefined,
-                { section: 'series', uiSection: 'albumStudio' }
-              )(AlbumStudioConnector);
+  createMapStateToProps,
+  mapDispatchToProps,
+  undefined,
+  undefined,
+  { section: 'series', uiSection: 'albumStudio' }
+)(AlbumStudioConnector);

frontend/src/App/AppUpdatedModalContent.css

@@ -10,6 +10,6 @@
 .changes {
   margin-top: 20px;
   padding-bottom: 5px;
-  font-size: 18px;
   border-bottom: 1px solid #e5e5e5;
+  font-size: 18px;
 }

frontend/src/Artist/Details/ArtistDetails.js

@@ -429,7 +429,7 @@ class ArtistDetails extends Component {
                         foreignArtistId={foreignArtistId}
                         links={links}
                       />
-                      }
+                    }
                     kind={kinds.INVERSE}
                     position={tooltipPositions.BOTTOM}
                   />

frontend/src/Artist/Details/ArtistTags.js

@@ -2,7 +2,6 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { kinds, sizes } from 'Helpers/Props';
 import Label from 'Components/Label';
-import styles from './ArtistTags.css';
 
 function ArtistTags({ tags }) {
   return (

frontend/src/Artist/Editor/ArtistEditorConnector.js

@@ -78,9 +78,9 @@ ArtistEditorConnector.propTypes = {
 };
 
 export default connectSection(
-                createMapStateToProps,
-                mapDispatchToProps,
-                undefined,
-                undefined,
-                { section: 'series', uiSection: 'artistEditor' }
-              )(ArtistEditorConnector);
+  createMapStateToProps,
+  mapDispatchToProps,
+  undefined,
+  undefined,
+  { section: 'series', uiSection: 'artistEditor' }
+)(ArtistEditorConnector);

frontend/src/Artist/Editor/Tags/TagsModalContent.js

@@ -51,8 +51,7 @@ class TagsModalContent extends Component {
     const {
       artistTags,
       tagList,
-      onModalClose,
-      onApplyTagsPress
+      onModalClose
     } = this.props;
 
     const {
@@ -107,55 +106,55 @@ class TagsModalContent extends Component {
               <FormLabel>Result</FormLabel>
 
               <div className={styles.result}>
-                  {
-                    artistTags.map((t) => {
+                {
+                  artistTags.map((t) => {
+                    const tag = _.find(tagList, { id: t });
+
+                    if (!tag) {
+                      return null;
+                    }
+
+                    const removeTag = (applyTags === 'remove' && tags.indexOf(t) > -1) ||
+                      (applyTags === 'replace' && tags.indexOf(t) === -1);
+
+                    return (
+                      <Label
+                        key={tag.id}
+                        title={removeTag ? 'Removing tag' : 'Existing tag'}
+                        kind={removeTag ? kinds.INVERSE : kinds.INFO}
+                        size={sizes.LARGE}
+                      >
+                        {tag.label}
+                      </Label>
+                    );
+                  })
+                }
+
+                {
+                  (applyTags === 'add' || applyTags === 'replace') &&
+                    tags.map((t) => {
                       const tag = _.find(tagList, { id: t });
 
                       if (!tag) {
                         return null;
                       }
 
-                      const removeTag = (applyTags === 'remove' && tags.indexOf(t) > -1) ||
-                        (applyTags === 'replace' && tags.indexOf(t) === -1);
+                      if (artistTags.indexOf(t) > -1) {
+                        return null;
+                      }
 
                       return (
                         <Label
                           key={tag.id}
-                          title={removeTag ? 'Removing tag' : 'Existing tag'}
-                          kind={removeTag ? kinds.INVERSE : kinds.INFO}
+                          title={'Adding tag'}
+                          kind={kinds.SUCCESS}
                           size={sizes.LARGE}
                         >
                           {tag.label}
                         </Label>
                       );
                     })
-                  }
-
-                  {
-                    (applyTags === 'add' || applyTags === 'replace') &&
-                      tags.map((t) => {
-                        const tag = _.find(tagList, { id: t });
-
-                        if (!tag) {
-                          return null;
-                        }
-
-                        if (artistTags.indexOf(t) > -1) {
-                          return null;
-                        }
-
-                        return (
-                          <Label
-                            key={tag.id}
-                            title={'Adding tag'}
-                            kind={kinds.SUCCESS}
-                            size={sizes.LARGE}
-                          >
-                            {tag.label}
-                          </Label>
-                        );
-                      })
-                  }
+                }
               </div>
             </FormGroup>
           </Form>

frontend/src/Artist/Index/ArtistIndexConnector.js

@@ -1,4 +1,3 @@
-import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
@@ -151,6 +150,7 @@ class ArtistIndexConnector extends Component {
 }
 
 ArtistIndexConnector.propTypes = {
+  isSmallScreen: PropTypes.bool.isRequired,
   view: PropTypes.string.isRequired,
   scrollTop: PropTypes.number.isRequired,
   fetchArtist: PropTypes.func.isRequired,

frontend/src/Artist/Index/ArtistIndexFooter.js

@@ -31,22 +31,22 @@ function ArtistIndexFooter({ series }) {
     <div className={styles.footer}>
       <div>
         <div className={styles.legendItem}>
-          <div className={styles.continuing}></div>
+          <div className={styles.continuing} />
           <div>Continuing (All tracks downloaded)</div>
         </div>
 
         <div className={styles.legendItem}>
-          <div className={styles.ended}></div>
+          <div className={styles.ended} />
           <div>Ended (All tracks downloaded)</div>
         </div>
 
         <div className={styles.legendItem}>
-          <div className={styles.missingMonitored}></div>
+          <div className={styles.missingMonitored} />
           <div>Missing Tracks (Artist monitored)</div>
         </div>
 
         <div className={styles.legendItem}>
-          <div className={styles.missingUnmonitored}></div>
+          <div className={styles.missingUnmonitored} />
           <div>Missing Tracks (Artist not monitored)</div>
         </div>
       </div>

frontend/src/Artist/Index/Banners/ArtistIndexBanner.css

@@ -12,9 +12,6 @@ $hoverScale: 1.05;
     box-shadow: 0 0 12px $black;
     transition: all 200ms ease-in;
 
-    // Transforming causes the content to shift slightly
-    // transform: scale($hoverScale);
-
     .controls {
       opacity: 0.9;
       transition: opacity 200ms linear 150ms;

frontend/src/Artist/Index/Banners/ArtistIndexBanners.js

@@ -72,6 +72,8 @@ function calculateRowHeight(bannerHeight, sortKey, isSmallScreen, bannerOptions)
         heights.push(19);
       }
       break;
+    default:
+      // No need to add a height of 0
   }
 
   return heights.reduce((acc, height) => acc + height, 0);

frontend/src/Artist/Index/Banners/ArtistIndexBannersConnector.js

@@ -25,9 +25,9 @@ function createMapStateToProps() {
 }
 
 export default connectSection(
-                createMapStateToProps,
-                undefined,
-                undefined,
-                { withRef: true },
-                { section: 'series', uiSection: 'artistIndex' }
-              )(ArtistIndexBanners);
+  createMapStateToProps,
+  undefined,
+  undefined,
+  { withRef: true },
+  { section: 'series', uiSection: 'artistIndex' }
+)(ArtistIndexBanners);

frontend/src/Artist/Index/Posters/ArtistIndexPoster.css

@@ -12,9 +12,6 @@ $hoverScale: 1.05;
     box-shadow: 0 0 12px $black;
     transition: all 200ms ease-in;
 
-    // Transforming causes the content to shift slightly
-    // transform: scale($hoverScale);
-
     .controls {
       opacity: 0.9;
       transition: opacity 200ms linear 150ms;

frontend/src/Artist/Index/Posters/ArtistIndexPosters.js

@@ -72,6 +72,8 @@ function calculateRowHeight(posterHeight, sortKey, isSmallScreen, posterOptions)
         heights.push(19);
       }
       break;
+    default:
+      // No need to add a height of 0
   }
 
   return heights.reduce((acc, height) => acc + height, 0);

frontend/src/Artist/Index/Posters/ArtistIndexPostersConnector.js

@@ -25,9 +25,9 @@ function createMapStateToProps() {
 }
 
 export default connectSection(
-                createMapStateToProps,
-                undefined,
-                undefined,
-                { withRef: true },
-                { section: 'series', uiSection: 'artistIndex' }
-              )(ArtistIndexPosters);
+  createMapStateToProps,
+  undefined,
+  undefined,
+  { withRef: true },
+  { section: 'series', uiSection: 'artistIndex' }
+)(ArtistIndexPosters);

frontend/src/Artist/Index/Table/ArtistIndexTableConnector.js

@@ -26,9 +26,9 @@ function createMapDispatchToProps(dispatch, props) {
 }
 
 export default connectSection(
-                createMapStateToProps,
-                createMapDispatchToProps,
-                undefined,
-                { withRef: true },
-                { section: 'series', uiSection: 'artistIndex' }
-              )(ArtistIndexTable);
+  createMapStateToProps,
+  createMapDispatchToProps,
+  undefined,
+  { withRef: true },
+  { section: 'series', uiSection: 'artistIndex' }
+)(ArtistIndexTable);

frontend/src/Calendar/Day/CalendarDay.js

@@ -20,7 +20,8 @@ function CalendarDay(props) {
     <div className={classNames(
       styles.day,
       view === calendarViews.DAY && styles.isSingleDay
-    )}>
+    )}
+    >
       {
         view === calendarViews.MONTH &&
           <div className={classNames(

frontend/src/Calendar/Day/CalendarDays.js

@@ -134,7 +134,8 @@ class CalendarDays extends Component {
       <div className={classNames(
         styles.days,
         styles[view]
-      )}>
+      )}
+      >
         {
           dates.map((date) => {
             return (

frontend/src/Calendar/Day/DayOfWeek.js

@@ -36,7 +36,8 @@ class DayOfWeek extends Component {
         styles.dayOfWeek,
         view === calendarViews.DAY && styles.isSingleDay,
         highlightToday && styles.isToday
-      )}>
+      )}
+      >
         {formatedDate}
       </div>
     );

frontend/src/Calendar/getStatusStyle.js

@@ -1,3 +1,4 @@
+/* eslint max-params: 0 */
 import moment from 'moment';
 
 function getStatusStyle(episodeNumber, downloading, startTime, isMonitored) {

frontend/src/Components/CircularProgressBar.js

@@ -103,8 +103,7 @@ class CircularProgressBar extends Component {
               strokeWidth,
               strokeDashoffset
             }}
-          >
-          </circle>
+          />
         </svg>
 
         {

frontend/src/Components/Form/EnhancedSelectInput.js

@@ -366,7 +366,7 @@ class EnhancedSelectInput extends Component {
                 }
               </ModalBody>
             </Modal>
-          }
+        }
       </div>
     );
   }

frontend/src/Components/Form/FormInputGroup.js

@@ -1,7 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { icons, inputTypes } from 'Helpers/Props';
-import Icon from 'Components/Icon';
+import { inputTypes } from 'Helpers/Props';
 import Link from 'Components/Link/Link';
 import CaptchaInputConnector from './CaptchaInputConnector';
 import CheckInput from './CheckInput';
@@ -85,7 +84,7 @@ function FormInputGroup(props) {
     errors,
     warnings,
     ...otherProps
-   } = props;
+  } = props;
 
   const InputComponent = getComponent(type);
   const checkInput = type === inputTypes.CHECK;

frontend/src/Components/Form/FormInputHelpText.js

@@ -23,7 +23,8 @@ function FormInputHelpText(props) {
       isError && styles.isError,
       isWarning && styles.isWarning,
       isCheckInput && styles.isCheckInput
-    )}>
+    )}
+    >
       {text}
 
       {

frontend/src/Components/Form/RootFolderSelectInput.js

@@ -98,8 +98,13 @@ RootFolderSelectInput.propTypes = {
   values: PropTypes.arrayOf(PropTypes.object).isRequired,
   isSaving: PropTypes.bool.isRequired,
   saveError: PropTypes.object,
+  includeNoChange: PropTypes.bool.isRequired,
   onChange: PropTypes.func.isRequired,
   onNewRootFolderSelect: PropTypes.func.isRequired
 };
 
+RootFolderSelectInput.defaultProps = {
+  includeNoChange: false
+};
+
 export default RootFolderSelectInput;

frontend/src/Components/Form/RootFolderSelectInputOption.js

@@ -21,7 +21,8 @@ function RootFolderSelectInputOption(props) {
       <div className={classNames(
         styles.optionText,
         isMobile && styles.isMobile
-      )}>
+      )}
+      >
         <div>{value}</div>
 
         {

frontend/src/Components/Form/RootFolderSelectInputSelectedValue.js

@@ -18,8 +18,8 @@ function RootFolderSelectInputSelectedValue(props) {
       {...otherProps}
     >
       <div className={styles.path}>
-        {value
-      }</div>
+        {value}
+      </div>
 
       {
         freeSpace != null && includeFreeSpace &&

frontend/src/Components/Icon.js

@@ -24,8 +24,7 @@ function Icon(props) {
       style={{
         fontSize: `${size}px`
       }}
-    >
-    </i>
+    />
   );
 }
 

frontend/src/Components/Link/ClipboardButton.js

@@ -83,7 +83,6 @@ class ClipboardButton extends Component {
       ...otherProps
     } = this.props;
 
-
     const {
       showSuccess,
       showError

frontend/src/Components/Link/Link.css

@@ -10,7 +10,6 @@
   cursor: pointer;
 
   &:global(.isDisabled) {
-    /*color: $disabledColor;*/
     pointer-events: none;
   }
 }

frontend/src/Components/Loading/LoadingIndicator.css

@@ -28,24 +28,8 @@
   position: absolute;
   border: 2px solid #3a3f51;
   border-radius: 100%;
-  animation-fill-mode: both;
   animation: rippleContainer 1.25s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8);
-}
-
-@-webkit-keyframes rippleContainer {
-  0% {
-    opacity: 1;
-    transform: scale(0.1);
-  }
-
-  70% {
-    opacity: 0.7;
-    transform: scale(1);
-  }
-
-  100% {
-    opacity: 0;
-  }
+  animation-fill-mode: both;
 }
 
 @keyframes rippleContainer {

frontend/src/Components/Menu/FilterMenu.js

@@ -1,35 +1,29 @@
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import React from 'react';
 import { icons } from 'Helpers/Props';
 import Menu from 'Components/Menu/Menu';
 import ToolbarMenuButton from 'Components/Menu/ToolbarMenuButton';
 import styles from './FilterMenu.css';
 
-class FilterMenu extends Component {
+function FilterMenu(props) {
+  const {
+    className,
+    children,
+    ...otherProps
+  } = props;
 
-  //
-  // Render
-
-  render() {
-    const {
-      className,
-      children,
-      ...otherProps
-    } = this.props;
-
-    return (
-      <Menu
-        className={className}
-        {...otherProps}
-      >
-        <ToolbarMenuButton
-          iconName={icons.FILTER}
-          text="Filter"
-        />
-          {children}
-      </Menu>
-    );
-  }
+  return (
+    <Menu
+      className={className}
+      {...otherProps}
+    >
+      <ToolbarMenuButton
+        iconName={icons.FILTER}
+        text="Filter"
+      />
+      {children}
+    </Menu>
+  );
 }
 
 FilterMenu.propTypes = {

frontend/src/Components/Menu/SortMenu.js

@@ -1,34 +1,28 @@
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import React from 'react';
 import { icons } from 'Helpers/Props';
 import Menu from 'Components/Menu/Menu';
 import ToolbarMenuButton from 'Components/Menu/ToolbarMenuButton';
 
-class SortMenu extends Component {
+function SortMenu(props) {
+  const {
+    className,
+    children,
+    ...otherProps
+  } = props;
 
-  //
-  // Render
-
-  render() {
-    const {
-      className,
-      children,
-      ...otherProps
-    } = this.props;
-
-    return (
-      <Menu
-        className={className}
-        {...otherProps}
-      >
-        <ToolbarMenuButton
-          iconName={icons.SORT}
-          text="Sort"
-        />
-          {children}
-      </Menu>
-    );
-  }
+  return (
+    <Menu
+      className={className}
+      {...otherProps}
+    >
+      <ToolbarMenuButton
+        iconName={icons.SORT}
+        text="Sort"
+      />
+      {children}
+    </Menu>
+  );
 }
 
 SortMenu.propTypes = {

frontend/src/Components/Menu/ViewMenu.js

@@ -18,7 +18,7 @@ function ViewMenu(props) {
         iconName={icons.VIEW}
         text="View"
       />
-        {children}
+      {children}
     </Menu>
   );
 }

frontend/src/Components/Page/PageContentBody.js

@@ -40,7 +40,8 @@ PageContentBody.propTypes = {
   className: PropTypes.string,
   innerClassName: PropTypes.string,
   isSmallScreen: PropTypes.bool.isRequired,
-  children: PropTypes.node.isRequired
+  children: PropTypes.node.isRequired,
+  dispatch: PropTypes.func
 };
 
 PageContentBody.defaultProps = {

frontend/src/Components/Page/PageJumpBar.css

@@ -1,7 +1,7 @@
 .jumpBar {
   display: flex;
-  align-items: stretch;
   align-content: stretch;
+  align-items: stretch;
   align-self: stretch;
   justify-content: center;
   flex: 0 0 30px;

frontend/src/Components/Page/Sidebar/Messages/Message.js

@@ -43,7 +43,8 @@ function Message(props) {
     <div className={classNames(
       styles.message,
       styles[type]
-    )}>
+    )}
+    >
       <div className={styles.iconContainer}>
         <Icon
           name={getIconName(name)}

frontend/src/Components/Page/Toolbar/PageToolbarSection.js

@@ -148,7 +148,8 @@ class PageToolbarSection extends Component {
               <div className={classNames(
                 styles.section,
                 styles[alignContent]
-              )}>
+              )}
+              >
                 {
                   buttons.map((button) => {
                     return button;

frontend/src/Components/Page/Toolbar/PageToolbarSeparator.js

@@ -8,7 +8,7 @@ class PageToolbarSeparator extends Component {
 
   render() {
     return (
-      <div className={styles.separator}></div>
+      <div className={styles.separator} />
     );
   }
 

frontend/src/Components/ProgressBar.js

@@ -55,22 +55,22 @@ function ProgressBar(props) {
         aria-valuemax="100"
         style={{ width: progressPercent }}
       />
-        {
-          showText &&
+      {
+        showText &&
+          <div
+            className={styles.frontTextContainer}
+            style={{ width: progressPercent }}
+          >
             <div
-              className={styles.frontTextContainer}
-              style={{ width: progressPercent }}
+              className={styles.frontText}
+              style={{ width: actualWidth }}
             >
-              <div
-                className={styles.frontText}
-                style={{ width: actualWidth }}
-              >
-                <div>
-                  {progressText}
-                </div>
+              <div>
+                {progressText}
               </div>
             </div>
-        }
+          </div>
+      }
     </div>
   );
 }

frontend/src/Components/Scroller/OverlayScroller.css

@@ -1,4 +1,5 @@
 .scroller {
+  /* Placeholder */
 }
 
 .thumb {

frontend/src/Components/Table/TableHeaderCell.js

@@ -5,7 +5,7 @@ import Link from 'Components/Link/Link';
 import Icon from 'Components/Icon';
 import styles from './TableHeaderCell.css';
 
-class VirtualTableHeaderCell extends Component {
+class TableHeaderCell extends Component {
 
   //
   // Listeners
@@ -43,8 +43,8 @@ class VirtualTableHeaderCell extends Component {
 
     const isSorting = isSortable && sortKey === name;
     const sortIcon = sortDirection === sortDirections.ASCENDING ?
-                     icons.SORT_ASCENDING :
-                     icons.SORT_DESCENDING;
+      icons.SORT_ASCENDING :
+      icons.SORT_DESCENDING;
 
     return (
       isSortable ?
@@ -72,7 +72,7 @@ class VirtualTableHeaderCell extends Component {
   }
 }
 
-VirtualTableHeaderCell.propTypes = {
+TableHeaderCell.propTypes = {
   className: PropTypes.string,
   name: PropTypes.string.isRequired,
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
@@ -86,9 +86,9 @@ VirtualTableHeaderCell.propTypes = {
   onSortPress: PropTypes.func
 };
 
-VirtualTableHeaderCell.defaultProps = {
+TableHeaderCell.defaultProps = {
   className: styles.headerCell,
   isSortable: false
 };
 
-export default VirtualTableHeaderCell;
+export default TableHeaderCell;

frontend/src/Components/Table/VirtualTable.js

@@ -142,9 +142,9 @@ class VirtualTable extends Component {
                   {...otherProps}
                 />
               </Scroller>
-              );
+            );
+          }
           }
-        }
         </WindowScroller>
       </Measure>
     );

frontend/src/Components/Table/VirtualTableHeaderCell.js

@@ -58,8 +58,8 @@ class VirtualTableHeaderCell extends Component {
 
     const isSorting = isSortable && sortKey === name;
     const sortIcon = sortDirection === sortDirections.ASCENDING ?
-                     icons.SORT_ASCENDING :
-                     icons.SORT_DESCENDING;
+      icons.SORT_ASCENDING :
+      icons.SORT_DESCENDING;
 
     return (
       isSortable ?

frontend/src/Content/Fonts/font-awesome.css

@@ -1,3 +1,5 @@
+/* stylelint-disable */
+
 /*!
  *  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
  *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
@@ -2335,3 +2337,5 @@
   overflow: visible;
   clip: auto;
 }
+
+/* stylelint-enable */

frontend/src/Episode/Search/InteractiveEpisodeSearchConnector.js

@@ -82,9 +82,9 @@ InteractiveEpisodeSearchConnector.propTypes = {
 };
 
 export default connectSection(
-                createMapStateToProps,
-                mapDispatchToProps,
-                undefined,
-                undefined,
-                { section: 'releases' }
-               )(InteractiveEpisodeSearchConnector);
+  createMapStateToProps,
+  mapDispatchToProps,
+  undefined,
+  undefined,
+  { section: 'releases' }
+)(InteractiveEpisodeSearchConnector);

frontend/src/InteractiveImport/Artist/SelectArtistModalContent.js

@@ -66,15 +66,15 @@ class SelectArtistModalContent extends Component {
             {
               items.map((item) => {
                 return item.artistName.toLowerCase().includes(filter) ?
-                (
-                  <SelectArtistRow
-                    key={item.id}
-                    id={item.id}
-                    artistName={item.artistName}
-                    onArtistSelect={onArtistSelect}
-                  />
-                ) :
-                null;
+                  (
+                    <SelectArtistRow
+                      key={item.id}
+                      id={item.id}
+                      artistName={item.artistName}
+                      onArtistSelect={onArtistSelect}
+                    />
+                  ) :
+                  null;
               })
             }
           </Scroller>

frontend/src/InteractiveImport/Interactive/InteractiveImportModalContentConnector.js

@@ -147,9 +147,9 @@ InteractiveImportModalContentConnector.propTypes = {
 };
 
 export default connectSection(
-                createMapStateToProps,
-                mapDispatchToProps,
-                undefined,
-                undefined,
-                { section: 'interactiveImport' }
-               )(InteractiveImportModalContentConnector);
+  createMapStateToProps,
+  mapDispatchToProps,
+  undefined,
+  undefined,
+  { section: 'interactiveImport' }
+)(InteractiveImportModalContentConnector);

frontend/src/InteractiveImport/Interactive/InteractiveImportRow.js

@@ -178,7 +178,7 @@ class InteractiveImportRow extends Component {
     const artistName = artist ? artist.artistName : '';
     const albumTitle = album ? album.title : '';
     const trackNumbers = tracks.map((track) => track.trackNumber)
-                                   .join(', ');
+      .join(', ');
 
     const showArtistPlaceholder = isSelected && !artist;
     const showAlbumNumberPlaceholder = isSelected && !!artist && !album;

frontend/src/InteractiveImport/Interactive/InteractiveImportRowCellPlaceholder.js

@@ -3,7 +3,7 @@ import styles from './InteractiveImportRowCellPlaceholder.css';
 
 function InteractiveImportRowCellPlaceholder() {
   return (
-    <span className={styles.placeholder}></span>
+    <span className={styles.placeholder} />
   );
 }
 

frontend/src/InteractiveImport/Language/SelectLanguageModalContentConnector.js

@@ -50,7 +50,7 @@ class SelectLanguageModalContentConnector extends Component {
   onLanguageSelect = ({ value }) => {
     const languageId = parseInt(value);
     const language = _.find(this.props.items,
-                           (item) => item.language.id === languageId).language;
+      (item) => item.language.id === languageId).language;
 
     this.props.updateInteractiveImportItem({
       id: this.props.id,

frontend/src/InteractiveImport/Quality/SelectQualityModalContentConnector.js

@@ -49,7 +49,7 @@ class SelectQualityModalContentConnector extends Component {
 
   onQualitySelect = ({ qualityId, proper, real }) => {
     const quality = _.find(this.props.items,
-                           (item) => item.quality.id === qualityId).quality;
+      (item) => item.quality.id === qualityId).quality;
 
     const revision = {
       version: proper ? 2 : 1,

frontend/src/Settings/DownloadClients/DownloadClients/AddDownloadClientModalContent.js

@@ -46,7 +46,7 @@ class AddDownloadClientModalContent extends Component {
           }
 
           {
-            !isFetching && !error &&
+            isPopulated && !error &&
               <div>
 
                 <Alert kind={kinds.INFO}>

frontend/src/Settings/DownloadClients/Options/DownloadClientOptionsConnector.js

@@ -84,9 +84,9 @@ DownloadClientOptionsConnector.propTypes = {
 };
 
 export default connectSection(
-                createMapStateToProps,
-                mapDispatchToProps,
-                undefined,
-                { withRef: true },
-                { section: 'downloadClientOptions' }
-               )(DownloadClientOptionsConnector);
+  createMapStateToProps,
+  mapDispatchToProps,
+  undefined,
+  { withRef: true },
+  { section: 'downloadClientOptions' }
+)(DownloadClientOptionsConnector);

frontend/src/Settings/General/GeneralSettingsConnector.js

@@ -109,9 +109,9 @@ GeneralSettingsConnector.propTypes = {
 };
 
 export default connectSection(
-                createMapStateToProps,
-                mapDispatchToProps,
-                undefined,
-                undefined,
-                { section: 'general' }
-               )(GeneralSettingsConnector);
+  createMapStateToProps,
+  mapDispatchToProps,
+  undefined,
+  undefined,
+  { section: 'general' }
+)(GeneralSettingsConnector);

frontend/src/Settings/Indexers/Options/IndexerOptionsConnector.js

@@ -84,9 +84,9 @@ IndexerOptionsConnector.propTypes = {
 };
 
 export default connectSection(
-                createMapStateToProps,
-                mapDispatchToProps,
-                undefined,
-                { withRef: true },
-                { section: 'indexerOptions' }
-               )(IndexerOptionsConnector);
+  createMapStateToProps,
+  mapDispatchToProps,
+  undefined,
+  { withRef: true },
+  { section: 'indexerOptions' }
+)(IndexerOptionsConnector);

frontend/src/Settings/MediaManagement/MediaManagementConnector.js

@@ -83,9 +83,9 @@ MediaManagementConnector.propTypes = {
 };
 
 export default connectSection(
-                createMapStateToProps,
-                mapDispatchToProps,
-                undefined,
-                undefined,
-                { section: 'mediaManagement' }
-               )(MediaManagementConnector);
+  createMapStateToProps,
+  mapDispatchToProps,
+  undefined,
+  undefined,
+  { section: 'mediaManagement' }
+)(MediaManagementConnector);

frontend/src/Settings/MediaManagement/Naming/NamingConnector.js

@@ -94,9 +94,9 @@ NamingConnector.propTypes = {
 };
 
 export default connectSection(
-                createMapStateToProps,
-                mapDispatchToProps,
-                undefined,
-                undefined,
-                { section: 'naming' }
-               )(NamingConnector);
+  createMapStateToProps,
+  mapDispatchToProps,
+  undefined,
+  undefined,
+  { section: 'naming' }
+)(NamingConnector);

frontend/src/Settings/MediaManagement/Naming/NamingModal.js

@@ -168,21 +168,21 @@ class NamingModal extends Component {
                 <FieldSet legend="File Names">
                   <div className={styles.groups}>
                     {
-                        fileNameTokens.map(({ token, example }) => {
-                          return (
-                            <NamingOption
-                              key={token}
-                              name={name}
-                              value={value}
-                              token={token}
-                              example={example}
-                              isFullFilename={true}
-                              tokenCase={this.state.case}
-                              size={sizes.LARGE}
-                              onInputChange={onInputChange}
-                            />
-                          );
-                        }
+                      fileNameTokens.map(({ token, example }) => {
+                        return (
+                          <NamingOption
+                            key={token}
+                            name={name}
+                            value={value}
+                            token={token}
+                            example={example}
+                            isFullFilename={true}
+                            tokenCase={this.state.case}
+                            size={sizes.LARGE}
+                            onInputChange={onInputChange}
+                          />
+                        );
+                      }
                       )
                     }
                   </div>
@@ -192,19 +192,19 @@ class NamingModal extends Component {
             <FieldSet legend="Artist">
               <div className={styles.groups}>
                 {
-                    artistTokens.map(({ token, example }) => {
-                      return (
-                        <NamingOption
-                          key={token}
-                          name={name}
-                          value={value}
-                          token={token}
-                          example={example}
-                          tokenCase={this.state.case}
-                          onInputChange={onInputChange}
-                        />
-                      );
-                    }
+                  artistTokens.map(({ token, example }) => {
+                    return (
+                      <NamingOption
+                        key={token}
+                        name={name}
+                        value={value}
+                        token={token}
+                        example={example}
+                        tokenCase={this.state.case}
+                        onInputChange={onInputChange}
+                      />
+                    );
+                  }
                   )
                 }
               </div>
@@ -215,7 +215,7 @@ class NamingModal extends Component {
                 <div>
                   <FieldSet legend="Album">
                     <div className={styles.groups}>
-                    {
+                      {
                         albumTokens.map(({ token, example }) => {
                           return (
                             <NamingOption
@@ -229,14 +229,14 @@ class NamingModal extends Component {
                             />
                           );
                         }
-                      )
-                    }
+                        )
+                      }
                     </div>
                   </FieldSet>
 
                   <FieldSet legend="Release Date">
                     <div className={styles.groups}>
-                    {
+                      {
                         releaseDateTokens.map(({ token, example }) => {
                           return (
                             <NamingOption
@@ -250,8 +250,8 @@ class NamingModal extends Component {
                             />
                           );
                         }
-                      )
-                    }
+                        )
+                      }
                     </div>
                   </FieldSet>
                 </div>
@@ -263,19 +263,19 @@ class NamingModal extends Component {
                   <FieldSet legend="Track">
                     <div className={styles.groups}>
                       {
-                          trackTokens.map(({ token, example }) => {
-                            return (
-                              <NamingOption
-                                key={token}
-                                name={name}
-                                value={value}
-                                token={token}
-                                example={example}
-                                tokenCase={this.state.case}
-                                onInputChange={onInputChange}
-                              />
-                            );
-                          }
+                        trackTokens.map(({ token, example }) => {
+                          return (
+                            <NamingOption
+                              key={token}
+                              name={name}
+                              value={value}
+                              token={token}
+                              example={example}
+                              tokenCase={this.state.case}
+                              onInputChange={onInputChange}
+                            />
+                          );
+                        }
                         )
                       }
                     </div>
@@ -290,19 +290,19 @@ class NamingModal extends Component {
                   <FieldSet legend="Track Title">
                     <div className={styles.groups}>
                       {
-                          trackTitleTokens.map(({ token, example }) => {
-                            return (
-                              <NamingOption
-                                key={token}
-                                name={name}
-                                value={value}
-                                token={token}
-                                example={example}
-                                tokenCase={this.state.case}
-                                onInputChange={onInputChange}
-                              />
-                            );
-                          }
+                        trackTitleTokens.map(({ token, example }) => {
+                          return (
+                            <NamingOption
+                              key={token}
+                              name={name}
+                              value={value}
+                              token={token}
+                              example={example}
+                              tokenCase={this.state.case}
+                              onInputChange={onInputChange}
+                            />
+                          );
+                        }
                         )
                       }
                     </div>
@@ -311,19 +311,19 @@ class NamingModal extends Component {
                   <FieldSet legend="Quality">
                     <div className={styles.groups}>
                       {
-                          qualityTokens.map(({ token, example }) => {
-                            return (
-                              <NamingOption
-                                key={token}
-                                name={name}
-                                value={value}
-                                token={token}
-                                example={example}
-                                tokenCase={this.state.case}
-                                onInputChange={onInputChange}
-                              />
-                            );
-                          }
+                        qualityTokens.map(({ token, example }) => {
+                          return (
+                            <NamingOption
+                              key={token}
+                              name={name}
+                              value={value}
+                              token={token}
+                              example={example}
+                              tokenCase={this.state.case}
+                              onInputChange={onInputChange}
+                            />
+                          );
+                        }
                         )
                       }
                     </div>
@@ -332,19 +332,19 @@ class NamingModal extends Component {
                   <FieldSet legend="Media Info">
                     <div className={styles.groups}>
                       {
-                          mediaInfoTokens.map(({ token, example }) => {
-                            return (
-                              <NamingOption
-                                key={token}
-                                name={name}
-                                value={value}
-                                token={token}
-                                example={example}
-                                tokenCase={this.state.case}
-                                onInputChange={onInputChange}
-                              />
-                            );
-                          }
+                        mediaInfoTokens.map(({ token, example }) => {
+                          return (
+                            <NamingOption
+                              key={token}
+                              name={name}
+                              value={value}
+                              token={token}
+                              example={example}
+                              tokenCase={this.state.case}
+                              onInputChange={onInputChange}
+                            />
+                          );
+                        }
                         )
                       }
                     </div>
@@ -353,19 +353,19 @@ class NamingModal extends Component {
                   <FieldSet legend="Release Group">
                     <div className={styles.groups}>
                       {
-                          releaseGroupTokens.map(({ token, example }) => {
-                            return (
-                              <NamingOption
-                                key={token}
-                                name={name}
-                                value={value}
-                                token={token}
-                                example={example}
-                                tokenCase={this.state.case}
-                                onInputChange={onInputChange}
-                              />
-                            );
-                          }
+                        releaseGroupTokens.map(({ token, example }) => {
+                          return (
+                            <NamingOption
+                              key={token}
+                              name={name}
+                              value={value}
+                              token={token}
+                              example={example}
+                              tokenCase={this.state.case}
+                              onInputChange={onInputChange}
+                            />
+                          );
+                        }
                         )
                       }
                     </div>
@@ -374,20 +374,20 @@ class NamingModal extends Component {
                   <FieldSet legend="Original">
                     <div className={styles.groups}>
                       {
-                          originalTokens.map(({ token, example }) => {
-                            return (
-                              <NamingOption
-                                key={token}
-                                name={name}
-                                value={value}
-                                token={token}
-                                example={example}
-                                tokenCase={this.state.case}
-                                size={sizes.LARGE}
-                                onInputChange={onInputChange}
-                              />
-                            );
-                          }
+                        originalTokens.map(({ token, example }) => {
+                          return (
+                            <NamingOption
+                              key={token}
+                              name={name}
+                              value={value}
+                              token={token}
+                              example={example}
+                              tokenCase={this.state.case}
+                              size={sizes.LARGE}
+                              onInputChange={onInputChange}
+                            />
+                          );
+                        }
                         )
                       }
                     </div>

frontend/src/Settings/Metadata/Metadata/EditMetadataModalContent.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { inputTypes, kinds } from 'Helpers/Props';
+import { inputTypes } from 'Helpers/Props';
 import Button from 'Components/Link/Button';
 import SpinnerErrorButton from 'Components/Link/SpinnerErrorButton';
 import ModalContent from 'Components/Modal/ModalContent';

frontend/src/Settings/Notifications/Notifications/AddNotificationModalContent.js

@@ -42,7 +42,7 @@ class AddNotificationModalContent extends Component {
           }
 
           {
-            !isFetching && !error &&
+            !isPopulated && !error &&
               <div>
                 <div className={styles.notifications}>
                   {

frontend/src/Settings/Notifications/Notifications/AddNotificationModalContentConnector.js

@@ -1,4 +1,3 @@
-import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';

frontend/src/Settings/PendingChangesModal.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { kinds, sizes } from 'Helpers/Props';
+import { kinds } from 'Helpers/Props';
 import Button from 'Components/Link/Button';
 import Modal from 'Components/Modal/Modal';
 import ModalContent from 'Components/Modal/ModalContent';
@@ -11,7 +11,6 @@ import ModalFooter from 'Components/Modal/ModalFooter';
 function PendingChangesModal(props) {
   const {
     isOpen,
-    size,
     onConfirm,
     onCancel
   } = props;
@@ -52,7 +51,6 @@ PendingChangesModal.propTypes = {
   className: PropTypes.string,
   isOpen: PropTypes.bool.isRequired,
   kind: PropTypes.oneOf(kinds.all),
-  size: PropTypes.oneOf(sizes.all),
   onConfirm: PropTypes.func.isRequired,
   onCancel: PropTypes.func.isRequired
 };

frontend/src/Settings/Profiles/Delay/DelayProfile.js

@@ -78,7 +78,6 @@ class DelayProfile extends Component {
       preferredProtocol,
       usenetDelay,
       torrentDelay,
-      order,
       tags,
       tagList,
       isDragging,
@@ -158,7 +157,6 @@ DelayProfile.propTypes = {
   preferredProtocol: PropTypes.string.isRequired,
   usenetDelay: PropTypes.number.isRequired,
   torrentDelay: PropTypes.number.isRequired,
-  order: PropTypes.number.isRequired,
   tags: PropTypes.arrayOf(PropTypes.number).isRequired,
   tagList: PropTypes.arrayOf(PropTypes.object).isRequired,
   isDragging: PropTypes.bool.isRequired,

frontend/src/Settings/Profiles/Quality/QualityProfileItem.js

@@ -58,7 +58,7 @@ class QualityProfileItem extends Component {
                 name={icons.REORDER}
               />
             </div>
-            )
+          )
         }
       </div>
     );

frontend/src/Settings/UI/UISettingsConnector.js

@@ -74,9 +74,9 @@ UISettingsConnector.propTypes = {
 };
 
 export default connectSection(
-                createMapStateToProps,
-                mapDispatchToProps,
-                undefined,
-                undefined,
-                { section: 'ui' }
-               )(UISettingsConnector);
+  createMapStateToProps,
+  mapDispatchToProps,
+  undefined,
+  undefined,
+  { section: 'ui' }
+)(UISettingsConnector);

frontend/src/Shared/piwikCheck.js

@@ -1,7 +1,7 @@
 if (window.Sonarr.analytics) {
-  var d = document;
-  var g = d.createElement('script');
-  var s = d.getElementsByTagName('script')[0];
+  const d = document;
+  const g = d.createElement('script');
+  const s = d.getElementsByTagName('script')[0];
   g.type = 'text/javascript';
   g.async = true;
   g.defer = true;

frontend/src/Shims/jquery.js

@@ -3,6 +3,8 @@ import ajax from 'jQuery/jquery.ajax';
 
 ajax($);
 
+const jquery = $;
 window.$ = $;
 window.jQuery = $;
-export default $;
+
+export default jquery;

frontend/src/Store/Actions/Creators/createSetServerSideCollectionSortHandler.js

@@ -12,8 +12,8 @@ function createSetServerSideCollectionSortHandler(section, getFromState, fetchHa
       if (!sortDirection) {
         if (payload.sortKey === sectionState.sortKey) {
           sortDirection = sectionState.sortDirection === sortDirections.ASCENDING ?
-                          sortDirections.DESCENDING :
-                          sortDirections.ASCENDING;
+            sortDirections.DESCENDING :
+            sortDirections.ASCENDING;
         } else {
           sortDirection = sectionState.sortDirection;
         }

frontend/src/Store/Actions/artistActionHandlers.js

@@ -12,13 +12,15 @@ const section = 'series';
 const artistActionHandlers = {
   [types.FETCH_ARTIST]: createFetchHandler(section, '/artist'),
 
-  [types.SAVE_ARTIST]: createSaveProviderHandler(section,
-                                                 '/artist',
-                                                 (state) => state.series),
-
-  [types.DELETE_ARTIST]: createRemoveItemHandler(section,
-                                                 '/artist',
-                                                 (state) => state.series),
+  [types.SAVE_ARTIST]: createSaveProviderHandler(
+    section,
+    '/artist',
+    (state) => state.series),
+
+  [types.DELETE_ARTIST]: createRemoveItemHandler(
+    section,
+    '/artist',
+    (state) => state.series),
 
   [types.TOGGLE_ARTIST_MONITORED]: function(payload) {
     return function(dispatch, getState) {

frontend/src/Store/Actions/calendarActionHandlers.js

@@ -130,12 +130,12 @@ const calendarActionHandlers = {
       };
 
       const attrs = isPrePopulated ?
-      {
-        view,
-        ...basesAttrs,
-        ...dates
-      } :
-      basesAttrs;
+        {
+          view,
+          ...basesAttrs,
+          ...dates
+        } :
+        basesAttrs;
 
       dispatch(set(attrs));
 

frontend/src/Store/Actions/oAuthActionHandlers.js

@@ -1,3 +1,4 @@
+/* eslint callback-return: 0 */
 import _ from 'lodash';
 import $ from 'jquery';
 import requestAction from 'Utilities/requestAction';

frontend/src/Store/Actions/rootFolderActionHandlers.js

@@ -10,9 +10,10 @@ const section = 'rootFolders';
 const rootFolderActionHandlers = {
   [types.FETCH_ROOT_FOLDERS]: createFetchHandler('rootFolders', '/rootFolder'),
 
-  [types.DELETE_ROOT_FOLDER]: createRemoveItemHandler('rootFolders',
-                                                      '/rootFolder',
-                                                      (state) => state.rootFolders),
+  [types.DELETE_ROOT_FOLDER]: createRemoveItemHandler(
+    'rootFolders',
+    '/rootFolder',
+    (state) => state.rootFolders),
 
   [types.ADD_ROOT_FOLDER]: function(payload) {
     return function(dispatch, getState) {

frontend/src/Store/Actions/settingsActionHandlers.js

@@ -88,34 +88,40 @@ const settingsActionHandlers = {
   [types.FETCH_QUALITY_PROFILES]: createFetchHandler('qualityProfiles', '/qualityprofile'),
   [types.FETCH_QUALITY_PROFILE_SCHEMA]: createFetchSchemaHandler('qualityProfiles', '/qualityprofile/schema'),
 
-  [types.SAVE_QUALITY_PROFILE]: createSaveProviderHandler('qualityProfiles',
-                                                          '/qualityprofile',
-                                                          (state) => state.settings.qualityProfiles),
+  [types.SAVE_QUALITY_PROFILE]: createSaveProviderHandler(
+    'qualityProfiles',
+    '/qualityprofile',
+    (state) => state.settings.qualityProfiles),
 
-  [types.DELETE_QUALITY_PROFILE]: createRemoveItemHandler('qualityProfiles',
-                                                          '/qualityprofile',
-                                                          (state) => state.settings.qualityProfiles),
+  [types.DELETE_QUALITY_PROFILE]: createRemoveItemHandler(
+    'qualityProfiles',
+    '/qualityprofile',
+    (state) => state.settings.qualityProfiles),
 
   [types.FETCH_LANGUAGE_PROFILES]: createFetchHandler('languageProfiles', '/languageprofile'),
   [types.FETCH_LANGUAGE_PROFILE_SCHEMA]: createFetchSchemaHandler('languageProfiles', '/languageprofile/schema'),
 
-  [types.SAVE_LANGUAGE_PROFILE]: createSaveProviderHandler('languageProfiles',
-                                                           '/languageprofile',
-                                                           (state) => state.settings.languageProfiles),
+  [types.SAVE_LANGUAGE_PROFILE]: createSaveProviderHandler(
+    'languageProfiles',
+    '/languageprofile',
+    (state) => state.settings.languageProfiles),
 
-  [types.DELETE_LANGUAGE_PROFILE]: createRemoveItemHandler('languageProfiles',
-                                                           '/languageprofile',
-                                                           (state) => state.settings.languageProfiles),
+  [types.DELETE_LANGUAGE_PROFILE]: createRemoveItemHandler(
+    'languageProfiles',
+    '/languageprofile',
+    (state) => state.settings.languageProfiles),
 
   [types.FETCH_DELAY_PROFILES]: createFetchHandler('delayProfiles', '/delayprofile'),
 
-  [types.SAVE_DELAY_PROFILE]: createSaveProviderHandler('delayProfiles',
-                                                        '/delayprofile',
-                                                        (state) => state.settings.delayProfiles),
+  [types.SAVE_DELAY_PROFILE]: createSaveProviderHandler(
+    'delayProfiles',
+    '/delayprofile',
+    (state) => state.settings.delayProfiles),
 
-  [types.DELETE_DELAY_PROFILE]: createRemoveItemHandler('delayProfiles',
-                                                        '/delayprofile',
-                                                        (state) => state.settings.delayProfiles),
+  [types.DELETE_DELAY_PROFILE]: createRemoveItemHandler(
+    'delayProfiles',
+    '/delayprofile',
+    (state) => state.settings.delayProfiles),
 
   [types.FETCH_QUALITY_DEFINITIONS]: createFetchHandler('qualityDefinitions', '/qualitydefinition'),
   [types.SAVE_QUALITY_DEFINITIONS]: createSaveHandler('qualityDefinitions', '/qualitydefinition', (state) => state.settings.qualitydefinitions),
@@ -157,19 +163,22 @@ const settingsActionHandlers = {
   [types.FETCH_INDEXERS]: createFetchHandler('indexers', '/indexer'),
   [types.FETCH_INDEXER_SCHEMA]: createFetchSchemaHandler('indexers', '/indexer/schema'),
 
-  [types.SAVE_INDEXER]: createSaveProviderHandler('indexers',
-                                                  '/indexer',
-                                                  (state) => state.settings.indexers),
+  [types.SAVE_INDEXER]: createSaveProviderHandler(
+    'indexers',
+    '/indexer',
+    (state) => state.settings.indexers),
 
   [types.CANCEL_SAVE_INDEXER]: createCancelSaveProviderHandler('indexers'),
 
-  [types.DELETE_INDEXER]: createRemoveItemHandler('indexers',
-                                                      '/indexer',
-                                                      (state) => state.settings.indexers),
+  [types.DELETE_INDEXER]: createRemoveItemHandler(
+    'indexers',
+    '/indexer',
+    (state) => state.settings.indexers),
 
-  [types.TEST_INDEXER]: createTestProviderHandler('indexers',
-                                                  '/indexer',
-                                                  (state) => state.settings.indexers),
+  [types.TEST_INDEXER]: createTestProviderHandler(
+    'indexers',
+    '/indexer',
+    (state) => state.settings.indexers),
 
   [types.CANCEL_TEST_INDEXER]: createCancelTestProviderHandler('indexers'),
 
@@ -178,30 +187,35 @@ const settingsActionHandlers = {
 
   [types.FETCH_RESTRICTIONS]: createFetchHandler('restrictions', '/restriction'),
 
-  [types.SAVE_RESTRICTION]: createSaveProviderHandler('restrictions',
-                                                      '/restriction',
-                                                      (state) => state.settings.restrictions),
+  [types.SAVE_RESTRICTION]: createSaveProviderHandler(
+    'restrictions',
+    '/restriction',
+    (state) => state.settings.restrictions),
 
-  [types.DELETE_RESTRICTION]: createRemoveItemHandler('restrictions',
-                                                          '/restriction',
-                                                          (state) => state.settings.restrictions),
+  [types.DELETE_RESTRICTION]: createRemoveItemHandler(
+    'restrictions',
+    '/restriction',
+    (state) => state.settings.restrictions),
 
   [types.FETCH_DOWNLOAD_CLIENTS]: createFetchHandler('downloadClients', '/downloadclient'),
   [types.FETCH_DOWNLOAD_CLIENT_SCHEMA]: createFetchSchemaHandler('downloadClients', '/downloadclient/schema'),
 
-  [types.SAVE_DOWNLOAD_CLIENT]: createSaveProviderHandler('downloadClients',
-                                                          '/downloadclient',
-                                                          (state) => state.settings.downloadClients),
+  [types.SAVE_DOWNLOAD_CLIENT]: createSaveProviderHandler(
+    'downloadClients',
+    '/downloadclient',
+    (state) => state.settings.downloadClients),
 
   [types.CANCEL_SAVE_DOWNLOAD_CLIENT]: createCancelSaveProviderHandler('downloadClients'),
 
-  [types.DELETE_DOWNLOAD_CLIENT]: createRemoveItemHandler('downloadClients',
-                                                                '/downloadclient',
-                                                              (state) => state.settings.downloadClients),
+  [types.DELETE_DOWNLOAD_CLIENT]: createRemoveItemHandler(
+    'downloadClients',
+    '/downloadclient',
+    (state) => state.settings.downloadClients),
 
-  [types.TEST_DOWNLOAD_CLIENT]: createTestProviderHandler('downloadClients',
-                                                          '/downloadclient',
-                                                          (state) => state.settings.downloadClients),
+  [types.TEST_DOWNLOAD_CLIENT]: createTestProviderHandler(
+    'downloadClients',
+    '/downloadclient',
+    (state) => state.settings.downloadClients),
 
   [types.CANCEL_TEST_DOWNLOAD_CLIENT]: createCancelTestProviderHandler('downloadClients'),
 
@@ -210,38 +224,44 @@ const settingsActionHandlers = {
 
   [types.FETCH_REMOTE_PATH_MAPPINGS]: createFetchHandler('remotePathMappings', '/remotepathmapping'),
 
-  [types.SAVE_REMOTE_PATH_MAPPING]: createSaveProviderHandler('remotePathMappings',
-                                                              '/remotepathmapping',
-                                                              (state) => state.settings.remotePathMappings),
+  [types.SAVE_REMOTE_PATH_MAPPING]: createSaveProviderHandler(
+    'remotePathMappings',
+    '/remotepathmapping',
+    (state) => state.settings.remotePathMappings),
 
-  [types.DELETE_REMOTE_PATH_MAPPING]: createRemoveItemHandler('remotePathMappings',
-                                                                  '/remotepathmapping',
-                                                                  (state) => state.settings.remotePathMappings),
+  [types.DELETE_REMOTE_PATH_MAPPING]: createRemoveItemHandler(
+    'remotePathMappings',
+    '/remotepathmapping',
+    (state) => state.settings.remotePathMappings),
 
   [types.FETCH_NOTIFICATIONS]: createFetchHandler('notifications', '/notification'),
   [types.FETCH_NOTIFICATION_SCHEMA]: createFetchSchemaHandler('notifications', '/notification/schema'),
 
-  [types.SAVE_NOTIFICATION]: createSaveProviderHandler('notifications',
-                                                       '/notification',
-                                                       (state) => state.settings.notifications),
+  [types.SAVE_NOTIFICATION]: createSaveProviderHandler(
+    'notifications',
+    '/notification',
+    (state) => state.settings.notifications),
 
   [types.CANCEL_SAVE_NOTIFICATION]: createCancelSaveProviderHandler('notifications'),
 
-  [types.DELETE_NOTIFICATION]: createRemoveItemHandler('notifications',
-                                                           '/notification',
-                                                           (state) => state.settings.notifications),
+  [types.DELETE_NOTIFICATION]: createRemoveItemHandler(
+    'notifications',
+    '/notification',
+    (state) => state.settings.notifications),
 
-  [types.TEST_NOTIFICATION]: createTestProviderHandler('notifications',
-                                                       '/notification',
-                                                       (state) => state.settings.notifications),
+  [types.TEST_NOTIFICATION]: createTestProviderHandler(
+    'notifications',
+    '/notification',
+    (state) => state.settings.notifications),
 
   [types.CANCEL_TEST_NOTIFICATION]: createCancelTestProviderHandler('notifications'),
 
   [types.FETCH_METADATA]: createFetchHandler('metadata', '/metadata'),
 
-  [types.SAVE_METADATA]: createSaveProviderHandler('metadata',
-                                                   '/metadata',
-                                                   (state) => state.settings.metadata),
+  [types.SAVE_METADATA]: createSaveProviderHandler(
+    'metadata',
+    '/metadata',
+    (state) => state.settings.metadata),
 
   [types.FETCH_METADATA_PROVIDER]: createFetchHandler('metadataProvider', '/config/metadataProvider'),
   [types.SAVE_METADATA_PROVIDER]: createSaveHandler('metadataProvider', '/config/metadataProvider', (state) => state.settings.metadataProvider),

frontend/src/Store/Middleware/middlewares.js

@@ -1,35 +1,15 @@
 import { applyMiddleware, compose } from 'redux';
-import Raven from 'raven-js';
-import createRavenMiddleware from 'raven-for-redux';
 import thunk from 'redux-thunk';
 import { routerMiddleware } from 'react-router-redux';
+import sentryMiddleware from './sentryMiddleware';
 import persistState from './persistState';
 
 export default function(history) {
-  const {
-    analytics,
-    branch,
-    version,
-    release,
-    isProduction
-  } = window.Sonarr;
-
-  const dsn = isProduction ? 'https://c3a5b33e08de4e18b7d0505e942dbc95@sentry.io/216290' :
-                             'https://c3a5b33e08de4e18b7d0505e942dbc95@sentry.io/216290';
-
-  Raven.config(dsn).install();
-
   const middlewares = [];
+  const ravenMiddleware = sentryMiddleware();
 
-  if (analytics) {
-    middlewares.push(createRavenMiddleware(Raven, {
-      environment: isProduction ? 'production' : 'development',
-      release,
-      tags: {
-        branch,
-        version
-      }
-    }));
+  if (ravenMiddleware) {
+    middlewares.push(ravenMiddleware);
   }
 
   middlewares.push(routerMiddleware(history));

frontend/src/Store/Middleware/sentryMiddleware.js

@@ -0,0 +1,48 @@
+import _ from 'lodash';
+import Raven from 'raven-js';
+import createRavenMiddleware from 'raven-for-redux';
+import parseUrl from 'Utilities/String/parseUrl';
+
+function cleanseUrl(url) {
+  const properties = parseUrl(url);
+
+  return `${properties.pathname}${properties.search}`;
+}
+
+function cleanseData(data) {
+  const result = _.cloneDeep(data);
+
+  result.culprit = cleanseUrl(result.culprit);
+  result.request.url = cleanseUrl(result.request.url);
+
+  return result;
+}
+
+export default function sentryMiddleware() {
+  const {
+    analytics,
+    branch,
+    version,
+    release,
+    isProduction
+  } = window.Sonarr;
+
+  if (!analytics) {
+    return;
+  }
+
+  const dsn = isProduction ? 'https://c3a5b33e08de4e18b7d0505e942dbc95@sentry.io/216290' :
+    'https://c3a5b33e08de4e18b7d0505e942dbc95@sentry.io/216290';
+
+  Raven.config(dsn).install();
+
+  return createRavenMiddleware(Raven, {
+    environment: isProduction ? 'production' : 'development',
+    release,
+    tags: {
+      branch,
+      version
+    },
+    dataCallback: cleanseData
+  });
+}

frontend/src/Store/Reducers/Creators/createSetClientSideCollectionSortReducer.js

@@ -12,8 +12,8 @@ function createSetClientSideCollectionSortReducer(section) {
     if (!sortDirection) {
       if (payload.sortKey === newState.sortKey) {
         sortDirection = newState.sortDirection === sortDirections.ASCENDING ?
-                        sortDirections.DESCENDING :
-                        sortDirections.ASCENDING;
+          sortDirections.DESCENDING :
+          sortDirections.ASCENDING;
       } else {
         sortDirection = newState.sortDirection;
       }

frontend/src/Store/Reducers/Creators/createSetReducer.js

@@ -2,28 +2,6 @@ import _ from 'lodash';
 import getSectionState from 'Utilities/State/getSectionState';
 import updateSectionState from 'Utilities/State/updateSectionState';
 
-const whitelistedProperties = [
-  'isFetching',
-  'isPopulated',
-  'error',
-  'isFetchingSchema',
-  'schemaPopulated',
-  'schemaError',
-  'schema',
-  'selectedSchema',
-  'isSaving',
-  'saveError',
-  'isTesting',
-  'isDeleting',
-  'deleteError',
-  'pendingChanges',
-  'filterKey',
-  'filterValue',
-  'page',
-  'sortKey',
-  'sortDirection'
-];
-
 const blacklistedProperties = [
   'section',
   'id'
@@ -33,7 +11,7 @@ function createSetReducer(section) {
   return (state, { payload }) => {
     if (section === payload.section) {
       const newState = Object.assign(getSectionState(state, section),
-                                     _.omit(payload, blacklistedProperties));
+        _.omit(payload, blacklistedProperties));
 
       return updateSectionState(state, section, newState);
     }

frontend/src/Store/Reducers/Creators/createSetTableOptionReducer.js

@@ -9,8 +9,9 @@ const whitelistedProperties = [
 
 function createSetTableOptionReducer(section) {
   return (state, { payload }) => {
-    const newState = Object.assign(getSectionState(state, section),
-                                   _.pick(payload, whitelistedProperties));
+    const newState = Object.assign(
+      getSectionState(state, section),
+      _.pick(payload, whitelistedProperties));
 
     return updateSectionState(state, section, newState);
   };

frontend/src/Store/Reducers/queueReducers.js

@@ -1,5 +1,4 @@
 import { handleActions } from 'redux-actions';
-import updateSectionState from 'Utilities/State/updateSectionState';
 import { sortDirections } from 'Helpers/Props';
 import * as types from 'Store/Actions/actionTypes';
 import createClearReducer from './Creators/createClearReducer';

frontend/src/Styles/globals.css

@@ -1,4 +1,8 @@
+/* stylelint-disable */
+
 @import '~normalize.css/normalize.css';
 @import 'scaffolding.css';
 @import '../Content/Fonts/fonts.css';
 @import '../Content/Fonts/font-awesome.css';
+
+/* stylelint-enable */

frontend/src/Styles/scaffolding.css

@@ -1,19 +1,22 @@
+/* stylelint-disable */
 * {
   box-sizing: border-box;
 }
-*:before,
-*:after {
+
+*::before,
+*::after {
   box-sizing: border-box;
 }
 
 *:focus {
   outline: none;
 }
+/* stylelint-enable */
 
 html,
 body {
   color: #515253;
-  font-family: "Roboto", "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: 'Roboto', 'open sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
 }
 
 body {

frontend/src/System/Events/LogsTableRow.js

@@ -123,6 +123,8 @@ class LogsTableRow extends Component {
                 />
               );
             }
+
+            return null;
           })
         }
 

frontend/src/System/Updates/UpdateChanges.js

@@ -27,7 +27,7 @@ class UpdateChanges extends Component {
                 <li key={index}>
                   {change}
                 </li>
-              )
+              );
             })
           }
         </ul>
@@ -42,4 +42,4 @@ UpdateChanges.propTypes = {
   changes: PropTypes.arrayOf(PropTypes.string)
 };
 
-export default UpdateChanges
+export default UpdateChanges;

frontend/src/TrackFile/Editor/TrackFileEditorModalContentConnector.js

@@ -1,3 +1,4 @@
+/* eslint max-params: 0 */
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';

frontend/src/Utilities/Date/isTomorrow.js

@@ -1,6 +1,6 @@
 import moment from 'moment';
 
-function isTomrrow(date) {
+function isTomorrow(date) {
   if (!date) {
     return false;
   }
@@ -8,4 +8,4 @@ function isTomrrow(date) {
   return moment(date).isSame(moment().add(1, 'day'), 'day');
 }
 
-export default isTomrrow;
+export default isTomorrow;