fix: infinity scrolling of bank account transactions

packages/webapp/src/components/AppShell/AppContentShell/AppContentShell.tsx

@@ -1,5 +1,9 @@
-import React from 'react';
-import { AppShellProvider, useAppShellContext } from './AppContentShellProvider';
+// @ts-nocheck
+import React, { forwardRef, Ref } from 'react';
+import {
+  AppShellProvider,
+  useAppShellContext,
+} from './AppContentShellProvider';
 import { Box, BoxProps } from '../../Layout';
 import styles from './AppContentShell.module.scss';
 
@@ -12,50 +16,73 @@ interface AppContentShellProps {
   hideMain?: boolean;
 }
 
-export function AppContentShell({
-  asideProps,
-  mainProps,
-  topbarOffset = 0,
-  hideAside = false,
-  hideMain = false,
-  ...restProps
-}: AppContentShellProps) {
-  return (
-    <AppShellProvider
-      mainProps={mainProps}
-      asideProps={asideProps}
-      topbarOffset={topbarOffset}
-      hideAside={hideAside}
-      hideMain={hideMain}
-    >
-      <Box {...restProps} className={styles.root} />
-    </AppShellProvider>
-  );
-}
+export const AppContentShell = forwardRef(
+  (
+    {
+      asideProps,
+      mainProps,
+      topbarOffset = 0,
+      hideAside = false,
+      hideMain = false,
+      ...restProps
+    }: AppContentShellProps,
+    ref: Ref<HTMLDivElement>,
+  ) => {
+    return (
+      <AppShellProvider
+        mainProps={mainProps}
+        asideProps={asideProps}
+        topbarOffset={topbarOffset}
+        hideAside={hideAside}
+        hideMain={hideMain}
+      >
+        <Box {...restProps} className={styles.root} ref={ref} />
+      </AppShellProvider>
+    );
+  },
+);
+AppContentShell.displayName = 'AppContentShell';
 
 interface AppContentShellMainProps extends BoxProps {}
 
-function AppContentShellMain({ ...props }: AppContentShellMainProps) {
-  const { hideMain } = useAppShellContext();
+/**
+ * Main content of the app shell.
+ * @param {AppContentShellMainProps} props -
+ * @returns {React.ReactNode}
+ */
+const AppContentShellMain = forwardRef(
+  ({ ...props }: AppContentShellMainProps, ref: Ref<HTMLDivElement>) => {
+    const { hideMain } = useAppShellContext();
 
-  if (hideMain === true) {
-    return null;
-  }
-  return <Box {...props} className={styles.main} />;
-}
+    if (hideMain === true) {
+      return null;
+    }
+    return <Box {...props} className={styles.main} ref={ref} />;
+  },
+);
+
+AppContentShellMain.displayName = 'AppContentShellMain';
 
 interface AppContentShellAsideProps extends BoxProps {
   children: React.ReactNode;
 }
 
-function AppContentShellAside({ ...props }: AppContentShellAsideProps) {
-  const { hideAside } = useAppShellContext();
+/**
+ * Aside content of the app shell.
+ * @param {AppContentShellAsideProps} props
+ * @returns {React.ReactNode}
+ */
+const AppContentShellAside = forwardRef(
+  ({ ...props }: AppContentShellAsideProps, ref: Ref<HTMLDivElement>) => {
+    const { hideAside } = useAppShellContext();
 
-  if (hideAside === true) {
-    return null;
-  }
-  return <Box {...props} className={styles.aside} />;
-}
+    if (hideAside === true) {
+      return null;
+    }
+    return <Box {...props} className={styles.aside} ref={ref} />;
+  },
+);
+AppContentShellAside.displayName = 'AppContentShellAside';
 
 AppContentShell.Main = AppContentShellMain;
 AppContentShell.Aside = AppContentShellAside;

packages/webapp/src/components/Datatable/TableVirtualizedRows.tsx

@@ -25,14 +25,13 @@ function TableVirtualizedListRow({ index, isScrolling, isVisible, style }) {
 export function TableVirtualizedListRows() {
   const {
     table: { page },
-    props: { vListrowHeight, vListOverscanRowCount },
+    props: { vListrowHeight, vListOverscanRowCount, windowScrollerProps },
   } = useContext(TableContext);
 
   // Dashboard content pane.
-  const dashboardContentPane = React.useMemo(
-    () => document.querySelector(`.${CLASSES.DASHBOARD_CONTENT_PANE}`),
-    [],
-  );
+  const scrollElement =
+    windowScrollerProps?.scrollElement ||
+    document.querySelector(`.${CLASSES.DASHBOARD_CONTENT_PANE}`);
 
   const rowRenderer = React.useCallback(
     ({ key, ...args }) => <TableVirtualizedListRow {...args} key={key} />,
@@ -40,7 +39,7 @@ export function TableVirtualizedListRows() {
   );
 
   return (
-    <WindowScroller scrollElement={dashboardContentPane}>
+    <WindowScroller scrollElement={scrollElement}>
       {({ height, isScrolling, onChildScroll, scrollTop }) => (
         <AutoSizer disableHeight>
           {({ width }) => (

packages/webapp/src/components/Layout/Box/Box.tsx

@@ -1,12 +1,15 @@
-import React from 'react';
+import React, { forwardRef, Ref } from 'react';
 import { HTMLDivProps, Props } from '@blueprintjs/core';
 
 export interface BoxProps extends Props, HTMLDivProps {
   className?: string;
 }
 
-export function Box({ className, ...rest }: BoxProps) {
-  const Element = 'div';
+export const Box = forwardRef(
+  ({ className, ...rest }: BoxProps, ref: Ref<HTMLDivElement>) => {
+    const Element = 'div';
 
-  return <Element className={className} {...rest} />;
-}
+    return <Element className={className} ref={ref} {...rest} />;
+  },
+);
+Box.displayName = '@bigcapital/Box';