Add eslint

.eslintrc.js

@@ -0,0 +1,31 @@
+module.exports = {
+  env: {browser: true},
+  extends: ['@evanpurkhiser'],
+
+  settings: {
+    // Using preact, be explicit about the version
+    react: {version: '16.0'},
+  },
+
+  rules: {
+    'simple-import-sort/imports': [
+      'error',
+      {
+        groups: [
+          // Side effect imports.
+          ['^\\u0000'],
+          // Packages. `react` related packages come first.
+          ['^react', '^@?\\w'],
+          // Node.js builtins.
+          [`^(${require('module').builtinModules.join('|')})(/|$)`],
+          // Internal packages.
+          ['^(src|app|main|overlay|web)(/.*|$)'],
+          // Parent imports. Put `..` last.
+          ['^\\.\\.(?!/?$)', '^\\.\\./?$'],
+          // Other relative imports. Put same-folder imports and `.` last.
+          ['^\\./(?=.*/)(?!/?$)', '^\\.(?!/?$)', '^\\./?$'],
+        ],
+      },
+    ],
+  },
+};

.github/workflows/main.yml

@@ -37,8 +37,12 @@ jobs:
       - uses: actions/checkout@v1
       - uses: volta-cli/action@v1
 
-      # Build
+
+      # Test
       - run: yarn install
+      - run: yarn lint
+
+      # Build
       - run: yarn build-main
       - run: yarn build-renderer
       - run: yarn dist

package.json

@@ -15,7 +15,8 @@
     "build-website": "cross-env NODE_ENV=production webpack --config=webpack.config.website.ts",
     "vercel-build-website": "git fetch --tags && yarn build-website",
     "pack": "electron-builder --dir",
-    "dist": "electron-builder"
+    "dist": "electron-builder",
+    "lint": "eslint src/"
   },
   "build": {
     "productName": "Prolink Tools",
@@ -25,11 +26,7 @@
       "output": "release"
     },
     "publish": null,
-    "files": [
-      "dist/",
-      "node_modules/better-sqlite3/**/*",
-      "package.json"
-    ],
+    "files": ["dist/", "node_modules/better-sqlite3/**/*", "package.json"],
     "linux": {
       "target": "tar.gz"
     },
