Implement FlatList everywhere

package.json

@@ -56,6 +56,7 @@
     "react-router-dom": "^5.2.0",
     "react-router-native": "^5.2.0",
     "react-web-config": "^1.0.0",
+    "react-window": "^1.8.5",
     "save": "^2.4.0",
     "underscore": "^1.10.2"
   },

src/components/InvertedFlatList/index.js

@@ -0,0 +1,166 @@
+import React, {forwardRef, createContext, Component} from 'react';
+import {View} from 'react-native';
+import {VariableSizeList} from 'react-window';
+import styles from '../../style/StyleSheet';
+
+const ReactWindowContext = createContext({});
+const DEFAULT_ROW_HEIGHT = 42;
+
+/**
+ * This is the innermost element and we are passing it as a custom
+ * component so that we can overwrite some styles and simulate
+ * an inverse FlatList with items starting from the bottom of the
+ * scroll position by adding additional margin. react-window has no
+ * inverted feature so this works around the existing API.
+ */
+const innerElement = forwardRef((props, ref) => (
+    <ReactWindowContext.Consumer>
+        {({dimensions}) => {
+            const innerHeight = props.style.height;
+            const top = dimensions.top || 0;
+            const height = dimensions.height || 0;
+            const difference = height - top - innerHeight;
+
+            return (
+                <div
+                    // eslint-disable-next-line react/jsx-props-no-spreading
+                    {...props}
+                    ref={ref}
+                    style={{
+                        ...props.style,
+                        position: 'relative',
+                        marginTop: difference > 0 ? difference : 0,
+                    }}
+                />
+            );
+        }}
+    </ReactWindowContext.Consumer>
+));
+
+/**
+ * This component is a recreation of FlatList for web.
+ * FlatList when used with an "inverted" prop does not work
+ * correctly on web but works fine for mobile so we are
+ * using react-window here to create our inverted list
+ * scroller to improve performance on web.
+ */
+class InvertedFlatList extends Component {
+    constructor(props) {
+        super(props);
+
+        this.getSize = this.getSize.bind(this);
+
+        // Stores each item's computed height after it renders
+        // once and is reference for the life of the component
+        this.sizeMap = {};
+        this.state = {listHeight: 0};
+    }
+
+    componentDidMount() {
+        // Set the height of the list after the component mounts
+        // and then scroll to the bottom.
+        this.setState({listHeight: this.list.offsetHeight}, () => {
+            this.scrollToEnd();
+        });
+
+        // This allows us to call this.listRef.scrollToEnd() from
+        // the parent component where this will be used.
+        this.props.forwardedRef({
+            scrollToEnd: () => this.scrollToEnd(),
+        });
+    }
+
+    shouldComponentUpdate(prevProps, prevState) {
+        // We only need to update when the data length changes
+        // or the list height changes (since we are calculating the
+        // height on the first render pass)
+        return prevProps.data.length !== this.props.data.length
+            || prevState.listHeight !== this.state.listHeight;
+    }
+
+    /**
+     * Returns a previously recorded size or the default.
+     *
+     * The default is not a minimum, but the initial height
+     * to pass to react-window so that we can calculate and
+     * cache the actual height.
+     *
+     * @param {Number} index
+     * @returns {Number}
+     */
+    getSize(index) {
+        return this.sizeMap[index] || DEFAULT_ROW_HEIGHT;
+    }
+
+    /**
+     * ScrollToEnd implementation. Similar to FlatListInstance.scrollToEnd()
+     */
+    scrollToEnd() {
+        this.listRef.scrollToItem(this.props.data.length - 1, 'end');
+    }
+
+    render() {
+        return (
+            <ReactWindowContext.Provider
+
+                // These values are passed via context as there seems to
+                // be no way to pass additional props to the innerElement
+                // controlled by react-window
+                value={{dimensions: this.list ? this.list.getBoundingClientRect() : {}}}
+            >
+                <View
+                    style={styles.flex1}
+                    ref={el => this.list = el}
+                >
+                    <VariableSizeList
+                        height={this.state.listHeight}
+                        itemCount={this.props.data.length}
+                        itemSize={this.getSize}
+                        width="100%"
+                        ref={el => this.listRef = el}
+                        overscanCount={1}
+                        innerRef={el => this.innerRef = el}
+                        outerRef={el => this.outerRef = el}
+                        innerElementType={innerElement}
+                    >
+                        {({index, style}) => (
+
+                            // Do not modify or remove these styles they are
+                            // required by react-window to function correctly
+                            <div style={style}>
+                                {this.props.renderItem({
+                                    item: this.props.data[index],
+                                    index,
+                                    onLayout: ({nativeEvent}) => {
+                                        const computedHeight = nativeEvent.layout.height;
+                                        if (computedHeight === DEFAULT_ROW_HEIGHT) {
+                                            throw new Error('InvertedFlatList rendered row height equal to the constant default height.');
+                                        }
+
+                                        // Check out previous size against the computedHeight returned when
+                                        // our renderItem layouts. If there's any difference then we reset
+                                        const prevSize = this.sizeMap[index] || 0;
+                                        if (prevSize !== computedHeight) {
+                                            this.sizeMap[index] = computedHeight;
+                                            this.listRef.resetAfterIndex(index);
+                                        }
+                                    },
+
+                                    // Default row height is a magic number. In the event that we
+                                    // have a row that is the exact same size we will get caught in
+                                    // an infinite loop. Avoid setting row heights to this.
+                                    needsLayoutCalculation: style.height === DEFAULT_ROW_HEIGHT,
+                                })}
+                            </div>
+                        )}
+                    </VariableSizeList>
+                </View>
+            </ReactWindowContext.Provider>
+        );
+    }
+}
+
+export default forwardRef((props, forwardedRef) => (
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    <InvertedFlatList {...props} forwardedRef={forwardedRef} />
+));

