Merge branch 'master' into goals_speed2

actualbudget · Jul 18, 2023 · 7ababa5 · 7ababa5
2 parents 8454448 + e6acf52
commit 7ababa5
Show file tree

Hide file tree

Showing 59 changed files with 596 additions and 360 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -50,8 +50,10 @@ module.exports = {
     ),
 
     'react/jsx-no-useless-fragment': 'error',
+    'react/self-closing-comp': 'error',
 
     'rulesdir/typography': 'error',
+    'rulesdir/prefer-if-statement': 'error',
 
     // https://github.com/eslint/eslint/issues/16954
     // https://github.com/eslint/eslint/issues/16953

diff --git a/packages/desktop-client/src/browser-preload.browser.js b/packages/desktop-client/src/browser-preload.browser.js
@@ -52,8 +52,19 @@ global.Actual = {
 
   openFileDialog: async ({ filters = [], properties }) => {
     return new Promise(resolve => {
-      let input = document.createElement('input');
+      let createdElement = false;
+      // Attempt to reuse an already-created file input.
+      let input = document.body.querySelector(
+        'input[id="open-file-dialog-input"]',
+      );
+      if (!input) {
+        createdElement = true;
+        input = document.createElement('input');
+      }
+
       input.type = 'file';
+      input.id = 'open-file-dialog-input';
+      input.value = null;
 
       let filter = filters.find(filter => filter.extensions);
       if (filter) {
@@ -63,15 +74,9 @@ global.Actual = {
       input.style.position = 'absolute';
       input.style.top = '0px';
       input.style.left = '0px';
-      input.dispatchEvent(
-        new MouseEvent('click', {
-          view: window,
-          bubbles: true,
-          cancelable: true,
-        }),
-      );
+      input.style.display = 'none';
 
-      input.addEventListener('change', e => {
+      input.onchange = e => {
         let file = e.target.files[0];
         let filename = file.name.replace(/.*(\.[^.]*)/, 'file$1');
 
@@ -89,7 +94,15 @@ global.Actual = {
             alert('Error reading file');
           };
         }
-      });
+      };
+
+      // In Safari the file input has to be in the DOM for change events to
+      // reliably fire.
+      if (createdElement) {
+        document.body.appendChild(input);
+      }
+
+      input.click();
     });
   },
 

diff --git a/packages/desktop-client/src/components/Background.js b/packages/desktop-client/src/components/Background.js
@@ -16,7 +16,7 @@ function Background({ selected }) {
         background: `url(${BG}) no-repeat center center fixed`,
         backgroundSize: '100% 100%',
       })}
-    ></div>
+    />
   );
 }
 

diff --git a/packages/desktop-client/src/components/DevelopmentTopBar.tsx b/packages/desktop-client/src/components/DevelopmentTopBar.tsx
@@ -16,6 +16,7 @@ export default function DevelopmentTopBar() {
           backgroundColor: colors.y8,
           borderBottom: `1px solid ${colors.y6}`,
           zIndex: 1,
+          flexShrink: 0,
         },
       ]}
     >

