♻️ (typescript) migrate parts of ImportTransactionModal to TS (#3570)

actualbudget · Oct 9, 2024 · 23de23b · 23de23b
1 parent 79f640c
commit 23de23b
Show file tree

Hide file tree

Showing 15 changed files with 260 additions and 87 deletions.
diff --git a/packages/desktop-client/src/components/forms.tsx b/packages/desktop-client/src/components/forms.tsx
@@ -64,7 +64,9 @@ export const FormField = ({ style, children }: FormFieldProps) => {
 
 // Custom inputs
 
-type CheckboxProps = ComponentProps<'input'>;
+type CheckboxProps = ComponentProps<'input'> & {
+  style?: CSSProperties;
+};
 
 export const Checkbox = (props: CheckboxProps) => {
   return (

diff --git a/...mportTransactionsModal/CheckboxOption.jsx → ...mportTransactionsModal/CheckboxOption.tsx b/...mportTransactionsModal/CheckboxOption.jsx → ...mportTransactionsModal/CheckboxOption.tsx
@@ -1,17 +1,26 @@
-import React from 'react';
+import React, { type ComponentProps, type ReactNode } from 'react';
 
-import { theme } from '../../../style';
+import { type CSSProperties, theme } from '../../../style';
 import { View } from '../../common/View';
 import { Checkbox } from '../../forms';
 
+type CheckboxOptionProps = {
+  id: string;
+  checked?: ComponentProps<typeof Checkbox>['checked'];
+  disabled?: ComponentProps<typeof Checkbox>['disabled'];
+  onChange?: ComponentProps<typeof Checkbox>['onChange'];
+  children: ReactNode;
+  style?: CSSProperties;
+};
+
 export function CheckboxOption({
   id,
   checked,
   disabled,
   onChange,
   children,
   style,
-}) {
+}: CheckboxOptionProps) {
   return (
     <View
       style={{
@@ -33,7 +42,7 @@ export function CheckboxOption({
         htmlFor={id}
         style={{
           userSelect: 'none',
-          color: disabled ? theme.pageTextSubdued : null,
+          color: disabled ? theme.pageTextSubdued : undefined,
         }}
       >
         {children}

diff --git a/...ortTransactionsModal/DateFormatSelect.jsx → ...ortTransactionsModal/DateFormatSelect.tsx b/...ortTransactionsModal/DateFormatSelect.jsx → ...ortTransactionsModal/DateFormatSelect.tsx
@@ -4,14 +4,25 @@ import { Select } from '../../common/Select';
 import { View } from '../../common/View';
 import { SectionLabel } from '../../forms';
 
-import { dateFormats } from './utils';
+import {
+  dateFormats,
+  type ImportTransaction,
+  type FieldMapping,
+} from './utils';
+
+type DateFormatSelectProps = {
+  transactions: ImportTransaction[];
+  fieldMappings: FieldMapping;
+  parseDateFormat?: string;
+  onChange: (newValue: string) => void;
+};
 
 export function DateFormatSelect({
   transactions,
   fieldMappings,
   parseDateFormat,
   onChange,
-}) {
+}: DateFormatSelectProps) {
   // We don't actually care about the delimiter, but we try to render
   // it based on the data we have so far. Look in a transaction and
   // try to figure out what delimiter the date is using, and default

diff --git a/...ImportTransactionsModal/FieldMappings.jsx → ...ImportTransactionsModal/FieldMappings.tsx b/...ImportTransactionsModal/FieldMappings.jsx → ...ImportTransactionsModal/FieldMappings.tsx
@@ -6,23 +6,44 @@ import { SectionLabel } from '../../forms';
 
 import { SelectField } from './SelectField';
 import { SubLabel } from './SubLabel';
-import { stripCsvImportTransaction } from './utils';
+import {
+  stripCsvImportTransaction,
+  type FieldMapping,
+  type ImportTransaction,
+} from './utils';
+
+type FieldMappingsProps = {
+  transactions: ImportTransaction[];
+  mappings?: FieldMapping;
+  onChange: (field: keyof FieldMapping, newValue: string) => void;
+  splitMode: boolean;
+  inOutMode: boolean;
+  hasHeaderRow: boolean;
+};
 
 export function FieldMappings({
   transactions,
-  mappings,
+  mappings = {
+    date: null,
+    amount: null,
+    payee: null,
+    notes: null,
+    inOut: null,
+    category: null,
+    outflow: null,
+    inflow: null,
+  },
   onChange,
   splitMode,
   inOutMode,
   hasHeaderRow,
-}) {
+}: FieldMappingsProps) {
   if (transactions.length === 0) {
     return null;
   }
 
   const trans = stripCsvImportTransaction(transactions[0]);
   const options = Object.keys(trans);
-  mappings = mappings || {};
 
   return (
     <View>

diff --git a/...s/ImportTransactionsModal/InOutOption.jsx → ...s/ImportTransactionsModal/InOutOption.tsx b/...s/ImportTransactionsModal/InOutOption.jsx → ...s/ImportTransactionsModal/InOutOption.tsx
@@ -5,13 +5,21 @@ import { View } from '../../common/View';
 
 import { CheckboxOption } from './CheckboxOption';
 
+type InOutOptionProps = {
+  inOutMode: boolean;
+  outValue: string;
+  disabled: boolean;
+  onToggle: () => void;
+  onChangeText: (newValue: string) => void;
+};
+
 export function InOutOption({
   inOutMode,
   outValue,
   disabled,
   onToggle,
   onChangeText,
-}) {
+}: InOutOptionProps) {
   return (
     <View style={{ flexDirection: 'row', gap: 10, height: 28 }}>
       <CheckboxOption

diff --git a/...ortTransactionsModal/MultiplierOption.jsx → ...ortTransactionsModal/MultiplierOption.tsx b/...ortTransactionsModal/MultiplierOption.jsx → ...ortTransactionsModal/MultiplierOption.tsx
@@ -1,16 +1,23 @@
-import React from 'react';
+import React, { type ComponentProps } from 'react';
 
 import { Input } from '../../common/Input';
 import { View } from '../../common/View';
 
 import { CheckboxOption } from './CheckboxOption';
 
+type MultiplierOptionProps = {
+  multiplierEnabled: boolean;
+  multiplierAmount: string;
+  onToggle: ComponentProps<typeof CheckboxOption>['onChange'];
+  onChangeAmount: (newValue: string) => void;
+};
+
 export function MultiplierOption({
   multiplierEnabled,
   multiplierAmount,
   onToggle,
   onChangeAmount,
-}) {
+}: MultiplierOptionProps) {
   return (
     <View style={{ flexDirection: 'row', gap: 10, height: 28 }}>
       <CheckboxOption

diff --git a/...ls/ImportTransactionsModal/ParsedDate.jsx → ...ls/ImportTransactionsModal/ParsedDate.tsx b/...ls/ImportTransactionsModal/ParsedDate.jsx → ...ls/ImportTransactionsModal/ParsedDate.tsx
@@ -5,7 +5,17 @@ import { Text } from '../../common/Text';
 
 import { formatDate, parseDate } from './utils';
 
-export function ParsedDate({ parseDateFormat, dateFormat, date }) {
+type ParsedDateProps = {
+  parseDateFormat?: Parameters<typeof parseDate>[1];
+  dateFormat: Parameters<typeof parseDate>[1];
+  date?: string;
+};
+
+export function ParsedDate({
+  parseDateFormat,
+  dateFormat,
+  date,
+}: ParsedDateProps) {
   const parsed =
     date &&
     formatDate(

diff --git a/packages/desktop-client/src/components/modals/ImportTransactionsModal/SelectField.jsx b/packages/desktop-client/src/components/modals/ImportTransactionsModal/SelectField.jsx
diff --git a/packages/desktop-client/src/components/modals/ImportTransactionsModal/SelectField.tsx b/packages/desktop-client/src/components/modals/ImportTransactionsModal/SelectField.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+
+import { type CSSProperties } from '../../../style';
+import { Select } from '../../common/Select';
+
+type SelectFieldProps = {
+  style?: CSSProperties;
+  options: string[];
+  value: null | string;
+  onChange: (newValue: string) => void;
+  hasHeaderRow: boolean;
+  firstTransaction: Record<string, unknown>;
+};
+
+export function SelectField({
+  style,
+  options,
+  value,
+  onChange,
+  hasHeaderRow,
+  firstTransaction,
+}: SelectFieldProps) {
+  return (
+    <Select
+      options={[
+        ['choose-field', 'Choose field...'],
+        ...options.map(
+          option =>
+            [
+              option,
+              hasHeaderRow
+                ? option
+                : `Column ${parseInt(option) + 1} (${firstTransaction[option]})`,
+            ] as const,
+        ),
+      ]}
+      value={value === null ? 'choose-field' : value}
+      onChange={onChange}
+      style={style}
+    />
+  );
+}
diff --git a/...dals/ImportTransactionsModal/SubLabel.jsx → ...dals/ImportTransactionsModal/SubLabel.tsx b/...dals/ImportTransactionsModal/SubLabel.jsx → ...dals/ImportTransactionsModal/SubLabel.tsx
@@ -3,7 +3,11 @@ import React from 'react';
 import { theme } from '../../../style';
 import { Text } from '../../common/Text';
 
-export function SubLabel({ title }) {
+type SubLabelProps = {
+  title: string;
+};
+
+export function SubLabel({ title }: SubLabelProps) {
   return (
     <Text style={{ fontSize: 13, marginBottom: 3, color: theme.pageText }}>
       {title}

diff --git a/...s/ImportTransactionsModal/Transaction.jsx → ...s/ImportTransactionsModal/Transaction.tsx b/...s/ImportTransactionsModal/Transaction.jsx → ...s/ImportTransactionsModal/Transaction.tsx
@@ -1,6 +1,7 @@
-import React, { useMemo } from 'react';
+import React, { type ComponentProps, useMemo } from 'react';
 
 import { amountToCurrency } from 'loot-core/src/shared/util';
+import { type CategoryEntity } from 'loot-core/types/models';
 
 import { SvgDownAndRightArrow } from '../../../icons/v2';
 import { theme, styles } from '../../../style';
@@ -11,7 +12,29 @@ import { Checkbox } from '../../forms';
 import { Row, Field } from '../../table';
 
 import { ParsedDate } from './ParsedDate';
-import { applyFieldMappings, formatDate, parseAmountFields } from './utils';
+import {
+  applyFieldMappings,
+  type FieldMapping,
+  formatDate,
+  type ImportTransaction,
+  parseAmountFields,
+} from './utils';
+
+type TransactionProps = {
+  transaction: ImportTransaction;
+  fieldMappings: FieldMapping;
+  showParsed: boolean;
+  parseDateFormat: ComponentProps<typeof ParsedDate>['parseDateFormat'];
+  dateFormat: ComponentProps<typeof ParsedDate>['dateFormat'];
+  splitMode: boolean;
+  inOutMode: boolean;
+  outValue: number;
+  flipAmount: boolean;
+  multiplierAmount: string;
+  categories: CategoryEntity[];
+  onCheckTransaction: (transactionId: string) => void;
+  reconcile: boolean;
+};
 
 export function Transaction({
   transaction: rawTransaction,
@@ -27,7 +50,7 @@ export function Transaction({
   categories,
   onCheckTransaction,
   reconcile,
-}) {
+}: TransactionProps) {
   const categoryList = categories.map(category => category.name);
   const transaction = useMemo(
     () =>
@@ -37,23 +60,34 @@ export function Transaction({
     [rawTransaction, fieldMappings],
   );
 
-  let amount, outflow, inflow;
-  if (rawTransaction.isMatchedTransaction) {
-    amount = rawTransaction.amount;
-    if (splitMode) {
-      outflow = amount < 0 ? -amount : 0;
-      inflow = amount > 0 ? amount : 0;
+  const { amount, outflow, inflow } = useMemo(() => {
+    if (rawTransaction.isMatchedTransaction) {
+      const amount = rawTransaction.amount;
+
+      return {
+        amount,
+        outflow: splitMode ? (amount < 0 ? -amount : 0) : null,
+        inflow: splitMode ? (amount > 0 ? amount : 0) : null,
+      };
     }
-  } else {
-    ({ amount, outflow, inflow } = parseAmountFields(
+
+    return parseAmountFields(
       transaction,
       splitMode,
       inOutMode,
       outValue,
       flipAmount,
       multiplierAmount,
-    ));
-  }
+    );
+  }, [
+    rawTransaction,
+    transaction,
+    splitMode,
+    inOutMode,
+    outValue,
+    flipAmount,
+    multiplierAmount,
+  ]);
 
   return (
     <Row
@@ -214,7 +248,11 @@ export function Transaction({
             <Field
               width={90}
               contentStyle={{ textAlign: 'left', ...styles.tnum }}
-              title={transaction.inOut}
+              title={
+                transaction.inOut === undefined
+                  ? undefined
+                  : String(transaction.inOut)
+              }
             >
               {transaction.inOut}
             </Field>