src/components/InvertedFlatList/index.native.js

@@ -0,0 +1,15 @@
+import React, {forwardRef} from 'react';
+import {FlatList} from 'react-native';
+
+/**
+ * Inverted FlatList for native is just the base FlatList
+ */
+export default forwardRef((props, forwardedRef) => (
+    <FlatList
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+        data={props.data.slice().reverse()}
+        ref={forwardedRef}
+        inverted
+    />
+));

src/page/home/MainView.js

@@ -25,51 +25,25 @@ const propTypes = {
 const defaultProps = {
     reports: {},
 };
+const MainView = (props) => {
+    const reportIDInURL = parseInt(props.match.params.reportID, 10);
 
-class MainView extends React.Component {
-    render() {
-        if (!_.size(this.props.reports)) {
-            return null;
-        }
-
-        const reportIDInURL = parseInt(this.props.match.params.reportID, 10);
-
-        // The styles for each of our reports. Basically, they are all hidden except for the one matching the
-        // reportID in the URL
-        let activeReportID;
-        const reportStyles = _.reduce(this.props.reports, (memo, report) => {
-            const isActiveReport = reportIDInURL === report.reportID;
-            const finalData = {...memo};
-            let reportStyle;
-
-            if (isActiveReport) {
-                activeReportID = report.reportID;
-                reportStyle = [styles.dFlex, styles.flex1];
-            } else {
-                reportStyle = [styles.dNone];
-            }
-
-            finalData[report.reportID] = [reportStyle];
-            return finalData;
-        }, {});
-
-        return (
-            <>
-                {_.map(this.props.reports, report => (
-                    <View
-                        key={report.reportID}
-                        style={reportStyles[report.reportID]}
-                    >
-                        <ReportView
-                            reportID={report.reportID}
-                            isActiveReport={report.reportID === activeReportID}
-                        />
-                    </View>
-                ))}
-            </>
-        );
+    if (!_.size(props.reports) || !reportIDInURL) {
+        return null;
     }
-}
+
+    return (
+        <View
+            key={reportIDInURL}
+            style={[styles.dFlex, styles.flex1]}
+        >
+            <ReportView
+                reportID={reportIDInURL}
+                isActiveReport
+            />
+        </View>
+    );
+};
 
 MainView.propTypes = propTypes;
 MainView.defaultProps = defaultProps;

src/page/home/report/ReportActionItem.js

@@ -12,23 +12,34 @@ const propTypes = {
 
     // Should the comment have the appearance of being grouped with the previous comment?
     displayAsGroup: PropTypes.bool.isRequired,
+
+    // Used to tell this component that we want it to call onLayout when it renders
+    needsLayoutCalculation: PropTypes.bool,
+
+    // Called when the view layout completes
+    onLayout: PropTypes.func,
+};
+
+const defaultProps = {
+    needsLayoutCalculation: false,
+    onLayout: () => {},
 };
 
 class ReportActionItem extends React.Component {
     shouldComponentUpdate(nextProps) {
         // This component should only render if the action's sequenceNumber or displayAsGroup props change
-        return nextProps.displayAsGroup !== this.props.displayAsGroup
+        return nextProps.needsLayoutCalculation !== this.props.needsLayoutCalculation
+            || nextProps.displayAsGroup !== this.props.displayAsGroup
             || !_.isEqual(nextProps.action, this.props.action);
     }
 
     render() {
         const {action, displayAsGroup} = this.props;
-        if (action.actionName !== 'ADDCOMMENT') {
-            return null;
-        }
-
         return (
-            <View>
+            <View
+                style={{opacity: this.props.needsLayoutCalculation ? 0 : 1}}
+                onLayout={this.props.onLayout}
+            >
                 {!displayAsGroup && <ReportActionItemSingle action={action} />}
                 {displayAsGroup && <ReportActionItemGrouped action={action} />}
             </View>
@@ -37,5 +48,6 @@ class ReportActionItem extends React.Component {
 }
 
 ReportActionItem.propTypes = propTypes;
+ReportActionItem.defaultProps = defaultProps;
 
 export default ReportActionItem;