diff --git a/packages/desktop-client/src/components/Modals.js b/packages/desktop-client/src/components/Modals.js
@@ -164,7 +164,7 @@ function Modals({
               actions={actions}
               onMoveExternal={options.onMoveExternal}
               onClose={() => {
-                options.onClose && options.onClose();
+                options.onClose?.();
                 send('poll-web-token-stop');
               }}
               onSuccess={options.onSuccess}
@@ -186,7 +186,7 @@ function Modals({
               actions={actions}
               onMoveExternal={options.onMoveExternal}
               onClose={() => {
-                options.onClose && options.onClose();
+                options.onClose?.();
                 send('nordigen-poll-web-token-stop');
               }}
               onSuccess={options.onSuccess}

diff --git a/packages/desktop-client/src/components/NotesButton.tsx b/packages/desktop-client/src/components/NotesButton.tsx
@@ -46,7 +46,7 @@ function NotesTooltip({
           })}
           value={notes || ''}
           onChange={e => setNotes(e.target.value)}
-        ></textarea>
+        />
       ) : (
         <Text
           {...css({

diff --git a/packages/desktop-client/src/components/accounts/Account.js b/packages/desktop-client/src/components/accounts/Account.js
@@ -255,7 +255,7 @@ class AccountInternal extends PureComponent {
   };
 
   refetchTransactions = async () => {
-    this.paged && this.paged.run();
+    this.paged?.run();
   };
 
   fetchTransactions = () => {
@@ -295,7 +295,7 @@ class AccountInternal extends PureComponent {
         const firstLoad = prevData == null;
 
         if (firstLoad) {
-          this.table.current && this.table.current.setRowAnimation(false);
+          this.table.current?.setRowAnimation(false);
 
           if (isFiltered) {
             this.props.splitsExpandedDispatch({
@@ -324,11 +324,11 @@ class AccountInternal extends PureComponent {
             }
 
             if (firstLoad) {
-              this.table.current && this.table.current.scrollToTop();
+              this.table.current?.scrollToTop();
             }
 
             setTimeout(() => {
-              this.table.current && this.table.current.setRowAnimation(true);
+              this.table.current?.setRowAnimation(true);
             }, 0);
           },
         );
@@ -825,9 +825,10 @@ class AccountInternal extends PureComponent {
       this.setState({ conditionsOp: getFilter.conditionsOp });
       this.applyFilters([...getFilter.conditions]);
     } else {
-      savedFilter.status &&
-        this.setState({ conditionsOp: savedFilter.conditionsOp }) &&
+      if (savedFilter.status) {
+        this.setState({ conditionsOp: savedFilter.conditionsOp });
         this.applyFilters([...savedFilter.conditions]);
+      }
     }
     this.setState({ filterId: { ...this.state.filterId, ...savedFilter } });
   };
@@ -852,15 +853,17 @@ class AccountInternal extends PureComponent {
 
   onDeleteFilter = filter => {
     this.applyFilters(this.state.filters.filter(f => f !== filter));
-    this.state.filters.length === 1
-      ? this.setState({ filterId: [] }) &&
-        this.setState({ conditionsOp: 'and' })
-      : this.setState({
-          filterId: {
-            ...this.state.filterId,
-            status: this.state.filterId && 'changed',
-          },
-        });
+    if (this.state.filters.length === 1) {
+      this.setState({ filterId: [] });
+      this.setState({ conditionsOp: 'and' });
+    } else {
+      this.setState({
+        filterId: {
+          ...this.state.filterId,
+          status: this.state.filterId && 'changed',
+        },
+      });
+    }
   };
 
   onApplyFilter = async cond => {

diff --git a/packages/desktop-client/src/components/accounts/MobileAccount.js b/packages/desktop-client/src/components/accounts/MobileAccount.js
@@ -121,7 +121,7 @@ function Account(props) {
             tables.includes('category_mapping') ||
             tables.includes('payee_mapping')
           ) {
-            paged && paged.run();
+            paged?.run();
           }
 
           if (tables.includes('payees') || tables.includes('payee_mapping')) {
@@ -260,7 +260,7 @@ function Account(props) {
                   //   />
                   // }
                   onLoadMore={() => {
-                    paged && paged.fetchNext();
+                    paged?.fetchNext();
                   }}
                   onSearch={onSearch}
                   onSelectTransaction={() => {}} // onSelectTransaction}

diff --git a/packages/desktop-client/src/components/autocomplete/Autocomplete.tsx b/packages/desktop-client/src/components/autocomplete/Autocomplete.tsx
@@ -76,7 +76,7 @@ function fireUpdate(onUpdate, strict, suggestions, index, value) {
     }
   }
 
-  onUpdate && onUpdate(selected, value);
+  onUpdate?.(selected, value);
 }
 
 function defaultRenderInput(props) {
@@ -363,7 +363,7 @@ function SingleAutocomplete({
               focused,
               ...inputProps,
               onFocus: e => {
-                inputProps.onFocus && inputProps.onFocus(e);
+                inputProps.onFocus?.(e);
 
                 if (openOnFocus) {
                   setIsOpen(true);
@@ -372,11 +372,11 @@ function SingleAutocomplete({
               onBlur: e => {
                 // @ts-expect-error Should this be e.nativeEvent
                 e.preventDownshiftDefault = true;
-                inputProps.onBlur && inputProps.onBlur(e);
+                inputProps.onBlur?.(e);
 
                 if (!tableBehavior) {
                   if (e.target.value === '') {
-                    onSelect && onSelect(null, e.target.value);
+                    onSelect?.(null, e.target.value);
                     setSelectedItem(null);
                     setIsOpen(false);
                     return;
@@ -421,11 +421,11 @@ function SingleAutocomplete({
                       // No highlighted item, still allow the table to save the item
                       // as `null`, even though we're allowing the table to move
                       e.preventDefault();
-                      onKeyDown && onKeyDown(e);
+                      onKeyDown?.(e);
                     }
                   } else if (shouldSaveFromKey(e)) {
                     e.preventDefault();
-                    onKeyDown && onKeyDown(e);
+                    onKeyDown?.(e);
                   }
                 }
 
@@ -454,7 +454,7 @@ function SingleAutocomplete({
               onChange: (e: ChangeEvent<HTMLInputElement>) => {
                 const { onChange } = inputProps || {};
                 // @ts-expect-error unsure if onChange needs an event or a string
-                onChange && onChange(e.target.value);
+                onChange?.(e.target.value);
               },
             }),
           )}
@@ -555,7 +555,7 @@ function MultiAutocomplete({
       onRemoveItem(selectedItems[selectedItems.length - 1]);
     }
 
-    prevOnKeyDown && prevOnKeyDown(e);
+    prevOnKeyDown?.(e);
   }
 
   return (

diff --git a/packages/desktop-client/src/components/autocomplete/CategorySelect.tsx b/packages/desktop-client/src/components/autocomplete/CategorySelect.tsx
@@ -1,15 +1,13 @@
 import React, {
   type ComponentProps,
   Fragment,
-  forwardRef,
   useMemo,
   type ReactNode,
 } from 'react';
 
 import Split from '../../icons/v0/Split';
 import { colors } from '../../style';
-import { type HTMLPropsWithStyle } from '../../types/utils';
-import { View, Text, Select } from '../common';
+import { View, Text } from '../common';
 
 import Autocomplete, { defaultFilterSuggestion } from './Autocomplete';
 
@@ -19,30 +17,6 @@ type CategoryGroup = {
   categories: Array<{ id: string; name: string }>;
 };
 
-type NativeCategorySelectProps = HTMLPropsWithStyle<HTMLSelectElement> & {
-  categoryGroups: CategoryGroup[];
-  emptyLabel: string;
-};
-export const NativeCategorySelect = forwardRef<
-  HTMLSelectElement,
-  NativeCategorySelectProps
->(({ categoryGroups, emptyLabel, ...nativeProps }, ref) => {
-  return (
-    <Select {...nativeProps} ref={ref}>
-      <option value="">{emptyLabel || 'Select category...'}</option>
-      {categoryGroups.map(group => (
-        <optgroup key={group.id} label={group.name}>
-          {group.categories.map(category => (
-            <option key={category.id} value={category.id}>
-              {category.name}
-            </option>
-          ))}
-        </optgroup>
-      ))}
-    </Select>
-  );
-});
-
 type CategoryListProps = {
   items: Array<{
     id: string;

diff --git a/packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.js b/packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.js
@@ -217,7 +217,7 @@ export default function PayeeAutocomplete({
 
   async function handleSelect(value, rawInputValue) {
     if (tableBehavior) {
-      onSelect && onSelect(makeNew(value, rawInputValue));
+      onSelect?.(makeNew(value, rawInputValue));
     } else {
       let create = () => dispatch(createPayee(rawInputValue));
 
@@ -228,7 +228,7 @@ export default function PayeeAutocomplete({
           value = await create();
         }
       }
-      onSelect && onSelect(value);
+      onSelect?.(value);
     }
   }
 
@@ -348,7 +348,7 @@ export default function PayeeAutocomplete({
                     }
                   }
                   onClick={() => {
-                    onUpdate && onUpdate(null);
+                    onUpdate?.(null);
                     setFocusTransferPayees(!focusTransferPayees);
                   }}
                 />

diff --git a/packages/desktop-client/src/components/common.tsx b/packages/desktop-client/src/components/common.tsx
@@ -19,7 +19,7 @@ export { default as AlignedText } from './common/AlignedText';
 export { default as Block } from './common/Block';
 export { default as Button, ButtonWithLoading } from './common/Button';
 export { default as Card } from './common/Card';
-export { default as CustomSelect } from './common/CustomSelect';
+export { default as Select } from './common/Select';
 export { default as FormError } from './common/FormError';
 export { default as HoverTarget } from './common/HoverTarget';
 export { default as InitialFocus } from './common/InitialFocus';
@@ -32,7 +32,6 @@ export { default as MenuButton } from './common/MenuButton';
 export { default as MenuTooltip } from './common/MenuTooltip';
 export { default as Modal, ModalButtons } from './common/Modal';
 export { default as Search } from './common/Search';
-export { default as Select } from './common/Select';
 export { default as Stack } from './Stack';
 export { default as Text } from './common/Text';
 export { default as TextOneLine } from './common/TextOneLine';
@@ -157,7 +156,7 @@ export function ButtonLink({
       }}
       {...props}
       onClick={e => {
-        props.onClick && props.onClick(e);
+        props.onClick?.(e);
         navigate(to);
       }}
     />