Chore: add react-hooks lint and typo (#520)

- node v16.19 - fix Scaper typo from israeli-bank-scrapers - add `eslint-plugin-react-hooks` - add launch debug configurations
brafdlog · Dec 18, 2023 · 2e14456 · 2e14456
1 parent 0fda118
commit 2e14456
Show file tree

Hide file tree

Showing 9 changed files with 92 additions and 38 deletions.
diff --git a/.node-version b/.node-version
@@ -1 +1 @@
-v16
+v16.19
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -0,0 +1,26 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            // first run "yarn serve:debug" and then start this:
+            "name": "Electron: Main",
+            "type": "node",
+            "request": "launch",
+            "protocol": "inspector",
+            "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
+            "windows": {
+                "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
+            },
+            "args": [
+                "--remote-debugging-port=9223",
+                "./dist_electron"
+            ],
+            "outFiles": [
+                "${workspaceFolder}/dist_electron/**/*.js"
+            ],
+        },
+    ]
+}
diff --git a/package.json b/package.json
@@ -11,8 +11,9 @@
   "scripts": {
     "ui": "cd ui-react && yarn start",
     "serve": "concurrently --kill-others-on-fail \"yarn serve-electron\"  \"yarn ui\"",
+    "serve:debug": "concurrently --kill-others-on-fail \"yarn serve-electron:debug\"  \"yarn ui\"",
     "serve-electron": "vue-cli-service electron:serve",
-    "serve-electron:debug": "set DEBUG=israeli-bank-scrapers:* & vue-cli-service electron:serve",
+    "serve-electron:debug": "set DEBUG=israeli-bank-scrapers:* & vue-cli-service electron:serve --debug",
     "serve:docker": "yarn serve --no-sandbox",
     "build": "vue-cli-service electron:build",
     "prebuild": "cd ui-react && yarn && yarn build",

diff --git a/src/backend/commonTypes.ts b/src/backend/commonTypes.ts
@@ -3,7 +3,7 @@ import { CompanyTypes, ScraperCredentials } from 'israeli-bank-scrapers-core';
 import { BudgetSummary, Account } from 'ynab';
 import { Transaction } from 'israeli-bank-scrapers-core/lib/transactions';
 
-export type { ScaperScrapingResult } from 'israeli-bank-scrapers-core';
+export type { ScraperScrapingResult } from 'israeli-bank-scrapers-core';
 export interface Config {
   outputVendors: {
     [OutputVendorName.GOOGLE_SHEETS]?: GoogleSheetsConfig;

diff --git a/src/backend/import/importTransactions.ts b/src/backend/import/importTransactions.ts
@@ -8,7 +8,7 @@ import {
   Config,
   EnrichedTransaction,
   FinancialAccountDetails,
-  ScaperScrapingResult
+  ScraperScrapingResult
 } from '@/backend/commonTypes';
 import { getConfig } from '@/backend/configManager/configManager';
 import * as bankScraper from '@/backend/import/bankScraper';
@@ -132,7 +132,7 @@ async function fetchTransactions(
 }
 
 // eslint-disable-next-line max-len
-async function postProcessTransactions(accountToScrape: AccountToScrapeConfig, scrapeResult: ScaperScrapingResult): Promise<EnrichedTransaction[]> {
+async function postProcessTransactions(accountToScrape: AccountToScrapeConfig, scrapeResult: ScraperScrapingResult): Promise<EnrichedTransaction[]> {
   if (scrapeResult.accounts) {
     let transactions = scrapeResult.accounts.flatMap((transactionAccount) => {
       return transactionAccount.txns.map((transaction) => enrichTransaction(transaction, accountToScrape.key, transactionAccount.accountNumber));

diff --git a/ui-react/.eslintrc.js b/ui-react/.eslintrc.js
@@ -2,11 +2,10 @@ module.exports = {
   extends: [
     '../.eslintrc.js',
     'plugin:react/recommended',
+    'plugin:react-hooks/recommended',
   ],
-  plugins: [
-    'react',
-  ],
+  plugins: ['react'],
   rules: {
-    '@typescript-eslint/no-unused-vars': 'off'
-  }
+    '@typescript-eslint/no-unused-vars': 'off',
+  },
 };
diff --git a/ui-react/package.json b/ui-react/package.json
@@ -28,6 +28,7 @@
   "devDependencies": {
     "cross-env": "^7.0.3",
     "eslint-friendly-formatter": "^4.0.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "fs-extra": "^10.1.0"
   },
   "scripts": {
@@ -46,7 +47,7 @@
     ],
     "rules": {
       "no-console": "off"
-  }
+    }
   },
   "browserslist": {
     "production": [

diff --git a/ui-react/src/components/accounts/Importers.tsx b/ui-react/src/components/accounts/Importers.tsx
@@ -5,60 +5,87 @@ import settingsIcon from '../../assets/gear.svg';
 import resultsIcon from '../../assets/results.svg';
 import { StoreContext } from '../../Store';
 import {
-  Account as AccountType, AccountStatus, AccountType as TypeOfAccount, ModalStatus
+  Account as AccountType,
+  AccountStatus,
+  AccountType as TypeOfAccount,
+  ModalStatus,
 } from '../../types';
 import Account, { ActionButton } from './Account';
 import NewAccount from './NewAccount';
 
 type ImportersProps = {
-    accounts: AccountType[];
-    isScraping: boolean;
-    showModal: (AccountType, ModalStatus) => void;
-    handleNewAccountClicked?: () => void
-}
+  accounts: AccountType[];
+  isScraping: boolean;
+  showModal: (AccountType, ModalStatus) => void;
+  handleNewAccountClicked?: () => void;
+};
 
 function Importers({
-  accounts, isScraping, showModal, handleNewAccountClicked
+  accounts,
+  isScraping,
+  showModal,
+  handleNewAccountClicked,
 }: ImportersProps) {
+  const store = useContext(StoreContext);
   return (
-        <>
-            {
-                accounts.map((account) => {
-                  return <Account key={account.id} account={account} actionButtons={getActionButtons(showModal, account, isScraping)} />;
-                })
-            }
-            {handleNewAccountClicked ? (
-                <NewAccount onClick={handleNewAccountClicked} />
-            ) : null
-            }
-        </>
+    <>
+      {accounts.map((account) => {
+        return (
+          <Account
+            key={account.id}
+            account={account}
+            actionButtons={getActionButtons(
+              showModal,
+              account,
+              isScraping,
+              () => {
+                store.openResults(account.companyId);
+              },
+            )}
+          />
+        );
+      })}
+      {handleNewAccountClicked ? (
+        <NewAccount onClick={handleNewAccountClicked} />
+      ) : null}
+    </>
   );
 }
 
-export function getActionButtons(showModal, account: AccountType, isScraping): ActionButton[] {
+export function getActionButtons(
+  showModal,
+  account: AccountType,
+  isScraping,
+  openResultsHandler: () => void,
+): ActionButton[] {
   const logsActionButton = {
     icon: logsIcon,
     clickHandler: () => showModal(account, ModalStatus.LOGS),
     tooltipText: 'לוגים',
   };
 
-  const store = useContext(StoreContext);
-
   const accountSettingsActionButton = {
     icon: settingsIcon,
-    clickHandler: () => showModal(account, account.type === TypeOfAccount.IMPORTER
-      ? ModalStatus.IMPORTER_SETTINGS : ModalStatus.EXPORTER_SETTINGS),
-    tooltipText: 'הגדרות'
+    clickHandler: () =>
+      showModal(
+        account,
+        account.type === TypeOfAccount.IMPORTER
+          ? ModalStatus.IMPORTER_SETTINGS
+          : ModalStatus.EXPORTER_SETTINGS,
+      ),
+    tooltipText: 'הגדרות',
   };
 
   const actionButtons: ActionButton[] = [];
 
-  const shouldLog = account.status !== AccountStatus.PENDING && account.status !== AccountStatus.IDLE;
+  const shouldLog =
+    account.status !== AccountStatus.PENDING &&
+    account.status !== AccountStatus.IDLE;
 
   const openResultsButton = {
     icon: resultsIcon,
     tooltipText: 'פתיחת תוצאות',
-    clickHandler: () => { store.openResults(account.companyId); },
+    clickHandler: openResultsHandler,
   };
 
   if (shouldLog) {

diff --git a/ui-react/yarn.lock b/ui-react/yarn.lock
@@ -4963,7 +4963,7 @@ eslint-plugin-jsx-a11y@^6.3.1:
     minimatch "^3.1.2"
     semver "^6.3.0"
 
-eslint-plugin-react-hooks@^4.2.0:
+eslint-plugin-react-hooks@^4.2.0, eslint-plugin-react-hooks@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz#4c3e697ad95b77e93f8646aaa1630c1ba607edd3"
   integrity sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==