Merge pull request #4594 from Expensify/marcaaron-reduceReportSubscri…

…ptions

Centralize Onyx subscriptions in ReportScreen

src/components/createOnyxContext.js

@@ -26,7 +26,7 @@ export default (onyxKeyName) => {
         },
     })(Provider);
 
-    const withOnyxKey = ({propName = onyxKeyName, transformValue = () => {}} = {}) => (WrappedComponent) => {
+    const withOnyxKey = ({propName = onyxKeyName, transformValue} = {}) => (WrappedComponent) => {
         const Consumer = forwardRef((props, ref) => (
             <Context.Consumer>
                 {(value) => {

src/pages/home/ReportScreen.js

@@ -17,6 +17,7 @@ import KeyboardSpacer from '../../components/KeyboardSpacer';
 import SwipeableView from '../../components/SwipeableView';
 import CONST from '../../CONST';
 import FullScreenLoadingIndicator from '../../components/FullscreenLoadingIndicator';
+import ReportActionPropTypes from './report/ReportActionPropTypes';
 
 const propTypes = {
     /** Navigation route context info provided by react navigation */
@@ -35,15 +36,52 @@ const propTypes = {
     session: PropTypes.shape({
         shouldShowComposeInput: PropTypes.bool,
     }),
+
+    /** The report currently being looked at */
+    report: PropTypes.shape({
+        /** Number of actions unread */
+        unreadActionCount: PropTypes.number,
+
+        /** The largest sequenceNumber on this report */
+        maxSequenceNumber: PropTypes.number,
+
+        /** The current position of the new marker */
+        newMarkerSequenceNumber: PropTypes.number,
+
+        /** Whether there is an outstanding amount in IOU */
+        hasOutstandingIOU: PropTypes.bool,
+    }),
+
+    /** Array of report actions for this report */
+    reportActions: PropTypes.objectOf(PropTypes.shape(ReportActionPropTypes)),
 };
 
 const defaultProps = {
     isSidebarLoaded: false,
     session: {
         shouldShowComposeInput: true,
     },
+    reportActions: {},
+    report: {
+        unreadActionCount: 0,
+        maxSequenceNumber: 0,
+        hasOutstandingIOU: false,
+    },
 };
 
+/**
+ * Get the currently viewed report ID as number
+ *
+ * @param {Object} route
+ * @param {Object} route.params
+ * @param {String} route.params.reportID
+ * @returns {Number}
+ */
+function getReportID(route) {
+    const params = route.params;
+    return Number.parseInt(params.reportID, 10);
+}
+
 class ReportScreen extends React.Component {
     constructor(props) {
         super(props);
@@ -76,17 +114,7 @@ class ReportScreen extends React.Component {
      * @param {String} text
      */
     onSubmitComment(text) {
-        addAction(this.getReportID(), text);
-    }
-
-    /**
-     * Get the currently viewed report ID as number
-     *
-     * @returns {Number}
-     */
-    getReportID() {
-        const params = this.props.route.params;
-        return Number.parseInt(params.reportID, 10);
+        addAction(getReportID(this.props.route), text);
     }
 
     /**
@@ -95,7 +123,7 @@ class ReportScreen extends React.Component {
      * @returns {Boolean}
      */
     shouldShowLoader() {
-        return this.state.isLoading || !this.getReportID();
+        return this.state.isLoading || !getReportID(this.props.route);
     }
 
     /**
@@ -111,7 +139,7 @@ class ReportScreen extends React.Component {
      * Persists the currently viewed report id
      */
     storeCurrentlyViewedReport() {
-        const reportID = this.getReportID();
+        const reportID = getReportID(this.props.route);
         if (_.isNaN(reportID)) {
             handleInaccessibleReport();
             return;
@@ -124,7 +152,7 @@ class ReportScreen extends React.Component {
             return null;
         }
 
-        const reportID = this.getReportID();
+        const reportID = getReportID(this.props.route);
         return (
             <ScreenWrapper style={[styles.appContent, styles.flex1]}>
                 <HeaderView
@@ -137,12 +165,21 @@ class ReportScreen extends React.Component {
                     style={[styles.flex1, styles.justifyContentEnd, styles.overflowHidden]}
                 >
                     <FullScreenLoadingIndicator visible={this.shouldShowLoader()} />
-                    {!this.shouldShowLoader() && <ReportActionsView reportID={reportID} />}
+                    {!this.shouldShowLoader() && (
+                        <ReportActionsView
+                            reportID={reportID}
+                            reportActions={this.props.reportActions}
+                            report={this.props.report}
+                            session={this.props.session}
+                        />
+                    )}
                     {this.props.session.shouldShowComposeInput && (
                         <SwipeableView onSwipeDown={() => Keyboard.dismiss()}>
                             <ReportActionCompose
                                 onSubmit={this.onSubmitComment}
                                 reportID={reportID}
+                                reportActions={this.props.reportActions}
+                                report={this.props.report}
                             />
                         </SwipeableView>
                     )}
@@ -163,4 +200,11 @@ export default withOnyx({
     session: {
         key: ONYXKEYS.SESSION,
     },
+    reportActions: {
+        key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${getReportID(route)}`,
+        canEvict: false,
+    },
+    report: {
+        key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${getReportID(route)}`,
+    },
 })(ReportScreen);

src/pages/home/report/ReportActionCompose.js

@@ -56,6 +56,7 @@ import Text from '../../../components/Text';
 import {participantPropTypes} from '../sidebar/optionPropTypes';
 import currentUserPersonalDetailsPropsTypes from '../../settings/Profile/currentUserPersonalDetailsPropsTypes';
 import ParticipantLocalTime from './ParticipantLocalTime';
+import {withNetwork, withPersonalDetails} from '../../../components/OnyxProvider';
 
 const propTypes = {
     /** Beta features list */
@@ -673,6 +674,8 @@ export default compose(
     withDrawerState,
     withNavigationFocus,
     withLocalize,
+    withPersonalDetails(),
+    withNetwork(),
     withOnyx({
         betas: {
             key: ONYXKEYS.BETAS,
@@ -683,22 +686,9 @@ export default compose(
         modal: {
             key: ONYXKEYS.MODAL,
         },
-        network: {
-            key: ONYXKEYS.NETWORK,
-        },
         myPersonalDetails: {
             key: ONYXKEYS.MY_PERSONAL_DETAILS,
         },
-        personalDetails: {
-            key: ONYXKEYS.PERSONAL_DETAILS,
-        },
-        reportActions: {
-            key: ({reportID}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`,
-            canEvict: false,
-        },
-        report: {
-            key: ({reportID}) => `${ONYXKEYS.COLLECTION.REPORT}${reportID}`,
-        },
         blockedFromConcierge: {
             key: ONYXKEYS.NVP_BLOCKED_FROM_CONCIERGE,
         },

src/pages/home/report/ReportActionsView.js

@@ -8,7 +8,6 @@ import {
 import PropTypes from 'prop-types';
 import _ from 'underscore';
 import lodashGet from 'lodash/get';
-import {withOnyx} from 'react-native-onyx';
 import Text from '../../../components/Text';
 import {
     fetchActions,
@@ -18,7 +17,6 @@ import {
     subscribeToReportTypingEvents,
     unsubscribeFromReportChannel,
 } from '../../../libs/actions/Report';
-import ONYXKEYS from '../../../ONYXKEYS';
 import ReportActionItem from './ReportActionItem';
 import styles from '../../../styles/styles';
 import ReportActionPropTypes from './ReportActionPropTypes';
@@ -515,16 +513,4 @@ export default compose(
     withWindowDimensions,
     withDrawerState,
     withLocalize,
-    withOnyx({
-        report: {
-            key: ({reportID}) => `${ONYXKEYS.COLLECTION.REPORT}${reportID}`,
-        },
-        reportActions: {
-            key: ({reportID}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`,
-            canEvict: false,
-        },
-        session: {
-            key: ONYXKEYS.SESSION,
-        },
-    }),
 )(ReportActionsView);