Revert "Lint JavaScript/TypeScript code (#346)" (#348)

This reverts commit e2e777db54.
2026-03-14 14:35:50 +01:00 · 2019-11-23 17:27:43 +08:00 · 2019-11-23 17:27:43 +08:00 · 628d29c8d1
commit 628d29c8d1
parent e2e777db54
117 changed files with 32567 additions and 12281 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1,5 +1,4 @@
 /vendor
 /build
-/node_modules
 .vagrant
 *.log
--- a/.travis.yml
+++ b/.travis.yml
@ -6,7 +6,6 @@ go:

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

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

-    # 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"
-
+before_script:
  - 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)
-YARN := $(shell command -v yarn 2> /dev/null)
+NPM := $(shell command -v npm 2> /dev/null)
 HUB := $(shell command -v hub 2> /dev/null)

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

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

 	@echo "==> installing js dependencies"

 ifeq ($(CI), true)
-	@(cd ${currentDir} && yarn --unsafe-perm=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)
 else
-	@(cd ${currentDir} && yarn)
+	@(cd ${currentDir}/web && npm install)
+	@(cd ${currentDir}/browser && npm install)
+	@(cd ${currentDir}/jslib && npm install)
 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
@ -59,9 +57,9 @@ test-web:
 	@echo "==> running web test"

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

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

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

--- a/browser/.eslintrc
+++ b/browser/.eslintrc
@ -0,0 +1,16 @@
+{ "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

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

 ## 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. From the monorepo project root, run `make install-js` to install dependencies
+1.  Run `npm install` 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,8 +8,7 @@
    "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\"  ",
-    "lint": "eslint ./src --ext .ts,.tsx,.js"
+    "watch:firefox": "TARGET=firefox NODE_ENV=development concurrently \"webpack --watch\" \"gulp watch\"  "
  },
  "author": "Monomax Software Pty Ltd",
  "license": "GPL-3.0-or-later",
@ -27,17 +26,24 @@
    "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
-yarn clean
+npm run clean

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

 // browser.d.ts
-declare let browser: any;
-declare let chrome: any;
+declare var browser: any;
+declare var 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 let __API_ENDPOINT__: string;
-declare let __WEB_URL__: string;
-declare let __VERSION__: string;
+declare var __API_ENDPOINT__: string;
+declare var __WEB_URL__: string;
+declare var __VERSION__: string;
--- a/browser/src/scripts/components/App.tsx
+++ b/browser/src/scripts/components/App.tsx
@ -17,6 +17,7 @@
 */

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

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

  const dispatch = useDispatch();
-  const { path, auth, settings } = useSelector(state => ({
-    path: state.location.path,
-    auth: state.auth,
-    settings: state.settings
-  }));
+  const { path, auth, settings } = useSelector(state => {
+    return {
+      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,19 +16,23 @@
 * along with Dnote.  If not, see <https://www.gnu.org/licenses/>.
 */

-import React from 'react';
+import React, { useEffect } 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 => state.composer.bookUUID);
+  const currentValue = useSelector(state => {
+    return state.composer.bookUUID;
+  });

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

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

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

  if (composer.bookLabel !== '' && composer.bookUUID === '') {
    opts.push({
@ -69,9 +77,12 @@ const BookSelector: React.FunctionComponent<Props> = ({
  onAfterChange
 }) => {
  const dispatch = useDispatch();
-  const { books } = useSelector(state => ({
-    books: state.books
-  }));
+  const { books, composer } = useSelector(state => {
+    return {
+      books: state.books,
+      composer: state.composer
+    };
+  });
  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, useCallback } from 'react';
+import React, { useState, useEffect, useRef } 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) {
-  return (
-    bookSelectorRef.select &&
+  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 => ({
-    books: state.books
-  }));
+  const { books } = useSelector(state => {
+    return {
+      books: state.books
+    };
+  });

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

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

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

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

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

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

-        // 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);
+        bookUUID = resp.book.uuid;
+      } else {
+        bookUUID = composer.bookUUID;
      }
-    },
-    [
-      settings.apiUrl,
-      composer.bookUUID,
-      composer.content,
-      composer.bookLabel,
-      auth.sessionKey,
-      dispatch
-    ]
-  );
+
+      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);
+    }
+  };

  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, handleSubmit]);
