Lint JavaScript/TypeScript code (#346)

* Implement lint in all js projects * Use yarn workspace * Remove package-lock.json * Fix * Extract common dev dep * Bump
2026-03-14 22:45:50 +01:00 · 2019-11-23 15:40:33 +08:00 · 2019-11-23 15:40:33 +08:00 · e2e777db54
commit e2e777db54
parent 624892d9a8
117 changed files with 12281 additions and 32567 deletions
--- a/web/.eslintrc
+++ b/web/.eslintrc
@ -2,7 +2,7 @@
  "env": {
    "browser": true,
    "node": true,
-    "mocha": true
+    "jest": true
  },
  "parser": "@typescript-eslint/parser",
  "rules": {
@ -20,6 +20,7 @@
    "indent": [2, 2, {"SwitchCase": 1}],
    "no-console": 0,
    "no-alert": 0,
+    "no-shadow": 2,
    "arrow-body-style": 0,
    "react/prop-types": 0,
    "react/jsx-filename-extension": 0,
@ -40,18 +41,15 @@
    "@typescript-eslint/no-unused-vars": 1,
    "import/no-extraneous-dependencies": ["error", {"devDependencies": ["**/*_test.ts"]}],
    "lines-between-class-members": 0,
-    "react/jsx-fragments": 0
+    "react/jsx-fragments": 0,
+    "jsx-a11y/label-has-associated-control": 0,
+    "no-empty": 0
  },
  "plugins": [
    "react", "react-hooks", "import", "prettier", "@typescript-eslint"
  ],
-  "settings": {
-    "import/parser": "babel-eslint",
-    "import/resolve": {
-      "moduleDirectory": ["node_modules", "src"]
-    }
-  },
  "globals": {
+    // web
    "__DEVELOPMENT__": true,
    "__PRODUCTION__": true,
    "__DISABLE_SSR__": true,
@ -64,6 +62,13 @@
    "__CDN_URL__": true,
    "socket": true,
    "webpackIsomorphicTools": true,
-    "StripeCheckout": true
+    "StripeCheckout": true,
+
+    // browser
+    "browser": true,
+    "chrome": true,
+    __WEB_URL__: true,
+    __API_ENDPOINT__: true,
+    __VERSION__: true
  }
 }
--- a/.gitignore
+++ b/.gitignore
@ -1,4 +1,5 @@
 /vendor
 /build
+/node_modules
 .vagrant
 *.log
--- a/.travis.yml
+++ b/.travis.yml
@ -6,6 +6,7 @@ go:

 env:
  - NODE_VERSION=10.15.0
+    YARN_VERSION=1.19.1-1

 before_install:
  - sudo apt-get update
@ -14,16 +15,25 @@ before_install:
  - sudo cp /etc/postgresql/{9.6,11}/main/pg_hba.conf
  - sudo service postgresql restart 11

-before_script:
+    # install yarn
+  - sudo apt-key adv --fetch-keys http://dl.yarnpkg.com/debian/pubkey.gpg
+  - echo "deb http://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
+  - sudo apt-get update -qq
+  - sudo apt-get install -y -qq yarn="$YARN_VERSION"
+
  - nvm install "$NODE_VERSION"
  - nvm use "$NODE_VERSION"
  - node --version
  - psql -c "CREATE DATABASE dnote_test;" -U postgres

+cache:
+  yarn: true
+
 install:
  - make install

 script:
+  - make lint
  - make test-cli
  - make test-api
  - make test-web
--- a/28
+++ b/28
@ -1,5 +1,5 @@
 PACKR2 := $(shell command -v packr2 2> /dev/null)
-NPM := $(shell command -v npm 2> /dev/null)
+YARN := $(shell command -v yarn 2> /dev/null)
 HUB := $(shell command -v hub 2> /dev/null)

 currentDir = $(shell pwd)
@ -22,23 +22,25 @@ endif
 .PHONY: install-go

 install-js:
-ifndef NPM
-	$(error npm is not installed)
+ifndef YARN
+	$(error yarn is not installed)
 endif

 	@echo "==> installing js dependencies"

 ifeq ($(CI), true)
-	@(cd ${currentDir}/web && npm install --unsafe-perm=true)
-	@(cd ${currentDir}/browser && npm install --unsafe-perm=true)
-	@(cd ${currentDir}/jslib && npm install --unsafe-perm=true)
+	@(cd ${currentDir} && yarn --unsafe-perm=true)
 else
-	@(cd ${currentDir}/web && npm install)
-	@(cd ${currentDir}/browser && npm install)
-	@(cd ${currentDir}/jslib && npm install)
+	@(cd ${currentDir} && yarn)
 endif
 .PHONY: install-js

+lint:
+	@(cd ${currentDir}/web && yarn lint)
+	@(cd ${currentDir}/jslib && yarn lint)
+	@(cd ${currentDir}/browser && yarn lint)
+.PHONY: lint
+
 ## test
 test: test-cli test-api test-web test-jslib
 .PHONY: test
@ -57,9 +59,9 @@ test-web:
 	@echo "==> running web test"

 ifeq ($(WATCH), true)
-	@(cd ${currentDir}/web && npm run test:watch)
+	@(cd ${currentDir}/web && yarn test:watch)
 else 
-	@(cd ${currentDir}/web && npm run test)
+	@(cd ${currentDir}/web && yarn test)
 endif
 .PHONY: test-web

@ -67,9 +69,9 @@ test-jslib:
 	@echo "==> running jslib test"

 ifeq ($(WATCH), true)
-	@(cd ${currentDir}/jslib && npm run test:watch)
+	@(cd ${currentDir}/jslib && yarn test:watch)
 else
-	@(cd ${currentDir}/jslib && npm run test)
+	@(cd ${currentDir}/jslib && yarn test)
 endif
 .PHONY: test-jslib

--- a/browser/.eslintrc
+++ b/browser/.eslintrc
@ -1,16 +0,0 @@
-{ "extends": ["eslint-config-airbnb"],
-  "env": {
-    "browser": true,
-    "node": true,
-    "mocha": true
-  },
-  "parser": "@typescript-eslint/parser",
-  "rules": {
-    "@typescript-eslint/no-unused-vars": 1,
-    "react-hooks/rules-of-hooks": "error",
-    "react-hooks/exhaustive-deps": "warn",
-  },
-  "plugins": [
-     "react-hooks", "@typescript-eslint"
-  ],
-}
--- a/browser/CONTRIBUTING.md
+++ b/browser/CONTRIBUTING.md
@ -4,7 +4,7 @@ Use the following commands to set up, build, and release.

 ## Set up

-* `npm install` to install dependencies.
+* Run `npm install-js` from the monorepo root.

 ## Developing locally

--- a/browser/NOTE_TO_REVIEWER.md
+++ b/browser/NOTE_TO_REVIEWER.md
@ -8,7 +8,7 @@ All releases are tagged and pushed to [the GitHub repository](https://github.com

 To reproduce the obfuscated code for Firefox, please follow the steps below.

-1.  Run `npm install` to install dependencies
+1. From the monorepo project root, run `make install-js` to install dependencies
 2.  Run `./scripts/build_prod.sh` to build for Firefox and Chrome.

 The obfuscated code will be under `/dist/firefox` and `/dist/chrome`.
--- a/browser/package-lock.json
+++ b/browser/package-lock.json
--- a/browser/package.json
+++ b/browser/package.json
@ -8,7 +8,8 @@
    "package:chrome": "TARGET=chrome NODE_ENV=production gulp package",
    "package:firefox": "TARGET=firefox NODE_ENV=production gulp package",
    "watch:chrome": "TARGET=chrome NODE_ENV=development concurrently \"webpack --watch\" \"gulp watch\"  ",
-    "watch:firefox": "TARGET=firefox NODE_ENV=development concurrently \"webpack --watch\" \"gulp watch\"  "
+    "watch:firefox": "TARGET=firefox NODE_ENV=development concurrently \"webpack --watch\" \"gulp watch\"  ",
+    "lint": "eslint ./src --ext .ts,.tsx,.js"
  },
  "author": "Monomax Software Pty Ltd",
  "license": "GPL-3.0-or-later",
