Expensify · yuwenmemon · Jan 27, 2021 · Jan 23, 2021 · Jan 25, 2021 · Jan 25, 2021
diff --git a/src/CONST.js b/src/CONST.js
@@ -14,6 +14,7 @@ const CONST = {
             CENTERED: 'centered',
             BOTTOM_DOCKED: 'bottom_docked',
             POPOVER: 'popover',
+            RIGHT_DOCKED: 'right_docked',
         },
     },
     TIMING: {

diff --git a/src/components/Modal.js b/src/components/Modal.js
@@ -26,6 +26,7 @@ const propTypes = {
         CONST.MODAL.MODAL_TYPE.CENTERED,
         CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED,
         CONST.MODAL.MODAL_TYPE.POPOVER,
+        CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED,
     ]),
 
     ...windowDimensionsPropTypes,

diff --git a/src/components/SettingsModal.js b/src/components/SettingsModal.js
@@ -0,0 +1,55 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {withOnyx} from 'react-native-onyx';
+import _ from 'underscore';
+import SettingsPage from '../pages/SettingsPage';
+import CONST from '../CONST';
+import themeColors from '../styles/themes/default';
+import ONYXKEYS from '../ONYXKEYS';
+import ModalWithHeader from './ModalWithHeader';
+import {redirect} from '../libs/actions/App';
+import ROUTES from '../ROUTES';
+
+/**
+ * Right-docked modal view showing a user's settings.
+ */
+const propTypes = {
+    // Is the Settings Modal visible or not?
+    isVisible: PropTypes.bool,
+
+    /* Onyx Props */
+    // Currently viewed reportID
+    currentlyViewedReportID: PropTypes.string,
+};
+
+const defaultProps = {
+    isVisible: false,
+    currentlyViewedReportID: '',
+};
+
+const SettingsModal = props => (
+    <ModalWithHeader
+        type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED}
+        onClose={() => redirect(_.isEmpty(props.currentlyViewedReportID)
+            ? ROUTES.HOME
+            : ROUTES.getReportRoute(props.currentlyViewedReportID))}
+        isVisible={props.isVisible}
+        title="Settings"
+        backgroundColor={themeColors.componentBG}
+    >
+        <SettingsPage />
+    </ModalWithHeader>
+);
+
+SettingsModal.propTypes = propTypes;
+SettingsModal.defaultProps = defaultProps;
+SettingsModal.displayName = 'SettingsModal';
+
+export default withOnyx({
+    session: {
+        key: ONYXKEYS.SESSION,
+    },
+    currentlyViewedReportID: {
+        key: ONYXKEYS.CURRENTLY_VIEWED_REPORTID,
+    },
+})(SettingsModal);
diff --git a/src/pages/SettingsPage.js b/src/pages/SettingsPage.js
@@ -6,13 +6,10 @@ import {
 import PropTypes from 'prop-types';
 import _ from 'underscore';
 import {withOnyx} from 'react-native-onyx';
-import {redirect} from '../libs/actions/App';
 import styles from '../styles/styles';
 import Text from '../components/Text';
 import {signOut} from '../libs/actions/Session';
 import ONYXKEYS from '../ONYXKEYS';
-import ROUTES from '../ROUTES';
-import HeaderWithCloseButton from '../components/HeaderWithCloseButton';
 import {version} from '../../package.json';
 import AvatarWithIndicator from '../components/AvatarWithIndicator';
 
@@ -33,9 +30,6 @@ const propTypes = {
         isOffline: PropTypes.bool,
     }),
 