+  }, [composer]);

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

 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 {}
@ -39,8 +45,8 @@ const Home: React.FunctionComponent<Props> = () => {

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

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

      <div className="actions">
-        Don&#39;t have an account?{' '}
+        Don'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,11 +53,6 @@ export default ({ toggleMenu, loggedIn, onLogout }) => (
      )}
    </ul>

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

 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 {
-  const a = document.createElement('a');
+  var 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
@ -44,9 +49,11 @@ function validateFormState({ apiUrl, webUrl }) {
 }

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

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

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

-    setAPIUrl(settingsState.apiUrl);
-    setWebUrl(settingsState.webUrl);
+    setAPIUrl(settings.apiUrl);
+    setWebUrl(settings.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, { useEffect, useState, Fragment } from 'react';
+import React, { Fragment, useEffect, useState } from 'react';

 import {
  KEYCODE_ENTER,
@ -25,6 +25,7 @@ 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';
@ -33,41 +34,43 @@ const Success: React.FunctionComponent = () => {
  const [errorMsg, setErrorMsg] = useState('');

  const dispatch = useDispatch();
-  const { location, settings } = useSelector(state => ({
-    location: state.location,
-    settings: state.settings
-  }));
+  const { location, settings } = useSelector(state => {
+    return {
+      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>
@ -77,10 +80,7 @@ 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,8 +93,7 @@ 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,6 +19,8 @@
 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 } from './types';
+import { LOGIN, LOGOUT, LogoutAction, LoginAction } 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,6 +17,7 @@
 */

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

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

      return {
        ...state,
-        sessionKey,
-        sessionKeyExpiry
+        sessionKey: sessionKey,
+        sessionKeyExpiry: 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: settingsState } = s;
+  const { settings } = s;

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

 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.
-const ext: any = {};
+let 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 = obj => {
+        ext[api].create = function(obj) {
          return new Promise(resolve => {
-            fn(obj, tab => {
+            fn(obj, function(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,11 +17,13 @@
 */

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

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

 export default initServices;
--- a/browser/tsconfig.json
+++ b/browser/tsconfig.json
@ -1,13 +1,13 @@
 {
    "compilerOptions": {
        "sourceMap": true,
-        "noImplicitAny": false,
-        "module": "commonjs",
-        "moduleResolution": "node",
-        "target": "es6",
-        "jsx": "react",
        "esModuleInterop": true,
+        "noImplicitAny": false,
+        "module": "es6",
+        "moduleResolution": "node",
+        "jsx": "react",
        "allowJs": true,
+        "target": "es5",
        "baseUrl": ".",
        "paths": {
            "jslib/*": [
--- a/go.mod
+++ b/go.mod
@ -7,8 +7,6 @@ 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
@ -28,17 +26,14 @@ 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-20191122220453-ac88ee75c92c
-	golang.org/x/sys v0.0.0-20191120155948-bd437916bb0e // indirect
+	golang.org/x/crypto v0.0.0-20190621222207-cc06ce4a13d4
+	golang.org/x/sys v0.0.0-20190624142023-c5567b49c5d0 // 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,13 +44,9 @@ 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=
@ -155,8 +151,6 @@ 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=
@ -172,8 +166,6 @@ 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=
@ -194,9 +186,6 @@ 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=
@ -235,8 +224,6 @@ 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=
@ -248,10 +235,7 @@ 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,8 +8,7 @@
    "build": "tsc",
    "build:watch": "tsc --watch",
    "test": "jest --coverage",
-    "test:watch": "jest --watch",
-    "lint": "eslint ./src --ext .ts,.tsx,.js"
+    "test:watch": "jest --watch"
  },
  "author": "Monomax Software Pty Ltd",
  "license": "AGPL-3.0-or-later",
@ -21,7 +20,9 @@
  },
  "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,6 +16,10 @@
 * 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,4 +19,7 @@
 import * as Helpers from './helpers';
 import * as Operations from './helpers';

-export { Helpers, Operations };
+export {
+  Helpers,
+  Operations
+};
--- a/package.json
+++ b/package.json
@ -1,22 +0,0 @@
-{
-  "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,8 +1,6 @@
 #!/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

@ -11,8 +9,3 @@ 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/.eslintrc
+++ b/web/.eslintrc
@ -2,7 +2,7 @@
  "env": {
    "browser": true,
    "node": true,
-    "jest": true
+    "mocha": true
  },
  "parser": "@typescript-eslint/parser",
  "rules": {
@ -20,7 +20,6 @@
    "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,
@ -41,15 +40,18 @@
    "@typescript-eslint/no-unused-vars": 1,
    "import/no-extraneous-dependencies": ["error", {"devDependencies": ["**/*_test.ts"]}],
    "lines-between-class-members": 0,
-    "react/jsx-fragments": 0,
-    "jsx-a11y/label-has-associated-control": 0,
-    "no-empty": 0
+    "react/jsx-fragments": 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,
@ -62,13 +64,6 @@
    "__CDN_URL__": true,
    "socket": true,
    "webpackIsomorphicTools": true,
-    "StripeCheckout": true,
-
-    // browser
-    "browser": true,
-    "chrome": true,
-    __WEB_URL__: true,
-    __API_ENDPOINT__: true,
-    __VERSION__: true
+    "StripeCheckout": true
  }
 }
--- 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 --ext .ts,.tsx,.js"
+    "lint": "eslint ./src/**/*.ts ./src/**/*.tsx"
  },
  "author": "Monomax Software Pty Ltd",
  "license": "AGPL-3.0-or-later",
@ -22,16 +22,28 @@
    "@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,41 +16,42 @@
 * along with Dnote.  If not, see <https://www.gnu.org/licenses/>.
 */

+import React, { useState, useEffect, Fragment } from 'react';
 import classnames from 'classnames';
-import React, { Fragment, useEffect, useState } from 'react';
+import { hot } from 'react-hot-loader/root';
+import { Switch, Route } from 'react-router';
+import { withRouter, RouteComponentProps } from 'react-router-dom';
 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 {
-  checkCurrentPath,
-  checkCurrentPathIn,
  homePathDef,
-  noFooterPaths,
-  noHeaderPaths,
  notePathDef,
-  subscriptionPaths
+  noHeaderPaths,
+  subscriptionPaths,
+  noFooterPaths,
+  checkCurrentPathIn,
+  checkCurrentPath
 } from 'web/libs/paths';
-import render from '../../routes';
-import { useDispatch, useSelector } from '../../store';
+import { getFiltersFromSearchStr } from 'jslib/helpers/filters';
+import Splash from '../Splash';
 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 MobileMenu from '../Common/MobileMenu';
-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 { 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 './App.global.scss';

 interface Props extends RouteComponentProps<any> {}

@ -197,7 +198,7 @@ const App: React.FunctionComponent<Props> = ({ location }) => {
        <Route path={noFooterPaths} exact component={null} />
        <Route
          path="/"
-          render={() => {
+          render={({ location }) => {
            if (noFooter) {
              return null;
            }
--- a/web/src/components/Books/BookItem/Actions.tsx
+++ b/web/src/components/Books/BookItem/Actions.tsx
@ -16,9 +16,11 @@
 * 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 { BookData } from 'jslib/operations/types';
 import Actions from './Actions';
+import { BookData } from 'jslib/operations/types';

 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,8 +34,10 @@ 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';

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

 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,9 +16,6 @@
 * 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,13 +16,14 @@
 * along with Dnote.  If not, see <https://www.gnu.org/licenses/>.
 */

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

 interface Props {
  sessionKey: string;
--- a/web/src/components/Common/ItemActions/index.tsx
+++ b/web/src/components/Common/ItemActions/index.tsx
@ -16,8 +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 from 'react';
+
 import Menu, { MenuOption } from '../../Common/Menu';
 import DotsIcon from '../../Icons/Dots';
 import styles from './ItemActions.scss';
@ -58,8 +59,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,11 +28,7 @@ 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,14 +16,16 @@
 * along with Dnote.  If not, see <https://www.gnu.org/licenses/>.
 */

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

+import { booksToOptions, filterOptions, Option } from 'jslib/helpers/select';
 import { KEYCODE_BACKSPACE } from 'jslib/helpers/keyboard';
-import { filterOptions, Option } from 'jslib/helpers/select';
-import { useScrollToFocused, useSearchMenuKeydown } from 'web/libs/hooks/dom';
+import { useSearchMenuKeydown, useScrollToFocused } from 'web/libs/hooks/dom';
+import { useSelector } from '../../store';
 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) {
@ -138,8 +140,6 @@ const MultiSelect: React.FunctionComponent<Props> = ({
        'form-select-disabled': disabled
      })}
      ref={wrapperRef}
-      tabIndex={-1}
-      role="listbox"
      onClick={() => {
        if (inputRef.current) {
          inputRef.current.focus();
@ -147,7 +147,6 @@ const MultiSelect: React.FunctionComponent<Props> = ({

        // setIsOpen(!isOpen);
      }}
-      onKeyDown={() => {}}
    >
      <ul className={styles['current-options']}>
        <span
@ -186,11 +185,9 @@ 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;
              }
            }}
@ -240,7 +237,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 { getSubscriptionPath } from 'web/libs/paths';
 import LockIcon from '../Icons/Lock';
+import { getSubscriptionPath } from 'web/libs/paths';
 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,8 +16,6 @@
 * 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,5 +196,8 @@ 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,11 +17,16 @@
 */

 import React from 'react';
-import { msToHTMLTimeDuration } from '../../helpers/time';
+
+import {
+  msToHTMLTimeDuration,
+  getMonthName,
+  getUTCOffset
+} 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,8 +16,9 @@
 * 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 {
@ -55,7 +56,7 @@ const Toggle: React.FunctionComponent<Props> = ({
        />

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

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

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

 interface Props {
  id: string;
@ -43,6 +51,7 @@ 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,17 +16,20 @@
 * 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 React, { useRef, useState } from 'react';
-import { Prompt, RouteComponentProps, withRouter } from 'react-router-dom';
-import { useFocusTextarea } from 'web/libs/hooks/editor';
+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 { useDispatch, useSelector } from '../../store';
-import { createBook } from '../../store/books';
-import { EditorSession, resetEditor } from '../../store/editor';
-import { setMessage } from '../../store/ui';
+import { useFocusTextarea } from 'web/libs/hooks/editor';
 import Editor from '../Common/Editor';
+import { useDispatch, useSelector } from '../../store';
+import { resetEditor, EditorSession } from '../../store/editor';
+import { createBook } from '../../store/books';
+import { setMessage } from '../../store/ui';
 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,17 +16,19 @@
 * along with Dnote.  If not, see <https://www.gnu.org/licenses/>.
 */

-import classnames from 'classnames';
 import React, { useEffect, useState } from 'react';
+import classnames from 'classnames';
+import { Prompt, RouteComponentProps } from 'react-router-dom';
 import Helmet from 'react-helmet';
-import { RouteComponentProps, withRouter } from 'react-router-dom';
+import { 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 Flash from '../Common/Flash';
-import styles from '../New/New.scss';
 import Content from './Content';
+import styles from '../New/New.scss';

 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,8 +19,9 @@
 import React from 'react';
 import { Link } from 'react-router-dom';

-import { getHomePath } from 'web/libs/paths';
 import LogoWithText from '../../Icons/LogoWithText';
+import Logo from '../../Icons/Logo';
+import { getHomePath } from 'web/libs/paths';
 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,12 +20,16 @@ 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;
@ -113,11 +117,7 @@ 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,11 +27,7 @@ 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 { getHomePath } from 'web/libs/paths';
 import { useFilters, useSelector } from '../../../store';
+import { getHomePath } from 'web/libs/paths';
 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,11 +37,7 @@ 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,9 +17,10 @@
 */

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

-const Icon = ({ fill, width, height }: IconProps) => {
+const Icon = ({ fill, width, height, className }: 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,20 +16,23 @@
 * 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 { Prompt, RouteComponentProps, withRouter } from 'react-router-dom';
+import { withRouter } from 'react-router-dom';
+
 import { focusTextarea } from 'web/libs/dom';
-import { useFocus } from 'web/libs/hooks/dom';
+import { getEditorSessionkey } from 'web/libs/editor';
 import operations from 'web/libs/operations';
 import { getNotePath, notePathDef } from 'web/libs/paths';
-import { useDispatch } from '../../store';
-import { createBook } from '../../store/books';
-import { EditorSession, resetEditor } from '../../store/editor';
-import { setMessage } from '../../store/ui';
+import { useFocus } from 'web/libs/hooks/dom';
 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';

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

-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,16 +16,28 @@
 * along with Dnote.  If not, see <https://www.gnu.org/licenses/>.
 */

-import React, { Fragment, useEffect } from 'react';
-import { RouteComponentProps, withRouter } from 'react-router-dom';
+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 { 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 { createSession } from '../../store/editor';
+import { resetEditor, createSession } from '../../store/editor';
+import { createBook } from '../../store/books';
+import { setMessage } from '../../store/ui';
 import Content from './Content';
+import styles from './New.scss';

 interface Props extends RouteComponentProps {}

-const New: React.FunctionComponent<Props> = () => {
+const New: React.FunctionComponent<Props> = ({ history }) => {
  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 } from '../../helpers/time';
+import { nanosecToMillisec, getMonthName } 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,7 +17,10 @@
 */

 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,18 +16,20 @@
 * along with Dnote.  If not, see <https://www.gnu.org/licenses/>.
 */

-import classnames from 'classnames';
-import { NoteData } from 'jslib/operations/types';
 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 operations from 'web/libs/operations';
-import { getNotePath } from 'web/libs/paths';
-import { useDispatch } from '../../../store';
-import { receiveNote } from '../../../store/note';
-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 { setMessage } from '../../../store/ui';
+import { useDispatch } from '../../../store';
+import Button from '../../Common/Button';
 import Toggle from '../../Common/Toggle';
+import { receiveNote } from '../../../store/note';
 import CopyButton from './CopyButton';
 import styles from './ShareModal.scss';

--- a/web/src/components/Note/index.tsx
+++ b/web/src/components/Note/index.tsx
@ -19,6 +19,7 @@
 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,10 +36,7 @@ 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 &#34;{data.title}&#34;</p>
+      <p>Toggle the repetition for "{data.title}"</p>

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

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

@ -33,10 +36,7 @@ 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> = ({

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

  const isFetched = data !== null;

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

+import { getRepetitionRules } from '../../store/repetitionRules';
+import { useDispatch, useSelector } from '../../store';
 import classnames from 'classnames';
 import {
  getNewRepetitionPath,
@ -8,8 +10,6 @@ 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,15 +16,17 @@
 * along with Dnote.  If not, see <https://www.gnu.org/licenses/>.
 */

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

 function getRepetitionRuleByUUID(
@ -71,6 +73,7 @@ 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,15 +16,16 @@
 * along with Dnote.  If not, see <https://www.gnu.org/licenses/>.
 */

-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 { 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 { getRepetitionsPath, repetitionsPathDef } from 'web/libs/paths';
+import Form, { FormState, serializeFormState } from '../Form';
 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,17 +16,20 @@
 * along with Dnote.  If not, see <https://www.gnu.org/licenses/>.
 */

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

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

 interface Props extends RouteComponentProps<Match> {}

-const EditRepetition: React.FunctionComponent<Props> = ({ match }) => {
+const EditRepetition: React.FunctionComponent<Props> = ({ history, 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,20 +16,21 @@
 * along with Dnote.  If not, see <https://www.gnu.org/licenses/>.
 */

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

+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 { Link } from 'react-router-dom';
-import { getRepetitionsPath } from 'web/libs/paths';
-import { daysToMs } from '../../../helpers/time';
+import Modal, { Header, Body } from '../../Common/Modal';
 import { useSelector } from '../../../store';
+import { daysToMs } from '../../../helpers/time';
 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;
@ -71,8 +72,6 @@ interface Props {
  cancelPath?: string;
  initialState?: FormState;
  isEditing?: boolean;
-  // TODO: implement inProgress
-  inProgress?: boolean;
 }

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

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

                formDispatch({
                  type: Action.setFrequency,
-                  data: Number.parseInt(value, 10)
+                  data: Number.parseInt(value)
                });
              }}
            >
@ -392,7 +393,6 @@ 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,7 +421,6 @@ 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>
@ -455,7 +454,7 @@ const Form: React.FunctionComponent<Props> = ({
            if (value === '') {
              data = '';
            } else {
-              data = Number.parseInt(value, 10);
+              data = Number.parseInt(value);
            }

            formDispatch({
@ -503,6 +502,7 @@ 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,6 +22,7 @@ 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,12 +16,14 @@
 * 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 { getEditRepetitionPath } from '../../../libs/paths';
+
 import ItemActions from '../../Common/ItemActions';
+import DotsIcon from '../../Icons/Dots';
 import ItemActionsStyles from '../../Common/ItemActions/ItemActions.scss';
+import { getEditRepetitionPath } from '../../../libs/paths';

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

-import classnames from 'classnames';
-import { RepetitionRuleData } from 'jslib/operations/types';
 import React, { useState } from 'react';
+import classnames from 'classnames';
+
+import { RepetitionRuleData } from 'jslib/operations/types';
 import {
  msToDuration,
  msToHTMLTimeDuration,
-  relativeTimeDiff,
-  timeAgo
+  timeAgo,
+  relativeTimeDiff
 } from 'web/helpers/time';
-import Time from '../../Common/Time';
+import formatTime from 'web/helpers/time/format';
 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,12 +16,14 @@
 * along with Dnote.  If not, see <https://www.gnu.org/licenses/>.
 */

-import React from 'react';
+import React, { useState } from 'react';
 import Helmet from 'react-helmet';
-import config from '../../../libs/config';
-import { useSelector } from '../../../store';
+import classnames from 'classnames';
+
 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,15 +16,17 @@
 * along with Dnote.  If not, see <https://www.gnu.org/licenses/>.
 */

-import React, { useEffect, useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { connect } from 'react-redux';
+
 import services from 'web/libs/services';
-import { useDispatch } from '../../../store';
 import { getCurrentUser } from '../../../store/auth';
+import { useDispatch } from '../../../store';
 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;
@ -32,11 +34,7 @@ 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);
@ -185,4 +183,7 @@ 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,12 +16,13 @@
 * along with Dnote.  If not, see <https://www.gnu.org/licenses/>.
 */

-import React, { useEffect, useState } from 'react';
-import services from 'web/libs/services';
+import React, { useState, useEffect } 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 Modal, { Body, Header } from '../../Common/Modal';
+import settingsStyles from '../Settings.scss';
 import modalStyles from '../../Common/Modal/Modal.scss';

 interface Props {
@ -31,10 +32,7 @@ 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,3 +15,4 @@
 * 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 from 'react';
+import React, { useState, useEffect } 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,9 +17,13 @@
 */

 import React, { Fragment } from 'react';
-import { SourceData } from '../../../../store/auth/type';
+import classnames from 'classnames';
+
 import PaymentMethodRow from './PaymentMethodRow';
+import settingsStyles from '../../Settings.scss';
+import { SourceData } from '../../../../store/auth/type';
 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 from 'react';
+import React, { useState, useEffect } 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,12 +17,15 @@
 */

 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,6 +18,7 @@

 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';
@ -30,6 +31,7 @@ import {
  getSource,
  clearSource
 } from '../../../store/auth';
+import SettingRow from '../SettingRow';
 import PlanSection from './PlanSection';
 import PaymentSection from './PaymentSection';
 import styles from '../Settings.scss';
@ -62,6 +64,7 @@ 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,11 +41,7 @@ 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,11 +16,20 @@
 * along with Dnote.  If not, see <https://www.gnu.org/licenses/>.
 */

-import { getMonthName, getUTCOffset, pad, getDayName } from './index';
-import { addOrdinalSuffix } from '../../libs/string';
+import {
+  getMonthName,
+  getUTCOffset,
+  pad,
+  nanosecToMillisec,
+  DAY,
+  timeAgo,
+  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';
@ -40,10 +49,10 @@ const dddd = '%dddd';

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

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

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

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

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