Add a few more ESLint rules

.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

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>
+    />
   );
 }
 

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}

packages/desktop-client/src/components/NotesButton.tsx

@@ -46,7 +46,7 @@ function NotesTooltip({
           })}
           value={notes || ''}
           onChange={e => setNotes(e.target.value)}
-        ></textarea>
+        />
       ) : (
         <Text
           {...css({

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 => {

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}

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 (

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);
                   }}
                 />

packages/desktop-client/src/components/common.tsx

@@ -156,7 +156,7 @@ export function ButtonLink({
       }}
       {...props}
       onClick={e => {
-        props.onClick && props.onClick(e);
+        props.onClick?.(e);
         navigate(to);
       }}
     />

packages/desktop-client/src/components/common/Input.tsx

@@ -55,13 +55,13 @@ const Input = ({
           onEnter(e);
         }
 
-        nativeProps.onKeyDown && nativeProps.onKeyDown(e);
+        nativeProps.onKeyDown?.(e);
       }}
       onChange={e => {
         if (onUpdate) {
           onUpdate(e.target.value);
         }
-        nativeProps.onChange && nativeProps.onChange(e);
+        nativeProps.onChange?.(e);
       }}
     />
   );

packages/desktop-client/src/components/common/InputWithContent.tsx

@@ -59,11 +59,11 @@ export default function InputWithContent({
         ]}
         onFocus={e => {
           setFocused(true);
-          props.onFocus && props.onFocus(e);
+          props.onFocus?.(e);
         }}
         onBlur={e => {
           setFocused(false);
-          props.onBlur && props.onBlur(e);
+          props.onBlur?.(e);
         }}
       />
       {rightContent}

packages/desktop-client/src/components/common/Menu.tsx

@@ -81,7 +81,7 @@ export default function Menu({
           e.preventDefault();
           const item = items[hoveredIndex];
           if (hoveredIndex !== null && item !== Menu.line) {
-            onMenuSelect && onMenuSelect(item.name);
+            onMenuSelect?.(item.name);
           }
           break;
         default:

packages/desktop-client/src/components/modals/EditRule.js

@@ -725,7 +725,7 @@ export default function EditRule({
         rule.id = newId;
       }
 
-      originalOnSave && originalOnSave(rule);
+      originalOnSave?.(rule);
       modalProps.onClose();
     }
   }

packages/desktop-client/src/components/modals/FixEncryptionKey.js

@@ -45,7 +45,7 @@ export default function FixEncryptionKey({
       }
 
       actions.popModal();
-      onSuccess && onSuccess();
+      onSuccess?.();
     }
   }
 

packages/desktop-client/src/components/modals/NordigenExternalMsg.js

@@ -115,7 +115,7 @@ export default function NordigenExternalMsg({
   }
 
   function onClose() {
-    originalOnClose && originalOnClose();
+    originalOnClose?.();
     modalProps.onClose();
   }
 

packages/desktop-client/src/components/modals/PlaidExternalMsg.js

@@ -43,7 +43,7 @@ export default function PlaidExternalMsg({
   }
 
   function onClose() {
-    originalOnClose && originalOnClose();
+    originalOnClose?.();
     modalProps.onClose();
   }
 

packages/desktop-client/src/components/payees/index.js

@@ -378,7 +378,7 @@ export const ManagePayees = forwardRef(
 
     function applyFilter(f) {
       if (filter !== f) {
-        table.current && table.current.setRowAnimation(false);
+        table.current?.setRowAnimation(false);
         setFilter(f);
         resetAnimation.current = true;
       }
@@ -395,7 +395,7 @@ export const ManagePayees = forwardRef(
         // actually update its contents until the next tick or
         // something? The table keeps being animated without this
         setTimeout(() => {
-          table.current && table.current.setRowAnimation(true);
+          table.current?.setRowAnimation(true);
         }, 0);
         resetAnimation.current = false;
       }

packages/desktop-client/src/components/reports/useReport.js

@@ -12,7 +12,7 @@ function useReport(sheetName, getData) {
       cleanup = c;
     });
     return () => {
-      cleanup && cleanup();
+      cleanup?.();
     };
   }, [getData]);
 

packages/desktop-client/src/components/schedules/SchedulesTable.js

@@ -284,7 +284,7 @@ export function SchedulesTable({
             Recurring
           </Field>
         )}
-        {!minimal && <Field width={40}></Field>}
+        {!minimal && <Field width={40} />}
       </TableHeader>
       <Table
         rowHeight={ROW_HEIGHT}