typecheck

brafdlog · Sep 26, 2024 · a77b795 · a77b795
1 parent 4926475
commit a77b795
Show file tree

Hide file tree

Showing 23 changed files with 100 additions and 85 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -16,7 +16,7 @@ module.exports = {
   parserOptions: {
     ecmaVersion: 12,
     sourceType: 'module',
-    project: './tsconfig.test.json',
+    project: './tsconfig.json',
   },
   plugins: ['@typescript-eslint'],
   ignorePatterns: ['node_modules/**', '**/dist/**'],

diff --git a/package.json b/package.json
@@ -42,6 +42,7 @@
     "@types/lodash": "^4.17.4",
     "@types/node": "20.14.1",
     "@types/react": "^18.3.3",
+    "@types/react-bootstrap-table-next": "^4.0.26",
     "@types/react-dom": "^18.3.0",
     "@types/uuid": "^10.0.0",
     "@typescript-eslint/eslint-plugin": "7.12.0",
@@ -96,7 +97,7 @@
     "react-dom": "^18.3.1",
     "svelte": "^4.2.19",
     "vite-plugin-node-polyfills": "^0.22.0",
-    "web-vitals": "^4.2.0",
+    "web-vitals": "^4.2.3",
     "ynab": "^1.19.0"
   }
 }
diff --git a/packages/renderer/src/accountMetadata.tsx b/packages/renderer/src/accountMetadata.tsx
@@ -52,7 +52,7 @@ const accountMetadata: Record<
   return {
     companyId: accountId,
     companyName: displayName,
-    logo: icons[accountId],
+    logo: icons[accountId as CompanyTypes | OutputVendorName],
   };
 });
 
