chore: update npm dependencies (#68)

Author: jamaljsr

.vscode/settings.json

@@ -63,5 +63,8 @@
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
   },
-  "eslint.workingDirectories": ["./app"]
+  "eslint.workingDirectories": [
+    "./app"
+  ],
+  "eslint.enable": true
 }

app/.eslintrc

@@ -23,6 +23,7 @@
     "react/prop-types": "off",
     "@typescript-eslint/explicit-function-return-type": "off",
     "@typescript-eslint/explicit-member-accessibility": "off",
-    "@typescript-eslint/no-explicit-any": 0
+    "@typescript-eslint/no-explicit-any": 0,
+    "@typescript-eslint/explicit-module-boundary-types": "off"
   }
 }

app/package.json

@@ -20,64 +20,64 @@
     "@emotion/core": "10.0.28",
     "@emotion/styled": "10.0.27",
     "@improbable-eng/grpc-web": "0.12.0",
-    "@types/big.js": "4.0.5",
-    "@types/file-saver": "2.0.1",
-    "@types/react-virtualized": "^9.21.9",
     "big.js": "5.2.2",
+    "bootstrap": "4.5.0",
     "debug": "4.1.1",
     "emotion-theming": "10.0.27",
     "file-saver": "2.0.2",
     "http-proxy-middleware": "1.0.4",
-    "i18next": "19.4.4",
-    "i18next-browser-languagedetector": "4.1.1",
+    "i18next": "19.5.1",
+    "i18next-browser-languagedetector": "5.0.0",
     "lodash": "4.17.15",
-    "lottie-web": "5.6.8",
+    "lottie-web": "5.7.0",
     "mobx": "5.15.4",
-    "mobx-react-lite": "2.0.6",
+    "mobx-react-lite": "2.0.7",
     "mobx-react-router": "4.1.0",
-    "mobx-utils": "5.5.7",
-    "rc-tooltip": "4.2.0",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-i18next": "11.4.0",
+    "mobx-utils": "5.6.1",
+    "rc-tooltip": "4.2.1",
+    "react": "16.13.1",
+    "react-dom": "16.13.1",
+    "react-i18next": "11.7.0",
     "react-router": "5.2.0",
     "react-scripts": "3.4.1",
-    "react-toastify": "6.0.5",
-    "react-virtualized": "^9.21.2"
+    "react-toastify": "6.0.6",
+    "react-virtualized": "9.21.2"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "^5.3.18",
-    "@storybook/addon-docs": "5.3.18",
-    "@storybook/addon-links": "^5.3.18",
-    "@storybook/addons": "^5.3.18",
-    "@storybook/preset-create-react-app": "^2.1.1",
-    "@storybook/react": "^5.3.18",
-    "@testing-library/jest-dom": "^5.5.0",
-    "@testing-library/react": "^10.0.4",
-    "@testing-library/user-event": "^10.1.0",
+    "@storybook/addon-actions": "5.3.19",
+    "@storybook/addon-docs": "5.3.19",
+    "@storybook/addon-links": "5.3.19",
+    "@storybook/addons": "5.3.19",
+    "@storybook/preset-create-react-app": "3.1.2",
+    "@storybook/react": "5.3.19",
+    "@testing-library/jest-dom": "5.11.0",
+    "@testing-library/react": "10.4.3",
+    "@testing-library/user-event": "12.0.11",
+    "@types/big.js": "4.0.5",
     "@types/debug": "4.1.5",
+    "@types/file-saver": "2.0.1",
     "@types/google-protobuf": "3.7.2",
     "@types/history": "4.7.6",
-    "@types/jest": "^25.2.1",
-    "@types/lodash": "4.14.155",
-    "@types/node": "^13.13.5",
-    "@types/react": "^16.9.34",
-    "@types/react-dom": "^16.9.7",
-    "@types/react-router": "5.1.7",
-    "@typescript-eslint/eslint-plugin": "^2.31.0",
-    "@typescript-eslint/parser": "^2.31.0",
-    "bootstrap": "4.4.1",
+    "@types/jest": "26.0.3",
+    "@types/lodash": "4.14.157",
+    "@types/node": "14.0.14",
+    "@types/react": "16.9.41",
+    "@types/react-dom": "16.9.8",
+    "@types/react-router": "5.1.8",
+    "@types/react-virtualized": "9.21.10",
+    "@typescript-eslint/eslint-plugin": "3.5.0",
+    "@typescript-eslint/parser": "3.5.0",
     "cross-env": "7.0.2",
     "eslint-config-prettier": "6.11.0",
-    "eslint-plugin-prettier": "3.1.3",
-    "eslint-plugin-react": "7.19.0",
-    "google-protobuf": "3.11.4",
+    "eslint-plugin-prettier": "3.1.4",
+    "eslint-plugin-react": "7.20.2",
+    "google-protobuf": "3.12.2",
     "jest-canvas-mock": "2.2.0",
     "jest-environment-jsdom-sixteen": "1.0.3",
     "node-sass": "4.14.1",
     "prettier": "2.0.5",
     "ts-protoc-gen": "0.12.0",
-    "typescript": "~3.8.3"
+    "typescript": "~3.9.5"
   },
   "eslintConfig": {
     "extends": "react-app",

app/src/__stories__/LoopPage.stories.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { observable, ObservableMap, values } from 'mobx';
 import { useStore } from 'store';
 import { Channel } from 'store/models';
@@ -23,17 +23,23 @@ const channelSubset = (channels: ObservableMap<string, Channel>) => {
 
 export const Default = () => {
   const { channelStore } = useStore();
-  // only use a small set of channels
-  channelStore.channels = channelSubset(channelStore.channels);
+  useEffect(() => {
+    // only use a small set of channels
+    channelStore.channels = channelSubset(channelStore.channels);
+  }, [channelStore]);
 
   return <LoopPage />;
 };
 
 export const ManyChannels = () => <LoopPage />;
 
 export const InsideLayout = () => {
-  const store = useStore();
-  store.uiStore.goToLoop();
+  const { channelStore } = useStore();
+  useEffect(() => {
+    // only use a small set of channels
+    channelStore.channels = channelSubset(channelStore.channels);
+  }, [channelStore]);
+
   return (
     <Layout>
       <LoopPage />

app/src/hooks/usePrefixedTranslation.ts

@@ -1,5 +1,6 @@
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
+import { StringMap } from 'i18next';
 
 /**
  * A hook which returns a `t` function that inserts a prefix in each key lookup
@@ -9,7 +10,7 @@ const usePrefixedTranslation = (prefix: string) => {
   const { t } = useTranslation();
   // the new `t` function that will append the prefix
   const translate = useCallback(
-    (key: string, options?: string | object) => {
+    (key: string, options?: string | StringMap) => {
       // if the key contains a '.', then don't add the prefix
       return key.includes('.') ? t(key, options) : t(`${prefix}.${key}`, options);
     },

app/src/util/tests/sampleData.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/camelcase */
 import * as LND from 'types/generated/lnd_pb';
 import * as LOOP from 'types/generated/loop_pb';
 

app/src/util/translate.ts

@@ -1,12 +1,12 @@
-import i18n from 'i18next';
+import i18n, { StringMap } from 'i18next';
 
 /**
  * A utility function which returns a `t` function that inserts a prefix in each key lookup
  * @param prefix the prefix to use for all translation keys
  */
 export const prefixTranslation = (prefix: string) => {
   // the new `t` function that will append the prefix
-  const translate = (key: string, options?: string | object) => {
+  const translate = (key: string, options?: string | StringMap) => {
     return i18n.t(`${prefix}.${key}`, options);
   };