Refactor Movie index to use react-window

frontend/src/Components/Page/PageContentBody.js

@@ -1,61 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import Scroller from 'Components/Scroller/Scroller';
-import { scrollDirections } from 'Helpers/Props';
-import { isLocked } from 'Utilities/scrollLock';
-import styles from './PageContentBody.css';
-
-class PageContentBody extends Component {
-
-  //
-  // Listeners
-
-  onScroll = (props) => {
-    const { onScroll } = this.props;
-
-    if (this.props.onScroll && !isLocked()) {
-      onScroll(props);
-    }
-  };
-
-  //
-  // Render
-
-  render() {
-    const {
-      className,
-      innerClassName,
-      children,
-      dispatch,
-      ...otherProps
-    } = this.props;
-
-    return (
-      <Scroller
-        className={className}
-        scrollDirection={scrollDirections.VERTICAL}
-        {...otherProps}
-        onScroll={this.onScroll}
-      >
-        <div className={innerClassName}>
-          {children}
-        </div>
-      </Scroller>
-    );
-  }
-}
-
-PageContentBody.propTypes = {
-  className: PropTypes.string,
-  innerClassName: PropTypes.string,
-  children: PropTypes.node.isRequired,
-  onScroll: PropTypes.func,
-  dispatch: PropTypes.func
-};
-
-PageContentBody.defaultProps = {
-  className: styles.contentBody,
-  innerClassName: styles.innerContentBody
-};
-
-export default PageContentBody;

frontend/src/Components/Page/PageContentBody.tsx

@@ -0,0 +1,51 @@
+import React, { forwardRef, ReactNode, useCallback } from 'react';
+import Scroller from 'Components/Scroller/Scroller';
+import ScrollDirection from 'Helpers/Props/ScrollDirection';
+import { isLocked } from 'Utilities/scrollLock';
+import styles from './PageContentBody.css';
+
+interface PageContentBodyProps {
+  className: string;
+  innerClassName: string;
+  children: ReactNode;
+  initialScrollTop?: number;
+  onScroll?: (payload) => void;
+}
+
+const PageContentBody = forwardRef(
+  (
+    props: PageContentBodyProps,
+    ref: React.MutableRefObject<HTMLDivElement>
+  ) => {
+    const {
+      className = styles.contentBody,
+      innerClassName = styles.innerContentBody,
+      children,
+      onScroll,
+      ...otherProps
+    } = props;
+
+    const onScrollWrapper = useCallback(
+      (payload) => {
+        if (onScroll && !isLocked()) {
+          onScroll(payload);
+        }
+      },
+      [onScroll]
+    );
+
+    return (
+      <Scroller
+        ref={ref}
+        {...otherProps}
+        className={className}
+        scrollDirection={ScrollDirection.Vertical}
+        onScroll={onScrollWrapper}
+      >
+        <div className={innerClassName}>{children}</div>
+      </Scroller>
+    );
+  }
+);
+
+export default PageContentBody;

frontend/src/Components/Page/Toolbar/PageToolbarButton.js

@@ -45,7 +45,8 @@ PageToolbarButton.propTypes = {
   iconName: PropTypes.object.isRequired,
   spinningName: PropTypes.object,
   isSpinning: PropTypes.bool,
-  isDisabled: PropTypes.bool
+  isDisabled: PropTypes.bool,
+  onPress: PropTypes.func
 };
 
 PageToolbarButton.defaultProps = {