-    // Currently viewed reportID
-    currentlyViewedReportID: PropTypes.string,
-
     // The session of the logged in person
     session: PropTypes.shape({
     // Email of the logged in person
@@ -46,11 +40,10 @@ const propTypes = {
 const defaultProps = {
     myPersonalDetails: {},
     network: null,
-    currentlyViewedReportID: '',
     session: {},
 };
 const SettingsPage = ({
-    myPersonalDetails, network, session, currentlyViewedReportID,
+    myPersonalDetails, network, session,
 }) => {
     // On the very first sign in or after clearing storage these
     // details will not be present on the first render so we'll just
@@ -65,46 +58,32 @@ const SettingsPage = ({
                 styles.settingsPageBackground,
             ]}
         >
-            <View
-                style={[
-                    styles.flexColumn,
-                    styles.settingsPageContainer,
-                ]}
-            >
-                <HeaderWithCloseButton
-                    onCloseButtonPress={() => redirect(currentlyViewedReportID !== ''
-                        ? ROUTES.getReportRoute(currentlyViewedReportID)
-                        : ROUTES.HOME)}
-                    title="Settings"
-                />
-                <View style={styles.settingsWrapper}>
-                    <View
-                        style={[styles.largeAvatar, styles.mb3]}
-                    >
-                        <AvatarWithIndicator
-                            size="large"
-                            source={myPersonalDetails.avatarURL}
-                            isActive={network && !network.isOffline}
-                        />
-                    </View>
-                    <Text style={[styles.settingsDisplayName, styles.mt1]} numberOfLines={1}>
-                        {myPersonalDetails.displayName ? myPersonalDetails.displayName : session.email}
-                    </Text>
-                    {myPersonalDetails.displayName && (
-                    <Text style={[styles.settingsLoginName, styles.mt1]} numberOfLines={1}>
-                        {session.email}
-                    </Text>
-                    )}
-                    <TouchableOpacity
-                        onPress={signOut}
-                        style={[styles.button, styles.w100, styles.mt5]}
-                    >
-                        <Text style={[styles.buttonText]}>
-                            Sign Out
-                        </Text>
-                    </TouchableOpacity>
+            <View style={styles.settingsWrapper}>
+                <View
+                    style={[styles.largeAvatar, styles.mb3]}
+                >
+                    <AvatarWithIndicator
+                        size="large"
+                        source={myPersonalDetails.avatarURL}
+                        isActive={network && !network.isOffline}
+                    />
                 </View>
-
+                <Text style={[styles.settingsDisplayName, styles.mt1]} numberOfLines={1}>
+                    {myPersonalDetails.displayName ? myPersonalDetails.displayName : session.email}
+                </Text>
+                {myPersonalDetails.displayName && (
+                <Text style={[styles.settingsLoginName, styles.mt1]} numberOfLines={1}>
+                    {session.email}
+                </Text>
+                )}
+                <TouchableOpacity
+                    onPress={signOut}
+                    style={[styles.button, styles.w100, styles.mt5]}
+                >
+                    <Text style={[styles.buttonText]}>
+                        Sign Out
+                    </Text>
+                </TouchableOpacity>
             </View>
             <Text style={[styles.chatItemMessageHeaderTimestamp]} numberOfLines={1}>
                 v
@@ -128,7 +107,4 @@ export default withOnyx({
     session: {
         key: ONYXKEYS.SESSION,
     },
-    currentlyViewedReportID: {
-        key: ONYXKEYS.CURRENTLY_VIEWED_REPORTID,
-    },
 })(SettingsPage);
diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js
@@ -5,7 +5,6 @@ import {withOnyx} from 'react-native-onyx';
 import Header from '../../components/Header';
 import styles from '../../styles/styles';
 import ONYXKEYS from '../../ONYXKEYS';
-import {withRouter} from '../../libs/Router';
 import themeColors from '../../styles/themes/default';
 import Icon from '../../components/Icon';
 import {BackArrow, Pin} from '../../components/Icon/Expensicons';
@@ -19,6 +18,10 @@ const propTypes = {
     // Decides whether we should show the navigationMenu button
     shouldShowNavigationMenuButton: PropTypes.bool.isRequired,
 
+    // Report ID currently being looked at, use to retrieve more information about the report.
+    // eslint-disable-next-line react/no-unused-prop-types
+    reportID: PropTypes.string.isRequired,
+
     /* Onyx Props */
     // The report currently being looked at
     report: PropTypes.shape({
@@ -77,10 +80,9 @@ HeaderView.displayName = 'HeaderView';
 HeaderView.defaultProps = defaultProps;
 
 export default compose(
-    withRouter,
     withOnyx({
         report: {
-            key: ({match}) => `${ONYXKEYS.COLLECTION.REPORT}${match.params.reportID}`,
+            key: ({reportID}) => `${ONYXKEYS.COLLECTION.REPORT}${reportID}`,
         },
     }),
 )(HeaderView);
diff --git a/src/pages/home/HomePage.js b/src/pages/home/HomePage.js
@@ -13,7 +13,6 @@ import styles, {getSafeAreaPadding, getNavigationMenuStyle} from '../../styles/s
 import variables from '../../styles/variables';
 import HeaderView from './HeaderView';
 import Sidebar from './sidebar/SidebarView';
-import SettingsPage from '../SettingsPage';
 import Main from './MainView';
 import {
     hide as hideSidebar,
@@ -39,6 +38,7 @@ import {fetchCountryCodeByRequestIP} from '../../libs/actions/GeoLocation';
 import KeyboardShortcut from '../../libs/KeyboardShortcut';
 import * as ChatSwitcher from '../../libs/actions/ChatSwitcher';
 import {redirect} from '../../libs/actions/App';
+import SettingsModal from '../../components/SettingsModal';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../../components/withWindowDimensions';
 import compose from '../../libs/compose';
 
@@ -47,13 +47,15 @@ const propTypes = {
     isChatSwitcherActive: PropTypes.bool,
     currentURL: PropTypes.string,
     network: PropTypes.shape({isOffline: PropTypes.bool}),
+    currentlyViewedReportID: PropTypes.string,
     ...windowDimensionsPropTypes,
 };
 const defaultProps = {
     isSidebarShown: true,
     isChatSwitcherActive: false,
     currentURL: '',
     network: {isOffline: true},
+    currentlyViewedReportID: '',
 };
 
 class HomePage extends React.Component {
@@ -175,7 +177,6 @@ class HomePage extends React.Component {
      */
     navigateToSettings() {
         redirect(ROUTES.SETTINGS);
-        this.toggleNavigationMenu();
     }
 
     /**
@@ -314,8 +315,11 @@ class HomePage extends React.Component {
                                     <HeaderView
                                         shouldShowNavigationMenuButton={isSmallScreenWidth}
                                         onNavigationMenuButtonClicked={this.toggleNavigationMenu}
+                                        reportID={this.props.currentlyViewedReportID}
+                                    />
+                                    <SettingsModal
+                                        isVisible={this.props.currentURL === ROUTES.SETTINGS}
                                     />
-                                    {this.props.currentURL === '/settings' && <SettingsPage />}
                                     <Main />
                                 </View>
                             </Route>
@@ -346,6 +350,9 @@ export default compose(
             network: {
                 key: ONYXKEYS.NETWORK,
             },
+            currentlyViewedReportID: {
+                key: ONYXKEYS.CURRENTLY_VIEWED_REPORTID,
+            },
         },
     ),
     withWindowDimensions,

diff --git a/src/pages/home/MainView.js b/src/pages/home/MainView.js
@@ -6,35 +6,32 @@ import {withOnyx} from 'react-native-onyx';
 import ReportView from './report/ReportView';
 import ONYXKEYS from '../../ONYXKEYS';
 import styles from '../../styles/styles';
-import {withRouter} from '../../libs/Router';
 import compose from '../../libs/compose';
 
 const propTypes = {
-    // This comes from withRouter
-    // eslint-disable-next-line react/forbid-prop-types
-    match: PropTypes.object.isRequired,
-
     /* Onyx Props */
-
     // List of reports to display
     reports: PropTypes.objectOf(PropTypes.shape({
         reportID: PropTypes.number,
     })),
+
+    // ID of Report being viewed
+    currentlyViewedReportID: PropTypes.string,
 };
 
 const defaultProps = {
     reports: {},
+    currentlyViewedReportID: '',
 };
 
 class MainView extends Component {
     render() {
-        const reportIDInUrl = parseInt(this.props.match.params.reportID, 10);
+        let activeReportID = parseInt(this.props.currentlyViewedReportID, 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 isActiveReport = activeReportID === report.reportID;
             const finalData = {...memo};
             let reportStyle;
 
@@ -52,7 +49,7 @@ class MainView extends Component {
         const reportsToDisplay = _.filter(this.props.reports, report => (
             report.isPinned
                 || report.unreadActionCount > 0
-                || report.reportID === reportIDInUrl
+                || report.reportID === activeReportID
         ));
         return (
             <>
@@ -76,10 +73,15 @@ MainView.propTypes = propTypes;
 MainView.defaultProps = defaultProps;
 
 export default compose(
-    withRouter,
     withOnyx({
         reports: {
             key: ONYXKEYS.COLLECTION.REPORT,
         },
+        currentURL: {
+            key: ONYXKEYS.CURRENT_URL,
+        },
+        currentlyViewedReportID: {
+            key: ONYXKEYS.CURRENTLY_VIEWED_REPORTID,
+        },
     }),
 )(MainView);