Merge remote-tracking branch 'upstream/master' into reportsOptimize

.eslintrc.js

@@ -82,7 +82,6 @@ module.exports = {
 
     // TODO: re-enable these rules
     'react-hooks/exhaustive-deps': 'off',
-    'react/no-children-prop': 'off',
     'react/display-name': 'off',
     'react/react-in-jsx-scope': 'off',
     // 'react-hooks/exhaustive-deps': [
@@ -240,7 +239,27 @@ module.exports = {
         './packages/api/app/**/*',
         './packages/crdt/**/*',
         './packages/desktop-client/src/*',
-        // './packages/desktop-client/src/components/**/*',
+        './packages/desktop-client/src/components/*',
+        './packages/desktop-client/src/components/accounts/**/*',
+        './packages/desktop-client/src/components/autocomplete/**/*',
+        './packages/desktop-client/src/components/budget/**/*',
+        './packages/desktop-client/src/components/common/**/*',
+        './packages/desktop-client/src/components/filters/**/*',
+        './packages/desktop-client/src/components/gocardless/**/*',
+        './packages/desktop-client/src/components/manager/**/*',
+        './packages/desktop-client/src/components/mobile/**/*',
+        './packages/desktop-client/src/components/modals/**/*',
+        './packages/desktop-client/src/components/payees/**/*',
+        './packages/desktop-client/src/components/reports/**/*',
+        './packages/desktop-client/src/components/responsive/**/*',
+        './packages/desktop-client/src/components/rules/**/*',
+        './packages/desktop-client/src/components/schedules/**/*',
+        './packages/desktop-client/src/components/select/**/*',
+        './packages/desktop-client/src/components/settings/**/*',
+        './packages/desktop-client/src/components/sidebar/**/*',
+        './packages/desktop-client/src/components/spreadsheet/**/*',
+        './packages/desktop-client/src/components/transactions/**/*',
+        './packages/desktop-client/src/components/util/**/*',
         './packages/desktop-client/src/hooks/**/*',
         './packages/desktop-client/src/icons/**/*',
         './packages/desktop-client/src/style/**/*',

packages/api/methods.test.ts

@@ -57,6 +57,109 @@ describe('API CRUD operations', () => {
     await api.loadBudget(budgetName);
   });
 
+  // apis: createCategoryGroup, updateCategoryGroup, deleteCategoryGroup
+  test('CategoryGroups: successfully update category groups', async () => {
+    const month = '2023-10';
+    global.currentMonth = month;
+
+    // create our test category group
+    const mainGroupId = await api.createCategoryGroup({
+      name: 'test-group',
+    });
+
+    let budgetMonth = await api.getBudgetMonth(month);
+    expect(budgetMonth.categoryGroups).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          id: mainGroupId,
+        }),
+      ]),
+    );
+
+    // update group
+    await api.updateCategoryGroup(mainGroupId, {
+      name: 'update-tests',
+    });
+
+    budgetMonth = await api.getBudgetMonth(month);
+    expect(budgetMonth.categoryGroups).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          id: mainGroupId,
+        }),
+      ]),
+    );
+
+    // delete group
+    await api.deleteCategoryGroup(mainGroupId);
+
+    budgetMonth = await api.getBudgetMonth(month);
+    expect(budgetMonth.categoryGroups).toEqual(
+      expect.arrayContaining([
+        expect.not.objectContaining({
+          id: mainGroupId,
+        }),
+      ]),
+    );
+  });
+
+  // apis: createCategory, getCategories, updateCategory, deleteCategory
+  test('Categories: successfully update categories', async () => {
+    const month = '2023-10';
+    global.currentMonth = month;
+
+    // create our test category group
+    const mainGroupId = await api.createCategoryGroup({
+      name: 'test-group',
+    });
+    const secondaryGroupId = await api.createCategoryGroup({
+      name: 'test-secondary-group',
+    });
+    const categoryId = await api.createCategory({
+      name: 'test-budget',
+      group_id: mainGroupId,
+    });
+
+    let categories = await api.getCategories();
+    expect(categories).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          id: categoryId,
+          name: 'test-budget',
+          group_id: mainGroupId,
+        }),
+      ]),
+    );
+
+    // update/move category
+    await api.updateCategory(categoryId, {
+      name: 'updated-budget',
+      group_id: secondaryGroupId,
+    });
+
+    categories = await api.getCategories();
+    expect(categories).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          id: categoryId,
+          name: 'updated-budget',
+          group_id: secondaryGroupId,
+        }),
+      ]),
+    );
+
+    // delete categories
+    await api.deleteCategory(categoryId);
+
+    expect(categories).toEqual(
+      expect.arrayContaining([
+        expect.not.objectContaining({
+          id: categoryId,
+        }),
+      ]),
+    );
+  });
+
   // apis: setBudgetAmount, setBudgetCarryover, getBudgetMonth
   test('Budgets: successfully update budgets', async () => {
     const month = '2023-10';

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

@@ -7,7 +7,7 @@ import { type CSSProperties } from '../style';
 
 import View from './common/View';
 
-let spin = keyframes({
+const spin = keyframes({
   '0%': { transform: 'rotateZ(0deg)' },
   '100%': { transform: 'rotateZ(360deg)' },
 });

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

@@ -68,7 +68,7 @@ function App({
       // don't block on this in case they are offline or something)
       send('get-remote-files').then(files => {
         if (files) {
-          let remoteFile = files.find(f => f.fileId === cloudFileId);
+          const remoteFile = files.find(f => f.fileId === cloudFileId);
           if (remoteFile && remoteFile.deleted) {
             closeBudget();
           }
@@ -122,14 +122,14 @@ function ErrorFallback({ error }: FallbackProps) {
 }
 
 function AppWrapper() {
-  let budgetId = useSelector(
+  const budgetId = useSelector(
     state => state.prefs.local && state.prefs.local.id,
   );
-  let cloudFileId = useSelector(
+  const cloudFileId = useSelector(
     state => state.prefs.local && state.prefs.local.cloudFileId,
   );
-  let loadingText = useSelector(state => state.app.loadingText);
-  let { loadBudget, closeBudget, loadGlobalPrefs, sync } = useActions();
+  const loadingText = useSelector(state => state.app.loadingText);
+  const { loadBudget, closeBudget, loadGlobalPrefs, sync } = useActions();
   const [hiddenScrollbars, setHiddenScrollbars] = useState(
     hasHiddenScrollbars(),
   );

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

@@ -2,9 +2,9 @@ import * as React from 'react';
 
 import { theme } from '../style';
 
-let linesTop = theme.pageBackgroundLineTop; // lines top
-let linesMid = theme.pageBackgroundLineMid; // lines mid
-let linesBottom = theme.pageBackgroundLineBottom; // lines bottom
+const linesTop = theme.pageBackgroundLineTop; // lines top
+const linesMid = theme.pageBackgroundLineMid; // lines mid
+const linesBottom = theme.pageBackgroundLineBottom; // lines bottom
 
 export function BackgroundImage() {
   return (

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

@@ -9,9 +9,9 @@ import Text from './common/Text';
 import View from './common/View';
 
 export default function BankSyncStatus() {
-  let accountsSyncing = useSelector(state => state.account.accountsSyncing);
+  const accountsSyncing = useSelector(state => state.account.accountsSyncing);
 
-  let name = accountsSyncing
+  const name = accountsSyncing
     ? accountsSyncing === '__all'
       ? 'accounts'
       : accountsSyncing

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

@@ -113,8 +113,8 @@ function RenderUIError() {
 }
 
 function SharedArrayBufferOverride() {
-  let [expanded, setExpanded] = useState(false);
-  let [understand, setUnderstand] = useState(false);
+  const [expanded, setExpanded] = useState(false);
+  const [understand, setUnderstand] = useState(false);
 
   return expanded ? (
     <>
@@ -152,7 +152,7 @@ function SharedArrayBufferOverride() {
 }
 
 function FatalError({ buttonText, error }: FatalErrorProps) {
-  let [showError, setShowError] = useState(false);
+  const [showError, setShowError] = useState(false);
 
   const showSimpleRender = 'type' in error && error.type === 'app-init-failure';
 

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

@@ -71,7 +71,7 @@ function WideNotSupported({ children, redirectTo = '/budget' }) {
 }
 
 function RouterBehaviors({ getAccounts }) {
-  let navigate = useNavigate();
+  const navigate = useNavigate();
   useEffect(() => {
     // Get the accounts and check if any exist. If there are no
     // accounts, we want to redirect the user to the All Accounts
@@ -83,8 +83,8 @@ function RouterBehaviors({ getAccounts }) {
     });
   }, []);
 
-  let location = useLocation();
-  let href = useHref(location);
+  const location = useLocation();
+  const href = useHref(location);
   useEffect(() => {
     undo.setUndoState('url', href);
   }, [href]);
@@ -93,7 +93,7 @@ function RouterBehaviors({ getAccounts }) {
 }
 
 function FinancesApp() {
-  let actions = useActions();
+  const actions = useActions();
   useEffect(() => {
     // The default key handler scope
     hotkeys.setScope('app');
@@ -251,7 +251,7 @@ function FinancesApp() {
 }
 
 export default function FinancesAppWithContext() {
-  let app = useMemo(() => <FinancesApp />, []);
+  const app = useMemo(() => <FinancesApp />, []);
 
   return (
     <SpreadsheetProvider>

packages/desktop-client/src/components/FixedSizeList.js

@@ -11,7 +11,7 @@ const IS_SCROLLING_DEBOUNCE_INTERVAL = 150;
 const defaultItemKey = (index, data) => index;
 
 function ResizeObserver({ onResize, children }) {
-  let ref = useResizeObserver(onResize);
+  const ref = useResizeObserver(onResize);
   return children(ref);
 }
 
@@ -92,8 +92,8 @@ export default class FixedSizeList extends PureComponent {
 
   getAnchoredScrollPos() {
     if (this.anchored && this.props.indexForKey && this._outerRef != null) {
-      let index = this.props.indexForKey(this.anchored.key);
-      let baseOffset = this.getOffsetForIndexAndAlignment(index, 'start');
+      const index = this.props.indexForKey(this.anchored.key);
+      const baseOffset = this.getOffsetForIndexAndAlignment(index, 'start');
       return baseOffset + this.anchored.offset;
     }
     return null;
@@ -102,7 +102,7 @@ export default class FixedSizeList extends PureComponent {
   componentDidUpdate() {
     const { scrollOffset, scrollUpdateWasRequested } = this.state;
 
-    let anchoredPos = this.getAnchoredScrollPos();
+    const anchoredPos = this.getAnchoredScrollPos();
     if (anchoredPos != null) {
       const outerRef = this._outerRef;
       outerRef.scrollTop = anchoredPos;
@@ -157,9 +157,9 @@ export default class FixedSizeList extends PureComponent {
     const items = [];
     if (itemCount > 0) {
       for (let index = startIndex; index <= stopIndex; index++) {
-        let key = itemKey(index);
+        const key = itemKey(index);
         let style = this._getItemStyle(index);
-        let lastPosition = this.lastPositions.current.get(key);
+        const lastPosition = this.lastPositions.current.get(key);
         let animating = false;
         positions.set(key, style.top);
 
@@ -191,10 +191,10 @@ export default class FixedSizeList extends PureComponent {
 
     // Read this value AFTER items have been created,
     // So their actual sizes (if variable) are taken into consideration.
-    let estimatedTotalSize = this.getEstimatedTotalSize();
+    const estimatedTotalSize = this.getEstimatedTotalSize();
 
-    let OuterElement = outerElementType || outerTagName || 'div';
-    let InnerElement = innerElementType || innerTagName || 'div';
+    const OuterElement = outerElementType || outerTagName || 'div';
+    const InnerElement = innerElementType || innerTagName || 'div';
 
     return (
       <ResizeObserver onResize={this.onHeaderResize}>
@@ -231,7 +231,7 @@ export default class FixedSizeList extends PureComponent {
   setRowAnimation = flag => {
     this.animationEnabled = flag;
 
-    let outerRef = this._outerRef;
+    const outerRef = this._outerRef;
     if (outerRef) {
       if (this.animationEnabled) {
         outerRef.classList.add('animated');
@@ -246,12 +246,12 @@ export default class FixedSizeList extends PureComponent {
   };
 
   anchor() {
-    let itemKey = this.props.itemKey || defaultItemKey;
+    const itemKey = this.props.itemKey || defaultItemKey;
 
-    let outerRef = this._outerRef;
-    let scrollOffset = outerRef ? outerRef.scrollTop : 0;
-    let index = this.getStartIndexForOffset(scrollOffset);
-    let key = itemKey(index);
+    const outerRef = this._outerRef;
+    const scrollOffset = outerRef ? outerRef.scrollTop : 0;
+    const index = this.getStartIndexForOffset(scrollOffset);
+    const key = itemKey(index);
 
     this.anchored = {
       key,
@@ -434,10 +434,15 @@ export default class FixedSizeList extends PureComponent {
   _getItemStyleCache = memoizeOne((_, __, ___) => ({}));
 
   _getRangeToRender() {
-    let { itemCount, overscanCount } = this.props;
-    let { isScrolling, scrollDirection, scrollOffset } = this.state;
+    const { itemCount, overscanCount } = this.props;
+    const {
+      isScrolling,
+      scrollDirection,
+      scrollOffset: originalScrollOffset,
+    } = this.state;
 
-    let anchoredPos = this.getAnchoredScrollPos();
+    const anchoredPos = this.getAnchoredScrollPos();
+    let scrollOffset = originalScrollOffset;
     if (anchoredPos != null) {
       scrollOffset = anchoredPos;
     }
@@ -469,7 +474,7 @@ export default class FixedSizeList extends PureComponent {
   }
 
   _onScrollVertical = event => {
-    let { scrollTop } = event.currentTarget;
+    const { scrollTop } = event.currentTarget;
 
     this.setState(prevState => {
       if (prevState.scrollOffset === scrollTop) {
@@ -479,7 +484,7 @@ export default class FixedSizeList extends PureComponent {
         return null;
       }
 
-      let scrollOffset = scrollTop;
+      const scrollOffset = scrollTop;
 
       return {
         isScrolling: true,

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

@@ -5,7 +5,7 @@ import * as Platform from 'loot-core/src/client/platform';
 import useNavigate from '../hooks/useNavigate';
 
 export default function GlobalKeys() {
-  let navigate = useNavigate();
+  const navigate = useNavigate();
   useEffect(() => {
     const handleKeys = e => {
       if (Platform.isBrowser) {