Add lint + build to CI

.eslintignore

@@ -0,0 +1,3 @@
+legacy/
+node_modules/
+.next/

.github/workflows/main.yml

@@ -1,5 +1,8 @@
-on: push
+name: main
-name: Build on push
+on:
+  push:
+    branches:
+      - main
 jobs:
   build:
     name: Docker build, tag, and push

.github/workflows/tests.yml

@@ -0,0 +1,15 @@
+name: tests
+on: [push]
+jobs:
+  tests:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js 14
+      uses: actions/setup-node@v1
+      with:
+        node-version: 14
+    - run: npm i -g yarn@1
+    - run: yarn
+    - run: yarn lint
+    - run: yarn build

legacy/ProgressBar.tsx

@@ -1,21 +1,21 @@
-import React from "react";
+import React from 'react'
-import classnames from "classnames";
+import classnames from 'classnames'
 
 function formatProgress(dec) {
-  return `${(dec * 100).toPrecision(3)  }%`
+  return `${(dec * 100).toPrecision(3)}%`
 }
 
 export default class ProgressBar extends React.Component {
   render() {
     const failed = this.props.value < 0
     const inProgress = this.props.value < 1 && this.props.value >= 0
-    const classes = classnames("progress-bar", {
+    const classes = classnames('progress-bar', {
-      "progress-bar-failed": failed,
+      'progress-bar-failed': failed,
-      "progress-bar-in-progress": inProgress,
+      'progress-bar-in-progress': inProgress,
-      "progress-bar-small": this.props.small,
+      'progress-bar-small': this.props.small,
-    });
+    })
 
-    const formatted = formatProgress(this.props.value);
+    const formatted = formatProgress(this.props.value)
 
     return (
       <div className={classes}>
@@ -26,17 +26,18 @@ export default class ProgressBar extends React.Component {
             <div className="progress-bar-text">{formatted}</div>
           </div>
         ) : (
-          : <div className="progress-bar-text">Delivered</div>}
+          <div className="progress-bar-text">Delivered</div>
-    </div>
+        )}
-    );
+      </div>
+    )
   }
 }
 
 ProgressBar.propTypes = {
   value: React.PropTypes.number.isRequired,
   small: React.PropTypes.bool,
-};
+}
 
 ProgressBar.defaultProps = {
   small: false,
-};
+}

legacy/Spinner.tsx

@@ -1,12 +1,12 @@
-import React from "react";
+import React from 'react'
-import classnames from "classnames";
+import classnames from 'classnames'
-import { formatSize } from "../util";
+import { formatSize } from '../util'
 
 export default class Spinner extends React.Component {
   render() {
-    const classes = classnames("spinner", {
+    const classes = classnames('spinner', {
-      "spinner-animated": this.props.animated,
+      'spinner-animated': this.props.animated,
-    });
+    })
 
     return (
       <div className={classes}>
@@ -16,26 +16,26 @@ export default class Spinner extends React.Component {
           className="spinner-image"
         />
 
-        {this.props.name === null ? null 
+        {this.props.name === null ? null : (
-          : <div className="spinner-name">{this.props.name}</div>
+          <div className="spinner-name">{this.props.name}</div>
         )}
-        {this.props.size === null ? null 
+        {this.props.size === null ? null : (
-          : <div className="spinner-size">{formatSize(this.props.size)}</div>
+          <div className="spinner-size">{formatSize(this.props.size)}</div>
         )}
       </div>
-    );
+    )
   }
 }
 
 Spinner.propTypes = {
-  dir: React.PropTypes.oneOf(["up", "down"]).isRequired,
+  dir: React.PropTypes.oneOf(['up', 'down']).isRequired,
   name: React.PropTypes.string,
   size: React.PropTypes.number,
   animated: React.PropTypes.bool,
-};
+}
 
 Spinner.defaultProps = {
   name: null,
   size: null,
   animated: false,
-};
+}

package.json

@@ -8,7 +8,8 @@
   "scripts": {
     "dev": "next",
     "build": "next build",
-    "start": "next start"
+    "start": "next start",
+    "lint": "eslint 'src/**/*.ts[x]'"
   },
   "repository": {
     "type": "git",

src/components/ChromeNotice.tsx

@@ -1,40 +0,0 @@
-import React from 'react'
-import DownloadStore from '../stores/DownloadStore'
-import SupportStore from '../stores/SupportStore'
-
-function getState() {
-  return {
-    active: SupportStore.getState().isChrome && DownloadStore.getState().fileSize >= 500000000
-  }
-}
-
-export default class ChromeNotice extends React.Component {
-
-  constructor() {
-    super()
-    this.state = getState()
-
-    this._onChange = () => {
-      this.setState(getState())
-    }
-  }
-
-  componentDidMount() {
-    DownloadStore.listen(this._onChange)
-    SupportStore.listen(this._onChange)
-  }
-
-  componentWillUnmount() {
-    DownloadStore.unlisten(this._onChange)
-    SupportStore.unlisten(this._onChange)
-  }
-
-  render() {
-    if (this.state.active) {
-      return <p className="notice">Chrome has issues downloading files > 500 MB. Try using Firefox instead.</p>
-    } else {
-      return null
-    }
-  }
-
-}

src/fs.ts

@@ -1,6 +1,8 @@
+import { UploadedFile } from './types'
+
 const getAsFile = (entry: any): Promise<File> =>
   new Promise((resolve, reject) => {
-    entry.file((file: File) => {
+    entry.file((file: UploadedFile) => {
       file.fullPath = entry.fullPath
       resolve(file)
     }, reject)

src/zip-stream.ts

@@ -1,4 +1,10 @@
 // Based on https://github.com/jimmywarting/StreamSaver.js/blob/master/examples/zip-stream.js
+//
+// Disabling typechecking for now since this was originally JavaScript, should
+// find some time to add types later.
+//
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
 
 class Crc32 {
   crc: number
@@ -54,7 +60,9 @@ const pump = (zipObj) =>
     zipObj.ctrl.enqueue(outputData)
   })
 
-export function createZipStream(underlyingSource) {
+export function createZipStream(
+  underlyingSource: UnderlyingSource<any>,
+): ReadableStream {
   const files = Object.create(null)
   const filenames = []
   const encoder = new TextEncoder()

tsconfig.json

@@ -16,13 +16,14 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
+    "downlevelIteration": true,
     "jsx": "preserve"
   },
   "include": [
     "next-env.d.ts",
-    "**/*.js",
+    "src/**/*.js",
-    "**/*.ts",
+    "src/**/*.ts",
-    "**/*.tsx"
+    "src/**/*.tsx"
   ],
   "exclude": [
     "node_modules"