ci: enable depcheck and fix dependency and linter issues (#233)

* ci: enable depcheck and fix dependency and linter issues

* chore: lock dependency versions

* chore: update dependencies to latest working ones

* chore: fix deprecation createMuiTheme

* chore: revert notistack to v1

.depcheckrc.json

@@ -0,0 +1,3 @@
+{
+  "ignores": ["@types/jest", "@commitlint/config-conventional", "@types/react-router"]
+}

.eslintrc

@@ -8,7 +8,9 @@
     "plugin:@typescript-eslint/recommended",
     "prettier",
     "plugin:prettier/recommended",
-    "plugin:react/recommended"
+    "plugin:react/recommended",
+    "react-app",
+    "react-app/jest"
   ],
   "env": {
     "browser": true,

.github/workflows/check.yaml

@@ -47,6 +47,9 @@ jobs:
         env:
           CI: true
 
+      - name: Dependency check
+        run: npm run depcheck
+
       - name: Build
         run: npm run build
 

package.json

@@ -28,48 +28,56 @@
     "@material-ui/core": "4.12.3",
     "@material-ui/icons": "4.11.2",
     "@material-ui/lab": "4.0.0-alpha.57",
-    "@types/react-router": "5.1.13",
+    "axios": "0.24.0",
-    "@types/react-router-dom": "5.1.7",
-    "axios": "0.21.1",
     "bignumber.js": "9.0.1",
-    "feather-icons": "4.28.0",
+    "formik": "2.2.9",
-    "formik": "2.2.8",
     "formik-material-ui": "3.0.1",
     "material-ui-dropzone": "3.5.0",
-    "notistack": "1.0.9",
+    "notistack": "1.0.10",
     "opener": "1.5.2",
     "qrcode.react": "1.0.1",
     "react": "17.0.2",
-    "react-copy-to-clipboard": "5.0.3",
+    "react-copy-to-clipboard": "5.0.4",
     "react-dom": "17.0.2",
     "react-feather": "2.0.9",
     "react-identicons": "1.2.5",
     "react-router-dom": "5.2.0",
-    "react-syntax-highlighter": "15.4.3",
+    "react-syntax-highlighter": "15.4.4",
-    "semver": "7.3.2",
+    "semver": "7.3.5",
     "serve-handler": "6.1.3"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "5.12.0",
+    "@commitlint/config-conventional": "14.1.0",
-    "@testing-library/react": "11.2.6",
+    "@testing-library/jest-dom": "5.15.0",
-    "@testing-library/user-event": "13.1.5",
+    "@testing-library/react": "12.1.2",
-    "@types/jest": "26.0.22",
+    "@types/jest": "27.0.2",
-    "@types/node": "14.14.41",
+    "@types/qrcode.react": "1.0.2",
-    "@types/qrcode.react": "1.0.1",
+    "@types/react": "17.0.34",
-    "@types/react": "17.0.3",
+    "@types/react-copy-to-clipboard": "5.0.2",
-    "@types/react-copy-to-clipboard": "5.0.0",
+    "@types/react-dom": "17.0.11",
-    "@types/react-dom": "17.0.3",
+    "@types/react-router": "5.1.17",
-    "@types/react-syntax-highlighter": "13.5.0",
+    "@types/react-router-dom": "5.3.2",
-    "@types/semver": "7.3.6",
+    "@types/react-syntax-highlighter": "13.5.2",
-    "eslint": "7.32.0",
+    "@types/semver": "7.3.9",
-    "eslint-config-prettier": "8.3.0",
+    "@typescript-eslint/eslint-plugin": "4.33.0",
-    "eslint-plugin-jest": "24.4.0",
+    "@typescript-eslint/parser": "4.33.0",
-    "eslint-plugin-prettier": "3.4.1",
+    "babel-eslint": "10.1.0",
-    "eslint-plugin-react": "7.24.0",
+    "depcheck": "1.4.2",
-    "prettier": "2.3.2",
+    "eslint": "7.24.0",
+    "eslint-config-prettier": "8.2.0",
+    "eslint-config-react-app": "6.0.0",
+    "eslint-plugin-flowtype": "5.10.0",
+    "eslint-plugin-import": "2.25.2",
+    "eslint-plugin-jest": "24.3.5",
+    "eslint-plugin-jsx-a11y": "6.4.1",
+    "eslint-plugin-prettier": "3.4.0",
+    "eslint-plugin-react": "7.23.2",
+    "eslint-plugin-react-hooks": "4.2.0",
+    "eslint-plugin-testing-library": "3.10.2",
+    "prettier": "2.4.1",
     "react-scripts": "4.0.3",
-    "typescript": "4.2.4",
+    "typescript": "4.4.4",
-    "web-vitals": "1.1.1"
+    "web-vitals": "2.1.2"
   },
   "scripts": {
     "prepare": "npm run build",
@@ -77,6 +85,7 @@
     "build": "react-scripts build",
     "test": "react-scripts test",
     "serve": "node ./serve.js",
+    "depcheck": "depcheck .",
     "lint": "eslint --fix \"src/**/*.ts\" \"src/**/*.tsx\" && prettier --write \"src/**/*.ts\" \"src/**/*.tsx\"",
     "lint:check": "eslint \"src/**/*.ts\" \"src/**/*.tsx\" && prettier --check \"src/**/*.ts\" \"src/**/*.tsx\""
   },
