merge main

android/app/build.gradle

@@ -148,8 +148,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001003701
-        versionName "1.0.37-1"
+        versionCode 1001003800
+        versionName "1.0.38-0"
     }
     splits {
         abi {

ios/ExpensifyCash/Info.plist

@@ -17,7 +17,7 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.0.37</string>
+	<string>1.0.38</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleURLTypes</key>
@@ -30,7 +30,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.0.37.1</string>
+	<string>1.0.38.0</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>

ios/ExpensifyCashTests/Info.plist

@@ -15,10 +15,10 @@
 	<key>CFBundlePackageType</key>
 	<string>BNDL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.0.37</string>
+	<string>1.0.38</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.0.37.1</string>
+	<string>1.0.38.0</string>
 </dict>
 </plist>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "expensify.cash",
-  "version": "1.0.37-1",
+  "version": "1.0.38-0",
   "author": "Expensify, Inc.",
   "homepage": "https://expensify.cash",
   "description": "Expensify.cash is the next generation of Expensify: a reimagination of payments based atop a foundation of chat.",

src/components/AttachmentModal.js

@@ -79,7 +79,10 @@ class AttachmentModal extends PureComponent {
             return;
         }
 
-        this.props.onConfirm(this.state.file);
+        if (this.props.onConfirm) {
+            this.props.onConfirm(this.state.file);
+        }
+
         this.setState({isModalOpen: false});
     }
 

src/components/Modal/BaseModal.js

@@ -36,15 +36,13 @@ class BaseModal extends PureComponent {
      * Listens to specific keyboard keys when the modal has been opened
      */
     subscribeToKeyEvents() {
-        KeyboardShortcut.subscribe('Escape', this.props.onClose, [], true);
         KeyboardShortcut.subscribe('Enter', this.props.onSubmit, [], true);
     }
 
     /**
      * Stops listening to keyboard keys when modal has been closed
      */
     unsubscribeFromKeyEvents() {
-        KeyboardShortcut.unsubscribe('Escape');
         KeyboardShortcut.unsubscribe('Enter');
     }
 
@@ -75,6 +73,9 @@ class BaseModal extends PureComponent {
                     }
                     this.props.onClose();
                 }}
