♻️ refactor Nordigen and Category autocomplete usage (#784)

The final `Autocomplete` refactors. After this is merged what's remaining is to do extensive testing and address the bugs in actualbudget/actual#773 This PR moves `Nordigen` autocomplete to the new one without using a feature flag. IMO this is a safe change given the simple nature of the Nordigen autocomplete component.
bestbooksandcourses · Mar 18, 2023 · 237c994 · 237c994
1 parent c554f6f
commit 237c994
Show file tree

Hide file tree

Showing 12 changed files with 238 additions and 135 deletions.
diff --git a/packages/desktop-client/src/components/Modals.js b/packages/desktop-client/src/components/Modals.js
@@ -288,6 +288,7 @@ function Modals({
             modalProps={modalProps}
             month={options.month}
             actions={actions}
+            isNewAutocompleteEnabled={isNewAutocompleteEnabled}
             isGoalTemplatesEnabled={isGoalTemplatesEnabled}
           />
         </Route>

diff --git a/packages/desktop-client/src/components/accounts/TransactionsTable.js b/packages/desktop-client/src/components/accounts/TransactionsTable.js
@@ -37,7 +37,8 @@ import {
   titleFirst,
 } from 'loot-core/src/shared/util';
 import LegacyAccountAutocomplete from 'loot-design/src/components/AccountAutocomplete';
-import CategoryAutocomplete from 'loot-design/src/components/CategorySelect';
+import NewCategoryAutocomplete from 'loot-design/src/components/CategoryAutocomplete';
+import LegacyCategoryAutocomplete from 'loot-design/src/components/CategorySelect';
 import { View, Text, Tooltip, Button } from 'loot-design/src/components/common';
 import DateSelect from 'loot-design/src/components/DateSelect';
 import NewAccountAutocomplete from 'loot-design/src/components/NewAccountAutocomplete';
@@ -533,6 +534,9 @@ export const Transaction = React.memo(function Transaction(props) {
   const AccountAutocomplete = isNewAutocompleteEnabled
     ? NewAccountAutocomplete
     : LegacyAccountAutocomplete;
+  const CategoryAutocomplete = isNewAutocompleteEnabled
+    ? NewCategoryAutocomplete
+    : LegacyCategoryAutocomplete;
 
   let dispatchSelected = useSelectedDispatch();
 

diff --git a/packages/desktop-client/src/components/util/GenericInput.js b/packages/desktop-client/src/components/util/GenericInput.js
@@ -4,7 +4,8 @@ import { useSelector } from 'react-redux';
 import { getMonthYearFormat } from 'loot-core/src/shared/months';
 import LegacyAccountAutocomplete from 'loot-design/src/components/AccountAutocomplete';
 import LegacyAutocomplete from 'loot-design/src/components/Autocomplete';
-import CategoryAutocomplete from 'loot-design/src/components/CategorySelect';
+import NewCategoryAutocomplete from 'loot-design/src/components/CategoryAutocomplete';
+import LegacyCategoryAutocomplete from 'loot-design/src/components/CategorySelect';
 import { View, Input } from 'loot-design/src/components/common';
 import DateSelect from 'loot-design/src/components/DateSelect';
 import { Checkbox } from 'loot-design/src/components/forms';
@@ -33,6 +34,9 @@ export default function GenericInput({
   const AccountAutocomplete = isNewAutocompleteEnabled
     ? NewAccountAutocomplete
     : LegacyAccountAutocomplete;
+  const CategoryAutocomplete = isNewAutocompleteEnabled
+    ? NewCategoryAutocomplete
+    : LegacyCategoryAutocomplete;
 
   let { payees, accounts, categoryGroups, dateFormat } = useSelector(state => {
     return {

diff --git a/packages/loot-design/src/components/CategoryAutocomplete.js b/packages/loot-design/src/components/CategoryAutocomplete.js
@@ -0,0 +1,91 @@
+import React, { useMemo } from 'react';
+import { components as SelectComponents } from 'react-select';
+
+import { colors } from '../style';
+import Split from '../svg/v0/Split';
+
+import { View } from './common';
+import Autocomplete from './NewAutocomplete';
+
+const SPLIT_TRANSACTION_KEY = 'split';
+
+export default function CategoryAutocomplete({
+  value,
+  categoryGroups,
+  showSplitOption = false,
+  multi = false,
+  onSplit,
+  ...props
+}) {
+  const options = useMemo(() => {
+    const suggestions = categoryGroups.map(group => ({
+      label: group.name,
+      options: group.categories.map(categ => ({
+        value: categ.id,
+        label: categ.name,
+      })),
+    }));
+
+    if (showSplitOption) {
+      suggestions.unshift({
+        value: SPLIT_TRANSACTION_KEY,
+        label: SPLIT_TRANSACTION_KEY,
+      });
+    }
+
+    return suggestions;
+  }, [categoryGroups, showSplitOption]);
+
+  const allOptions = useMemo(
+    () =>
+      options.reduce(
+        (carry, { options }) => [...carry, ...(options || [])],
+        [],
+      ),
+    [options],
+  );
+
+  return (
+    <Autocomplete
+      options={options}
+      value={
+        multi
+          ? allOptions.filter(item => value.includes(item.value))
+          : allOptions.find(item => item.value === value)
+      }
+      isMulti={multi}
+      components={{
+        Option,
+      }}
+      {...props}
+    />
+  );
+}
+
+function Option(props) {
+  if (props.value === SPLIT_TRANSACTION_KEY) {
+    return (
+      <SelectComponents.Option {...props}>
+        <View
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            fontSize: 11,
+            color: colors.g8,
+            marginLeft: -12,
+            padding: '4px 0',
+          }}
+          data-testid="split-transaction-button"
+        >
+          <Split
+            width={10}
+            height={10}
+            style={{ marginRight: 5, color: 'inherit' }}
+          />
+          Split Transaction
+        </View>
+      </SelectComponents.Option>
+    );
+  }
+  return <SelectComponents.Option {...props} />;
+}
diff --git a/packages/loot-design/src/components/budget/index.js b/packages/loot-design/src/components/budget/index.js
@@ -1,4 +1,5 @@
 import React, { useContext, useState, useMemo } from 'react';
+import { connect } from 'react-redux';
 
 import * as monthUtils from 'loot-core/src/shared/months';
 
@@ -729,7 +730,11 @@ function ExpenseGroup({
   );
 }
 
-function ExpenseCategory({
+const ExpenseCategory = connect(state => ({
+  isNewAutocompleteEnabled: state.prefs.local['flags.newAutocomplete'],
+}))(ExpenseCategoryInternal);
+
+function ExpenseCategoryInternal({
   cat,
   budgetArray,
   editingCell,
@@ -743,6 +748,7 @@ function ExpenseCategory({
   onShowActivity,
   onDragChange,
   onReorder,
+  isNewAutocompleteEnabled,
 }) {
   let dragging = dragState && dragState.item === cat;
 
@@ -801,6 +807,7 @@ function ExpenseCategory({
             onEdit: onEditMonth,
             onBudgetAction,
             onShowActivity,
+            isNewAutocompleteEnabled,
           }}
         />
       </View>

diff --git a/packages/loot-design/src/components/budget/rollover/BudgetSummary.js b/packages/loot-design/src/components/budget/rollover/BudgetSummary.js
@@ -134,7 +134,13 @@ function TotalsList({ prevMonthName, collapsed }) {
   );
 }
 
-function ToBudget({ month, prevMonthName, collapsed, onBudgetAction }) {
+function ToBudget({
+  month,
+  prevMonthName,
+  collapsed,
+  onBudgetAction,
+  isNewAutocompleteEnabled,
+}) {
   return (
     <SheetValue binding={rolloverBudget.toBudget} initialValue={0}>
       {node => {
@@ -231,6 +237,7 @@ function ToBudget({ month, prevMonthName, collapsed, onBudgetAction }) {
                           category,
                         });
                       }}
+                      isNewAutocompleteEnabled={isNewAutocompleteEnabled}
                     />
                   )}
                 </View>
@@ -243,7 +250,11 @@ function ToBudget({ month, prevMonthName, collapsed, onBudgetAction }) {
   );
 }
 
-export function BudgetSummary({ month, isGoalTemplatesEnabled }) {
+export function BudgetSummary({
+  month,
+  isGoalTemplatesEnabled,
+  isNewAutocompleteEnabled,
+}) {
   let {
     currentMonth,
     summaryCollapsed: collapsed,
@@ -405,13 +416,18 @@ export function BudgetSummary({ month, isGoalTemplatesEnabled }) {
               prevMonthName={prevMonthName}
               month={month}
               onBudgetAction={onBudgetAction}
+              isNewAutocompleteEnabled={isNewAutocompleteEnabled}
             />
           </View>
         ) : (
           <>
             <TotalsList prevMonthName={prevMonthName} />
             <View style={{ margin: '23px 0' }}>
-              <ToBudget month={month} onBudgetAction={onBudgetAction} />
+              <ToBudget
+                month={month}
+                onBudgetAction={onBudgetAction}
+                isNewAutocompleteEnabled={isNewAutocompleteEnabled}
+              />
             </View>
           </>
         )}

diff --git a/packages/loot-design/src/components/budget/rollover/TransferTooltip.js b/packages/loot-design/src/components/budget/rollover/TransferTooltip.js
@@ -3,7 +3,8 @@ import React, { useState, useContext, useEffect } from 'react';
 import evalArithmetic from 'loot-core/src/shared/arithmetic';
 import { integerToCurrency, amountToInteger } from 'loot-core/src/shared/util';
 
-import CategoryAutocomplete from '../../CategorySelect';
+import NewCategoryAutocomplete from '../../CategoryAutocomplete';
+import LegacyCategoryAutocomplete from '../../CategorySelect';
 import { View, Button, Tooltip, InitialFocus, Input } from '../../common';
 import NamespaceContext from '../../spreadsheet/NamespaceContext';
 import SpreadsheetContext from '../../spreadsheet/SpreadsheetContext';
@@ -16,7 +17,12 @@ export default function TransferTooltip({
   tooltipProps,
   onSubmit,
   onClose,
+  isNewAutocompleteEnabled,
 }) {
+  const CategoryAutocomplete = isNewAutocompleteEnabled
+    ? NewCategoryAutocomplete
+    : LegacyCategoryAutocomplete;
+
   let spreadsheet = useContext(SpreadsheetContext);
   let sheetName = useContext(NamespaceContext);
   let categoryGroups = useContext(CategoryGroupsContext);

diff --git a/packages/loot-design/src/components/budget/rollover/rollover-components.js b/packages/loot-design/src/components/budget/rollover/rollover-components.js
@@ -5,7 +5,8 @@ import evalArithmetic from 'loot-core/src/shared/arithmetic';
 import { integerToCurrency, amountToInteger } from 'loot-core/src/shared/util';
 
 import { styles, colors } from '../../../style';
-import CategoryAutocomplete from '../../CategorySelect';
+import NewCategoryAutocomplete from '../../CategoryAutocomplete';
+import LegacyCategoryAutocomplete from '../../CategorySelect';
 import {
   View,
   Text,
@@ -37,6 +38,7 @@ function CoverTooltip({
   tooltipProps,
   onSubmit,
   onClose,
+  isNewAutocompleteEnabled,
 }) {
   let categoryGroups = useContext(CategoryGroupsContext);
   categoryGroups = addToBeBudgetedGroup(
@@ -51,6 +53,10 @@ function CoverTooltip({
     }
   }
 
+  const CategoryAutocomplete = isNewAutocompleteEnabled
+    ? NewCategoryAutocomplete
+    : LegacyCategoryAutocomplete;
+
   return (
     <Tooltip
       position="bottom-right"
@@ -102,7 +108,13 @@ function CoverTooltip({
   );
 }
 
-function BalanceTooltip({ categoryId, tooltip, monthIndex, onBudgetAction }) {
+function BalanceTooltip({
+  categoryId,
+  tooltip,
+  monthIndex,
+  onBudgetAction,
+  isNewAutocompleteEnabled,
+}) {
   let carryover = useSheetValue(rolloverBudget.catCarryover(categoryId));
   let balance = useSheetValue(rolloverBudget.catBalance(categoryId));
   let [menu, setMenu] = useState('menu');
@@ -160,6 +172,7 @@ function BalanceTooltip({ categoryId, tooltip, monthIndex, onBudgetAction }) {
               to: toCategory,
             });
           }}
+          isNewAutocompleteEnabled={isNewAutocompleteEnabled}
         />
       )}
 
@@ -173,6 +186,7 @@ function BalanceTooltip({ categoryId, tooltip, monthIndex, onBudgetAction }) {
               from: fromCategory,
             });
           }}
+          isNewAutocompleteEnabled={isNewAutocompleteEnabled}
         />
       )}
     </>
@@ -292,6 +306,7 @@ export const ExpenseCategoryMonth = React.memo(function ExpenseCategoryMonth({
   onEdit,
   onBudgetAction,
   onShowActivity,
+  isNewAutocompleteEnabled,
 }) {
   let borderColor = colors.border;
   let balanceTooltip = useTooltip();
@@ -385,6 +400,7 @@ export const ExpenseCategoryMonth = React.memo(function ExpenseCategoryMonth({
             tooltip={balanceTooltip}
             monthIndex={monthIndex}
             onBudgetAction={onBudgetAction}
+            isNewAutocompleteEnabled={isNewAutocompleteEnabled}
           />
         )}
       </Field>

diff --git a/packages/loot-design/src/components/modals/EditField.js b/packages/loot-design/src/components/modals/EditField.js
@@ -9,7 +9,8 @@ import { amountToInteger } from 'loot-core/src/shared/util';
 
 import { colors } from '../../style';
 import LegacyAccountAutocomplete from '../AccountAutocomplete';
-import CategoryAutocomplete from '../CategorySelect';
+import NewCategoryAutocomplete from '../CategoryAutocomplete';
+import LegacyCategoryAutocomplete from '../CategorySelect';
 import { View, Modal, Input } from '../common';
 import DateSelect from '../DateSelect';
 import { SectionLabel } from '../forms';
@@ -56,6 +57,10 @@ function EditField({
     ? NewAccountAutocomplete
     : LegacyAccountAutocomplete;
 
+  const CategoryAutocomplete = isNewAutocompleteEnabled
+    ? NewCategoryAutocomplete
+    : LegacyCategoryAutocomplete;
+
   switch (name) {
     case 'date': {
       let today = currentDay();