@@ -42,9 +39,11 @@
     }
   },
   "devDependencies": {
+    "@evanpurkhiser/eslint-config": "^0.9.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.4.2",
     "electron": "^10.1.1",
     "electron-builder": "^22.3.2",
+    "eslint": "^7.14.0",
     "jest": "^26.0.1",
     "lint-staged": "^10.0.7",
     "node-loader": "^1.0.1",
@@ -55,14 +54,14 @@
     "webpack-dev-server": "^3.4.1"
   },
   "dependencies": {
-    "@babel/core": "^7.11.6",
+    "@babel/core": "^7.12.9",
     "@babel/plugin-proposal-class-properties": "^7.10.4",
     "@babel/plugin-proposal-decorators": "^7.10.5",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.10.4",
     "@babel/plugin-syntax-optional-chaining": "^7.8.3",
     "@babel/preset-env": "^7.11.5",
-    "@babel/preset-react": "^7.10.4",
-    "@babel/preset-typescript": "^7.10.4",
+    "@babel/preset-react": "^7.12.7",
+    "@babel/preset-typescript": "^7.12.7",
     "@emotion/core": "^10.0.28",
     "@emotion/styled": "^10.0.27",
     "@octokit/request": "^5.4.5",
@@ -84,11 +83,11 @@
     "@types/node-static": "^0.7.5",
     "@types/oauth": "^0.9.1",
     "@types/object-path": "^0.11.0",
-    "@types/react": "^16.9.49",
-    "@types/react-dom": "^16.8.4",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
     "@types/react-router-dom": "^5.1.5",
     "@types/react-select": "^3.0.19",
-    "@types/react-test-renderer": "^16.9.3",
+    "@types/react-test-renderer": "^17.0.0",
     "@types/semver": "^7.3.3",
     "@types/socket.io": "^2.1.11",
     "@types/socket.io-client": "^1.4.33",

src/filetypes.d.ts

@@ -1,11 +1,11 @@
-declare module '\*.svg' {
+declare module '*.svg' {
   import React = require('react');
   export const ReactComponent: React.SFC<React.SVGProps<SVGSVGElement>>;
   const src: any;
   export default src;
 }
 
-declare module '\*.ttf' {
+declare module '*.ttf' {
   const src: any;
   export default src;
 }

src/main/configMigrations.ts

@@ -16,7 +16,7 @@ export function runConfigMigrations() {
    */
   (() => {
     const overlay = store.config.overlays.find(
-      overlay => overlay.type == 'taggedNowPlaying'
+      overlay => overlay.type === 'taggedNowPlaying'
     );
 
     if (overlay === undefined) {

src/overlay/overlays/example/index.tsx

@@ -10,17 +10,17 @@ type Config = {
   someOption: boolean;
 };
 
-const Overlay: React.FC<{config: Config}> = observer(() => {
-  return <div>This is an example overaly for reference</div>;
-});
+const Overlay: React.FC<{config: Config}> = observer(() => (
+  <div>This is an example overaly for reference</div>
+));
 
-const ConfigInterface: React.FC<{config: Config}> = observer(() => {
-  return <div>This is the config interface</div>;
-});
+const ConfigInterface: React.FC<{config: Config}> = observer(() => (
+  <div>This is the config interface</div>
+));
 
-const Example: React.FC<{config?: Config}> = () => {
-  return <div>This is an example of the overlay</div>;
-};
+const Example: React.FC<{config?: Config}> = () => (
+  <div>This is an example of the overlay</div>
+);
 
 export type ExampleOverlay = {
   type: 'example';

src/overlay/overlays/nowPlaying/ThemeAsot.tsx

@@ -14,7 +14,7 @@ type OrientedMotionDivProps = MotionDivProps & {
   alignRight?: boolean;
 };
 
-let Text = styled(motion.div)`
+const Text = styled(motion.div)`
   display: block;
   line-height: 1.1;
 `;
@@ -110,7 +110,7 @@ NowPlayingLabel.defaultProps = {
   },
 };
 
-let MetadataWrapper = styled((p: OrientedMotionDivProps) => {
+const MetadataWrapper = styled((p: OrientedMotionDivProps) => {
   const variants = {
     initial: {
       opacity: 1,

src/overlay/overlays/nowPlaying/ThemeModern.tsx

@@ -79,7 +79,7 @@ Artwork.defaultProps = {
   className: 'track-artwork',
 };
 
-let Text = styled(motion.div)`
+const Text = styled(motion.div)`
   background: rgba(0, 0, 0, 0.25);
   padding: 0 0.28em;
   border-radius: 1px;
@@ -177,7 +177,7 @@ const NoAttributes = styled(p => (
   color: rgba(255, 255, 255, 0.6);
 `;
 
-let MetadataWrapper = styled((p: OrientedMotionDivProps) => {
+const MetadataWrapper = styled((p: OrientedMotionDivProps) => {
   const variants = {
     initial: {
       clipPath: 'inset(0% 100% 0% 0%)',

src/renderer/components/ConnectionError.tsx

@@ -1,8 +1,6 @@
 import * as React from 'react';
 import {AlertCircle} from 'react-feather';
-import {keyframes} from '@emotion/core';
 import styled from '@emotion/styled';
-import {motion} from 'framer-motion';
 
 const ConnectionError = () => (
   <Container>
@@ -60,16 +58,4 @@ const Help = styled('div')`
   margin-top: 1rem;
 `;
 
-const pulse = keyframes`
-  0% {
-    transform: scale(0.1);
-    opacity: 1
-  }
-
-  40%, 100% {
-    transform: scale(0.8);
-    opacity: 0;
-  }
-`;
-
 export default ConnectionError;

src/renderer/components/device/DbStateIndicator.tsx

@@ -23,11 +23,11 @@ const DbStateIndicator = observer(({deviceId}: Props) => {
     const hydration = hydrationProgress.get(slot);
 
     if (!download) {
-      return;
+      return null;
     }
 
     if (download.read === download.total && hydration && hydration.isDone) {
-      return;
+      return null;
     }
 
     return (

src/renderer/components/device/PlayState.tsx

@@ -24,9 +24,9 @@ const text = Object.fromEntries(
   Object.entries(CDJStatus.PlayState).map(([k, v]) => [v, k])
 );
 
-const PlayState = styled(({playState, ...p}: Props) => {
-  return <div {...p}>{text[playState ?? CDJStatus.PlayState.Empty] ?? 'unknown'}</div>;
-})`
+const PlayState = styled(({playState, ...p}: Props) => (
+  <div {...p}>{text[playState ?? CDJStatus.PlayState.Empty] ?? 'unknown'}</div>
+))`
   background: ${p => colors[p.playState ?? CDJStatus.PlayState.Empty]?.bg ?? '#f1f1f1'};
   min-width: 74px;
   display: inline-block;

src/renderer/components/device/Waveform.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
-import {autorun, toJS} from 'mobx';
+import {autorun} from 'mobx';
 import {CDJStatus, DeviceID} from 'prolink-connect/lib/types';
 
 import store from 'src/shared/store';
 
 function drawScrollingWaveform(deviceId: DeviceID, canvas: HTMLCanvasElement) {
   const ctx = canvas.getContext('2d');
 
-  if (ctx == null) {
+  if (ctx === null) {
     return;
   }
 
@@ -98,11 +98,13 @@ function drawScrollingWaveform(deviceId: DeviceID, canvas: HTMLCanvasElement) {
     pitch = state?.sliderPitch ?? 0;
     playState = state?.playState ?? CDJStatus.PlayState.Empty;
 
+    console.log(pitch);
+
     const timeOffset = track.beatGrid?.[state?.beat ?? 0]?.offset ?? 0;
     posX = Math.round(((timeOffset / 1000) * 150) / zoom);
   });
 
-  let lastPosX = -1;
+  // const lastPosX = -1;
   let lastTs = 0;
 
   const doDrawing = (ts: DOMHighResTimeStamp) => {

src/renderer/components/form/Field.tsx

@@ -18,7 +18,7 @@ const SIZES = {
   full: '100%',
 };
 
-const Field = styled(({size, name, description, children, ...p}: Props) => (
+const Field = styled(({size: _size, name, description, children, ...p}: Props) => (
   <label {...p}>
     {children}
     <div>

src/renderer/views/overlayConfig/index.tsx

@@ -21,7 +21,7 @@ const OverlayConfig = observer(() => {
           <a href="https://obsproject.com/wiki/Sources-Guide#browsersource">
             OBS Browser Source
           </a>{' '}
-          (or similar). Each instance of an overlay has it's own configuration.
+          (or similar). Each instance of an overlay has it&aps;s own configuration.
         </HeaderInfo>
         {addNewOpen ? (
           <ActionButton muted onClick={() => setOpen(!addNewOpen)}>

src/renderer/views/settings/index.tsx

@@ -28,8 +28,8 @@ const Settings = observer(() => {
                 Collecting track events is incredibly helpful when looking into issues
                 where tracks were not marked as now-playing, or were marked as now-playing
                 at the wrong time. You may want to turn this on if you run into frequent
-                issues and can include that you've enabled collecting track events when
-                reporting bugs.
+                issues and can include that you've enabled collecting track events
+                when reporting bugs.
               </InfoBox>
             </React.Fragment>
           }

src/shared/components/TimeTicker.tsx

@@ -6,7 +6,7 @@ type Props = {
 };
 
 class TimeTicker extends React.Component<Props> {
-  ticker: number = 0;
+  ticker = 0;
 
   componentDidMount() {
     this.tick();

src/shared/sentry/web.ts

@@ -1,7 +1,6 @@
 import '@sentry/apm';
 
 import * as Sentry from '@sentry/browser';
-import {User} from '@sentry/browser';
 
 import {dsn} from './dsn';