+
+                // Note: Escape key on web/desktop will trigger onBackButtonPress callback
+                // eslint-disable-next-line react/jsx-props-no-multi-spaces
                 onBackButtonPress={this.props.onClose}
                 onModalShow={() => {
                     this.subscribeToKeyEvents();

src/components/ScreenWrapper.js

@@ -2,9 +2,11 @@ import _ from 'underscore';
 import React from 'react';
 import PropTypes from 'prop-types';
 import {View} from 'react-native';
+import {withNavigation} from '@react-navigation/compat';
 import {SafeAreaInsetsContext} from 'react-native-safe-area-context';
 import styles, {getSafeAreaPadding} from '../styles/styles';
 import HeaderGap from './HeaderGap';
+import KeyboardShortcut from '../libs/KeyboardShortcut';
 
 const propTypes = {
     // Array of additional styles to add
@@ -21,48 +23,76 @@ const propTypes = {
 
     // Whether to include padding top
     includePaddingTop: PropTypes.bool,
+
+    // react-navigation object that will allow us to goBack()
+    navigation: PropTypes.shape({
+
+        // Returns to the previous navigation state e.g. if this is inside a Modal we will dismiss it
+        goBack: PropTypes.func,
+    }),
 };
 
 const defaultProps = {
     style: [],
     includePaddingBottom: true,
     includePaddingTop: true,
+    navigation: {
+        goBack: () => {},
+    },
 };
 
-const ScreenWrapper = props => (
-    <SafeAreaInsetsContext.Consumer>
-        {(insets) => {
-            const {paddingTop, paddingBottom} = getSafeAreaPadding(insets);
-            const paddingStyle = {};
+class ScreenWrapper extends React.Component {
+    componentDidMount() {
+        this.unsubscribe = KeyboardShortcut.subscribe('Escape', () => {
+            this.props.navigation.goBack();
+        }, [], true);
+    }
+
+    componentWillUnmount() {
+        if (!this.unsubscribe) {
+            return;
+        }
 
-            if (props.includePaddingTop) {
-                paddingStyle.paddingTop = paddingTop;
-            }
+        this.unsubscribe();
+    }
 
-            if (props.includePaddingBottom) {
-                paddingStyle.paddingBottom = paddingBottom;
-            }
+    render() {
+        return (
+            <SafeAreaInsetsContext.Consumer>
+                {(insets) => {
+                    const {paddingTop, paddingBottom} = getSafeAreaPadding(insets);
+                    const paddingStyle = {};
 
-            return (
-                <View style={[
-                    ...props.style,
-                    styles.flex1,
-                    paddingStyle,
-                ]}
-                >
-                    <HeaderGap />
-                    {// If props.children is a function, call it to provide the insets to the children.
-                        _.isFunction(props.children)
-                            ? props.children(insets)
-                            : props.children
+                    if (this.props.includePaddingTop) {
+                        paddingStyle.paddingTop = paddingTop;
                     }
-                </View>
-            );
-        }}
-    </SafeAreaInsetsContext.Consumer>
-);
+
+                    if (this.props.includePaddingBottom) {
+                        paddingStyle.paddingBottom = paddingBottom;
+                    }
+
+                    return (
+                        <View style={[
+                            ...this.props.style,
+                            styles.flex1,
+                            paddingStyle,
+                        ]}
+                        >
+                            <HeaderGap />
+                            {// If props.children is a function, call it to provide the insets to the children.
+                                _.isFunction(this.props.children)
+                                    ? this.props.children(insets)
+                                    : this.props.children
+                            }
+                        </View>
+                    );
+                }}
+            </SafeAreaInsetsContext.Consumer>
+        );
+    }
+}
 
 ScreenWrapper.propTypes = propTypes;
 ScreenWrapper.defaultProps = defaultProps;
 ScreenWrapper.displayName = 'ScreenWrapper';
-export default ScreenWrapper;
+export default withNavigation(ScreenWrapper);

src/libs/KeyboardShortcut/index.js

@@ -90,13 +90,15 @@ const KeyboardShortcut = {
      * @param {Function} callback The callback to call
      * @param {String|Array} modifiers Can either be shift or control
      * @param {Boolean} captureOnInputs Should we capture the event on inputs too?
+     * @returns {Function} clean up method
      */
     subscribe(key, callback, modifiers = 'shift', captureOnInputs = false) {
         const keyCode = this.getKeyCode(key);
         if (events[keyCode] === undefined) {
             events[keyCode] = [];
         }
         events[keyCode].push({callback, modifiers: _.isArray(modifiers) ? modifiers : [modifiers], captureOnInputs});
+        return () => this.unsubscribe(key);
     },
 
     /**

src/libs/KeyboardShortcut/index.native.js

@@ -3,7 +3,9 @@
  * a website.
  */
 const KeyboardShortcut = {
-    subscribe() {},
+    subscribe() {
+        return () => {};
+    },
     unsubscribe() {},
 };
 

src/libs/actions/Report.js

@@ -387,14 +387,19 @@ function setLocalIOUReportData(iouReportObject, chatReportID) {
  * Update the lastRead actionID and timestamp in local memory and Onyx
  *
  * @param {Number} reportID
- * @param {Number} sequenceNumber
+ * @param {Number} lastReadSequenceNumber
  */
-function setLocalLastRead(reportID, sequenceNumber) {
-    lastReadSequenceNumbers[reportID] = sequenceNumber;
+function setLocalLastRead(reportID, lastReadSequenceNumber) {
+    lastReadSequenceNumbers[reportID] = lastReadSequenceNumber;
+    const reportMaxSequenceNumber = reportMaxSequenceNumbers[reportID];
+
+    // Determine the number of unread actions by deducting the last read sequence from the total. If, for some reason,
+    // the last read sequence is higher than the actual last sequence, let's just assume all actions are read
+    const unreadActionCount = Math.max(reportMaxSequenceNumber - lastReadSequenceNumber, 0);
 
-    // Update the report optimistically
+    // Update the report optimistically.
     Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`, {
-        unreadActionCount: 0,
+        unreadActionCount,
         lastVisitedTimestamp: Date.now(),
     });
 }
@@ -930,21 +935,32 @@ function addAction(reportID, text, file) {
  * network layer handle the delayed write.
  *
  * @param {Number} reportID
- * @param {Number} sequenceNumber
+ * @param {Number} [sequenceNumber] This can be used to set the last read actionID to a specific
+ *  spot (eg. mark-as-unread). Otherwise, when this param is omitted, the highest sequence number becomes the one that
+ *  is last read (meaning that the entire report history has been read)
  */
 function updateLastReadActionID(reportID, sequenceNumber) {
-    const currentMaxSequenceNumber = reportMaxSequenceNumbers[reportID];
-    if (sequenceNumber < currentMaxSequenceNumber) {
-        return;
-    }
+    // Need to subtract 1 from sequenceNumber so that the "New" marker appears in the right spot (the last read
+    // action). If 1 isn't subtracted then the "New" marker appears one row below the action (the first unread action)
+    const lastReadSequenceNumber = (sequenceNumber - 1) || reportMaxSequenceNumbers[reportID];
 
-    setLocalLastRead(reportID, sequenceNumber);
+    setLocalLastRead(reportID, lastReadSequenceNumber);
 
     // Mark the report as not having any unread items
     API.Report_UpdateLastRead({
         accountID: currentUserAccountID,
         reportID,
-        sequenceNumber,
+        sequenceNumber: lastReadSequenceNumber,
+    });
+}
+
+/**
+ * @param {Number} reportID
+ * @param {Number} sequenceNumber
+ */
+function setNewMarkerPosition(reportID, sequenceNumber) {
+    Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`, {
+        newMarkerSequenceNumber: sequenceNumber,
     });
 }
 
@@ -1030,6 +1046,7 @@ export {
     fetchOrCreateChatReport,
     addAction,
     updateLastReadActionID,
+    setNewMarkerPosition,
     subscribeToReportTypingEvents,
     subscribeToUserEvents,
     unsubscribeFromReportChannel,