Merge pull request #4538 from Expensify/marcaaron-reorganizeReportScreen

src/pages/home/ReportScreen.js

@@ -1,17 +1,23 @@
 import React from 'react';
 import {withOnyx} from 'react-native-onyx';
 import PropTypes from 'prop-types';
+import {Keyboard, View} from 'react-native';
 import _ from 'underscore';
 import styles from '../../styles/styles';
-import ReportView from './report/ReportView';
 import ScreenWrapper from '../../components/ScreenWrapper';
 import HeaderView from './HeaderView';
 import Navigation from '../../libs/Navigation/Navigation';
 import ROUTES from '../../ROUTES';
-import FullScreenLoadingIndicator from '../../components/FullscreenLoadingIndicator';
-import {handleInaccessibleReport, updateCurrentlyViewedReportID} from '../../libs/actions/Report';
+import {handleInaccessibleReport, updateCurrentlyViewedReportID, addAction} from '../../libs/actions/Report';
 import ONYXKEYS from '../../ONYXKEYS';
 
+import ReportActionsView from './report/ReportActionsView';
+import ReportActionCompose from './report/ReportActionCompose';
+import KeyboardSpacer from '../../components/KeyboardSpacer';
+import SwipeableView from '../../components/SwipeableView';
+import CONST from '../../CONST';
+import FullScreenLoadingIndicator from '../../components/FullscreenLoadingIndicator';
+
 const propTypes = {
     /** Navigation route context info provided by react navigation */
     route: PropTypes.shape({
@@ -24,16 +30,26 @@ const propTypes = {
 
     /** Tells us if the sidebar has rendered */
     isSidebarLoaded: PropTypes.bool,
+
+    /** Whether or not to show the Compose Input */
+    session: PropTypes.shape({
+        shouldShowComposeInput: PropTypes.bool,
+    }),
 };
 
 const defaultProps = {
     isSidebarLoaded: false,
+    session: {
+        shouldShowComposeInput: true,
+    },
 };
 
 class ReportScreen extends React.Component {
     constructor(props) {
         super(props);
 
+        this.onSubmitComment = this.onSubmitComment.bind(this);
+
         this.state = {
             isLoading: true,
         };
@@ -56,6 +72,13 @@ class ReportScreen extends React.Component {
         clearTimeout(this.loadingTimerId);
     }
 
+    /**
+     * @param {String} text
+     */
+    onSubmitComment(text) {
+        addAction(this.getReportID(), text);
+    }
+
     /**
      * Get the currently viewed report ID as number
      *
@@ -76,13 +99,12 @@ class ReportScreen extends React.Component {
     }
 
     /**
-     * Configures a small loading transition of fixed time and proceeds with rendering available data
+     * Configures a small loading transition and proceeds with rendering available data
      */
     prepareTransition() {
         this.setState({isLoading: true});
-
         clearTimeout(this.loadingTimerId);
-        this.loadingTimerId = setTimeout(() => this.setState({isLoading: false}), 150);
+        this.loadingTimerId = setTimeout(() => this.setState({isLoading: false}), 0);
     }
 
     /**
@@ -102,16 +124,27 @@ class ReportScreen extends React.Component {
             return null;
         }
 
+        const reportID = this.getReportID();
         return (
             <ScreenWrapper style={[styles.appContent, styles.flex1]}>
                 <HeaderView
-                    reportID={this.getReportID()}
+                    reportID={reportID}
                     onNavigationMenuButtonClicked={() => Navigation.navigate(ROUTES.HOME)}
                 />
 
-                <FullScreenLoadingIndicator visible={this.shouldShowLoader()} />
-
-                {!this.shouldShowLoader() && <ReportView reportID={this.getReportID()} />}
+                <View nativeID={CONST.REPORT.DROP_NATIVE_ID} style={[styles.flex1, styles.justifyContentEnd]}>
+                    <FullScreenLoadingIndicator visible={this.shouldShowLoader()} />
+                    {!this.shouldShowLoader() && <ReportActionsView reportID={reportID} />}
+                    {this.props.session.shouldShowComposeInput && (
+                        <SwipeableView onSwipeDown={() => Keyboard.dismiss()}>
+                            <ReportActionCompose
+                                onSubmit={this.onSubmitComment}
+                                reportID={reportID}
+                            />
+                        </SwipeableView>
+                    )}
+                    <KeyboardSpacer />
+                </View>
             </ScreenWrapper>
         );
     }
@@ -124,4 +157,7 @@ export default withOnyx({
     isSidebarLoaded: {
         key: ONYXKEYS.IS_SIDEBAR_LOADED,
     },
+    session: {
+        key: ONYXKEYS.SESSION,
+    },
 })(ReportScreen);