@@ -84,12 +93,6 @@
     "build",
     "serve.js"
   ],
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
   "browserslist": {
     "production": [
       ">0.2%",

src/components/WithdrawDepositModal.tsx

@@ -55,7 +55,7 @@ export default function WithdrawDepositModal({
       setOpen(false)
       enqueueSnackbar(`${successMessage} Transaction ${transactionHash}`, { variant: 'success' })
     } catch (e) {
-      enqueueSnackbar(`${errorMessage} Error: ${e.message}`, { variant: 'error' })
+      enqueueSnackbar(`${errorMessage} Error: ${(e as Error).message}`, { variant: 'error' })
     }
   }
 
@@ -71,7 +71,7 @@ export default function WithdrawDepositModal({
 
       if (max && t.toDecimal.isGreaterThan(max)) setAmountError(new Error(`Needs to be less than ${max}`))
     } catch (e) {
-      setAmountError(e)
+      setAmountError(e as Error)
     }
   }
 

src/hooks/accounting.ts

@@ -100,7 +100,7 @@ export const useAccounting = (
       setUncashedAmounts(results.fulfilled)
       setIsloadingUncashed(false)
     })
-  }, [settlements, isLoadingUncashed, uncashedAmounts])
+  }, [settlements, isLoadingUncashed, uncashedAmounts, beeDebugApi])
 
   const accounting = mergeAccounting(balances, settlements?.settlements, uncashedAmounts)
 

src/pages/files/Upload.tsx

@@ -39,7 +39,7 @@ export default function Files(): ReactElement {
 
   useEffect(() => {
     refresh()
-  }, [])
+  }, []) // eslint-disable-line react-hooks/exhaustive-deps
 
   // Choose a postage stamp that has the lowest usage
   useEffect(() => {

src/pages/stamps/CreatePostageStampModal.tsx

@@ -77,7 +77,7 @@ export default function FormDialog({ label }: Props): ReactElement {
           await refresh()
           handleClose()
         } catch (e) {
-          enqueueSnackbar(`Error: ${e.message}`, { variant: 'error' })
+          enqueueSnackbar(`Error: ${(e as Error).message}`, { variant: 'error' })
           actions.setSubmitting(false)
         }
       }}

src/pages/stamps/index.tsx

@@ -30,13 +30,14 @@ export default function Accounting(): ReactElement {
   const { stamps, isLoading, error, start, stop } = useContext(StampsContext)
   const { status } = useContext(BeeContext)
 
-  if (!status.all) return <TroubleshootConnectionCard />
-
   useEffect(() => {
+    if (!status.all) return
     start()
 
     return () => stop()
-  }, [])
+  }, [status]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  if (!status.all) return <TroubleshootConnectionCard />
 
   return (
     <div className={classes.root}>

src/providers/Bee.tsx

@@ -153,7 +153,7 @@ export function Provider({ children }: Props): ReactElement {
     setApiHealth(false)
 
     refresh()
-  }, [beeApi])
+  }, [beeApi]) // eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => {
     setIsLoading(true)
@@ -169,7 +169,7 @@ export function Provider({ children }: Props): ReactElement {
     setSettlements(null)
 
     refresh()
-  }, [beeDebugApi])
+  }, [beeDebugApi]) // eslint-disable-line react-hooks/exhaustive-deps
 
   const refresh = async () => {
     // Don't want to refresh when already refreshing
@@ -279,7 +279,7 @@ export function Provider({ children }: Props): ReactElement {
 
       await Promise.allSettled(promises)
     } catch (e) {
-      setError(e)
+      setError(e as Error)
     } finally {
       setIsLoading(false)
       setIsRefreshing(false)
@@ -300,7 +300,7 @@ export function Provider({ children }: Props): ReactElement {
 
       return () => clearInterval(interval)
     }
-  }, [frequency, beeDebugApi, beeApi])
+  }, [frequency, beeDebugApi, beeApi]) // eslint-disable-line react-hooks/exhaustive-deps
 
   return (
     <Context.Provider

src/providers/Stamps.tsx

@@ -68,7 +68,7 @@ export function Provider({ children }: Props): ReactElement {
       setStamps(stamps.map(enrichStamp))
       setLastUpdate(Date.now())
     } catch (e) {
-      setError(e)
+      setError(e as Error)
     } finally {
       setIsLoading(false)
     }
@@ -87,7 +87,7 @@ export function Provider({ children }: Props): ReactElement {
 
       return () => clearInterval(interval)
     }
-  }, [frequency])
+  }, [frequency]) // eslint-disable-line react-hooks/exhaustive-deps
 
   return (
     <Context.Provider value={{ stamps, error, isLoading, lastUpdate, start, stop, refresh }}>

src/theme.tsx

@@ -1,4 +1,4 @@
-import { createMuiTheme, Theme } from '@material-ui/core/styles'
+import { createTheme, Theme } from '@material-ui/core/styles'
 import { orange } from '@material-ui/core/colors'
 
 declare module '@material-ui/core/styles/createPalette' {
@@ -170,7 +170,7 @@ const propsOverrides = {
   },
 }
 
-export const theme = createMuiTheme({
+export const theme = createTheme({
   palette: {
     type: 'light',
     background: {

src/utils/index.test.ts

@@ -42,7 +42,7 @@ describe('utils', () => {
       1,
       -1,
     ]
-    const wrongValues = [new Function()]
+    const wrongValues = [new Function()] // eslint-disable-line no-new-func
 
     correctValues.forEach(v => {
       test(`testing ${v}`, () => {