Add eslint but target less files initially

.eslintignore

@@ -0,0 +1,9 @@
+node_modules/
+dist
+**/*.snap
+*.yml 
+
+imports/ui/*
+
+!imports/ui/ErrorBoundary.jsx
+!imports/ui/App.jsx

.eslintrc.json

@@ -0,0 +1,60 @@
+{
+    "env": {
+      "browser": true,
+      "es6": true,
+      "node": true
+    },
+    "extends": [
+      "eslint:recommended",
+      "plugin:prettier/recommended",
+      "plugin:import/warnings",
+      "plugin:import/errors",
+      "plugin:prettier/recommended",
+      "prettier/react",
+      "plugin:react/recommended"
+    ],
+    "globals": {
+      "Atomics": "readonly",
+      "SharedArrayBuffer": "readonly"
+    },
+    "parser": "babel-eslint",
+    "parserOptions": {
+      "ecmaFeatures": {
+        "jsx": true
+      },
+      "ecmaVersion": 2018,
+      "sourceType": "module"
+    },
+    "plugins": [
+      "react",
+      "react-hooks",
+      "simple-import-sort",
+      "prettier"
+    ],
+    "rules": {
+      "import/prefer-default-export": "off",
+      "no-undef": "off",
+      "react/prop-types": "off",
+      "no-unused-expressions": [
+        "warn",
+        {
+          "allowShortCircuit": true,
+          "allowTernary": true
+        }
+      ],
+      "prettier/prettier": "error",
+      "simple-import-sort/sort": "error",
+      "sort-imports": "off",
+      "import/order": "off",
+      "react/no-unescaped-entities": "off",
+  
+      "react/no-string-refs": "off",
+      "react/no-find-dom-node": "off"
+    },
+    "settings": {
+      "import/resolver": "meteor",
+      "react": {
+        "version": "detect"
+      }
+    }
+  } 

.prettierignore

@@ -0,0 +1,9 @@
+node_modules/
+dist
+**/*.snap
+*.yml 
+
+imports/ui/*
+
+!imports/ui/ErrorBoundary.jsx
+!imports/ui/App.jsx

.prettierrc

@@ -0,0 +1,12 @@
+{
+  "trailingComma": "es5",
+  "printWidth": 80,
+  "useTabs": false,
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true,
+  "jsxSingleQuote": false,
+  "bracketSpacing": false,
+  "jsxBracketSameLine": false,
+  "quoteProps": "consistent"
+} 

.vscode/extensions.json

@@ -0,0 +1,6 @@
+{
+    "recommendations": [
+        "dbaeumer.vscode-eslint",
+        "ms-azuretools.vscode-docker"
+    ]
+}

imports/ui/App.jsx

@@ -1,59 +1,88 @@
-
 import React from 'react';
-import { BrowserRouter as Router, Route, NavLink, Switch } from "react-router-dom";
+import {Nav, Navbar} from 'react-bootstrap';
-import { Navbar, Nav } from 'react-bootstrap';
+import {
+  BrowserRouter as Router,
+  NavLink,
+  Route,
+  Switch,
+} from 'react-router-dom';
 
-import { GlobalSettingsDB } from '../api/tasks.js';
+import {GlobalSettingsDB} from '../api/tasks.js';
-import TabTranscoding from './transcoding/tab_Transcoding.jsx';
+import TabDev from '../ui/tab_Dev.jsx';
-import TabSearch from './plugins/tab_Search.jsx';
+import TabHelp from '../ui/tab_Help.jsx';
+import TabLog from '../ui/tab_Log.jsx';
 import TabStatistics from '../ui/tab_Statistics.jsx';
+import {ErrorBoundary} from './ErrorBoundary.jsx';
 import TabLibraries from './libraries/tab_Libraries.jsx';
 import TabPlugins from './plugins/tab_Plugins.jsx';
-import TabLog from '../ui/tab_Log.jsx';
+import TabSearch from './plugins/tab_Search.jsx';
-import TabHelp from '../ui/tab_Help.jsx';
+import TabTranscoding from './transcoding/tab_Transcoding.jsx';
-import TabDev from '../ui/tab_Dev.jsx';
 
 const tabs = [
-  { path: '/tdarr/', text: 'Tdarr', component: TabTranscoding },
+  {path: '/tdarr/', text: 'Tdarr', component: TabTranscoding},
-  { path: '/search', text: 'Search', component: TabSearch },
+  {path: '/search', text: 'Search', component: TabSearch},
-  { path: '/stats', text: 'Stats', component: TabStatistics },
+  {path: '/stats', text: 'Stats', component: TabStatistics},
-  { path: '/settings/', text: 'Libraries', component: TabLibraries },
+  {path: '/settings/', text: 'Libraries', component: TabLibraries},
-  { path: '/plugins/', text: 'Plugins', component: TabPlugins },
+  {path: '/plugins/', text: 'Plugins', component: TabPlugins},
-  { path: '/logs/', text: 'Logs', component: TabLog },
+  {path: '/logs/', text: 'Logs', component: TabLog},
-  { path: '/help/', text: 'Help', component: TabHelp },
+  {path: '/help/', text: 'Help', component: TabHelp},
-  { path: '/', text: 'Dev', component: TabDev },
+  {path: '/', text: 'Dev', component: TabDev},
 ];
 
-
 const AppRouter = () => {
   const [basePath, setBasePath] = React.useState('');
 
   React.useEffect(() => {
-      Meteor.subscribe('GlobalSettingsDB', () => {
+    Meteor.subscribe('GlobalSettingsDB', () => {
-        const updatedBasePath = GlobalSettingsDB.find({}).fetch()[0].basePath;
+      const updatedBasePath = GlobalSettingsDB.find({}).fetch()[0].basePath;
 
-        setBasePath(updatedBasePath);
+      setBasePath(updatedBasePath);
     });
   });
 
   return (
     <Router>
-      <Navbar className="mb-0 rounded-0 d-flex justify-content-between" collapseOnSelect expand="md" bg="dark" variant="dark">
+      <Navbar
-        <Navbar.Brand className="p-2" href="#home"><img className="h-100" src="https://i.imgur.com/s8ZbOsT.png" /></Navbar.Brand>
+        className="mb-0 rounded-0 d-flex justify-content-between"
+        collapseOnSelect
+        expand="md"
+        bg="dark"
+        variant="dark"
+      >
+        <Navbar.Brand className="p-2" href="#home">
+          <img className="h-100" src="https://i.imgur.com/s8ZbOsT.png" />
+        </Navbar.Brand>
         <Navbar.Toggle aria-controls="responsive-navbar-nav" />
         <Navbar.Collapse id="responsive-navbar-nav ">
-          <Nav style={{ fontSize: '1.5em' }}>
+          <Nav style={{fontSize: '1.5em'}}>
-            {tabs.map(t => <NavLink className="ml-4 nav-link" to={`${basePath}${t.path}`} exact={t.path === '/'}>{t.text}</NavLink>)}
+            {tabs.map(t => (
+              <NavLink
+                key={`nav-item-${t.path}`}
+                className="ml-4 nav-link"
+                to={`${basePath}${t.path}`}
+                exact={t.path === '/'}
+              >
+                {t.text}
+              </NavLink>
+            ))}
           </Nav>
         </Navbar.Collapse>
       </Navbar>
-  
+
       <link rel="icon" sizes="16x16 32x32" href="/favicon.png?v=2" />
-      <Switch>
+      <ErrorBoundary>
-        {tabs.map(t => <Route path={`${basePath}${t.path}`} component={t.component} />)}
+        <Switch>
-      </Switch>
+          {tabs.map(t => (
+            <Route
+              key={`nav-route-${t.path}`}
+              path={`${basePath}${t.path}`}
+              component={t.component}
+            />
+          ))}
+        </Switch>
+      </ErrorBoundary>
     </Router>
   );
-}
+};
 
 export default AppRouter;

imports/ui/ErrorBoundary.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+export class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {hasError: false};
+  }
+
+  static getDerivedStateFromError() {
+    return {hasError: true};
+  }
+
+  componentDidCatch(error, errorInfo) {
+    console.error(error);
+    console.log(errorInfo);
+  }
+
+  render() {
+    if (!this.state.hasError) {
+      return (
+        <center className="bg-dark pt-5" style={{height: '100vh'}}>
+          <h1>Oops! Something went wrong.</h1>
+          <p>
+            Please try refresh the page or create an{' '}
+            <a
+              className="text-white"
+              href="https://github.com/HaveAGitGat/Tdarr/issues/new"
+            >
+              issue here!
+            </a>
+          </p>
+        </center>
+      );
+    }
+    return this.props.children;
+  }
+}

package.json

@@ -5,7 +5,9 @@
     "start": "meteor run",
     "test": "meteor test --once --driver-package meteortesting:mocha",
     "test-app": "TEST_WATCH=1 meteor test --full-app --driver-package meteortesting:mocha",
-    "visualize": "meteor --production --extra-packages bundle-visualizer"
+    "visualize": "meteor --production --extra-packages bundle-visualizer",
+    "lint": "eslint {imports,tests}/**/* --ext .{{t,j}s{,x}}",
+    "lint:fix": "eslint {imports,tests}/**/* --ext .{{t,j}s{,x}} --fix"
   },
   "dependencies": {
     "@babel/runtime": "^7.3.4",
@@ -13,11 +15,24 @@
     "@ffmpeg-installer/ffmpeg": "^1.0.19",
     "@material-ui/core": "^4.4.3",
     "@trendmicro/react-sidenav": "^0.4.5",
+    "babel-eslint": "^10.0.3",
     "bootstrap": "^4.3.1",
     "child_process": "^1.0.2",
     "chokidar": "^3.0.2",
     "classnames": "^2.2.6",
     "dateformat": "^3.0.3",
+    "eslint": "^6.6.0",
+    "eslint-config-prettier": "^6.5.0",
+    "eslint-config-standard": "^14.1.0",
+    "eslint-import-resolver-meteor": "^0.4.0",
+    "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-node": "^10.0.0",
+    "eslint-plugin-prettier": "^3.1.1",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-react": "^7.16.0",
+    "eslint-plugin-react-hooks": "^2.2.0",
+    "eslint-plugin-simple-import-sort": "^4.0.0",
+    "eslint-plugin-standard": "^4.0.1",
     "exiftool-vendored": "^8.22.0",
     "ffprobe": "^1.1.0",
     "ffprobe-static": "^3.0.0",
@@ -30,6 +45,7 @@
     "mongodb": "^3.3.2",
     "nodegit": "^0.26.1",
     "os-utils": "0.0.14",
+    "prettier": "^1.18.2",
     "react": "^16.10.0",
     "react-addons-css-transition-group": "^15.6.2",
     "react-bootstrap": "^1.0.0-beta.12",

tests/main.js

@@ -1,19 +1,19 @@
-import assert from "assert";
+import assert from 'assert';
 
-describe("Tdarr", function () {
+describe('Tdarr', function() {
-  it("package.json has correct name", async function () {
+  it('package.json has correct name', async function() {
-    const { name } = await import("../package.json");
+    const {name} = await import('../package.json');
-    assert.strictEqual(name, "tdarr001");
+    assert.strictEqual(name, 'tdarr001');
   });
 
   if (Meteor.isClient) {
-    it("client is not server", function () {
+    it('client is not server', function() {
       assert.strictEqual(Meteor.isServer, false);
     });
   }
 
   if (Meteor.isServer) {
-    it("server is not client", function () {
+    it('server is not client', function() {
       assert.strictEqual(Meteor.isClient, false);
     });
   }