@ -26,24 +27,17 @@
    "redux-thunk": "^2.2.0"
  },
  "devDependencies": {
+    "@babel/preset-env": "^7.7.4",
    "@types/react": "^16.9.11",
    "@types/react-dom": "^16.9.3",
-    "@typescript-eslint/eslint-plugin": "^2.6.0",
-    "@typescript-eslint/parser": "^2.6.0",
    "concurrently": "^5.0.0",
    "del": "^5.0.0",
-    "eslint-config-airbnb": "^18.0.1",
-    "eslint-plugin-import": "^2.18.2",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-react": "^7.16.0",
-    "eslint-plugin-react-hooks": "^2.2.0",
    "gulp": "^4.0.0",
    "gulp-if": "^3.0.0",
    "gulp-imagemin": "^6.1.1",
    "gulp-livereload": "^4.0.2",
    "gulp-replace": "^1.0.0",
    "gulp-zip": "^5.0.1",
-    "prettier": "^1.18.2",
    "ts-loader": "^6.2.1",
    "typescript": "^3.6.4",
    "webpack": "^4.41.2",
--- a/browser/scripts/build_prod.sh
+++ b/browser/scripts/build_prod.sh
@ -4,11 +4,11 @@
 set -eux

 # clean
-npm run clean
+yarn clean

 # chrome
-npm run build:chrome
-npm run package:chrome
+yarn build:chrome
+yarn package:chrome
 # firefox
-npm run build:firefox
-npm run package:firefox
+yarn build:firefox
+yarn package:firefox
--- a/browser/src/browser.d.ts
+++ b/browser/src/browser.d.ts
@ -17,5 +17,5 @@
 */

 // browser.d.ts
-declare var browser: any;
-declare var chrome: any;
+declare let browser: any;
+declare let chrome: any;
--- a/browser/src/global.d.ts
+++ b/browser/src/global.d.ts
@ -19,6 +19,6 @@
 // global.d.ts

 // defined by webpack-define-plugin
-declare var __API_ENDPOINT__: string;
-declare var __WEB_URL__: string;
-declare var __VERSION__: string;
+declare let __API_ENDPOINT__: string;
+declare let __WEB_URL__: string;
+declare let __VERSION__: string;
--- a/browser/src/scripts/components/App.tsx
+++ b/browser/src/scripts/components/App.tsx
@ -17,7 +17,6 @@
 */

 import React, { useState, useEffect } from 'react';
-import classnames from 'classnames';

 import initServices from '../utils/services';
 import { logout } from '../store/auth/actions';
@ -69,13 +68,11 @@ const App: React.FunctionComponent<Props> = () => {
  const [errMsg, setErrMsg] = useState('');

  const dispatch = useDispatch();
-  const { path, auth, settings } = useSelector(state => {
-    return {
-      path: state.location.path,
-      auth: state.auth,
-      settings: state.settings
-    };
-  });
+  const { path, auth, settings } = useSelector(state => ({
+    path: state.location.path,
+    auth: state.auth,
+    settings: state.settings
+  }));

  useCheckSessionValid(auth);

--- a/browser/src/scripts/components/BookSelector.tsx
+++ b/browser/src/scripts/components/BookSelector.tsx
@ -16,23 +16,19 @@
 * along with Dnote.  If not, see <https://www.gnu.org/licenses/>.
 */

-import React, { useEffect } from 'react';
+import React from 'react';
 import CreatableSelect from 'react-select/creatable';
 import cloneDeep from 'lodash/cloneDeep';
 import { useSelector, useDispatch } from '../store/hooks';
 import { updateBook, resetBook } from '../store/composer/actions';

-import BookIcon from './BookIcon';
-
 interface Props {
  selectorRef: React.Dispatch<any>;
  onAfterChange: () => void;
 }

 function useCurrentOptions(options) {
-  const currentValue = useSelector(state => {
-    return state.composer.bookUUID;
-  });
+  const currentValue = useSelector(state => state.composer.bookUUID);

  for (let i = 0; i < options.length; i++) {
    const option = options[i];
@ -46,19 +42,15 @@ function useCurrentOptions(options) {
 }

 function useOptions() {
-  const { books, composer } = useSelector(state => {
-    return {
-      books: state.books,
-      composer: state.composer
-    };
-  });
+  const { books, composer } = useSelector(state => ({
+    books: state.books,
+    composer: state.composer
+  }));

-  const opts = books.items.map(book => {
-    return {
-      label: book.label,
-      value: book.uuid
-    };
-  });
+  const opts = books.items.map(book => ({
+    label: book.label,
+    value: book.uuid
+  }));

  if (composer.bookLabel !== '' && composer.bookUUID === '') {
    opts.push({
@ -77,12 +69,9 @@ const BookSelector: React.FunctionComponent<Props> = ({
  onAfterChange
 }) => {
  const dispatch = useDispatch();
-  const { books, composer } = useSelector(state => {
-    return {
-      books: state.books,
-      composer: state.composer
-    };
-  });
+  const { books } = useSelector(state => ({
+    books: state.books
+  }));
  const options = useOptions();
  const currentOption = useCurrentOptions(options);

--- a/browser/src/scripts/components/Composer.tsx
+++ b/browser/src/scripts/components/Composer.tsx
@ -16,7 +16,7 @@
 * along with Dnote.  If not, see <https://www.gnu.org/licenses/>.
 */

-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import classnames from 'classnames';

 import { KEYCODE_ENTER } from 'jslib/helpers/keyboard';
@ -34,20 +34,20 @@ interface Props {}
 // It needs to traverse the tree returned by the ref API of the 'react-select' library,
 // and to guard against possible breaking changes, if the path does not exist, it noops.
 function focusBookSelectorInput(bookSelectorRef) {
-  bookSelectorRef.select &&
+  return (
+    bookSelectorRef.select &&
    bookSelectorRef.select.select &&
    bookSelectorRef.select.select.inputRef &&
-    bookSelectorRef.select.select.inputRef.focus();
+    bookSelectorRef.select.select.inputRef.focus()
+  );
 }

 function useFetchData() {
  const dispatch = useDispatch();

-  const { books } = useSelector(state => {
-    return {
-      books: state.books
-    };
-  });
+  const { books } = useSelector(state => ({
+    books: state.books
+  }));

  useEffect(() => {
    if (!books.isFetched) {
@ -57,12 +57,10 @@ function useFetchData() {
 }

 function useInitFocus(contentRef, bookSelectorRef) {
-  const { composer, books } = useSelector(state => {
-    return {
-      composer: state.composer,
-      books: state.books
-    };
-  });
+  const { composer, books } = useSelector(state => ({
+    composer: state.composer,
+    books: state.books
+  }));

  useEffect(() => {
    if (!books.isFetched) {
@ -76,7 +74,9 @@ function useInitFocus(contentRef, bookSelectorRef) {
        contentRef.focus();
      }
    }
-  }, [contentRef, bookSelectorRef, books.isFetched]);
+
+    return () => null;
+  }, [contentRef, bookSelectorRef, books.isFetched, composer.bookLabel]);
 }

 const Composer: React.FunctionComponent<Props> = () => {
@ -88,27 +88,43 @@ const Composer: React.FunctionComponent<Props> = () => {
  const [contentRef, setContentEl] = useState(null);
  const [bookSelectorRef, setBookSelectorEl] = useState(null);

-  const { composer, settings, auth } = useSelector(state => {
-    return {
-      composer: state.composer,
-      settings: state.settings,
-      auth: state.auth
-    };
-  });
+  const { composer, settings, auth } = useSelector(state => ({
+    composer: state.composer,
+    settings: state.settings,
+    auth: state.auth
+  }));

-  const handleSubmit = async e => {
-    e.preventDefault();
+  const handleSubmit = useCallback(
+    async e => {
+      e.preventDefault();

-    const services = initServices(settings.apiUrl);
+      const services = initServices(settings.apiUrl);

-    setSubmitting(true);
+      setSubmitting(true);

-    try {
-      let bookUUID;
-      if (composer.bookUUID === '') {
-        const resp = await services.books.create(
+      try {
+        let bookUUID;
+        if (composer.bookUUID === '') {
+          const resp = await services.books.create(
+            {
+              name: composer.bookLabel
+            },
+            {
+              headers: {
+                Authorization: `Bearer ${auth.sessionKey}`
+              }
+            }
+          );
+
+          bookUUID = resp.book.uuid;
+        } else {
+          bookUUID = composer.bookUUID;
+        }
+
+        const resp = await services.notes.create(
          {
-            name: composer.bookLabel
+            book_uuid: bookUUID,
+            content: composer.content
          },
          {
            headers: {
@ -117,56 +133,48 @@ const Composer: React.FunctionComponent<Props> = () => {
          }
        );

-        bookUUID = resp.book.uuid;
-      } else {
-        bookUUID = composer.bookUUID;
+        // clear the composer state
+        setErrMsg('');
+        setSubmitting(false);
+
+        dispatch(resetComposer());
+
+        // navigate
+        dispatch(
+          navigate('/success', {
+            bookName: composer.bookLabel,
+            noteUUID: resp.result.uuid
+          })
+        );
+      } catch (err) {
+        setErrMsg(err.message);
+        setSubmitting(false);
      }
-
-      const resp = await services.notes.create(
-        {
-          book_uuid: bookUUID,
-          content: composer.content
-        },
-        {
-          headers: {
-            Authorization: `Bearer ${auth.sessionKey}`
-          }
-        }
-      );
-
-      // clear the composer state
-      setErrMsg('');
-      setSubmitting(false);
-
-      dispatch(resetComposer());
-
-      // navigate
-      dispatch(
-        navigate('/success', {
-          bookName: composer.bookLabel,
-          noteUUID: resp.result.uuid
-        })
-      );
-    } catch (e) {
-      setErrMsg(e.message);
-      setSubmitting(false);
-    }
-  };
-
-  const handleSubmitShortcut = e => {
-    // Shift + Enter
-    if (e.shiftKey && e.keyCode === KEYCODE_ENTER) {
-      handleSubmit(e);
-    }
-  };
+    },
+    [
+      settings.apiUrl,
+      composer.bookUUID,
+      composer.content,
+      composer.bookLabel,
+      auth.sessionKey,
+      dispatch
+    ]
+  );

  useEffect(() => {
+    const handleSubmitShortcut = e => {
+      // Shift + Enter
+      if (e.shiftKey && e.keyCode === KEYCODE_ENTER) {
+        handleSubmit(e);
+      }
+    };
+
    window.addEventListener('keydown', handleSubmitShortcut);

    return () => {
      window.removeEventListener('keydown', handleSubmitShortcut);
    };
-  }, [composer]);
+  }, [composer, handleSubmit]);

  let submitBtnText: string;
  if (submitting) {
--- a/browser/src/scripts/components/Home.tsx
+++ b/browser/src/scripts/components/Home.tsx
@ -17,15 +17,9 @@
 */

 import React, { useState } from 'react';
-import { connect } from 'react-redux';
-import { findDOMNode } from 'react-dom';

-import Link from './Link';
-import config from '../utils/config';
 import { login } from '../store/auth/actions';
-import { updateSettings } from '../store/settings/actions';
 import { useDispatch } from '../store/hooks';
-import services from '../utils/services';
 import Flash from '../components/Flash';

 interface Props {}
@ -45,8 +39,8 @@ const Home: React.FunctionComponent<Props> = () => {

    try {
      await dispatch(login({ email, password }));
-    } catch (e) {
-      console.log('error while logging in', e);
+    } catch (err) {
+      console.log('error while logging in', err);

      setErrMsg(e.message);
      setLoggingIn(false);
@ -97,10 +91,11 @@ const Home: React.FunctionComponent<Props> = () => {
      </form>

      <div className="actions">
-        Don't have an account?{' '}
+        Don&#39;t have an account?{' '}
        <a
          href="https://app.getdnote.com/join"
          target="_blank"
+          rel="noopener noreferrer"
          className="signup"
        >
          Sign Up
--- a/browser/src/scripts/components/Link.tsx
+++ b/browser/src/scripts/components/Link.tsx
@ -16,9 +16,9 @@
 * along with Dnote.  If not, see <https://www.gnu.org/licenses/>.
 */

+/* eslint-disable react/jsx-props-no-spreading */
+
 import React from 'react';
-import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';

 import { useDispatch } from '../store/hooks';
 import { navigate } from '../store/location/actions';
--- a/browser/src/scripts/components/Menu.tsx
+++ b/browser/src/scripts/components/Menu.tsx
@ -53,6 +53,11 @@ export default ({ toggleMenu, loggedIn, onLogout }) => (
      )}
    </ul>

-    <div className="menu-overlay" onClick={toggleMenu} />
+    <div
+      className="menu-overlay"
+      onClick={toggleMenu}
+      onKeyDown={() => {}}
+      role="none"
+    />
  </Fragment>
 );
--- a/browser/src/scripts/components/Settings.tsx
+++ b/browser/src/scripts/components/Settings.tsx
@ -17,23 +17,18 @@
 */

 import React, { useState } from 'react';
-import { connect } from 'react-redux';
-import { findDOMNode } from 'react-dom';

-import Link from './Link';
 import Flash from './Flash';
-import config from '../utils/config';
 import { updateSettings, resetSettings } from '../store/settings/actions';
 import { useDispatch, useSelector, useStore } from '../store/hooks';
-import services from '../utils/services';

 interface Props {}

 // isValidURL checks if the given string is a valid URL
 function isValidURL(url: string): boolean {
-  var a = document.createElement('a');
+  const a = document.createElement('a');
  a.href = url;
-  return a.host && a.host != window.location.host;
+  return a.host && a.host !== window.location.host;
 }

 // validateFormState validates the given form state. If any input is
@ -49,11 +44,9 @@ function validateFormState({ apiUrl, webUrl }) {
 }

 const Settings: React.FunctionComponent<Props> = () => {
-  const { settings } = useSelector(state => {
-    return {
-      settings: state.settings
-    };
-  });
+  const { settings } = useSelector(state => ({
+    settings: state.settings
+  }));
  const store = useStore();

  const [apiUrl, setAPIUrl] = useState(settings.apiUrl);
@ -66,10 +59,10 @@ const Settings: React.FunctionComponent<Props> = () => {
    dispatch(resetSettings());
    setSuccessMsg('Restored the default settings');

-    const { settings } = store.getState();
+    const { settings: settingsState } = store.getState();

-    setAPIUrl(settings.apiUrl);
-    setWebUrl(settings.webUrl);
+    setAPIUrl(settingsState.apiUrl);
+    setWebUrl(settingsState.webUrl);
  }

  function handleSubmit(e) {
--- a/browser/src/scripts/components/Success.tsx
+++ b/browser/src/scripts/components/Success.tsx
@ -16,7 +16,7 @@
 * along with Dnote.  If not, see <https://www.gnu.org/licenses/>.
 */

-import React, { Fragment, useEffect, useState } from 'react';
+import React, { useEffect, useState, Fragment } from 'react';

 import {
  KEYCODE_ENTER,
@ -25,7 +25,6 @@ import {
 } from 'jslib/helpers/keyboard';
 import Flash from './Flash';
 import ext from '../utils/ext';
-import config from '../utils/config';
 import BookIcon from './BookIcon';
 import { navigate } from '../store/location/actions';
 import { useSelector, useDispatch } from '../store/hooks';
@ -34,43 +33,41 @@ const Success: React.FunctionComponent = () => {
  const [errorMsg, setErrorMsg] = useState('');

  const dispatch = useDispatch();
-  const { location, settings } = useSelector(state => {
-    return {
-      location: state.location,
-      settings: state.settings
-    };
-  });
+  const { location, settings } = useSelector(state => ({
+    location: state.location,
+    settings: state.settings
+  }));

  const { bookName, noteUUID } = location.state;

-  const handleKeydown = e => {
-    e.preventDefault();
-
-    if (e.keyCode === KEYCODE_ENTER) {
-      dispatch(navigate('/'));
-    } else if (e.keyCode === KEYCODE_ESC) {
-      window.close();
-    } else if (e.keyCode === KEYCODE_LOWERCASE_B) {
-      const url = `${settings.webUrl}/notes/${noteUUID}`;
-
-      ext.tabs
-        .create({ url })
-        .then(() => {
-          window.close();
-        })
-        .catch(err => {
-          setErrorMsg(err.message);
-        });
-    }
-  };
-
  useEffect(() => {
+    const handleKeydown = e => {
+      e.preventDefault();
+
+      if (e.keyCode === KEYCODE_ENTER) {
+        dispatch(navigate('/'));
+      } else if (e.keyCode === KEYCODE_ESC) {
+        window.close();
+      } else if (e.keyCode === KEYCODE_LOWERCASE_B) {
+        const url = `${settings.webUrl}/notes/${noteUUID}`;
+
+        ext.tabs
+          .create({ url })
+          .then(() => {
+            window.close();
+          })
+          .catch(err => {
+            setErrorMsg(err.message);
+          });
+      }
+    };
+
    window.addEventListener('keydown', handleKeydown);

    return () => {
      window.removeEventListener('keydown', handleKeydown);
    };
-  }, []);
+  }, [dispatch, noteUUID, settings.webUrl]);

  return (
    <Fragment>
@ -80,7 +77,10 @@ const Success: React.FunctionComponent = () => {
        <div>
          <BookIcon width={20} height={20} className="book-icon" />

-          <h1 className="heading">Saved to {bookName}</h1>
+          <h1 className="heading">
+            Saved to
+            {bookName}
+          </h1>
        </div>

        <ul className="key-list">
@ -93,7 +93,8 @@ const Success: React.FunctionComponent = () => {
            <div className="key-desc">Open in browser</div>
          </li>
          <li className="key-item">
-            <kbd className="key">ESC</kbd> <div className="key-desc">Close</div>
+            <kbd className="key">ESC</kbd>
+            <div className="key-desc">Close</div>
          </li>
        </ul>
      </div>
--- a/browser/src/scripts/popup.tsx
+++ b/browser/src/scripts/popup.tsx
@ -19,8 +19,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
-import { createStore, applyMiddleware, compose } from 'redux';
-import thunkMiddleware from 'redux-thunk';

 import { debounce } from 'jslib/helpers/perf';
 import configureStore from './store';
--- a/browser/src/scripts/store/auth/actions.ts
+++ b/browser/src/scripts/store/auth/actions.ts
@ -16,7 +16,7 @@
 * along with Dnote.  If not, see <https://www.gnu.org/licenses/>.
 */

-import { LOGIN, LOGOUT, LogoutAction, LoginAction } from './types';
+import { LOGIN, LOGOUT, LogoutAction } from './types';
 import { ThunkAction } from '../types';
 import initServices from '../../utils/services';

--- a/browser/src/scripts/store/auth/reducers.ts
+++ b/browser/src/scripts/store/auth/reducers.ts
@ -17,7 +17,6 @@
 */

 import { LOGIN, LOGOUT, AuthState, AuthActionType } from './types';
-import config from '../../utils/config';

 const initialState: AuthState = {
  sessionKey: '',
@ -34,8 +33,8 @@ export default function(

      return {
        ...state,
-        sessionKey: sessionKey,
-        sessionKeyExpiry: sessionKeyExpiry
+        sessionKey,
+        sessionKeyExpiry
      };
    }
    case LOGOUT:
--- a/browser/src/scripts/store/index.ts
+++ b/browser/src/scripts/store/index.ts
@ -43,14 +43,14 @@ function initState(s: AppState | undefined): AppState {
    return undefined;
  }

-  const { settings } = s;
+  const { settings: settingsState } = s;

  return {
    ...s,
    settings: {
-      ...settings,
-      apiUrl: settings.apiUrl || config.defaultApiEndpoint,
-      webUrl: settings.webUrl || config.defaultWebUrl
+      ...settingsState,
+      apiUrl: settingsState.apiUrl || config.defaultApiEndpoint,
+      webUrl: settingsState.webUrl || config.defaultWebUrl
    }
  };
 }
--- a/browser/src/scripts/store/settings/actions.ts
+++ b/browser/src/scripts/store/settings/actions.ts
@ -17,8 +17,6 @@
 */

 import { UPDATE, RESET, UpdateAction, ResetAction } from './types';
-import { ThunkAction } from '../types';
-import initServices from '../../utils/services';

 export function updateSettings(settings): UpdateAction {
  return {
--- a/browser/src/scripts/utils/ext.ts
+++ b/browser/src/scripts/utils/ext.ts
@ -18,7 +18,7 @@

 // module ext provides a cross-browser interface to access extension APIs
 // by using WebExtensions API if available, and using Chrome as a fallback.
-let ext: any = {};
+const ext: any = {};

 const apis = ['tabs', 'storage', 'runtime'];

@ -40,9 +40,9 @@ for (let i = 0; i < apis.length; i++) {
        const fn = ext[api].create;

        // Promisify chrome.tabs.create
-        ext[api].create = function(obj) {
+        ext[api].create = obj => {
          return new Promise(resolve => {
-            fn(obj, function(tab) {
+            fn(obj, tab => {
              resolve(tab);
            });
          });
--- a/browser/src/scripts/utils/fetch.js
+++ b/browser/src/scripts/utils/fetch.js
@ -22,7 +22,7 @@ function checkStatus(response) {
  if (response.status >= 200 && response.status < 300) {
    return response;
  }
-  return response.text().then((body) => {
+  return response.text().then(body => {
    const error = new Error(body);
    error.response = response;

@ -48,7 +48,7 @@ export function post(url, data, options = {}) {
  return request(url, {
    method: 'POST',
    body: JSON.stringify(data),
-    ...options,
+    ...options
  });
 }

@ -61,6 +61,6 @@ export function get(url, options = {}) {

  return request(endpoint, {
    method: 'GET',
-    ...options,
+    ...options
  });
 }
--- a/browser/src/scripts/utils/services.ts
+++ b/browser/src/scripts/utils/services.ts
@ -17,13 +17,11 @@
 */

 import init from 'jslib/services';
-import config from './config';

-const initServices = (baseUrl: string) => {
-  return init({
-    baseUrl: baseUrl,
+const initServices = (baseUrl: string) =>
+  init({
+    baseUrl,
    pathPrefix: ''
  });
-};

 export default initServices;
--- a/browser/tsconfig.json
+++ b/browser/tsconfig.json
@ -1,13 +1,13 @@
 {
    "compilerOptions": {
        "sourceMap": true,
-        "esModuleInterop": true,
        "noImplicitAny": false,
-        "module": "es6",
+        "module": "commonjs",
        "moduleResolution": "node",
+        "target": "es6",
        "jsx": "react",
+        "esModuleInterop": true,
        "allowJs": true,
-        "target": "es5",
        "baseUrl": ".",
        "paths": {
            "jslib/*": [
--- a/go.mod
+++ b/go.mod
@ -7,6 +7,8 @@ require (
 	github.com/aymerick/douceur v0.2.0
 	github.com/dnote/actions v0.2.0
 	github.com/dnote/color v1.7.0
+	github.com/gobuffalo/envy v1.8.1 // indirect
+	github.com/gobuffalo/logger v1.0.2 // indirect
 	github.com/gobuffalo/packr v1.30.1 // indirect
 	github.com/gobuffalo/packr/v2 v2.7.1
 	github.com/google/go-cmp v0.3.1
@ -26,14 +28,17 @@ require (
 	github.com/pkg/errors v0.8.1
 	github.com/radovskyb/watcher v1.0.7
 	github.com/robfig/cron v1.2.0
+	github.com/rogpeppe/go-internal v1.5.0 // indirect
 	github.com/rubenv/sql-migrate v0.0.0-20190618074426-f4d34eae5a5c
 	github.com/sergi/go-diff v1.0.0
 	github.com/spf13/cobra v0.0.5
+	github.com/spf13/pflag v1.0.5 // indirect
 	github.com/stripe/stripe-go v61.7.1+incompatible
 	github.com/ziutek/mymysql v1.5.4 // indirect
-	golang.org/x/crypto v0.0.0-20190621222207-cc06ce4a13d4
-	golang.org/x/sys v0.0.0-20190624142023-c5567b49c5d0 // indirect
+	golang.org/x/crypto v0.0.0-20191122220453-ac88ee75c92c
+	golang.org/x/sys v0.0.0-20191120155948-bd437916bb0e // indirect
 	golang.org/x/time v0.0.0-20190308202827-9d24e82272b4
+	golang.org/x/tools v0.0.0-20191122232904-2a6ccf25d769 // indirect
 	gopkg.in/alexcesaro/quotedprintable.v3 v3.0.0-20150716171945-2caba252f4dc // indirect
 	gopkg.in/gomail.v2 v2.0.0-20150902115704-41f357289737
 	gopkg.in/gorp.v1 v1.7.2 // indirect
--- a/go.sum
+++ b/go.sum
@ -44,9 +44,13 @@ github.com/go-stack/stack v1.8.0/go.mod h1:v0f6uXyyMGvRgIKkXu+yp6POWl0qKG85gN/me
 github.com/gobuffalo/envy v1.7.0/go.mod h1:n7DRkBerg/aorDM8kbduw5dN3oXGswK5liaSCx4T5NI=
 github.com/gobuffalo/envy v1.7.1 h1:OQl5ys5MBea7OGCdvPbBJWRgnhC/fGona6QKfvFeau8=
 github.com/gobuffalo/envy v1.7.1/go.mod h1:FurDp9+EDPE4aIUS3ZLyD+7/9fpx7YRt/ukY6jIHf0w=
+github.com/gobuffalo/envy v1.8.1 h1:RUr68liRvs0TS1D5qdW3mQv2SjAsu1QWMCx1tG4kDjs=
+github.com/gobuffalo/envy v1.8.1/go.mod h1:FurDp9+EDPE4aIUS3ZLyD+7/9fpx7YRt/ukY6jIHf0w=
 github.com/gobuffalo/logger v1.0.0/go.mod h1:2zbswyIUa45I+c+FLXuWl9zSWEiVuthsk8ze5s8JvPs=
 github.com/gobuffalo/logger v1.0.1 h1:ZEgyRGgAm4ZAhAO45YXMs5Fp+bzGLESFewzAVBMKuTg=
 github.com/gobuffalo/logger v1.0.1/go.mod h1:2zbswyIUa45I+c+FLXuWl9zSWEiVuthsk8ze5s8JvPs=
+github.com/gobuffalo/logger v1.0.2 h1:C07Fb1g3P0CVQxTlqFSKyM2T/VIwHTjIVFzkxdYAI4Y=
+github.com/gobuffalo/logger v1.0.2/go.mod h1:3Fdhr3hXXXumcpR83wrlHIMbCn/AGNhDYjrDyYDbixc=
 github.com/gobuffalo/packd v0.3.0 h1:eMwymTkA1uXsqxS0Tpoop3Lc0u3kTfiMBE6nKtQU4g4=
 github.com/gobuffalo/packd v0.3.0/go.mod h1:zC7QkmNkYVGKPw4tHpBQ+ml7W/3tIebgeo1b36chA3Q=
 github.com/gobuffalo/packr v1.30.1 h1:hu1fuVR3fXEZR7rXNW3h8rqSML8EVAf6KNm0NKO/wKg=
@ -151,6 +155,8 @@ github.com/rogpeppe/go-internal v1.3.0/go.mod h1:M8bDsm7K2OlrFYOpmOWEs/qY81heoFR
 github.com/rogpeppe/go-internal v1.3.2/go.mod h1:xXDCJY+GAPziupqXw64V24skbSoqbTEfhy4qGm1nDQc=
 github.com/rogpeppe/go-internal v1.4.0 h1:LUa41nrWTQNGhzdsZ5lTnkwbNjj6rXTdazA1cSdjkOY=
 github.com/rogpeppe/go-internal v1.4.0/go.mod h1:xXDCJY+GAPziupqXw64V24skbSoqbTEfhy4qGm1nDQc=
+github.com/rogpeppe/go-internal v1.5.0 h1:Usqs0/lDK/NqTkvrmKSwA/3XkZAs7ZAW/eLeQ2MVBTw=
+github.com/rogpeppe/go-internal v1.5.0/go.mod h1:xXDCJY+GAPziupqXw64V24skbSoqbTEfhy4qGm1nDQc=
 github.com/rubenv/sql-migrate v0.0.0-20190618074426-f4d34eae5a5c h1:LCELEbde3/GT141OpHRs+jJZrI1tI3ayVd4VqW7Ui2U=
 github.com/rubenv/sql-migrate v0.0.0-20190618074426-f4d34eae5a5c/go.mod h1:WS0rl9eEliYI8DPnr3TOwz4439pay+qNgzJoVya/DmY=
 github.com/russross/blackfriday v1.5.2/go.mod h1:JO/DiYxRf+HjHt06OyowR9PTA263kcR/rfWxYHBV53g=
@ -166,6 +172,8 @@ github.com/spf13/cobra v0.0.5/go.mod h1:3K3wKZymM7VvHMDS9+Akkh4K60UwM26emMESw8tL
 github.com/spf13/jwalterweatherman v1.0.0/go.mod h1:cQK4TGJAtQXfYWX+Ddv3mKDzgVb68N+wFjFa4jdeBTo=
 github.com/spf13/pflag v1.0.3 h1:zPAT6CGy6wXeQ7NtTnaTerfKOsV6V6F8agHXFiazDkg=
 github.com/spf13/pflag v1.0.3/go.mod h1:DYY7MBk1bdzusC3SYhjObp+wFpr4gzcvqqNjLnInEg4=
+github.com/spf13/pflag v1.0.5 h1:iy+VFUOCP1a+8yFto/drg2CJ5u0yRoB7fZw3DKv/JXA=
+github.com/spf13/pflag v1.0.5/go.mod h1:McXfInJRrz4CZXVZOBLb0bTZqETkiAhM9Iw0y3An2Bg=
 github.com/spf13/viper v1.3.2/go.mod h1:ZiWeW+zYFKm7srdB9IoDzzZXaJaI5eL9QjNiN/DMA2s=
 github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
 github.com/stretchr/objx v0.1.1/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
@ -186,6 +194,9 @@ golang.org/x/crypto v0.0.0-20190308221718-c2843e01d9a2/go.mod h1:djNgcEr1/C05ACk
 golang.org/x/crypto v0.0.0-20190325154230-a5d413f7728c/go.mod h1:djNgcEr1/C05ACkg1iLfiJU5Ep61QUkGW8qpdssI0+w=
 golang.org/x/crypto v0.0.0-20190621222207-cc06ce4a13d4 h1:ydJNl0ENAG67pFbB+9tfhiL2pYqLhfoaZFw/cjLhY4A=
 golang.org/x/crypto v0.0.0-20190621222207-cc06ce4a13d4/go.mod h1:yigFU9vqHzYiE8UmvKecakEJjdnWj3jj499lnFckfCI=
+golang.org/x/crypto v0.0.0-20191119213627-4f8c1d86b1ba/go.mod h1:LzIPMQfyMNhhGPhUkYOs5KpL4U8rLKemX1yGLhDgUto=
+golang.org/x/crypto v0.0.0-20191122220453-ac88ee75c92c h1:/nJuwDLoL/zrqY6gf57vxC+Pi+pZ8bfhpPkicO5H7W4=
+golang.org/x/crypto v0.0.0-20191122220453-ac88ee75c92c/go.mod h1:LzIPMQfyMNhhGPhUkYOs5KpL4U8rLKemX1yGLhDgUto=
 golang.org/x/exp v0.0.0-20190121172915-509febef88a4/go.mod h1:CJ0aWSM057203Lf6IL+f9T1iT9GByDxfZKAQTCR3kQA=
 golang.org/x/lint v0.0.0-20181026193005-c67002cb31c3/go.mod h1:UVdnD1Gm6xHRNCYTkRU2/jEulfH38KcIWyp/GAMgvoE=
 golang.org/x/lint v0.0.0-20190227174305-5b3e6a55c961/go.mod h1:wehouNa3lNwaWXcvxsM5YxQ5yQlVC4a0KAMCusXpPoU=
@ -224,6 +235,8 @@ golang.org/x/sys v0.0.0-20190422165155-953cdadca894/go.mod h1:h1NjWce9XRLGQEsW7w
 golang.org/x/sys v0.0.0-20190515120540-06a5c4944438/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20190624142023-c5567b49c5d0 h1:HyfiK1WMnHj5FXFXatD+Qs1A/xC2Run6RzeW1SyHxpc=
 golang.org/x/sys v0.0.0-20190624142023-c5567b49c5d0/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
+golang.org/x/sys v0.0.0-20191120155948-bd437916bb0e h1:N7DeIrjYszNmSW409R3frPPwglRwMkXSBzwVbkOjLLA=
+golang.org/x/sys v0.0.0-20191120155948-bd437916bb0e/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/text v0.3.0/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
 golang.org/x/text v0.3.1-0.20180807135948-17ff2d5776d2 h1:z99zHgr7hKfrUcX/KsoJk5FJfjTceCKIp96+biqP4To=
 golang.org/x/text v0.3.1-0.20180807135948-17ff2d5776d2/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
@ -235,7 +248,10 @@ golang.org/x/tools v0.0.0-20190114222345-bf090417da8b/go.mod h1:n7NCudcB/nEzxVGm
 golang.org/x/tools v0.0.0-20190226205152-f727befe758c/go.mod h1:9Yl7xja0Znq3iFh3HoIrodX9oNMXvdceNzlUR8zjMvY=
 golang.org/x/tools v0.0.0-20190312170243-e65039ee4138/go.mod h1:LCzVGOaR6xXOjkQ3onu1FJEFr0SW1gC7cKk1uF8kGRs=
 golang.org/x/tools v0.0.0-20190624180213-70d37148ca0c/go.mod h1:/rFqwRUd4F7ZHNgwSSTFct+R/Kf4OFW1sUzUTQQTgfc=
+golang.org/x/tools v0.0.0-20191004055002-72853e10c5a3 h1:2AmBLzhAfXj+2HCW09VCkJtHIYgHTIPcTeYqgP7Bwt0=
 golang.org/x/tools v0.0.0-20191004055002-72853e10c5a3/go.mod h1:b+2E5dAYhXwXZwtnZ6UAqBI28+e2cm9otk0dWdXHAEo=
+golang.org/x/tools v0.0.0-20191122232904-2a6ccf25d769 h1:nIPDpirk90v9eLG0L8usrehSoJ1rWd6wX7BdjAKhZ4I=
+golang.org/x/tools v0.0.0-20191122232904-2a6ccf25d769/go.mod h1:b+2E5dAYhXwXZwtnZ6UAqBI28+e2cm9otk0dWdXHAEo=
 golang.org/x/xerrors v0.0.0-20190717185122-a985d3407aa7/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
 google.golang.org/api v0.3.1/go.mod h1:6wY9I6uQWHQ8EM57III9mq/AjF+i8G65rmVagqKMtkk=
 google.golang.org/appengine v1.1.0/go.mod h1:EbEs0AVv82hx2wNQdGPgUI5lhzA/G0D9YwlJXL52JkM=
--- a/jslib/package-lock.json
+++ b/jslib/package-lock.json
--- a/jslib/package.json
+++ b/jslib/package.json
@ -8,7 +8,8 @@
    "build": "tsc",
    "build:watch": "tsc --watch",
    "test": "jest --coverage",
-    "test:watch": "jest --watch"
+    "test:watch": "jest --watch",
+    "lint": "eslint ./src --ext .ts,.tsx,.js"
  },
  "author": "Monomax Software Pty Ltd",
  "license": "AGPL-3.0-or-later",
@ -20,9 +21,7 @@
  },
  "devDependencies": {
    "@types/jest": "^24.0.23",
-    "@types/mocha": "^5.2.7",
    "jest": "^24.9.0",
-    "prettier": "^1.19.1",
    "ts-jest": "^24.1.0",
    "typescript": "^3.7.2"
  }
--- a/jslib/src/helpers/index.ts
+++ b/jslib/src/helpers/index.ts
@ -33,5 +33,5 @@ export {
  QueriesHelpers,
  SearchHelpers,
  SelectHelpers,
-  UrlHelpers,
-}
+  UrlHelpers
+};
--- a/jslib/src/helpers/queries.ts
+++ b/jslib/src/helpers/queries.ts
@ -16,10 +16,6 @@
 * along with Dnote.  If not, see <https://www.gnu.org/licenses/>.
 */

-import { Location } from 'history';
-
-import { parseSearchString } from './url';
-import { removeKey } from './obj';
 import * as searchLib from './search';

 export interface Queries {
--- a/jslib/src/index.ts
+++ b/jslib/src/index.ts
@ -19,7 +19,4 @@
 import * as Helpers from './helpers';
 import * as Operations from './helpers';

-export {
-  Helpers,
-  Operations
-};
+export { Helpers, Operations };
--- a/package.json
+++ b/package.json
@ -0,0 +1,22 @@
+{
+  "private": true,
+  "workspaces": [
+    "jslib",
+    "web",
+    "browser"
+  ],
+  "devDependencies": {
+    "prettier": "^1.19.1",
+    "eslint": "^6.7.0",
+    "eslint-config-airbnb": "^18.0.1",
+    "eslint-config-prettier": "^6.7.0",
+    "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-prettier": "^3.1.1",
+    "eslint-plugin-react": "^7.16.0",
+    "eslint-plugin-react-hooks": "^2.3.0",
+    "@typescript-eslint/eslint-plugin": "^2.8.0",
+    "@typescript-eslint/parser": "^2.8.0",
+    "babel-eslint": "^10.0.3"
+  }
+}
--- a/scripts/license.sh
+++ b/scripts/license.sh
@ -56,9 +56,9 @@ agpl="/* Copyright (C) 2019 Monomax Software Pty Ltd
 */"

 dir=$(dirname "${BASH_SOURCE[0]}")
-pkgPath="$dir/pkg"
-serverPath="$dir/pkg/server"
-browserPath="$dir/browser"
+pkgPath="$dir/../pkg"
+serverPath="$dir/../pkg/server"
+browserPath="$dir/../browser"

 gplFiles=$(find "$pkgPath" "$browserPath" -type f \( -name "*.go" -o -name "*.js" -o -name "*.ts" -o -name "*.tsx" -o -name "*.scss" -o -name "*.css"  \) ! -path "**/vendor/*" ! -path "**/node_modules/*" ! -path "$serverPath/*")

--- a/scripts/vagrant/install_utils.sh
+++ b/scripts/vagrant/install_utils.sh
@ -1,6 +1,8 @@
 #!/usr/bin/env bash
 set -eux

+YARN_VERSION=1.19.1-1
+
 sudo apt-get update
 sudo apt-get install -y htop git wget build-essential inotify-tools

@ -9,3 +11,8 @@ wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo apt-ke
 echo 'deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main' | sudo tee /etc/apt/sources.list.d/google-chrome.list
 sudo apt-get -y update
 sudo apt-get install -y google-chrome-stable
+
+# Install yarn
+curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
+echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
+sudo apt update && sudo apt install -y yarn="$YARN_VERSION"
--- a/web/package-lock.json
+++ b/web/package-lock.json
--- a/web/package.json
+++ b/web/package.json
@ -7,7 +7,7 @@
  "scripts": {
    "test": "jest --coverage",
    "test:watch": "jest --watch",
-    "lint": "eslint ./src/**/*.ts ./src/**/*.tsx"
+    "lint": "eslint ./src --ext .ts,.tsx,.js"
  },
  "author": "Monomax Software Pty Ltd",
  "license": "AGPL-3.0-or-later",
@ -22,28 +22,16 @@
    "@types/jest": "^24.0.23",
    "@types/react": "^16.9.11",
    "@types/react-dom": "^16.9.4",
-    "@typescript-eslint/eslint-plugin": "^2.8.0",
-    "@typescript-eslint/parser": "^2.8.0",
    "autoprefixer": "^9.7.2",
-    "babel-eslint": "^10.0.3",
    "babel-loader": "^8.0.6",
    "css-loader": "^3.2.0",
    "cssnano": "^4.1.10",
-    "eslint": "^6.6.0",
-    "eslint-config-airbnb": "^18.0.1",
-    "eslint-config-prettier": "^6.7.0",
-    "eslint-plugin-import": "^2.18.2",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-prettier": "^3.1.1",
-    "eslint-plugin-react": "^7.16.0",
-    "eslint-plugin-react-hooks": "^2.3.0",
    "fibers": "^4.0.2",
    "file-loader": "^4.3.0",
    "jest": "^24.9.0",
    "mini-css-extract-plugin": "^0.8.0",
    "node-sass": "^4.13.0",
    "postcss-loader": "^3.0.0",
-    "prettier": "^1.19.1",
    "sass-loader": "^8.0.0",
    "source-map-loader": "^0.2.4",
    "source-map-support": "^0.5.16",
--- a/web/src/components/App/index.tsx
+++ b/web/src/components/App/index.tsx
@ -16,42 +16,41 @@
 * along with Dnote.  If not, see <https://www.gnu.org/licenses/>.
 */

-import React, { useState, useEffect, Fragment } from 'react';
 import classnames from 'classnames';
-import { hot } from 'react-hot-loader/root';
-import { Switch, Route } from 'react-router';
-import { withRouter, RouteComponentProps } from 'react-router-dom';
+import React, { Fragment, useEffect, useState } from 'react';
 import { Location } from 'history';

+import { getFiltersFromSearchStr } from 'jslib/helpers/filters';
+import { hot } from 'react-hot-loader/root';
+import { Route, Switch } from 'react-router';
+import { RouteComponentProps, withRouter } from 'react-router-dom';
 import { usePrevious } from 'web/libs/hooks';
 import {
-  homePathDef,
-  notePathDef,
-  noHeaderPaths,
-  subscriptionPaths,
-  noFooterPaths,
+  checkCurrentPath,
  checkCurrentPathIn,
-  checkCurrentPath
+  homePathDef,
+  noFooterPaths,
+  noHeaderPaths,
+  notePathDef,
+  subscriptionPaths
 } from 'web/libs/paths';
-import { getFiltersFromSearchStr } from 'jslib/helpers/filters';
-import Splash from '../Splash';
+import render from '../../routes';
+import { useDispatch, useSelector } from '../../store';
 import { getCurrentUser } from '../../store/auth';
 import { getBooks } from '../../store/books';
+import { updatePage, updateQuery } from '../../store/filters';
 import { setPrevLocation } from '../../store/route';
 import { unsetMessage } from '../../store/ui';
-import { useDispatch, useSelector } from '../../store';
-import HeaderData from './HeaderData';
-import render from '../../routes';
-import NoteHeader from '../Header/Note';
-import NormalHeader from '../Header/Normal';
-import SubscriptionHeader from '../Header/SubscriptionHeader';
-import TabBar from '../TabBar';
-import SystemMessage from '../Common/SystemMessage';
 import MobileMenu from '../Common/MobileMenu';
-import styles from './App.scss';
-import { updateQuery, updatePage } from '../../store/filters';
-
+import SystemMessage from '../Common/SystemMessage';
+import NormalHeader from '../Header/Normal';
+import NoteHeader from '../Header/Note';
+import SubscriptionHeader from '../Header/SubscriptionHeader';
+import Splash from '../Splash';
+import TabBar from '../TabBar';
 import './App.global.scss';
+import styles from './App.scss';
+import HeaderData from './HeaderData';

 interface Props extends RouteComponentProps<any> {}

@ -198,7 +197,7 @@ const App: React.FunctionComponent<Props> = ({ location }) => {
        <Route path={noFooterPaths} exact component={null} />
        <Route
          path="/"
-          render={({ location }) => {
+          render={() => {
            if (noFooter) {
              return null;
            }
--- a/web/src/components/Books/BookItem/Actions.tsx
+++ b/web/src/components/Books/BookItem/Actions.tsx
@ -16,11 +16,9 @@
 * along with Dnote.  If not, see <https://www.gnu.org/licenses/>.
 */

-import React, { useState, useRef } from 'react';
 import classnames from 'classnames';
-
+import React, { useRef, useState } from 'react';
 import ItemActions from '../../Common/ItemActions';
-import DotsIcon from '../../Icons/Dots';
 import ItemActionsStyles from '../../Common/ItemActions/ItemActions.scss';
 import styles from './Actions.scss';

--- a/web/src/components/Books/BookItem/index.tsx
+++ b/web/src/components/Books/BookItem/index.tsx
@ -21,8 +21,8 @@ import classnames from 'classnames';
 import { Link } from 'react-router-dom';

 import { getHomePath } from 'web/libs/paths';
-import Actions from './Actions';
 import { BookData } from 'jslib/operations/types';
+import Actions from './Actions';

 import styles from './BookItem.scss';

--- a/web/src/components/Books/BookList.tsx
+++ b/web/src/components/Books/BookList.tsx
@ -19,9 +19,9 @@
 import React, { Fragment } from 'react';
 import classnames from 'classnames';

+import { BookData } from 'jslib/operations/types';
 import BookItem from './BookItem';
 import BookHolder from './BookHolder';
-import { BookData } from 'jslib/operations/types';
 import styles from './BookList.scss';

 function Placeholder() {
--- a/web/src/components/Books/Content.tsx
+++ b/web/src/components/Books/Content.tsx
@ -34,10 +34,8 @@ import CreateBookModal from './CreateBookModal';
 import BookList from './BookList';
 import EmptyList from './EmptyList';
 import SearchInput from '../Common/SearchInput';
-import Button from '../Common/Button';
 import DeleteBookModal from './DeleteBookModal';
 import { usePrevious } from '../../libs/hooks';
-import BookPlusIcon from '../Icons/BookPlus';
 import CreateBookButton from './CreateBookButton';
 import styles from './Content.scss';

@ -91,14 +89,17 @@ function useFocusInputOnReset(
        inputRef.current.focus();
      }
    }
-  }, [searchValue, inputRef]);
+  }, [searchValue, inputRef, prevSearchValue]);
 }

 interface Props extends RouteComponentProps {
  setSuccessMessage: (string) => void;
 }

-const Content: React.FunctionComponent<Props> = ({ history, setSuccessMessage }) => {
+const Content: React.FunctionComponent<Props> = ({
+  history,
+  setSuccessMessage
+}) => {
  const { books } = useSelector(state => {
    return {
      books: state.books
--- a/web/src/components/Books/CreateBookButton.tsx
+++ b/web/src/components/Books/CreateBookButton.tsx
@ -16,8 +16,8 @@
 * along with Dnote.  If not, see <https://www.gnu.org/licenses/>.
 */

-import React, { Fragment, useState, useEffect, useRef } from 'react';
 import classnames from 'classnames';
+import React from 'react';
 import BookPlusIcon from '../Icons/BookPlus';
 import styles from './CreateBookButton.scss';

--- a/web/src/components/Books/CreateBookModal.tsx
+++ b/web/src/components/Books/CreateBookModal.tsx
@ -20,12 +20,12 @@ import React, { useState } from 'react';
 import classnames from 'classnames';
 import { withRouter, RouteComponentProps } from 'react-router-dom';

+import { checkDuplicate, validateBookName } from 'jslib/helpers/books';
 import Modal, { Header, Body } from '../Common/Modal';
 import { createBook } from '../../store/books';
 import { useSelector, useDispatch } from '../../store';
 import Button from '../Common/Button';
 import Flash from '../Common/Flash';
-import { checkDuplicate, validateBookName } from 'jslib/helpers/books';

 import styles from './CreateBookModal.scss';

--- a/web/src/components/Classic/index.tsx
+++ b/web/src/components/Classic/index.tsx
@ -20,17 +20,17 @@ import React from 'react';
 import { Switch, Route } from 'react-router';
 import { Redirect } from 'react-router-dom';

-import { useDispatch, useSelector } from '../../store';
-import ClassicLogin from './Login';
-import { setMessage } from '../../store/ui';
-import ClassicSetPassword from './SetPassword';
-import ClassicDecrypt from './Decrypt';
 import {
  ClassicMigrationSteps,
  getClassicMigrationPath,
  getHomePath,
  homePathDef
 } from 'web/libs/paths';
+import { useDispatch, useSelector } from '../../store';
+import ClassicLogin from './Login';
+import { setMessage } from '../../store/ui';
+import ClassicSetPassword from './SetPassword';
+import ClassicDecrypt from './Decrypt';

 interface Props {}

--- a/web/src/components/Common/Editor/BookSelector/index.tsx
+++ b/web/src/components/Common/Editor/BookSelector/index.tsx
@ -16,6 +16,9 @@
 * along with Dnote.  If not, see <https://www.gnu.org/licenses/>.
 */

+// TODO: refactor to enforce the following rule
+/* eslint-disable react/jsx-props-no-spreading */
+
 import React, { useState, useEffect } from 'react';
 import classnames from 'classnames';

--- a/web/src/components/Common/Editor/Textarea.tsx
+++ b/web/src/components/Common/Editor/Textarea.tsx
@ -16,14 +16,13 @@
 * along with Dnote.  If not, see <https://www.gnu.org/licenses/>.
 */

-import React, { useState } from 'react';
 import classnames from 'classnames';
-
 import { KEYCODE_ENTER } from 'jslib/helpers/keyboard';
+import React, { useState } from 'react';
+import { useDispatch } from '../../../store';
 import { flushContent } from '../../../store/editor';
-import { AppState, useDispatch } from '../../../store';
-import styles from './Textarea.scss';
 import editorStyles from './Editor.scss';
+import styles from './Textarea.scss';

 interface Props {
  sessionKey: string;
--- a/web/src/components/Common/ItemActions/index.tsx
+++ b/web/src/components/Common/ItemActions/index.tsx
@ -16,9 +16,8 @@
 * along with Dnote.  If not, see <https://www.gnu.org/licenses/>.
 */

-import React, { useState, useRef } from 'react';
 import classnames from 'classnames';
-
+import React from 'react';
 import Menu, { MenuOption } from '../../Common/Menu';
 import DotsIcon from '../../Icons/Dots';
 import styles from './ItemActions.scss';
@ -59,8 +58,8 @@ const ItemActions: React.FunctionComponent<Props> = ({
        menuId={id}
        triggerId={triggerId}
        triggerContent={<DotsIcon width={12} height={12} />}
-        triggerClassName={styles['trigger']}
-        contentClassName={styles['content']}
+        triggerClassName={styles.trigger}
+        contentClassName={styles.content}
        alignment="right"
        direction="bottom"
      />
--- a/web/src/components/Common/Modal/Header.tsx
+++ b/web/src/components/Common/Modal/Header.tsx
@ -28,7 +28,11 @@ interface Props {
  onDismiss: () => void;
 }

-const Header: React.FunctionComponent<Props> = ({ labelId, heading, onDismiss }) => {
+const Header: React.FunctionComponent<Props> = ({
+  labelId,
+  heading,
+  onDismiss
+}) => {
  return (
    <div className={styles.wrapper}>
      <strong id={labelId}>{heading}</strong>
--- a/web/src/components/Common/MultiSelect.tsx
+++ b/web/src/components/Common/MultiSelect.tsx
@ -16,16 +16,14 @@
 * along with Dnote.  If not, see <https://www.gnu.org/licenses/>.
 */

-import React, { useState, useRef, useEffect } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import classnames from 'classnames';

-import { booksToOptions, filterOptions, Option } from 'jslib/helpers/select';
 import { KEYCODE_BACKSPACE } from 'jslib/helpers/keyboard';
-import { useSearchMenuKeydown, useScrollToFocused } from 'web/libs/hooks/dom';
-import { useSelector } from '../../store';
+import { filterOptions, Option } from 'jslib/helpers/select';
+import { useScrollToFocused, useSearchMenuKeydown } from 'web/libs/hooks/dom';
 import PopoverContent from '../Common/Popover/PopoverContent';
 import CloseIcon from '../Icons/Close';
-import { usePrevious } from 'web/libs/hooks';
 import styles from './MultiSelect.scss';

 function getTextInputWidth(term: string, active: boolean) {
@ -140,6 +138,8 @@ const MultiSelect: React.FunctionComponent<Props> = ({
        'form-select-disabled': disabled
      })}
      ref={wrapperRef}
+      tabIndex={-1}
+      role="listbox"
      onClick={() => {
        if (inputRef.current) {
          inputRef.current.focus();
@ -147,6 +147,7 @@ const MultiSelect: React.FunctionComponent<Props> = ({

        // setIsOpen(!isOpen);
      }}
+      onKeyDown={() => {}}
    >
      <ul className={styles['current-options']}>
        <span
@ -185,9 +186,11 @@ const MultiSelect: React.FunctionComponent<Props> = ({
            type="text"
            id={textInputId}
            ref={el => {
+              // eslint-disable-next-line no-param-reassign
              inputRef.current = el;

              if (inputInnerRef) {
+                // eslint-disable-next-line no-param-reassign
                inputInnerRef.current = el;
              }
            }}
@ -237,7 +240,7 @@ const MultiSelect: React.FunctionComponent<Props> = ({
        closeOnEscapeKeydown
      >
        <ul
-          className={classnames(styles['suggestion'], 'list-unstyled')}
+          className={classnames(styles.suggestion, 'list-unstyled')}
          ref={listRef}
        >
          {filteredOptions.map((o, idx) => {
--- a/web/src/components/Common/PayWall.tsx
+++ b/web/src/components/Common/PayWall.tsx
@ -20,8 +20,8 @@ import React, { Fragment } from 'react';
 import classnames from 'classnames';
 import { Link } from 'react-router-dom';

-import LockIcon from '../Icons/Lock';
 import { getSubscriptionPath } from 'web/libs/paths';
+import LockIcon from '../Icons/Lock';
 import { useSelector } from '../../store';

 import styles from './PayWall.scss';
--- a/web/src/components/Common/PaymentInput/CountrySelect.tsx
+++ b/web/src/components/Common/PaymentInput/CountrySelect.tsx
@ -16,6 +16,8 @@
 * along with Dnote.  If not, see <https://www.gnu.org/licenses/>.
 */

+/* eslint-disable jsx-a11y/control-has-associated-label */
+
 import React from 'react';
 import classnames from 'classnames';

--- a/web/src/components/Common/SearchableMenu/index.tsx
+++ b/web/src/components/Common/SearchableMenu/index.tsx
@ -20,14 +20,14 @@ import React, { useState, useRef, useEffect } from 'react';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
 import classnames from 'classnames';

-import Result from './Result';
-import { makeOptionId, getOptIdxByValue } from '../../../helpers/accessibility';
 import { Option, filterOptions } from 'jslib/helpers/select';
 import {
  useScrollToFocused,
  useScrollToSelected,
  useSearchMenuKeydown
 } from 'web/libs/hooks/dom';
+import Result from './Result';
+import { makeOptionId, getOptIdxByValue } from '../../../helpers/accessibility';
 import styles from './SearchableMenu.scss';

 function useFocusedIdx(options: Option[], currentValue) {
--- a/web/src/components/Common/Sidebar/SettingsSidebar/index.js
+++ b/web/src/components/Common/Sidebar/SettingsSidebar/index.js
@ -196,8 +196,5 @@ const mapDispatchToProps = {
 };

 export default withRouter(
-  connect(
-    mapStateToProps,
-    mapDispatchToProps
-  )(SettingsSidebar)
+  connect(mapStateToProps, mapDispatchToProps)(SettingsSidebar)
 );
--- a/web/src/components/Common/Time.tsx
+++ b/web/src/components/Common/Time.tsx
@ -17,16 +17,11 @@
 */

 import React from 'react';
-
-import {
-  msToHTMLTimeDuration,
-  getMonthName,
-  getUTCOffset
-} from '../../helpers/time';
+import { msToHTMLTimeDuration } from '../../helpers/time';
 import formatTime from '../../helpers/time/format';
-import Tooltip from './Tooltip';
 import { Alignment, Direction } from '../Common/Popover/types';
 import styles from './Time.scss';
+import Tooltip from './Tooltip';

 interface ContentProps {
  text: string;
--- a/web/src/components/Common/Toggle.tsx
+++ b/web/src/components/Common/Toggle.tsx
@ -16,9 +16,8 @@
 * along with Dnote.  If not, see <https://www.gnu.org/licenses/>.
 */

-import React, { useState } from 'react';
 import classnames from 'classnames';
-
+import React from 'react';
 import styles from './Toggle.scss';

 interface Props {
@ -56,7 +55,7 @@ const Toggle: React.FunctionComponent<Props> = ({
        />

        <div className={classnames(styles.toggle, {})}>
-          <div className={styles.indicator}></div>
+          <div className={styles.indicator} />
        </div>

        {label}
--- a/web/src/components/Common/Tooltip/index.tsx
+++ b/web/src/components/Common/Tooltip/index.tsx
@ -16,17 +16,9 @@
 * along with Dnote.  If not, see <https://www.gnu.org/licenses/>.
 */

-import React, { Fragment, useState, useRef } from 'react';
-import classnames from 'classnames';
-
-import Overlay from './Overlay';
+import React, { useRef, useState } from 'react';
 import { Alignment, Direction } from '../Popover/types';
-import { isMobileWidth } from 'web/libs/dom';
-import {
-  KEYCODE_ESC,
-  KEYCODE_ENTER,
-  KEYCODE_SPACE
-} from 'jslib/helpers/keyboard';
+import Overlay from './Overlay';

 interface Props {
  id: string;
@ -51,7 +43,6 @@ const Tooltip: React.FunctionComponent<Props> = ({
 }) => {
  const [isOpen, setIsOpen] = useState(false);
  const triggerRef = useRef(null);
-  const touchingRef = useRef(false);

  function show() {
    setIsOpen(true);
--- a/web/src/components/Edit/Content.tsx
+++ b/web/src/components/Edit/Content.tsx
@ -16,20 +16,17 @@
 * along with Dnote.  If not, see <https://www.gnu.org/licenses/>.
 */

-import React, { useState, useRef } from 'react';
-import { Prompt, RouteComponentProps } from 'react-router-dom';
 import classnames from 'classnames';
-import { withRouter } from 'react-router-dom';
-
-import operations from 'web/libs/operations';
-import { getEditorSessionkey } from 'web/libs/editor';
-import { getNotePath, notePathDef } from 'web/libs/paths';
+import React, { useRef, useState } from 'react';
+import { Prompt, RouteComponentProps, withRouter } from 'react-router-dom';
 import { useFocusTextarea } from 'web/libs/hooks/editor';
-import Editor from '../Common/Editor';
+import operations from 'web/libs/operations';
+import { getNotePath, notePathDef } from 'web/libs/paths';
 import { useDispatch, useSelector } from '../../store';
-import { resetEditor, EditorSession } from '../../store/editor';
 import { createBook } from '../../store/books';
+import { EditorSession, resetEditor } from '../../store/editor';
 import { setMessage } from '../../store/ui';
+import Editor from '../Common/Editor';
 import styles from '../New/New.scss';

 interface Props extends RouteComponentProps {
--- a/web/src/components/Edit/index.tsx
+++ b/web/src/components/Edit/index.tsx
@ -16,19 +16,17 @@
 * along with Dnote.  If not, see <https://www.gnu.org/licenses/>.
 */

-import React, { useEffect, useState } from 'react';
 import classnames from 'classnames';
-import { Prompt, RouteComponentProps } from 'react-router-dom';
+import React, { useEffect, useState } from 'react';
 import Helmet from 'react-helmet';
-import { withRouter } from 'react-router-dom';
-
+import { RouteComponentProps, withRouter } from 'react-router-dom';
 import { getEditorSessionkey } from 'web/libs/editor';
 import operations from 'web/libs/operations';
-import Flash from '../Common/Flash';
 import { useDispatch, useSelector } from '../../store';
 import { createSession } from '../../store/editor';
-import Content from './Content';
+import Flash from '../Common/Flash';
 import styles from '../New/New.scss';
+import Content from './Content';

 interface Match {
  noteUUID: string;
--- a/web/src/components/Header/Nav/index.tsx
+++ b/web/src/components/Header/Nav/index.tsx
@ -19,9 +19,9 @@
 import React from 'react';
 import classnames from 'classnames';

-import Item from './Item';
 import { getNewPath, getBooksPath, getRepetitionsPath } from 'web/libs/paths';
 import { Filters, toSearchObj } from 'jslib/helpers/filters';
+import Item from './Item';
 import styles from './Nav.scss';

 interface Props {
--- a/web/src/components/Header/Note/Guest.tsx
+++ b/web/src/components/Header/Note/Guest.tsx
@ -19,9 +19,8 @@
 import React from 'react';
 import { Link } from 'react-router-dom';

-import LogoWithText from '../../Icons/LogoWithText';
-import Logo from '../../Icons/Logo';
 import { getHomePath } from 'web/libs/paths';
+import LogoWithText from '../../Icons/LogoWithText';
 import styles from './Guest.scss';

 const UserNoteHeader: React.FunctionComponent = () => {
--- a/web/src/components/Header/SearchBar/AdvancedPanel/BookSearch.tsx
+++ b/web/src/components/Header/SearchBar/AdvancedPanel/BookSearch.tsx
@ -20,16 +20,12 @@ import React, { useState, useRef, useEffect } from 'react';
 import classnames from 'classnames';

 import { booksToOptions, filterOptions, Option } from 'jslib/helpers/select';
+import { usePrevious } from 'web/libs/hooks';
+import { useScrollToFocused, useSearchMenuKeydown } from 'web/libs/hooks/dom';
 import { useSelector } from '../../../../store';
 import PopoverContent from '../../../Common/Popover/PopoverContent';
-import { usePrevious } from 'web/libs/hooks';
 import styles from './AdvancedPanel.scss';

-import {
-  useScrollToFocused,
-  useSearchMenuKeydown
-} from 'web/libs/hooks/dom';
-
 interface Props {
  value: string;
  setValue: (string) => void;
@ -117,7 +113,11 @@ function useSetSuggestionVisibility(
  }, [setIsOpen, triggerRef, inputValue, prevInputValue]);
 }

-const BookSearch: React.FunctionComponent<Props> = ({ value, setValue, disabled }) => {
+const BookSearch: React.FunctionComponent<Props> = ({
+  value,
+  setValue,
+  disabled
+}) => {
  const [isOpen, setIsOpen] = useState(false);
  const [focusedIdx, setFocusedIdx] = useState(0);
  const [focusedOptEl, setFocusedOptEl] = useState(null);
--- a/web/src/components/Header/SearchBar/AdvancedPanel/WordsSearch.tsx
+++ b/web/src/components/Header/SearchBar/AdvancedPanel/WordsSearch.tsx
@ -27,7 +27,11 @@ interface Props {
  disabled: boolean;
 }

-const WordsSearch: React.FunctionComponent<Props> = ({ words, setWords, disabled }) => {
+const WordsSearch: React.FunctionComponent<Props> = ({
+  words,
+  setWords,
+  disabled
+}) => {
  return (
    <section className={styles.section}>
      <label htmlFor="has-words" className={styles.label}>
--- a/web/src/components/Home/Actions/Paginator.tsx
+++ b/web/src/components/Home/Actions/Paginator.tsx
@ -20,8 +20,8 @@ import React from 'react';
 import classnames from 'classnames';

 import { Link } from 'react-router-dom';
-import { useFilters, useSelector } from '../../../store';
 import { getHomePath } from 'web/libs/paths';
+import { useFilters, useSelector } from '../../../store';
 import CaretIcon from '../../Icons/Caret';
 import styles from './Paginator.scss';

--- a/web/src/components/Home/NoteGroup/index.tsx
+++ b/web/src/components/Home/NoteGroup/index.tsx
@ -37,7 +37,11 @@ interface Props {
  filters: Filters;
 }

-const NoteGroup: React.FunctionComponent<Props> = ({ group, isFirst, filters }) => {
+const NoteGroup: React.FunctionComponent<Props> = ({
+  group,
+  isFirst,
+  filters
+}) => {
  const { year, month } = group;

  return (
--- a/web/src/components/Icons/CheckCircle.tsx
+++ b/web/src/components/Icons/CheckCircle.tsx
@ -17,10 +17,9 @@
 */

 import React from 'react';
-
 import { IconProps } from './types';

-const Icon = ({ fill, width, height, className }: IconProps) => {
+const Icon = ({ fill, width, height }: IconProps) => {
  const h = `${height}px`;
  const w = `${width}px`;

--- a/web/src/components/Login/LoginForm.tsx
+++ b/web/src/components/Login/LoginForm.tsx
@ -19,9 +19,9 @@
 import React, { useState } from 'react';
 import { Link } from 'react-router-dom';

+import { getPasswordResetRequestPath } from 'web/libs/paths';
 import styles from '../Common/Auth.scss';
 import Button from '../Common/Button';
-import { getPasswordResetRequestPath } from 'web/libs/paths';

 interface Props {
  email: string;
--- a/web/src/components/New/Content.tsx
+++ b/web/src/components/New/Content.tsx
@ -16,23 +16,20 @@
 * along with Dnote.  If not, see <https://www.gnu.org/licenses/>.
 */

-import React, { useState, useRef, useEffect, Fragment } from 'react';
-import { Prompt, RouteComponentProps } from 'react-router-dom';
 import classnames from 'classnames';
+import React, { Fragment, useEffect, useRef, useState } from 'react';
 import Helmet from 'react-helmet';
-import { withRouter } from 'react-router-dom';
-
+import { Prompt, RouteComponentProps, withRouter } from 'react-router-dom';
 import { focusTextarea } from 'web/libs/dom';
-import { getEditorSessionkey } from 'web/libs/editor';
+import { useFocus } from 'web/libs/hooks/dom';
 import operations from 'web/libs/operations';
 import { getNotePath, notePathDef } from 'web/libs/paths';
-import { useFocus } from 'web/libs/hooks/dom';
+import { useDispatch } from '../../store';
+import { createBook } from '../../store/books';
+import { EditorSession, resetEditor } from '../../store/editor';
+import { setMessage } from '../../store/ui';
 import Editor from '../Common/Editor';
 import Flash from '../Common/Flash';
-import { useDispatch, useSelector } from '../../store';
-import { resetEditor, createSession, EditorSession } from '../../store/editor';
-import { createBook } from '../../store/books';
-import { setMessage } from '../../store/ui';
 import PayWall from '../Common/PayWall';
 import styles from './New.scss';

@ -54,10 +51,14 @@ function useInitFocus({ bookLabel, content, textareaRef, setTriggerFocus }) {
        focusTextarea(textareaEl);
      }
    }
-  }, [setTriggerFocus, bookLabel, textareaRef]);
+  }, [setTriggerFocus, bookLabel, textareaRef, content]);
 }

-const New: React.FunctionComponent<Props> = ({ editor, persisted, history }) => {
+const New: React.FunctionComponent<Props> = ({
+  editor,
+  persisted,
+  history
+}) => {
  const dispatch = useDispatch();
  const [errMessage, setErrMessage] = useState('');
  const [submitting, setSubmitting] = useState(false);
--- a/web/src/components/New/index.tsx
+++ b/web/src/components/New/index.tsx
@ -16,28 +16,16 @@
 * along with Dnote.  If not, see <https://www.gnu.org/licenses/>.
 */

-import React, { useState, useRef, useEffect, Fragment } from 'react';
-import { RouteComponentProps } from 'react-router-dom';
-import classnames from 'classnames';
-import Helmet from 'react-helmet';
-import { withRouter } from 'react-router-dom';
-
-import { focusTextarea } from 'web/libs/dom';
+import React, { Fragment, useEffect } from 'react';
+import { RouteComponentProps, withRouter } from 'react-router-dom';
 import { getEditorSessionkey } from 'web/libs/editor';
-import operations from 'web/libs/operations';
-import { getNotePath, notePathDef } from 'web/libs/paths';
-import Editor from '../Common/Editor';
-import Flash from '../Common/Flash';
 import { useDispatch, useSelector } from '../../store';
-import { resetEditor, createSession } from '../../store/editor';
-import { createBook } from '../../store/books';
-import { setMessage } from '../../store/ui';
+import { createSession } from '../../store/editor';
 import Content from './Content';
-import styles from './New.scss';

 interface Props extends RouteComponentProps {}

-const New: React.FunctionComponent<Props> = ({ history }) => {
+const New: React.FunctionComponent<Props> = () => {
  const sessionKey = getEditorSessionkey(null);
  const { editor } = useSelector(state => {
    return {
--- a/web/src/components/Note/Content.tsx
+++ b/web/src/components/Note/Content.tsx
@ -27,7 +27,7 @@ import { tokenize, TokenKind } from 'web/libs/fts/lexer';
 import BookIcon from '../Icons/Book';
 import GlobeIcon from '../Icons/Globe';
 import { parseMarkdown } from '../../helpers/markdown';
-import { nanosecToMillisec, getMonthName } from '../../helpers/time';
+import { nanosecToMillisec } from '../../helpers/time';
 import formatTime from '../../helpers/time/format';
 import { useSelector } from '../../store';
 import Time from '../Common/Time';
--- a/web/src/components/Note/ShareModal/CopyButton.tsx
+++ b/web/src/components/Note/ShareModal/CopyButton.tsx
@ -17,10 +17,7 @@
 */

 import React from 'react';
-import classnames from 'classnames';
-
 import Button from '../../Common/Button';
-import styles from './ShareModal.scss';

 interface Props {
  kind: string;
--- a/web/src/components/Note/ShareModal/index.tsx
+++ b/web/src/components/Note/ShareModal/index.tsx
@ -16,20 +16,18 @@
 * along with Dnote.  If not, see <https://www.gnu.org/licenses/>.
 */

-import React, { useState } from 'react';
 import classnames from 'classnames';
-
-import { homePathDef, getHomePath, getNotePath } from 'web/libs/paths';
-import { copyToClipboard, selectTextInputValue } from 'web/libs/dom';
 import { NoteData } from 'jslib/operations/types';
+import React, { useState } from 'react';
+import { copyToClipboard, selectTextInputValue } from 'web/libs/dom';
 import operations from 'web/libs/operations';
-import Modal, { Header, Body } from '../../Common/Modal';
-import Flash from '../../Common/Flash';
-import { setMessage } from '../../../store/ui';
+import { getNotePath } from 'web/libs/paths';
 import { useDispatch } from '../../../store';
-import Button from '../../Common/Button';
-import Toggle from '../../Common/Toggle';
 import { receiveNote } from '../../../store/note';
+import Button from '../../Common/Button';
+import Flash from '../../Common/Flash';
+import Modal, { Body, Header } from '../../Common/Modal';
+import Toggle from '../../Common/Toggle';
 import CopyButton from './CopyButton';
 import styles from './ShareModal.scss';

--- a/web/src/components/Note/index.tsx
+++ b/web/src/components/Note/index.tsx
@ -19,7 +19,6 @@
 import React, { useEffect, useState } from 'react';
 import { withRouter, RouteComponentProps } from 'react-router-dom';

-import { notePathDef } from 'web/libs/paths';
 import { parseSearchString } from 'jslib/helpers/url';
 import Content from './Content';
 import Flash from '../Common/Flash';
--- a/web/src/components/PasswordReset/Confirm/index.tsx
+++ b/web/src/components/PasswordReset/Confirm/index.tsx
@ -36,7 +36,10 @@ interface Match {

 interface Props extends RouteComponentProps<Match> {}

-const PasswordResetConfirm: React.FunctionComponent<Props> = ({ match, history }) => {
+const PasswordResetConfirm: React.FunctionComponent<Props> = ({
+  match,
+  history
+}) => {
  const [errorMsg, setErrorMsg] = useState('');
  const [submitting, setSubmitting] = useState(false);
  const dispatch = useDispatch();
--- a/web/src/components/Preferences/Repetitions/Content.tsx
+++ b/web/src/components/Preferences/Repetitions/Content.tsx
@ -60,7 +60,7 @@ const Content: React.FunctionComponent<Props> = ({

  return (
    <div>
-      <p>Toggle the repetition for "{data.title}"</p>
+      <p>Toggle the repetition for &#34;{data.title}&#34;</p>

      <form id="T-pref-repetition-form" onSubmit={handleSubmit}>
        <div>
@ -72,8 +72,7 @@ const Content: React.FunctionComponent<Props> = ({
                name="repetition"
                value="off"
                checked={!isEnabled}
-                onChange={e => {
-                  const val = e.target.value;
+                onChange={() => {
                  setIsEnabled(false);
                }}
              />
@ -89,8 +88,7 @@ const Content: React.FunctionComponent<Props> = ({
                name="repetition"
                value="on"
                checked={isEnabled}
-                onChange={e => {
-                  const val = e.target.value;
+                onChange={() => {
                  setIsEnabled(true);
                }}
              />
--- a/web/src/components/Preferences/Repetitions/index.tsx
+++ b/web/src/components/Preferences/Repetitions/index.tsx
@ -16,18 +16,15 @@
 * along with Dnote.  If not, see <https://www.gnu.org/licenses/>.
 */

-import React, { useState, useEffect } from 'react';
 import classnames from 'classnames';
-import { Link, withRouter, RouteComponentProps } from 'react-router-dom';
-import Helmet from 'react-helmet';
-
-import services from 'web/libs/services';
-import Logo from '../../Icons/Logo';
-import Flash from '../../Common/Flash';
 import { parseSearchString } from 'jslib/helpers/url';
-import { getEmailPreference } from '../../../store/auth';
+import React, { useEffect, useState } from 'react';
+import Helmet from 'react-helmet';
+import { Link, RouteComponentProps, withRouter } from 'react-router-dom';
 import { getLoginPath } from 'web/libs/paths';
-import { useSelector, useDispatch } from '../../../store';
+import services from 'web/libs/services';
+import Flash from '../../Common/Flash';
+import Logo from '../../Icons/Logo';
 import Content from './Content';
 import styles from './EmailPreferenceRepetition.scss';

@ -36,7 +33,10 @@ interface Match {
 }
 interface Props extends RouteComponentProps<Match> {}

-const EmailPreferenceRepetition: React.FunctionComponent<Props> = ({ location, match }) => {
+const EmailPreferenceRepetition: React.FunctionComponent<Props> = ({
+  location,
+  match
+}) => {
  const [data, setData] = useState(null);
  const [isFetching, setIsFetching] = useState(false);
  const [successMsg, setSuccessMsg] = useState('');
@ -67,7 +67,7 @@ const EmailPreferenceRepetition: React.FunctionComponent<Props> = ({ location, m

        setIsFetching(false);
      });
-  }, [data, setData, setFailureMsg, setIsFetching]);
+  }, [data, repetitionUUID, setData, setFailureMsg, setIsFetching, token]);

  const isFetched = data !== null;

--- a/web/src/components/Repetition/Content.tsx
+++ b/web/src/components/Repetition/Content.tsx
@ -1,7 +1,5 @@
 import React, { Fragment, useState, useEffect } from 'react';

-import { getRepetitionRules } from '../../store/repetitionRules';
-import { useDispatch, useSelector } from '../../store';
 import classnames from 'classnames';
 import {
  getNewRepetitionPath,
@ -10,6 +8,8 @@ import {
  repetitionsPathDef
 } from 'web/libs/paths';
 import { Link } from 'react-router-dom';
+import { useDispatch, useSelector } from '../../store';
+import { getRepetitionRules } from '../../store/repetitionRules';
 import RepetitionList from './RepetitionList';
 import DeleteRepetitionRuleModal from './DeleteRepetitionRuleModal';
 import Flash from '../Common/Flash';
--- a/web/src/components/Repetition/DeleteRepetitionRuleModal.tsx
+++ b/web/src/components/Repetition/DeleteRepetitionRuleModal.tsx
@ -16,17 +16,15 @@
 * along with Dnote.  If not, see <https://www.gnu.org/licenses/>.
 */

-import React, { useState, useEffect } from 'react';
-import classnames from 'classnames';
-import { withRouter, RouteComponentProps } from 'react-router-dom';
-
-import services from 'web/libs/services';
 import { RepetitionRuleData } from 'jslib/operations/types';
-import Modal, { Header, Body } from '../Common/Modal';
-import Flash from '../Common/Flash';
+import React, { useEffect, useState } from 'react';
+import { RouteComponentProps, withRouter } from 'react-router-dom';
+import services from 'web/libs/services';
+import { useDispatch, useSelector } from '../../store';
 import { removeRepetitionRule } from '../../store/repetitionRules';
-import { useSelector, useDispatch } from '../../store';
 import Button from '../Common/Button';
+import Flash from '../Common/Flash';
+import Modal, { Body, Header } from '../Common/Modal';
 import styles from './DeleteRepetitionRuleModal.scss';

 function getRepetitionRuleByUUID(
@ -73,7 +71,6 @@ const DeleteRepetitionModal: React.FunctionComponent<Props> = ({
  );

  const labelId = 'delete-rule-modal-label';
-  const nameInputId = 'delete-rule-modal-name-input';
  const descId = 'delete-rule-modal-desc';

  useEffect(() => {
--- a/web/src/components/Repetition/Edit/Content.tsx
+++ b/web/src/components/Repetition/Edit/Content.tsx
@ -16,16 +16,15 @@
 * along with Dnote.  If not, see <https://www.gnu.org/licenses/>.
 */

-import React from 'react';
-import { withRouter, RouteComponentProps } from 'react-router-dom';
-
-import services from 'web/libs/services';
-import { BookDomain, RepetitionRuleData } from 'jslib/operations/types';
 import { booksToOptions } from 'jslib/helpers/select';
+import { RepetitionRuleData } from 'jslib/operations/types';
+import React from 'react';
+import { RouteComponentProps, withRouter } from 'react-router-dom';
 import { getRepetitionsPath, repetitionsPathDef } from 'web/libs/paths';
-import Form, { FormState, serializeFormState } from '../Form';
+import services from 'web/libs/services';
 import { useDispatch } from '../../../store';
 import { setMessage } from '../../../store/ui';
+import Form, { FormState, serializeFormState } from '../Form';

 interface Props extends RouteComponentProps {
  setErrMsg: (string) => void;
--- a/web/src/components/Repetition/Edit/index.tsx
+++ b/web/src/components/Repetition/Edit/index.tsx
@ -16,20 +16,17 @@
 * along with Dnote.  If not, see <https://www.gnu.org/licenses/>.
 */

-import React, { useState, useEffect } from 'react';
-import Helmet from 'react-helmet';
-import { Link, withRouter, RouteComponentProps } from 'react-router-dom';
 import classnames from 'classnames';
-
-import { getRepetitionsPath, repetitionsPathDef } from 'web/libs/paths';
-import { BookDomain, RepetitionRuleData } from 'jslib/operations/types';
+import { RepetitionRuleData } from 'jslib/operations/types';
+import React, { useEffect, useState } from 'react';
+import Helmet from 'react-helmet';
+import { Link, RouteComponentProps } from 'react-router-dom';
+import { getRepetitionsPath } from 'web/libs/paths';
 import services from 'web/libs/services';
-import { createRepetitionRule } from '../../../store/repetitionRules';
 import { useDispatch } from '../../../store';
 import Flash from '../../Common/Flash';
-import { setMessage } from '../../../store/ui';
-import Content from './Content';
 import repetitionStyles from '../Repetition.scss';
+import Content from './Content';

 interface Match {
  repetitionUUID: string;
@ -37,7 +34,7 @@ interface Match {

 interface Props extends RouteComponentProps<Match> {}

-const EditRepetition: React.FunctionComponent<Props> = ({ history, match }) => {
+const EditRepetition: React.FunctionComponent<Props> = ({ match }) => {
  const dispatch = useDispatch();
  const [errMsg, setErrMsg] = useState('');
  const [data, setData] = useState<RepetitionRuleData | null>(null);
--- a/web/src/components/Repetition/Form/index.tsx
+++ b/web/src/components/Repetition/Form/index.tsx
@ -16,21 +16,20 @@
 * along with Dnote.  If not, see <https://www.gnu.org/licenses/>.
 */

-import React, { useState, useReducer, useRef, useEffect } from 'react';
+import React, { useEffect, useReducer, useRef } from 'react';
 import classnames from 'classnames';
-import { Link } from 'react-router-dom';
+import { booksToOptions, Option } from 'jslib/helpers/select';

-import { getRepetitionsPath } from 'web/libs/paths';
-import { Option, booksToOptions } from 'jslib/helpers/select';
 import { BookDomain } from 'jslib/operations/types';
 import { CreateParams } from 'jslib/services/repetitionRules';
-import Modal, { Header, Body } from '../../Common/Modal';
-import { useSelector } from '../../../store';
+import { Link } from 'react-router-dom';
+import { getRepetitionsPath } from 'web/libs/paths';
 import { daysToMs } from '../../../helpers/time';
+import { useSelector } from '../../../store';
 import Button from '../../Common/Button';
+import modalStyles from '../../Common/Modal/Modal.scss';
 import MultiSelect from '../../Common/MultiSelect';
 import styles from './Form.scss';
-import modalStyles from '../../Common/Modal/Modal.scss';

 export interface FormState {
  title: string;
@ -72,6 +71,8 @@ interface Props {
  cancelPath?: string;
  initialState?: FormState;
  isEditing?: boolean;
+  // TODO: implement inProgress
+  inProgress?: boolean;
 }

 enum Action {
@ -162,9 +163,9 @@ const Form: React.FunctionComponent<Props> = ({
  setErrMsg,
  cancelPath = getRepetitionsPath(),
  initialState = formInitialState,
-  isEditing = false
+  isEditing = false,
+  inProgress = false
 }) => {
-  const [inProgress, setInProgress] = useState(false);
  const bookSelectorInputRef = useRef(null);
  const [formState, formDispatch] = useReducer(formReducer, initialState);
  const { books } = useSelector(state => {
@ -200,10 +201,8 @@ const Form: React.FunctionComponent<Props> = ({
      if (bookSelectorInputRef.current) {
        bookSelectorInputRef.current.blur();
      }
-    } else {
-      if (bookSelectorInputRef.current) {
-        bookSelectorInputRef.current.focus();
-      }
+    } else if (bookSelectorInputRef.current) {
+      bookSelectorInputRef.current.focus();
    }
  }, [formState.bookDomain, isEditing]);

@ -356,7 +355,7 @@ const Form: React.FunctionComponent<Props> = ({

                formDispatch({
                  type: Action.setFrequency,
-                  data: Number.parseInt(value)
+                  data: Number.parseInt(value, 10)
                });
              }}
            >
@ -393,6 +392,7 @@ const Form: React.FunctionComponent<Props> = ({
            >
              {[...Array(24)].map((_, i) => {
                return (
+                  // eslint-disable-next-line react/no-array-index-key
                  <option key={i} value={i}>
                    {i}
                  </option>
@ -421,6 +421,7 @@ const Form: React.FunctionComponent<Props> = ({
            >
              {[...Array(60)].map((_, i) => {
                return (
+                  // eslint-disable-next-line react/no-array-index-key
                  <option key={i} value={i}>
                    {i}
                  </option>
@ -454,7 +455,7 @@ const Form: React.FunctionComponent<Props> = ({
            if (value === '') {
              data = '';
            } else {
-              data = Number.parseInt(value);
+              data = Number.parseInt(value, 10);
            }

            formDispatch({
@ -502,7 +503,6 @@ const Form: React.FunctionComponent<Props> = ({
            const ok = window.confirm('Are you sure?');
            if (!ok) {
              e.preventDefault();
-              return;
            }
          }}
          className="button button-second button-normal"
--- a/web/src/components/Repetition/New/index.tsx
+++ b/web/src/components/Repetition/New/index.tsx
@ -22,7 +22,6 @@ import { Link, withRouter, RouteComponentProps } from 'react-router-dom';
 import classnames from 'classnames';

 import { getRepetitionsPath, repetitionsPathDef } from 'web/libs/paths';
-import { BookDomain } from 'jslib/operations/types';
 import {
  getRepetitionRules,
  createRepetitionRule
--- a/web/src/components/Repetition/RepetitionItem/Actions.tsx
+++ b/web/src/components/Repetition/RepetitionItem/Actions.tsx
@ -16,14 +16,12 @@
 * along with Dnote.  If not, see <https://www.gnu.org/licenses/>.
 */

-import React, { useState, useRef } from 'react';
 import classnames from 'classnames';
+import React, { useRef, useState } from 'react';
 import { Link } from 'react-router-dom';
-
-import ItemActions from '../../Common/ItemActions';
-import DotsIcon from '../../Icons/Dots';
-import ItemActionsStyles from '../../Common/ItemActions/ItemActions.scss';
 import { getEditRepetitionPath } from '../../../libs/paths';
+import ItemActions from '../../Common/ItemActions';
+import ItemActionsStyles from '../../Common/ItemActions/ItemActions.scss';

 interface Props {
  isActive: boolean;
--- a/web/src/components/Repetition/RepetitionItem/index.tsx
+++ b/web/src/components/Repetition/RepetitionItem/index.tsx
@ -16,20 +16,18 @@
 * along with Dnote.  If not, see <https://www.gnu.org/licenses/>.
 */

-import React, { useState } from 'react';
 import classnames from 'classnames';
-
 import { RepetitionRuleData } from 'jslib/operations/types';
+import React, { useState } from 'react';
 import {
  msToDuration,
  msToHTMLTimeDuration,
-  timeAgo,
-  relativeTimeDiff
+  relativeTimeDiff,
+  timeAgo
 } from 'web/helpers/time';
-import formatTime from 'web/helpers/time/format';
+import Time from '../../Common/Time';
 import Actions from './Actions';
 import BookMeta from './BookMeta';
-import Time from '../../Common/Time';
 import styles from './RepetitionItem.scss';

 interface Props {
--- a/web/src/components/Settings/About/index.tsx
+++ b/web/src/components/Settings/About/index.tsx
@ -16,14 +16,12 @@
 * along with Dnote.  If not, see <https://www.gnu.org/licenses/>.
 */

-import React, { useState } from 'react';
+import React from 'react';
 import Helmet from 'react-helmet';
-import classnames from 'classnames';
-
+import config from '../../../libs/config';
+import { useSelector } from '../../../store';
 import SettingRow from '../SettingRow';
 import styles from '../Settings.scss';
-import { useSelector } from '../../../store';
-import config from '../../../libs/config';

 interface Props {}

--- a/web/src/components/Settings/Account/EmailModal.tsx
+++ b/web/src/components/Settings/Account/EmailModal.tsx
@ -16,17 +16,15 @@
 * along with Dnote.  If not, see <https://www.gnu.org/licenses/>.
 */

-import React, { useState, useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { connect } from 'react-redux';
-
 import services from 'web/libs/services';
-import { getCurrentUser } from '../../../store/auth';
 import { useDispatch } from '../../../store';
+import { getCurrentUser } from '../../../store/auth';
 import Button from '../../Common/Button';
-import Modal, { Header, Body } from '../../Common/Modal';
 import Flash from '../../Common/Flash';
+import Modal, { Body, Header } from '../../Common/Modal';
 import modalStyles from '../../Common/Modal/Modal.scss';
-import settingsStyles from '../Settings.scss';

 interface Props {
  currentEmail: string;
@ -34,7 +32,11 @@ interface Props {
  onDismiss: () => void;
 }

-const EmailModal: React.FunctionComponent<Props> = ({ currentEmail, isOpen, onDismiss }) => {
+const EmailModal: React.FunctionComponent<Props> = ({
+  currentEmail,
+  isOpen,
+  onDismiss
+}) => {
  const [passwordVal, setPasswordVal] = useState('');
  const [emailVal, setEmailVal] = useState('');
  const [inProgress, setInProgress] = useState(false);
@ -183,7 +185,4 @@ const mapDispatchToProps = {
  doGetCurrentUser: getCurrentUser
 };

-export default connect(
-  null,
-  mapDispatchToProps
-)(EmailModal);
+export default connect(null, mapDispatchToProps)(EmailModal);
--- a/web/src/components/Settings/Account/PasswordModal.tsx
+++ b/web/src/components/Settings/Account/PasswordModal.tsx
@ -16,13 +16,12 @@
 * along with Dnote.  If not, see <https://www.gnu.org/licenses/>.
 */

-import React, { useState, useEffect } from 'react';
-
+import React, { useEffect, useState } from 'react';
 import services from 'web/libs/services';
+
 import Button from '../../Common/Button';
-import Modal, { Header, Body } from '../../Common/Modal';
 import Flash from '../../Common/Flash';
-import settingsStyles from '../Settings.scss';
+import Modal, { Body, Header } from '../../Common/Modal';
 import modalStyles from '../../Common/Modal/Modal.scss';

 interface Props {
@ -32,7 +31,10 @@ interface Props {

 const labelId = 'password-modal';

-const PasswordModal: React.FunctionComponent<Props> = ({ isOpen, onDismiss }) => {
+const PasswordModal: React.FunctionComponent<Props> = ({
+  isOpen,
+  onDismiss
+}) => {
  const [oldPassword, setOldPassword] = useState('');
  const [newPassword, setNewPassword] = useState('');
  const [newPasswordConfirmation, setNewPasswordConfirmation] = useState('');
--- a/web/src/components/Settings/Billing/PaymentSection/Content.tsx
+++ b/web/src/components/Settings/Billing/PaymentSection/Content.tsx
@ -15,4 +15,3 @@
 * You should have received a copy of the GNU Affero General Public License
 * along with Dnote.  If not, see <https://www.gnu.org/licenses/>.
 */
-
--- a/web/src/components/Settings/Billing/PaymentSection/PaymentMethodRow.tsx
+++ b/web/src/components/Settings/Billing/PaymentSection/PaymentMethodRow.tsx
@ -16,7 +16,7 @@
 * along with Dnote.  If not, see <https://www.gnu.org/licenses/>.
 */

-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import classnames from 'classnames';

 import SettingRow from '../../SettingRow';
--- a/web/src/components/Settings/Billing/PaymentSection/index.tsx
+++ b/web/src/components/Settings/Billing/PaymentSection/index.tsx
@ -17,13 +17,9 @@
 */

 import React, { Fragment } from 'react';
-import classnames from 'classnames';
-
-import PaymentMethodRow from './PaymentMethodRow';
-import settingsStyles from '../../Settings.scss';
 import { SourceData } from '../../../../store/auth/type';
+import PaymentMethodRow from './PaymentMethodRow';
 import Placeholder from './Placeholder';
-import styles from './Placeholder.scss';

 interface Props {
  source: SourceData;
--- a/web/src/components/Settings/Billing/PlanSection/CancelRow.tsx
+++ b/web/src/components/Settings/Billing/PlanSection/CancelRow.tsx
@ -16,7 +16,7 @@
 * along with Dnote.  If not, see <https://www.gnu.org/licenses/>.
 */

-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import classnames from 'classnames';

 import SettingRow from '../../SettingRow';
--- a/web/src/components/Settings/Billing/PlanSection/PlanRow.tsx
+++ b/web/src/components/Settings/Billing/PlanSection/PlanRow.tsx
@ -21,9 +21,9 @@ import { Link } from 'react-router-dom';
 import classnames from 'classnames';

 import { getPlanLabel } from 'web/libs/subscription';
-import LogoIcon from '../../../Icons/Logo';
 import { SECOND } from 'web/helpers/time';
 import formatDate from 'web/helpers/time/format';
+import LogoIcon from '../../../Icons/Logo';
 import styles from './PlanRow.scss';
 import settingRowStyles from '../../SettingRow.scss';

--- a/web/src/components/Settings/Billing/PlanSection/index.tsx
+++ b/web/src/components/Settings/Billing/PlanSection/index.tsx
@ -17,15 +17,12 @@
 */

 import React, { Fragment } from 'react';
-import classnames from 'classnames';

 import PlanRow from './PlanRow';
 import CancelRow from './CancelRow';
 import ReactivateRow from './ReactivateRow';
-import settingsStyles from '../../Settings.scss';
 import { SubscriptionData } from '../../../../store/auth/type';
 import Placeholder from './Placeholder';
-import styles from './Placeholder.scss';

 interface Props {
  subscription: SubscriptionData;
--- a/web/src/components/Settings/Billing/index.tsx
+++ b/web/src/components/Settings/Billing/index.tsx
@ -18,7 +18,6 @@

 import React, { useState, useEffect } from 'react';
 import Helmet from 'react-helmet';
-import classnames from 'classnames';

 import { useScript } from 'web/libs/hooks';
 import { useSelector, useDispatch } from '../../../store';
@ -31,7 +30,6 @@ import {
  getSource,
  clearSource
 } from '../../../store/auth';
-import SettingRow from '../SettingRow';
 import PlanSection from './PlanSection';
 import PaymentSection from './PaymentSection';
 import styles from '../Settings.scss';
@ -64,7 +62,6 @@ const Billing: React.FunctionComponent = () => {
  });

  const subscription = subscriptionData.data;
-  const source = sourceData.data;

  const key = `${__STRIPE_PUBLIC_KEY__}`;

--- a/web/src/components/Subscription/Checkout/Form.tsx
+++ b/web/src/components/Subscription/Checkout/Form.tsx
@ -41,7 +41,11 @@ interface Props extends RouteComponentProps {
  history: History;
 }

-const Form: React.FunctionComponent<Props> = ({ stripe, stripeLoadError, history }) => {
+const Form: React.FunctionComponent<Props> = ({
+  stripe,
+  stripeLoadError,
+  history
+}) => {
  const [nameOnCard, setNameOnCard] = useState('');
  const cardElementRef = useRef(null);
  const [cardElementLoaded, setCardElementLoaded] = useState(false);
--- a/web/src/helpers/time/format.ts
+++ b/web/src/helpers/time/format.ts
@ -16,20 +16,11 @@
 * along with Dnote.  If not, see <https://www.gnu.org/licenses/>.
 */

-import {
-  getMonthName,
-  getUTCOffset,
-  pad,
-  nanosecToMillisec,
-  DAY,
-  timeAgo,
-  getDayName
-} from './index';
-import { addOrdinalSuffix } from '../..//libs/string';
+import { getMonthName, getUTCOffset, pad, getDayName } from './index';
+import { addOrdinalSuffix } from '../../libs/string';

 // format verbs
 const YYYY = '%YYYY';
-const YYY = '%YYY';
 const YY = '%YY';
 const MMMM = '%MMMM';
 const MMM = '%MMM';
@ -49,10 +40,10 @@ const dddd = '%dddd';

 // getPeriod returns the period for the time for the given date
 function getPeriod(date: Date) {
-  const h = date.getHours();
+  const hour = date.getHours();

  let ret;
-  if (h > 12) {
+  if (hour > 12) {
    ret = 'PM';
  } else {
    ret = 'AM';
@ -110,14 +101,14 @@ export default function formatTime(date: Date, format: string): string {
  }

  if (ret.indexOf(hh) > -1) {
-    const h = date.getHours();
+    const hour = date.getHours();

-    ret = ret.replace(new RegExp(hh, 'g'), pad(h));
+    ret = ret.replace(new RegExp(hh, 'g'), pad(hour));
  }
  if (ret.indexOf(h) > -1) {
    let hour = date.getHours();
    if (hour > 12) {
-      hour = hour - 12;
+      hour -= 12;
    }

    ret = ret.replace(new RegExp(h, 'g'), hour.toString());
--- a/Show more
+++ b/Show more