@@ -111,7 +111,7 @@ export const importers: Account[] = Object.values(CompanyTypes).map(
 
     const importer: Account = {
       id: importerName,
-      companyId,
+      companyId: companyId as CompanyTypes | OutputVendorName,
       displayName: companyName,
       logo,
       type: AccountType.IMPORTER,

diff --git a/packages/renderer/src/components/Body.tsx b/packages/renderer/src/components/Body.tsx
@@ -7,9 +7,10 @@ import { useConfigStore } from '../store/ConfigStore';
 import {
   ModalStatus,
   OutputVendorName,
+  YnabConfig,
   type Account,
   type Exporter,
-  type Importer,
+  type Importer, GoogleSheetsConfig,
 } from '../types';
 import styles from './Body.module.css';
 import CheckForUpdates from './CheckForUpdates';
@@ -84,9 +85,6 @@ const Body = () => {
             {configStore.config?.outputVendors && (
               <AccountsContainer
                 title="תוכנות ניהול תקציב"
-                accounts={configStore.exporters}
-                isScraping={configStore.isScraping}
-                showModal={showModal}
               >
                 <Exporters
                   exporters={configStore.exporters}
@@ -114,16 +112,15 @@ const Body = () => {
               currentAccount && (
                 <EditImporter
                   handleSave={updateImporter}
-                  importer={currentAccount}
+                  importer={currentAccount as Importer}
                   handleDelete={deleteImporter}
                 />
               )}
             {modalStatus === ModalStatus.EXPORTER_SETTINGS &&
               currentAccount && (
                 <EditExporter
-                  handleSave={updateExporter}
-                  exporter={currentAccount}
-                  handleDelete={deleteImporter}
+                  handleSave={updateExporter as (exporter: Exporter | YnabConfig | GoogleSheetsConfig) => Promise<void>}
+                  exporter={currentAccount as Exporter}
                 />
               )}
             {modalStatus === ModalStatus.NEW_SCRAPER && (
@@ -147,7 +144,7 @@ const Body = () => {
         </Button>
         <Image
           src={settingsIcon}
-          onClick={() => showModal(null, ModalStatus.GENERAL_SETTINGS)}
+          onClick={() => showModal({} as Account, ModalStatus.GENERAL_SETTINGS)}
           className={styles.pointer}
         />
         <CheckForUpdates />

diff --git a/packages/renderer/src/components/GeneralSettings.tsx b/packages/renderer/src/components/GeneralSettings.tsx
@@ -34,7 +34,7 @@ function GeneralSettings() {
                 className={styles.input}
                 defaultValue={configStore.config?.scraping.numDaysBack}
                 onBlur={(event) =>
-                  configStore.setNumDaysBack(event.target.value)
+                  configStore.setNumDaysBack(Number(event.target.value))
                 }
                 autoFocus
               />
@@ -45,7 +45,7 @@ function GeneralSettings() {
                 className={styles.input}
                 defaultValue={configStore.config?.scraping.maxConcurrency}
                 onBlur={(event) =>
-                  configStore.setMaxConcurrency(event.target.value)
+                  configStore.setMaxConcurrency(Number(event.target.value))
                 }
               />
             </Form.Group>
@@ -60,7 +60,7 @@ function GeneralSettings() {
               />
             </Form.Group>
             <Form.Group>
-              <Form.Label>כמה זמן לחכות לשליפה? (millisec)</Form.Label>
+              <Form.Label>כמה זמן לחכות לשליפה? (millisecond)</Form.Label>
               <Form.Control
                 className={styles.input}
                 defaultValue={configStore.config?.scraping.timeout}
@@ -74,4 +74,4 @@ function GeneralSettings() {
   );
 }
 
-export default observer(GeneralSettings);
+export default observer(GeneralSettings);
diff --git a/packages/renderer/src/components/accounts/CreateImporter.tsx b/packages/renderer/src/components/accounts/CreateImporter.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 import { importers } from '../../accountMetadata';
-import { type Importer } from '../../types';
+import { type Importer, type Account as AccountType } from '../../types';
 import Account from './Account';
 import styles from './CreateImporter.module.css';
 import EditImporter from './EditImporter';
@@ -16,8 +16,8 @@ export default function CreateImporter({
   cancel,
 }: CreateImporterProps) {
   const [importerToCreate, setImporterToCreate] = useState<Importer>();
-  const handleChooseImporter = (importer: Importer) =>
-    setImporterToCreate({ ...importer, id: uuidv4() });
+  const handleChooseImporter = (importer: AccountType) =>
+    setImporterToCreate({ ...importer, id: uuidv4(), loginFields: {} });
   return (
     <div className={styles.container}>
       {importerToCreate ? (

diff --git a/packages/renderer/src/components/accounts/EditImporter.tsx b/packages/renderer/src/components/accounts/EditImporter.tsx
@@ -32,19 +32,19 @@ export default function EditImporter({
     });
   };
 
-  const checkFieldValidity = (loginFieldName: string, value): boolean => {
+  const checkFieldValidity = (loginFieldName: keyof typeof LOGIN_FIELD_MIN_LENGTH, value: string): boolean => {
     return value.length >= LOGIN_FIELD_MIN_LENGTH[loginFieldName];
   };
 
-  const checkFieldsValidity = (fieldsToCheck) => {
+  const checkFieldsValidity = (fieldsToCheck: Record<string, string>) => {
     setValidated(
       Object.entries(fieldsToCheck).every(([key, value]) =>
-        checkFieldValidity(key, value),
+        checkFieldValidity(key as keyof typeof LOGIN_FIELD_MIN_LENGTH, value),
       ),
     );
   };
 
-  const onLoginFieldChanged = (loginFieldName: string, loginFieldValue) => {
+  const onLoginFieldChanged = (loginFieldName: string, loginFieldValue: string) => {
     setLoginFields((prevLoginFields) => {
       const nextLoginFields = {
         ...prevLoginFields,
@@ -74,15 +74,17 @@ export default function EditImporter({
         />
         <Card.Body className={styles.cardBody}>
           <Form>
-            {IMPORTERS_LOGIN_FIELDS[importer.companyId].map(
-              (loginField, index) => (
+            {IMPORTERS_LOGIN_FIELDS[
+              importer.companyId as keyof typeof IMPORTERS_LOGIN_FIELDS
+              ].map(
+              (loginField: string, index: number) => (
                 <Form.Group
                   key={loginField}
                   className={styles.formGroup}
                   controlId={loginField}
                 >
                   <Form.Control
-                    placeholder={LOGIN_FIELD_DISPLAY_NAMES[loginField]}
+                    placeholder={LOGIN_FIELD_DISPLAY_NAMES[loginField as keyof typeof LOGIN_FIELD_DISPLAY_NAMES]}
                     type={loginField === 'password' ? 'password' : ''}
                     value={loginFields[loginField]}
                     onChange={(event) =>

diff --git a/packages/renderer/src/components/accounts/Importers.tsx b/packages/renderer/src/components/accounts/Importers.tsx
@@ -4,6 +4,7 @@ import resultsIcon from '../../assets/results.svg';
 import {
   AccountStatus,
   ModalStatus,
+  OutputVendorName,
   AccountType as TypeOfAccount,
   type Account as AccountType,
 } from '../../types';
@@ -37,7 +38,7 @@ function Importers({
               account,
               isScraping,
               () => {
-                configStore.openResults(account.companyId);
+                configStore.openResults(account.companyId as OutputVendorName);
               },
             )}
           />

diff --git a/packages/renderer/src/components/exporters/EditExporter.tsx b/packages/renderer/src/components/exporters/EditExporter.tsx
@@ -1,10 +1,10 @@
-import { OutputVendorName, type Exporter, type YnabConfig } from '../../types';
+import { OutputVendorName, type Exporter, type YnabConfig, type GoogleSheetsConfig } from '../../types';
 import EditFileExporter from './EditFileExporter';
 import EditYnabExporter from './EditYnabExporter';
 import EditSheetsExporter from './google-sheets/EditSheetsExporter';
 
 interface EditExporterProps {
-  handleSave: (exporterConfig: Exporter | YnabConfig) => Promise<void>;
+  handleSave: (exporterConfig: Exporter | YnabConfig | GoogleSheetsConfig) => Promise<void>;
   exporter: Exporter;
 }
 
@@ -23,11 +23,11 @@ export default function EditExporter({
   );
   exporterTypeToEditComponent.set(
     OutputVendorName.YNAB,
-    <EditYnabExporter exporterConfig={exporter} handleSave={handleSave} />,
+    <EditYnabExporter exporterConfig={exporter as YnabConfig} handleSave={handleSave} />,
   );
   exporterTypeToEditComponent.set(
     OutputVendorName.GOOGLE_SHEETS,
-    <EditSheetsExporter exporterConfig={exporter} handleSave={handleSave} />,
+    <EditSheetsExporter exporterConfig={exporter as GoogleSheetsConfig} handleSave={handleSave} />,
   );
   return <>{exporterTypeToEditComponent.get(exporter.companyId)}</>;
 }
diff --git a/packages/renderer/src/components/exporters/EditFileExporter.tsx b/packages/renderer/src/components/exporters/EditFileExporter.tsx
@@ -2,7 +2,7 @@ import { showSaveDialog } from '#preload';
 import { observer } from 'mobx-react-lite';
 import React, { useState } from 'react';
 import { Button, Card, Form, Image } from 'react-bootstrap';
-import { type Exporter } from '/@/types';
+import type { CsvConfig, Exporter, JsonConfig } from '/@/types';
 import styles from './EditFileExporter.module.css';
 
 interface EditFileExporterProps {
@@ -63,7 +63,7 @@ const EditFileExporter = ({ handleSave, exporter }: EditFileExporterProps) => {
               <Form.Label>לאיזה קובץ לכתוב את הטרנזאקציות?</Form.Label>
               <Form.Control
                 contentEditable={false}
-                value={exporterConfig.options.filePath}
+                value={(exporterConfig.options as CsvConfig['options'] | JsonConfig['options']).filePath}
                 onClick={selectFolderDialog}
                 onChange={handleChooseFile}
               />

diff --git a/packages/renderer/src/components/exporters/EditYnabExporter.tsx b/packages/renderer/src/components/exporters/EditYnabExporter.tsx
@@ -30,6 +30,16 @@ const EditYnabExporter = ({
   const isValidAccessToken =
     !isLoading && store.ynabAccountData?.status !== INVALID_ACCESS_TOKEN;
 
+  const updateOptionsState = useCallback(
+    (optionUpdates: Partial<YnabConfig['options']>) => {
+      setYnabOptions((prevYnabOptions) => ({
+        ...prevYnabOptions,
+        ...optionUpdates,
+      }));
+    },
+    [],
+  );
+
   // Set default budget id if not set
   useEffect(() => {
     const defaultBudgetId =
@@ -45,16 +55,6 @@ const EditYnabExporter = ({
     }
   }, [ynabOptions, store]);
 
-  const updateOptionsState = useCallback(
-    (optionUpdates: Partial<YnabConfig['options']>) => {
-      setYnabOptions((prevYnabOptions) => ({
-        ...prevYnabOptions,
-        ...optionUpdates,
-      }));
-    },
-    [],
-  );
-
   const handleSaveClick = async () => {
     await handleSave({
       ...exporterConfig,
@@ -65,7 +65,7 @@ const EditYnabExporter = ({
 
   const handleOptionChangeEvent = (
     propertyName: keyof YnabConfig['options'],
-    event: React.ChangeEvent<HTMLInputElement>,
+    event: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>,
   ) => {
     updateOptionsState({ [propertyName]: event.target.value });
   };
@@ -83,7 +83,6 @@ const EditYnabExporter = ({
       <Card className={styles.card}>
         <Image
           className={styles.logo}
-          src={exporterConfig.logo}
           roundedCircle
           width={100}
           height={100}

diff --git a/packages/renderer/src/components/exporters/YnabAccountMappingTable.tsx b/packages/renderer/src/components/exporters/YnabAccountMappingTable.tsx
@@ -4,7 +4,7 @@ import { Button } from 'react-bootstrap';
 import BootstrapTable from 'react-bootstrap-table-next';
 import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css';
 import cellEditFactory, { Type } from 'react-bootstrap-table2-editor';
-import { type YnabConfig } from '../../types';
+import { type YnabAccountDataType, type YnabConfig } from '../../types';
 
 type AccountNumberToYnabAccountIdMappingObject =
   YnabConfig['options']['accountNumbersToYnabAccountIds'];
@@ -44,7 +44,9 @@ const YnabAccountMappingTable = ({
     {
       dataField: 'accountNumber',
       text: 'Account number',
-      editor: {},
+      editor: {
+        type: Type.TEXT,
+      },
     },
     {
       dataField: 'ynabAccountId',
@@ -120,7 +122,7 @@ function accountMappingObjectToArray(
 }
 
 function accountMappingArrayToObject(accountMappingArray: AccountMappingArray) {
-  const mappingObject = {};
+  const mappingObject: AccountNumberToYnabAccountIdMappingObject = {};
   accountMappingArray.forEach(({ accountNumber, ynabAccountId }) => {
     mappingObject[accountNumber] = ynabAccountId;
   });

diff --git a/packages/renderer/src/components/exporters/google-sheets/EditSheetsExporter.tsx b/packages/renderer/src/components/exporters/google-sheets/EditSheetsExporter.tsx
@@ -7,6 +7,7 @@ import styles from '../EditFileExporter.module.css';
 import LoginButton from './LoginButton';
 import SheetsDropdown from './SheetsDropdown';
 import { Status, createSheetIfNew, useTokenStatus } from './hooks';
+import type { Auth } from 'googleapis';
 
 interface EditSheetsExporterProps {
   handleSave: (exporterConfig: GoogleSheetsConfig) => Promise<void>;
@@ -59,7 +60,7 @@ const EditSheetsExporter: React.FC<EditSheetsExporterProps> = ({
   }
 
   if (loginStatus === Status.LOGIN) {
-    const updateCredentials = (credentials: Credentials) => {
+    const updateCredentials = (credentials: Auth.Credentials) => {
       setSheetsConfig((prev) => ({
         ...prev,
         options: {
@@ -76,7 +77,6 @@ const EditSheetsExporter: React.FC<EditSheetsExporterProps> = ({
       <Card className={styles.card}>
         <Image
           className={styles.logo}
-          src={exporterConfig.logo}
           roundedCircle
           width={100}
           height={100}

diff --git a/packages/renderer/src/components/exporters/google-sheets/LoginButton.tsx b/packages/renderer/src/components/exporters/google-sheets/LoginButton.tsx
@@ -19,7 +19,7 @@ const LoginButton: React.FC<LoginButtonProps> = ({ onCredentialsChange }) => {
     } catch (ex) {
       console.error(ex);
       setLoading(false);
-      onCredentialsChange(null);
+      onCredentialsChange({});
     }
   };