From d51d20f43d45ce521af3813b14bec1b036a842e9 Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc@expensify.com>
Date: Fri, 30 Oct 2020 00:05:33 -0700
Subject: [PATCH 01/72] trying things

---
 src/libs/API.js            |   2 +
 src/libs/actions/Report.js | 113 +++++++++++++++++++++++++++----------
 2 files changed, 84 insertions(+), 31 deletions(-)

diff --git a/src/libs/API.js b/src/libs/API.js
index 526680b1d25a..ac25adb1bc64 100644
--- a/src/libs/API.js
+++ b/src/libs/API.js
@@ -432,6 +432,7 @@ function createChatReport(parameters) {
  * @param {string} parameters.reportComment
  * @param {object} parameters.file
  * @param {number} parameters.reportID
+ * @param {String} parameters.clientGUID
  * @returns {Promise}
  */
 function addReportComment(parameters) {
@@ -440,6 +441,7 @@ function addReportComment(parameters) {
         reportComment: parameters.reportComment,
         file: parameters.file,
         reportID: parameters.reportID,
+        clientGUID: parameters.clientGUID,
     });
 }
 
diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js
index 8ab84ab62b6a..62b0de8040d1 100644
--- a/src/libs/actions/Report.js
+++ b/src/libs/actions/Report.js
@@ -15,6 +15,7 @@ import Visibility from '../Visibility';
 import ROUTES from '../../ROUTES';
 import NetworkConnection from '../NetworkConnection';
 import {hide as hideSidebar} from './Sidebar';
+import guid from '../guid';
 
 let currentUserEmail;
 let currentUserAccountID;
@@ -58,6 +59,8 @@ const lastReadActionIDs = {};
 // List of reportIDs pinned by the user
 let pinnedReportIDs = [];
 
+const pendingReportActions = {};
+
 /**
  * Checks the report to see if there are any unread action items
  *
@@ -196,11 +199,49 @@ function updateReportWithNewAction(reportID, reportAction) {
         maxSequenceNumber: reportAction.sequenceNumber,
     });
 
+    // Check the reportAction for the clientGUID and make sure the sequenceNumber
+    // for this action matches correctly with the one we are expecting
+    const clientGUID = reportAction.clientGUID;
+    if (clientGUID) {
+        const pendingReportAction = pendingReportActions[clientGUID] || {};
+        const expectedSequenceNumber = pendingReportAction.sequenceNumber;
+        if (expectedSequenceNumber && (expectedSequenceNumber !== reportAction.sequenceNumber)) {
+            // If we end up here this means we handled some report action
+            // by Pusher out of order. We must find the action that is already
+            // occupying this sequenceNumber in memory and swap it's sequenceNumber
+            // for the expected one.
+            const pendingActionToRelocate = _.find(pendingReportActions, (action) => {
+                return action.sequenceNumber === reportAction.sequenceNumber;
+            });
+
+            // Move this action to the position where we expected the previous action
+            // to be so that there are no conflicts. This is most likely where this
+            // action will end up.
+            if (pendingActionToRelocate) {
+                const messageText = lodashGet(pendingActionToRelocate, ['message', 0, 'text'], '');
+                console.log(messageText);
+                const updatedPendingAction = {
+                    ...pendingActionToRelocate,
+                    sequenceNumber: expectedSequenceNumber,
+                    isAttachment: messageText === '[Attachment]',
+                    loading: true,
+                };
+                Ion.merge(`${IONKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`, {
+                    [expectedSequenceNumber]: updatedPendingAction,
+                });
+            }
+        }
+
+        // Clean this action from the pending action list
+        delete pendingReportActions[clientGUID];
+    }
+
     // Add the action into Ion
+    const messageText = lodashGet(reportAction, ['message', 0, 'text'], '');
     Ion.merge(`${IONKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`, {
         [reportAction.sequenceNumber]: {
             ...reportAction,
-            isAttachment: reportAction.text === '[Attachment]',
+            isAttachment: messageText === '[Attachment]',
             loading: false,
         },
     });
@@ -380,7 +421,7 @@ function fetchAll(shouldRedirectToReport = true, shouldFetchActions = false) {
             if (shouldFetchActions) {
                 _.each(reportIDs, (reportID) => {
                     console.debug(`[RECONNECT] Fetching report actions for report ${reportID}`);
-                    fetchActions(reportID);
+                    // fetchActions(reportID);
                 });
             }
         });
@@ -451,47 +492,57 @@ function addAction(reportID, text, file) {
     const highestSequenceNumber = reportMaxSequenceNumbers[reportID] || 0;
     const newSequenceNumber = highestSequenceNumber + 1;
 
+    // Generate a client guid so we can identify this later when it
+    // returns via Pusher with the real sequenceNumber
+    const clientGUID = `${reportID}_9999_${Date.now()}_${guid()}`;
+
     // Update the report in Ion to have the new sequence number
     Ion.merge(`${IONKEYS.COLLECTION.REPORT}${reportID}`, {
         maxSequenceNumber: newSequenceNumber,
     });
 
+    const newAction = {
+        actionName: 'ADDCOMMENT',
+        actorEmail: currentUserEmail,
+        person: [
+            {
+                style: 'strong',
+                text: myPersonalDetails.displayName || currentUserEmail,
+                type: 'TEXT'
+            }
+        ],
+        automatic: false,
+        sequenceNumber: newSequenceNumber,
+        avatar: myPersonalDetails.avatarURL,
+        timestamp: moment().unix(),
+        message: [
+            {
+                type: 'COMMENT',
+                html: isAttachment ? 'Uploading Attachment...' : htmlComment,
+
+                // Remove HTML from text when applying optimistic offline comment
+                text: isAttachment ? '[Attachment]'
+                    : htmlComment.replace(/<[^>]*>?/gm, ''),
+            }
+        ],
+        isFirstItem: false,
+        isAttachment,
+        loading: true,
+        clientGUID,
+    };
+
     // Optimistically add the new comment to the store before waiting to save it to the server
     Ion.merge(actionKey, {
-        [newSequenceNumber]: {
-            actionName: 'ADDCOMMENT',
-            actorEmail: currentUserEmail,
-            person: [
-                {
-                    style: 'strong',
-                    text: myPersonalDetails.displayName || currentUserEmail,
-                    type: 'TEXT'
-                }
-            ],
-            automatic: false,
-            sequenceNumber: newSequenceNumber,
-            avatar: myPersonalDetails.avatarURL,
-            timestamp: moment().unix(),
-            message: [
-                {
-                    type: 'COMMENT',
-                    html: isAttachment ? 'Uploading Attachment...' : htmlComment,
-
-                    // Remove HTML from text when applying optimistic offline comment
-                    text: isAttachment ? '[Attachment]'
-                        : htmlComment.replace(/<[^>]*>?/gm, ''),
-                }
-            ],
-            isFirstItem: false,
-            isAttachment,
-            loading: true,
-        }
+        [newSequenceNumber]: newAction,
     });
 
+    pendingReportActions[clientGUID] = newAction;
+
     API.addReportComment({
         reportID,
         reportComment: htmlComment,
-        file
+        file,
+        clientGUID,
     });
 }
 

From 29abf70e23796a78c908518c0c913f2cb09b4c29 Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc@expensify.com>
Date: Mon, 2 Nov 2020 17:42:36 -0800
Subject: [PATCH 02/72] Try some of this and a little of that

---
 src/libs/Ion.js                            | 18 ++++++
 src/libs/actions/Report.js                 | 68 +++++-----------------
 src/pages/home/report/ReportActionsView.js |  8 +++
 3 files changed, 41 insertions(+), 53 deletions(-)

diff --git a/src/libs/Ion.js b/src/libs/Ion.js
index fda00a5fc40c..8a432c1077fc 100644
--- a/src/libs/Ion.js
+++ b/src/libs/Ion.js
@@ -419,6 +419,23 @@ function init({safeEvictionKeys}) {
     addStorageEventHandler((key, newValue) => keyChanged(key, newValue));
 }
 
+/**
+ * Remove an object key from an Ion key value.
+ *
+ * WARNING: This has a known limitation in that
+ * if called in quick succession the value
+ * returned by Ion.get() may not be what we expect.
+ *
+ * @param {String} key
+ * @param {String} objectKeyToRemove
+ */
+function without(key, objectKeyToRemove) {
+    Ion.get(key)
+        .then(val => {
+            Ion.set(key, _.without(val, objectKeyToRemove));
+        });
+}
+
 const Ion = {
     connect,
     disconnect,
@@ -430,6 +447,7 @@ const Ion = {
     addToEvictionBlockList,
     removeFromEvictionBlockList,
     isSafeEvictionKey,
+    without,
 };
 
 export default Ion;
diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js
index 62b0de8040d1..f3512e58ef1d 100644
--- a/src/libs/actions/Report.js
+++ b/src/libs/actions/Report.js
@@ -59,8 +59,6 @@ const lastReadActionIDs = {};
 // List of reportIDs pinned by the user
 let pinnedReportIDs = [];
 
-const pendingReportActions = {};
-
 /**
  * Checks the report to see if there are any unread action items
  *
@@ -183,6 +181,7 @@ function fetchChatReportsByIDs(chatList) {
 
 /**
  * Updates a report in the store with a new report action
+ * from incoming Pusher or Airship event payload
  *
  * @param {number} reportID
  * @param {object} reportAction
@@ -199,46 +198,20 @@ function updateReportWithNewAction(reportID, reportAction) {
         maxSequenceNumber: reportAction.sequenceNumber,
     });
 
+    const actionKey = `${IONKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`;
+
     // Check the reportAction for the clientGUID and make sure the sequenceNumber
     // for this action matches correctly with the one we are expecting
     const clientGUID = reportAction.clientGUID;
     if (clientGUID) {
-        const pendingReportAction = pendingReportActions[clientGUID] || {};
-        const expectedSequenceNumber = pendingReportAction.sequenceNumber;
-        if (expectedSequenceNumber && (expectedSequenceNumber !== reportAction.sequenceNumber)) {
-            // If we end up here this means we handled some report action
-            // by Pusher out of order. We must find the action that is already
-            // occupying this sequenceNumber in memory and swap it's sequenceNumber
-            // for the expected one.
-            const pendingActionToRelocate = _.find(pendingReportActions, (action) => {
-                return action.sequenceNumber === reportAction.sequenceNumber;
-            });
-
-            // Move this action to the position where we expected the previous action
-            // to be so that there are no conflicts. This is most likely where this
-            // action will end up.
-            if (pendingActionToRelocate) {
-                const messageText = lodashGet(pendingActionToRelocate, ['message', 0, 'text'], '');
-                console.log(messageText);
-                const updatedPendingAction = {
-                    ...pendingActionToRelocate,
-                    sequenceNumber: expectedSequenceNumber,
-                    isAttachment: messageText === '[Attachment]',
-                    loading: true,
-                };
-                Ion.merge(`${IONKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`, {
-                    [expectedSequenceNumber]: updatedPendingAction,
-                });
-            }
-        }
-
-        // Clean this action from the pending action list
-        delete pendingReportActions[clientGUID];
+        // Delete this item from the report since we are about to replace it at the
+        // correct action ID index
+        Ion.without(actionKey, clientGUID);
     }
 
     // Add the action into Ion
     const messageText = lodashGet(reportAction, ['message', 0, 'text'], '');
-    Ion.merge(`${IONKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`, {
+    Ion.merge(actionKey, {
         [reportAction.sequenceNumber]: {
             ...reportAction,
             isAttachment: messageText === '[Attachment]',
@@ -481,25 +454,14 @@ function fetchOrCreateChatReport(participants) {
  * @param {object} file
  */
 function addAction(reportID, text, file) {
-    const actionKey = `${IONKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`;
-
     // Convert the comment from MD into HTML because that's how it is stored in the database
     const parser = new ExpensiMark();
     const htmlComment = parser.replace(text);
     const isAttachment = _.isEmpty(text) && file !== undefined;
 
-    // The new sequence number will be one higher than the highest
-    const highestSequenceNumber = reportMaxSequenceNumbers[reportID] || 0;
-    const newSequenceNumber = highestSequenceNumber + 1;
-
     // Generate a client guid so we can identify this later when it
     // returns via Pusher with the real sequenceNumber
-    const clientGUID = `${reportID}_9999_${Date.now()}_${guid()}`;
-
-    // Update the report in Ion to have the new sequence number
-    Ion.merge(`${IONKEYS.COLLECTION.REPORT}${reportID}`, {
-        maxSequenceNumber: newSequenceNumber,
-    });
+    const tempActionID = `${reportID}_9999_${Date.now()}_${guid()}`;
 
     const newAction = {
         actionName: 'ADDCOMMENT',
@@ -512,7 +474,10 @@ function addAction(reportID, text, file) {
             }
         ],
         automatic: false,
-        sequenceNumber: newSequenceNumber,
+
+        // Use the client generated ID as a temporary action ID
+        // so we can remove it later
+        sequenceNumber: tempActionID,
         avatar: myPersonalDetails.avatarURL,
         timestamp: moment().unix(),
         message: [
@@ -528,21 +493,18 @@ function addAction(reportID, text, file) {
         isFirstItem: false,
         isAttachment,
         loading: true,
-        clientGUID,
     };
 
     // Optimistically add the new comment to the store before waiting to save it to the server
-    Ion.merge(actionKey, {
-        [newSequenceNumber]: newAction,
+    Ion.merge(`${IONKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`, {
+        [tempActionID]: newAction,
     });
 
-    pendingReportActions[clientGUID] = newAction;
-
     API.addReportComment({
         reportID,
         reportComment: htmlComment,
         file,
-        clientGUID,
+        clientGUID: tempActionID,
     });
 }
 
diff --git a/src/pages/home/report/ReportActionsView.js b/src/pages/home/report/ReportActionsView.js
index cb2e4b0ba8b6..d1a9e94fea8d 100644
--- a/src/pages/home/report/ReportActionsView.js
+++ b/src/pages/home/report/ReportActionsView.js
@@ -171,6 +171,14 @@ class ReportActionsView extends React.Component {
     recordMaxAction() {
         const reportActions = lodashGet(this.props, 'reportActions', {});
         const maxVisibleSequenceNumber = _.chain(reportActions)
+
+            // We want to avoid marking any pending actions as read since
+            // 1. Any action ID that hasn't been delivered by the server
+            //    is a temporary action ID.
+            // 2. We already set a comment someone has authored as the
+            //    lastReadActionID_<accountID> rNVP on the server and should
+            //    sync it locally when we handle it via Pusher or Airship
+            .filter(action => !action.loading)
             .pluck('sequenceNumber')
             .max()
             .value();

From dda4c8bc90723e3922c456cebf163ab21cfdf845 Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc@expensify.com>
Date: Mon, 2 Nov 2020 19:01:17 -0800
Subject: [PATCH 03/72] Find a way to make this work

---
 src/libs/Ion.js            | 19 +++++++++++--------
 src/libs/actions/Report.js | 29 +++++++++++++++++------------
 2 files changed, 28 insertions(+), 20 deletions(-)

diff --git a/src/libs/Ion.js b/src/libs/Ion.js
index 8a432c1077fc..a6cb351a39bd 100644
--- a/src/libs/Ion.js
+++ b/src/libs/Ion.js
@@ -422,17 +422,20 @@ function init({safeEvictionKeys}) {
 /**
  * Remove an object key from an Ion key value.
  *
- * WARNING: This has a known limitation in that
- * if called in quick succession the value
- * returned by Ion.get() may not be what we expect.
+ * Caveat - this method should only be used
+ * synchronously before a call to Ion.merge()
  *
  * @param {String} key
  * @param {String} objectKeyToRemove
+ *
+ * @returns {Promise}
  */
-function without(key, objectKeyToRemove) {
-    Ion.get(key)
-        .then(val => {
-            Ion.set(key, _.without(val, objectKeyToRemove));
+function removeObjectKey(key, objectKeyToRemove) {
+    return get(key)
+        .then((object) => {
+            const newObject = {...object};
+            delete newObject[objectKeyToRemove];
+            return set(key, newObject);
         });
 }
 
@@ -447,7 +450,7 @@ const Ion = {
     addToEvictionBlockList,
     removeFromEvictionBlockList,
     isSafeEvictionKey,
-    without,
+    removeObjectKey,
 };
 
 export default Ion;
diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js
index f3512e58ef1d..97f9c3879d30 100644
--- a/src/libs/actions/Report.js
+++ b/src/libs/actions/Report.js
@@ -200,25 +200,30 @@ function updateReportWithNewAction(reportID, reportAction) {
 
     const actionKey = `${IONKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`;
 
+    const mergeAction = () => {
+        // Add the action into Ion
+        const messageText = lodashGet(reportAction, ['message', 0, 'text'], '');
+        Ion.merge(actionKey, {
+            [reportAction.sequenceNumber]: {
+                ...reportAction,
+                isAttachment: messageText === '[Attachment]',
+                loading: false,
+            },
+        });
+    };
+
     // Check the reportAction for the clientGUID and make sure the sequenceNumber
     // for this action matches correctly with the one we are expecting
     const clientGUID = reportAction.clientGUID;
     if (clientGUID) {
         // Delete this item from the report since we are about to replace it at the
         // correct action ID index
-        Ion.without(actionKey, clientGUID);
+        Ion.removeObjectKey(actionKey, clientGUID)
+            .then(mergeAction);
+    } else {
+        mergeAction();
     }
 
-    // Add the action into Ion
-    const messageText = lodashGet(reportAction, ['message', 0, 'text'], '');
-    Ion.merge(actionKey, {
-        [reportAction.sequenceNumber]: {
-            ...reportAction,
-            isAttachment: messageText === '[Attachment]',
-            loading: false,
-        },
-    });
-
     if (!ActiveClientManager.isClientTheLeader()) {
         console.debug('[LOCAL_NOTIFICATION] Skipping notification because this client is not the leader');
         return;
@@ -394,7 +399,7 @@ function fetchAll(shouldRedirectToReport = true, shouldFetchActions = false) {
             if (shouldFetchActions) {
                 _.each(reportIDs, (reportID) => {
                     console.debug(`[RECONNECT] Fetching report actions for report ${reportID}`);
-                    // fetchActions(reportID);
+                    fetchActions(reportID);
                 });
             }
         });

From 43f2d33b919b52f4479ecba688157ed1f240730b Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc@expensify.com>
Date: Mon, 2 Nov 2020 19:25:45 -0800
Subject: [PATCH 04/72] fix ugly diff

---
 src/libs/actions/Report.js | 64 ++++++++++++++++++--------------------
 1 file changed, 31 insertions(+), 33 deletions(-)

diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js
index 97f9c3879d30..845eda801eb7 100644
--- a/src/libs/actions/Report.js
+++ b/src/libs/actions/Report.js
@@ -468,41 +468,39 @@ function addAction(reportID, text, file) {
     // returns via Pusher with the real sequenceNumber
     const tempActionID = `${reportID}_9999_${Date.now()}_${guid()}`;
 
-    const newAction = {
-        actionName: 'ADDCOMMENT',
-        actorEmail: currentUserEmail,
-        person: [
-            {
-                style: 'strong',
-                text: myPersonalDetails.displayName || currentUserEmail,
-                type: 'TEXT'
-            }
-        ],
-        automatic: false,
-
-        // Use the client generated ID as a temporary action ID
-        // so we can remove it later
-        sequenceNumber: tempActionID,
-        avatar: myPersonalDetails.avatarURL,
-        timestamp: moment().unix(),
-        message: [
-            {
-                type: 'COMMENT',
-                html: isAttachment ? 'Uploading Attachment...' : htmlComment,
-
-                // Remove HTML from text when applying optimistic offline comment
-                text: isAttachment ? '[Attachment]'
-                    : htmlComment.replace(/<[^>]*>?/gm, ''),
-            }
-        ],
-        isFirstItem: false,
-        isAttachment,
-        loading: true,
-    };
-
     // Optimistically add the new comment to the store before waiting to save it to the server
     Ion.merge(`${IONKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`, {
-        [tempActionID]: newAction,
+        [tempActionID]: {
+            actionName: 'ADDCOMMENT',
+            actorEmail: currentUserEmail,
+            person: [
+                {
+                    style: 'strong',
+                    text: myPersonalDetails.displayName || currentUserEmail,
+                    type: 'TEXT'
+                }
+            ],
+            automatic: false,
+
+            // Use the client generated ID as a temporary action ID
+            // so we can remove it later
+            sequenceNumber: tempActionID,
+            avatar: myPersonalDetails.avatarURL,
+            timestamp: moment().unix(),
+            message: [
+                {
+                    type: 'COMMENT',
+                    html: isAttachment ? 'Uploading Attachment...' : htmlComment,
+
+                    // Remove HTML from text when applying optimistic offline comment
+                    text: isAttachment ? '[Attachment]'
+                        : htmlComment.replace(/<[^>]*>?/gm, ''),
+                }
+            ],
+            isFirstItem: false,
+            isAttachment,
+            loading: true,
+        },
     });
 
     API.addReportComment({

From 392448f4dd3ed75ca7f06e4d8bd6b156c5c7b537 Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc@expensify.com>
Date: Mon, 9 Nov 2020 08:48:56 -1000
Subject: [PATCH 05/72] Do not use 9999

---
 src/libs/actions/Report.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js
index 616c05659e0a..125999863d9d 100644
--- a/src/libs/actions/Report.js
+++ b/src/libs/actions/Report.js
@@ -487,7 +487,7 @@ function addAction(reportID, text, file) {
 
     // Generate a client guid so we can identify this later when it
     // returns via Pusher with the real sequenceNumber
-    const tempActionID = `${reportID}_9999_${Date.now()}_${guid()}`;
+    const tempActionID = `${reportID}_${Date.now()}_${guid()}`;
 
     // Optimistically add the new comment to the store before waiting to save it to the server
     Ion.merge(`${IONKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`, {

From 4c6a146ef99732d0bc0c7306057aaadb935dab3c Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc@expensify.com>
Date: Mon, 9 Nov 2020 10:06:42 -1000
Subject: [PATCH 06/72] fix prop types

---
 src/pages/home/report/ReportActionPropTypes.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/pages/home/report/ReportActionPropTypes.js b/src/pages/home/report/ReportActionPropTypes.js
index 84f216010caf..ec7a4542cd49 100644
--- a/src/pages/home/report/ReportActionPropTypes.js
+++ b/src/pages/home/report/ReportActionPropTypes.js
@@ -10,7 +10,10 @@ export default {
     person: PropTypes.arrayOf(ReportActionFragmentPropTypes).isRequired,
 
     // ID of the report action
-    sequenceNumber: PropTypes.number.isRequired,
+    sequenceNumber: PropTypes.oneOfType([
+        PropTypes.number,
+        PropTypes.string,
+    ]).isRequired,
 
     // Unix timestamp
     timestamp: PropTypes.number.isRequired,

From 7a5d955dfa01b6f91535a928d68390df3a75231d Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc@expensify.com>
Date: Mon, 9 Nov 2020 10:26:12 -1000
Subject: [PATCH 07/72] remove removeObjectKey

---
 src/libs/Ion/index.js | 21 ---------------------
 1 file changed, 21 deletions(-)

diff --git a/src/libs/Ion/index.js b/src/libs/Ion/index.js
index bd0d5b3dcd5e..2510f8235d37 100644
--- a/src/libs/Ion/index.js
+++ b/src/libs/Ion/index.js
@@ -451,26 +451,6 @@ function init({keys, initialKeyStates, safeEvictionKeys}) {
     addStorageEventHandler((key, newValue) => keyChanged(key, newValue));
 }
 
-/**
- * Remove an object key from an Ion key value.
- *
- * Caveat - this method should only be used
- * synchronously before a call to Ion.merge()
- *
- * @param {String} key
- * @param {String} objectKeyToRemove
- *
- * @returns {Promise}
- */
-function removeObjectKey(key, objectKeyToRemove) {
-    return get(key)
-        .then((object) => {
-            const newObject = {...object};
-            delete newObject[objectKeyToRemove];
-            return set(key, newObject);
-        });
-}
-
 const Ion = {
     connect,
     disconnect,
@@ -483,7 +463,6 @@ const Ion = {
     addToEvictionBlockList,
     removeFromEvictionBlockList,
     isSafeEvictionKey,
-    removeObjectKey,
 };
 
 export default Ion;

From 30e9af13668503b6f15c6f179a9d0d717426f2eb Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc@expensify.com>
Date: Mon, 9 Nov 2020 15:49:45 -1000
Subject: [PATCH 08/72] Remove actions that are loading when the app inits

---
 src/libs/Ion/index.js      |  7 ++++---
 src/libs/actions/Report.js | 38 ++++++++++++++++++++++++++++++++------
 2 files changed, 36 insertions(+), 9 deletions(-)

diff --git a/src/libs/Ion/index.js b/src/libs/Ion/index.js
index 2510f8235d37..db1a32a801f6 100644
--- a/src/libs/Ion/index.js
+++ b/src/libs/Ion/index.js
@@ -183,14 +183,15 @@ function keyChanged(key, data) {
  * @param {string} [config.statePropertyName]
  * @param {function} [config.callback]
  * @param {*|null} val
+ * @param {String} key
  */
-function sendDataToConnection(config, val) {
+function sendDataToConnection(config, val, key) {
     if (config.withIonInstance) {
         config.withIonInstance.setState({
             [config.statePropertyName]: val,
         });
     } else if (_.isFunction(config.callback)) {
-        config.callback(val);
+        config.callback(val, key, true);
     }
 }
 
@@ -252,7 +253,7 @@ function connect(mapping) {
                     .then(val => sendDataToConnection(mapping, val));
             } else {
                 _.each(matchingKeys, (key) => {
-                    get(key).then(val => sendDataToConnection(mapping, val));
+                    get(key).then(val => sendDataToConnection(mapping, val, key));
                 });
             }
         });
diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js
index 125999863d9d..7e7fc3122304 100644
--- a/src/libs/actions/Report.js
+++ b/src/libs/actions/Report.js
@@ -195,6 +195,18 @@ function setLocalLastReadActionID(reportID, sequenceNumber) {
     });
 }
 
+/**
+ * Remove a temporary actionID
+ *
+ * @param {Number} reportID
+ * @param {String} actionID
+ */
+function removeLoadingAction(reportID, actionID) {
+    Ion.merge(`${IONKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`, {
+        [actionID]: null,
+    });
+}
+
 /**
  * Updates a report in the store with a new report action
  * from incoming Pusher or Airship event payload
@@ -222,17 +234,13 @@ function updateReportWithNewAction(reportID, reportAction) {
         maxSequenceNumber: reportAction.sequenceNumber,
     });
 
-    const actionKey = `${IONKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`;
-
     // Check the reportAction for the clientGUID and make sure the sequenceNumber
     // for this action matches correctly with the one we are expecting
     const clientGUID = reportAction.clientGUID;
     if (clientGUID) {
         // Delete this item from the report since we are about to replace it at the
         // correct action ID index
-        Ion.merge(actionKey, {
-            [clientGUID]: null,
-        });
+        removeLoadingAction(reportID, clientGUID);
     }
 
     // Add the action into Ion
@@ -487,7 +495,7 @@ function addAction(reportID, text, file) {
 
     // Generate a client guid so we can identify this later when it
     // returns via Pusher with the real sequenceNumber
-    const tempActionID = `${reportID}_${Date.now()}_${guid()}`;
+    const tempActionID = `${Date.now()}_${guid()}`;
 
     // Optimistically add the new comment to the store before waiting to save it to the server
     Ion.merge(`${IONKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`, {
@@ -618,6 +626,24 @@ Ion.connect({
     callback: handleReportChanged
 });
 
+Ion.connect({
+    key: IONKEYS.COLLECTION.REPORT_ACTIONS,
+    callback: (val, key, isInitialData) => {
+        if (!key || !isInitialData) {
+            return;
+        }
+
+        const reportID = key.replace(IONKEYS.COLLECTION.REPORT_ACTIONS, '');
+
+        // Remove any actions that we find
+        _.each(val, (action, actionID) => {
+            if (action.loading) {
+                removeLoadingAction(Number(reportID), actionID);
+            }
+        });
+    },
+});
+
 // When the app reconnects from being offline, fetch all of the reports and their actions
 NetworkConnection.onReconnect(() => {
     fetchAll(false, true);

From 886c8e22173326382bd45ef62d8e57ee898e4d70 Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc@expensify.com>
Date: Mon, 9 Nov 2020 16:04:01 -1000
Subject: [PATCH 09/72] Add comments

---
 src/libs/Ion/index.js      |  6 +++++-
 src/libs/actions/Report.js | 11 ++++++-----
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/libs/Ion/index.js b/src/libs/Ion/index.js
index db1a32a801f6..59adcd27b8bc 100644
--- a/src/libs/Ion/index.js
+++ b/src/libs/Ion/index.js
@@ -191,7 +191,11 @@ function sendDataToConnection(config, val, key) {
             [config.statePropertyName]: val,
         });
     } else if (_.isFunction(config.callback)) {
-        config.callback(val, key, true);
+        // The only time we use sendDataToConnection is
+        // when we first call Ion.connect() on a key
+        // so we will give the subscribe a way to differentiate
+        // between the initial expected callback and future updates.
+        config.callback(val, key, {isInitialLoad: true});
     }
 }
 
diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js
index 7e7fc3122304..5146c4acc24f 100644
--- a/src/libs/actions/Report.js
+++ b/src/libs/actions/Report.js
@@ -234,8 +234,8 @@ function updateReportWithNewAction(reportID, reportAction) {
         maxSequenceNumber: reportAction.sequenceNumber,
     });
 
-    // Check the reportAction for the clientGUID and make sure the sequenceNumber
-    // for this action matches correctly with the one we are expecting
+    // Check the reportAction for a clientGUID and remove the temporary action
+    // since we are about to merge in the real action with accurate sequenceNumber
     const clientGUID = reportAction.clientGUID;
     if (clientGUID) {
         // Delete this item from the report since we are about to replace it at the
@@ -628,14 +628,15 @@ Ion.connect({
 
 Ion.connect({
     key: IONKEYS.COLLECTION.REPORT_ACTIONS,
-    callback: (val, key, isInitialData) => {
-        if (!key || !isInitialData) {
+    callback: (val, key, options = {}) => {
+        // We only want to remove any stale loading reportActions on app init
+        if (!options.isInitialLoad) {
             return;
         }
 
         const reportID = key.replace(IONKEYS.COLLECTION.REPORT_ACTIONS, '');
 
-        // Remove any actions that we find
+        // Remove any actions in the loading state.
         _.each(val, (action, actionID) => {
             if (action.loading) {
                 removeLoadingAction(Number(reportID), actionID);

From 22ad1b8265443104f56d478e820b2155516b967b Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc@expensify.com>
Date: Wed, 11 Nov 2020 17:17:10 -1000
Subject: [PATCH 10/72] Undo this idea for now...

---
 src/libs/actions/Report.js | 19 -------------------
 1 file changed, 19 deletions(-)

diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js
index 9602db255a55..5b2f7083fd28 100644
--- a/src/libs/actions/Report.js
+++ b/src/libs/actions/Report.js
@@ -635,25 +635,6 @@ Onyx.connect({
     callback: handleReportChanged
 });
 
-Onyx.connect({
-    key: ONYXKEYS.COLLECTION.REPORT_ACTIONS,
-    callback: (val, key, options = {}) => {
-        // We only want to remove any stale loading reportActions on app init
-        if (!options.isInitialLoad) {
-            return;
-        }
-
-        const reportID = key.replace(ONYXKEYS.COLLECTION.REPORT_ACTIONS, '');
-
-        // Remove any actions in the loading state.
-        _.each(val, (action, actionID) => {
-            if (action.loading) {
-                removeLoadingAction(Number(reportID), actionID);
-            }
-        });
-    },
-});
-
 // When the app reconnects from being offline, fetch all of the reports and their actions
 NetworkConnection.onReconnect(() => {
     fetchAll(false, true);

From 8e923448b5b0951c3fce13019c0073c842aae591 Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc@expensify.com>
Date: Wed, 11 Nov 2020 17:20:18 -1000
Subject: [PATCH 11/72] use Str.guid()

---
 src/libs/actions/Report.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js
index 5b2f7083fd28..159327f94a8a 100644
--- a/src/libs/actions/Report.js
+++ b/src/libs/actions/Report.js
@@ -2,6 +2,7 @@ import moment from 'moment';
 import _ from 'underscore';
 import lodashGet from 'lodash.get';
 import ExpensiMark from 'js-libs/lib/ExpensiMark';
+import Str from 'js-libs/lib/str';
 import Onyx from 'react-native-onyx';
 import * as API from '../API';
 import ONYXKEYS from '../../ONYXKEYS';
@@ -15,7 +16,6 @@ import Visibility from '../Visibility';
 import ROUTES from '../../ROUTES';
 import NetworkConnection from '../NetworkConnection';
 import {hide as hideSidebar} from './Sidebar';
-import guid from '../guid';
 
 let currentUserEmail;
 let currentUserAccountID;
@@ -504,7 +504,7 @@ function addAction(reportID, text, file) {
 
     // Generate a client guid so we can identify this later when it
     // returns via Pusher with the real sequenceNumber
-    const tempActionID = `${Date.now()}_${guid()}`;
+    const tempActionID = `${Date.now()}_${Str.guid()}`;
 
     // Optimistically add the new comment to the store before waiting to save it to the server
     Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`, {

From b294b24e0da3372837692beff342840329610b20 Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Fri, 11 Dec 2020 13:22:06 -1000
Subject: [PATCH 12/72] add additional comments

---
 src/libs/actions/Report.js                    | 31 ++++++++++---------
 .../home/report/ReportActionPropTypes.js      |  3 +-
 src/pages/home/report/ReportActionsView.js    |  2 +-
 3 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js
index 7dea82a61183..993ff4046d84 100644
--- a/src/libs/actions/Report.js
+++ b/src/libs/actions/Report.js
@@ -1,6 +1,7 @@
 import moment from 'moment';
 import _ from 'underscore';
 import lodashGet from 'lodash.get';
+import ExpensiMark from 'expensify-common/lib/ExpensiMark';
 import Str from 'expensify-common/lib/str';
 import Onyx from 'react-native-onyx';
 import ONYXKEYS from '../../ONYXKEYS';
@@ -199,12 +200,12 @@ function setLocalLastRead(reportID, sequenceNumber) {
 }
 
 /**
- * Remove a temporary actionID
+ * Remove a specific action from a report by index.
  *
  * @param {Number} reportID
  * @param {String} actionID
  */
-function removeLoadingAction(reportID, actionID) {
+function removeLocalAction(reportID, actionID) {
     Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`, {
         [actionID]: null,
     });
@@ -237,13 +238,10 @@ function updateReportWithNewAction(reportID, reportAction) {
         maxSequenceNumber: reportAction.sequenceNumber,
     });
 
-    // Check the reportAction for a clientGUID and remove the temporary action
-    // since we are about to merge in the real action with accurate sequenceNumber
-    const clientGUID = reportAction.clientGUID;
-    if (clientGUID) {
-        // Delete this item from the report since we are about to replace it at the
-        // correct action ID index
-        removeLoadingAction(reportID, clientGUID);
+    if (reportAction.clientGUID) {
+        // Remove the temporary action from the report since we are about to
+        // replace it with the real one (which has the true sequenceNumber)
+        removeLocalAction(reportID, reportAction.clientGUID);
     }
 
     // Add the action into Onyx
@@ -512,13 +510,16 @@ function addAction(reportID, text, file) {
         maxSequenceNumber: newSequenceNumber,
     });
 
-    // Generate a client guid so we can identify this later when it
-    // returns via Pusher with the real sequenceNumber
-    const tempActionID = `${Date.now()}_${Str.guid()}`;
+    // Generate a client id to store with the local action. Later, we
+    // will find and remove this action by referencing the action created
+    // in the server. We do this because it's not safe to assume that this
+    // action will use the next sequenceNumber. An action created by another
+    // user can overwrite that sequenceNumber if it is created before this one.
+    const temporaryReportActionID = `${Date.now()}_${Str.guid()}`;
 
     // Optimistically add the new comment to the store before waiting to save it to the server
     Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`, {
-        [tempActionID]: {
+        [temporaryReportActionID]: {
             actionName: 'ADDCOMMENT',
             actorEmail: currentUserEmail,
             person: [
@@ -532,7 +533,7 @@ function addAction(reportID, text, file) {
 
             // Use the client generated ID as a temporary action ID
             // so we can remove it later
-            sequenceNumber: tempActionID,
+            sequenceNumber: temporaryReportActionID,
             avatar: myPersonalDetails.avatarURL,
             timestamp: moment().unix(),
             message: [
@@ -555,7 +556,7 @@ function addAction(reportID, text, file) {
         reportID,
         reportComment: htmlComment,
         file,
-        clientGUID: tempActionID,
+        clientGUID: temporaryReportActionID,
     });
 }
 
diff --git a/src/pages/home/report/ReportActionPropTypes.js b/src/pages/home/report/ReportActionPropTypes.js
index ec7a4542cd49..631e07cfc20c 100644
--- a/src/pages/home/report/ReportActionPropTypes.js
+++ b/src/pages/home/report/ReportActionPropTypes.js
@@ -9,7 +9,8 @@ export default {
     // Person who created the action
     person: PropTypes.arrayOf(ReportActionFragmentPropTypes).isRequired,
 
-    // ID of the report action
+    // ID of the report action. Can be either a number or a string since
+    // temporary report action IDs are unique strings generated in the client.
     sequenceNumber: PropTypes.oneOfType([
         PropTypes.number,
         PropTypes.string,
diff --git a/src/pages/home/report/ReportActionsView.js b/src/pages/home/report/ReportActionsView.js
index 07580251edbd..9af291101256 100644
--- a/src/pages/home/report/ReportActionsView.js
+++ b/src/pages/home/report/ReportActionsView.js
@@ -179,7 +179,7 @@ class ReportActionsView extends React.Component {
             // 2. We already set a comment someone has authored as the
             //    lastReadActionID_<accountID> rNVP on the server and should
             //    sync it locally when we handle it via Pusher or Airship
-            .filter(action => !action.loading)
+            .reject(action => action.loading)
             .pluck('sequenceNumber')
             .max()
             .value();

From 59cb9077f50a55be4435ac23286f067c309e887a Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Fri, 11 Dec 2020 16:08:42 -1000
Subject: [PATCH 13/72] Update to clientID

---
 src/libs/API.js                                 | 4 ++--
 src/libs/actions/Report.js                      | 6 +++---
 src/pages/home/report/ReportActionItemSingle.js | 2 ++
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/libs/API.js b/src/libs/API.js
index 116230bc79d1..3ef8f722d223 100644
--- a/src/libs/API.js
+++ b/src/libs/API.js
@@ -345,13 +345,13 @@ function Push_Authenticate(parameters) {
  * @param {Object} parameters
  * @param {String} parameters.reportComment
  * @param {Number} parameters.reportID
- * @param {String} parameters.clientGUID
+ * @param {String} parameters.clientID
  * @param {Object} [parameters.file]
  * @returns {Promise}
  */
 function Report_AddComment(parameters) {
     const commandName = 'Report_AddComment';
-    requireParameters(['reportComment', 'reportID', 'clientGUID'],
+    requireParameters(['reportComment', 'reportID', 'clientID'],
         parameters, commandName);
     return request(commandName, parameters);
 }
diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js
index 993ff4046d84..de46d5560eab 100644
--- a/src/libs/actions/Report.js
+++ b/src/libs/actions/Report.js
@@ -238,10 +238,10 @@ function updateReportWithNewAction(reportID, reportAction) {
         maxSequenceNumber: reportAction.sequenceNumber,
     });
 
-    if (reportAction.clientGUID) {
+    if (reportAction.clientID) {
         // Remove the temporary action from the report since we are about to
         // replace it with the real one (which has the true sequenceNumber)
-        removeLocalAction(reportID, reportAction.clientGUID);
+        removeLocalAction(reportID, reportAction.clientID);
     }
 
     // Add the action into Onyx
@@ -556,7 +556,7 @@ function addAction(reportID, text, file) {
         reportID,
         reportComment: htmlComment,
         file,
-        clientGUID: temporaryReportActionID,
+        clientID: temporaryReportActionID,
     });
 }
 
diff --git a/src/pages/home/report/ReportActionItemSingle.js b/src/pages/home/report/ReportActionItemSingle.js
index 53bce584549c..995bb3aed815 100644
--- a/src/pages/home/report/ReportActionItemSingle.js
+++ b/src/pages/home/report/ReportActionItemSingle.js
@@ -30,6 +30,8 @@ const ReportActionItemSingle = ({action}) => {
                         <ReportActionItemFragment
                             key={`person-${action.sequenceNumber}-${index}`}
                             fragment={fragment}
+                            isAttachment={action.isAttachment}
+                            isLoading={action.loading}
                         />
                     ))}
                     <ReportActionItemDate timestamp={action.timestamp} />

From 76c7285fbcbfad8b1317caaa0d1abdcf73ca49fd Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Fri, 11 Dec 2020 17:39:33 -1000
Subject: [PATCH 14/72] Add temporaryReportActionIDs so we can easily clear
 them

---
 src/libs/actions/Report.js | 39 ++++++++++++++++++++++++++++++++++++--
 1 file changed, 37 insertions(+), 2 deletions(-)

diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js
index de46d5560eab..aab799750259 100644
--- a/src/libs/actions/Report.js
+++ b/src/libs/actions/Report.js
@@ -56,6 +56,11 @@ const reportMaxSequenceNumbers = {};
 // Keeps track of the last read for each report
 const lastReadSequenceNumbers = {};
 
+// Map of temporary report action IDs a.k.a. optimistic
+// comments. These should be cleared when replaced by
+// a recent fetch of report history.
+const temporaryReportActionIDs = {};
+
 /**
  * Checks the report to see if there are any unread action items
  *
@@ -211,9 +216,23 @@ function removeLocalAction(reportID, actionID) {
     });
 }
 
+/**
+ * Remove all temporary actions from a local report.
+ *
+ * @param {Number} reportID
+ */
+function removeTemporaryActions(reportID) {
+    const actionIDs = temporaryReportActionIDs[reportID] || [];
+    _.each(actionIDs, actionID => removeLocalAction(reportID, actionID));
+
+    // Reset the temporary report action IDs back to their default.
+    Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`, {
+        temporaryReportActionIDs: [],
+    });
+}
+
 /**
  * Updates a report in the store with a new report action
- * from incoming Pusher or Airship event payload
  *
  * @param {Number} reportID
  * @param {Object} reportAction
@@ -400,6 +419,11 @@ function fetchChatReports() {
 function fetchActions(reportID) {
     API.Report_GetHistory({reportID})
         .then((data) => {
+            // We must remove all temporary actions so there will not be any
+            // stuck comments. At this point, we should be caught up and no
+            // longer need any optimistic comments.
+            removeTemporaryActions(reportID);
+
             const indexedData = _.indexBy(data.history, 'sequenceNumber');
             const maxSequenceNumber = _.chain(data.history)
                 .pluck('sequenceNumber')
@@ -517,6 +541,13 @@ function addAction(reportID, text, file) {
     // user can overwrite that sequenceNumber if it is created before this one.
     const temporaryReportActionID = `${Date.now()}_${Str.guid()}`;
 
+    // Add the temporary action ID to our report map so we can remove it
+    // when refetching report actions for a given report to clear out any
+    // stuck actions.
+    Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`, {
+        temporaryReportActionIDs: [...(temporaryReportActionIDs[reportID] || []), temporaryReportActionID],
+    });
+
     // Optimistically add the new comment to the store before waiting to save it to the server
     Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`, {
         [temporaryReportActionID]: {
@@ -557,7 +588,8 @@ function addAction(reportID, text, file) {
         reportComment: htmlComment,
         file,
         clientID: temporaryReportActionID,
-    });
+    })
+        .then(({reportAction}) => updateReportWithNewAction(reportID, reportAction));
 }
 
 /**
@@ -639,6 +671,9 @@ function handleReportChanged(report) {
 
     // Store the max sequence number for each report
     reportMaxSequenceNumbers[report.reportID] = report.maxSequenceNumber;
+
+    // Store temporary actions IDs for each report
+    temporaryReportActionIDs[report.reportID] = report.temporaryReportActionIDs;
 }
 
 Onyx.connect({

From 5b49ef4ed24496e50862926edb602b28d7647793 Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Mon, 28 Dec 2020 12:48:03 -1000
Subject: [PATCH 15/72] make changes

---
 src/libs/actions/Report.js | 52 +++++++++++++++++---------------------
 1 file changed, 23 insertions(+), 29 deletions(-)

diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js
index 9deabb1bade2..75eb498f81ce 100644
--- a/src/libs/actions/Report.js
+++ b/src/libs/actions/Report.js
@@ -58,9 +58,9 @@ const reportMaxSequenceNumbers = {};
 // Keeps track of the last read for each report
 const lastReadSequenceNumbers = {};
 
-// Map of temporary report action IDs a.k.a. optimistic
-// comments. These should be cleared when replaced by
-// a recent fetch of report history.
+// Map of temporary report action IDs a.k.a. optimistic comments. These should be cleared when replaced by a recent
+// fetch of report history since we will then be up to date and any temporary actions that are still waiting to be
+// replaced can be removed.
 const temporaryReportActionIDs = {};
 
 /**
@@ -206,18 +206,6 @@ function setLocalLastRead(reportID, sequenceNumber) {
     });
 }
 
-/**
- * Remove a specific action from a report by index.
- *
- * @param {Number} reportID
- * @param {String} actionID
- */
-function removeLocalAction(reportID, actionID) {
-    Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`, {
-        [actionID]: null,
-    });
-}
-
 /**
  * Remove all temporary actions from a local report.
  *
@@ -225,9 +213,13 @@ function removeLocalAction(reportID, actionID) {
  */
 function removeTemporaryActions(reportID) {
     const actionIDs = temporaryReportActionIDs[reportID] || [];
-    _.each(actionIDs, actionID => removeLocalAction(reportID, actionID));
+    const actionsToRemove = _.reduce(actionIDs, (actions, actionID) => ({
+        ...actions,
+        [actionID]: null,
+    }), {});
+    Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`, actionsToRemove);
 
-    // Reset the temporary report action IDs back to their default.
+    // Reset the temporary report action IDs to an empty array
     Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`, {
         temporaryReportActionIDs: [],
     });
@@ -259,21 +251,22 @@ function updateReportWithNewAction(reportID, reportAction) {
         maxSequenceNumber: reportAction.sequenceNumber,
     });
 
+    const reportActionsToMerge = {};
     if (reportAction.clientID) {
         // Remove the temporary action from the report since we are about to
         // replace it with the real one (which has the true sequenceNumber)
-        removeLocalAction(reportID, reportAction.clientID);
+        reportActionsToMerge[reportAction.clientID] = null;
     }
 
     // Add the action into Onyx
     const messageText = lodashGet(reportAction, ['message', 0, 'text'], '');
-    Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`, {
-        [reportAction.sequenceNumber]: {
-            ...reportAction,
-            isAttachment: messageText === '[Attachment]',
-            loading: false,
-        },
-    });
+    reportActionsToMerge[reportAction.sequenceNumber] = {
+        ...reportAction,
+        isAttachment: messageText === '[Attachment]',
+        loading: false,
+    };
+
+    Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`, reportActionsToMerge);
 
     if (!ActiveClientManager.isClientTheLeader()) {
         console.debug('[LOCAL_NOTIFICATION] Skipping notification because this client is not the leader');
@@ -545,11 +538,12 @@ function addAction(reportID, text, file) {
     // in the server. We do this because it's not safe to assume that this
     // action will use the next sequenceNumber. An action created by another
     // user can overwrite that sequenceNumber if it is created before this one.
-    const temporaryReportActionID = `${Date.now()}_${Str.guid()}`;
+    const temporaryReportActionID = Str.guid(`${Date.now()}_`);
 
-    // Add the temporary action ID to our report map so we can remove it
-    // when refetching report actions for a given report to clear out any
-    // stuck actions.
+    // Store the temporary action ID on the report the comment was added to.
+    // It will be removed later when refetching report actions in order to clear out any
+    // stuck actions (i.e. actions where the client never received a Pusher event, for
+    // whatever reason, from the server with the new action data
     Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`, {
         temporaryReportActionIDs: [...(temporaryReportActionIDs[reportID] || []), temporaryReportActionID],
     });

From 42ae01f726bd6ac4e6cb2f40649315146800ea5d Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Mon, 28 Dec 2020 13:12:15 -1000
Subject: [PATCH 16/72] improve this comment

---
 src/libs/actions/Report.js | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js
index 75eb498f81ce..84474d326986 100644
--- a/src/libs/actions/Report.js
+++ b/src/libs/actions/Report.js
@@ -533,11 +533,10 @@ function addAction(reportID, text, file) {
         maxSequenceNumber: newSequenceNumber,
     });
 
-    // Generate a client id to store with the local action. Later, we
-    // will find and remove this action by referencing the action created
-    // in the server. We do this because it's not safe to assume that this
-    // action will use the next sequenceNumber. An action created by another
-    // user can overwrite that sequenceNumber if it is created before this one.
+    // Generate a clientID so we can save the optimistic action to storage with the clientID as key. Later, we will
+    // remove the temporary action when we add the real action created in the server. We do this because it's not
+    // safe to assume that this will use the very next sequenceNumber. An action created by another can overwrite that
+    // sequenceNumber if it is created before this one.
     const temporaryReportActionID = Str.guid(`${Date.now()}_`);
 
     // Store the temporary action ID on the report the comment was added to.

From cbb612af625f51ebf1f5edbbdbb24150a8bbfe78 Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Mon, 28 Dec 2020 13:23:52 -1000
Subject: [PATCH 17/72] change temporary to optimistic

---
 src/libs/actions/Report.js | 44 +++++++++++++++++++-------------------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js
index 84474d326986..d7dba3b73d30 100644
--- a/src/libs/actions/Report.js
+++ b/src/libs/actions/Report.js
@@ -58,10 +58,9 @@ const reportMaxSequenceNumbers = {};
 // Keeps track of the last read for each report
 const lastReadSequenceNumbers = {};
 
-// Map of temporary report action IDs a.k.a. optimistic comments. These should be cleared when replaced by a recent
-// fetch of report history since we will then be up to date and any temporary actions that are still waiting to be
-// replaced can be removed.
-const temporaryReportActionIDs = {};
+// Map of optimistic report action IDs. These should be cleared when replaced by a recent fetch of report history
+// since we will then be up to date and any optimistic actions that are still waiting to be replaced can be removed.
+const optimisticReportActionIDs = {};
 
 /**
  * Checks the report to see if there are any unread action items
@@ -207,21 +206,22 @@ function setLocalLastRead(reportID, sequenceNumber) {
 }
 
 /**
- * Remove all temporary actions from a local report.
+ * Remove all optimistic actions from report actions and reset the optimisticReportActionsIDs array. We do this
+ * to clear any stuck optimistic actions that have not be updated for whatever reason.
  *
  * @param {Number} reportID
  */
-function removeTemporaryActions(reportID) {
-    const actionIDs = temporaryReportActionIDs[reportID] || [];
+function removeOptimisticActions(reportID) {
+    const actionIDs = optimisticReportActionIDs[reportID] || [];
     const actionsToRemove = _.reduce(actionIDs, (actions, actionID) => ({
         ...actions,
         [actionID]: null,
     }), {});
     Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`, actionsToRemove);
 
-    // Reset the temporary report action IDs to an empty array
+    // Reset the optimistic report action IDs to an empty array
     Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`, {
-        temporaryReportActionIDs: [],
+        optimisticReportActionIDs: [],
     });
 }
 
@@ -253,7 +253,7 @@ function updateReportWithNewAction(reportID, reportAction) {
 
     const reportActionsToMerge = {};
     if (reportAction.clientID) {
-        // Remove the temporary action from the report since we are about to
+        // Remove the optimistic action from the report since we are about to
         // replace it with the real one (which has the true sequenceNumber)
         reportActionsToMerge[reportAction.clientID] = null;
     }
@@ -414,10 +414,10 @@ function fetchChatReports() {
 function fetchActions(reportID) {
     API.Report_GetHistory({reportID})
         .then((data) => {
-            // We must remove all temporary actions so there will not be any
+            // We must remove all optimistic actions so there will not be any
             // stuck comments. At this point, we should be caught up and no
             // longer need any optimistic comments.
-            removeTemporaryActions(reportID);
+            removeOptimisticActions(reportID);
 
             const indexedData = _.indexBy(data.history, 'sequenceNumber');
             const maxSequenceNumber = _.chain(data.history)
@@ -534,22 +534,22 @@ function addAction(reportID, text, file) {
     });
 
     // Generate a clientID so we can save the optimistic action to storage with the clientID as key. Later, we will
-    // remove the temporary action when we add the real action created in the server. We do this because it's not
+    // remove the optimistic action when we add the real action created in the server. We do this because it's not
     // safe to assume that this will use the very next sequenceNumber. An action created by another can overwrite that
     // sequenceNumber if it is created before this one.
-    const temporaryReportActionID = Str.guid(`${Date.now()}_`);
+    const optimisticReportActionID = Str.guid(`${Date.now()}_`);
 
-    // Store the temporary action ID on the report the comment was added to.
+    // Store the optimistic action ID on the report the comment was added to.
     // It will be removed later when refetching report actions in order to clear out any
     // stuck actions (i.e. actions where the client never received a Pusher event, for
     // whatever reason, from the server with the new action data
     Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`, {
-        temporaryReportActionIDs: [...(temporaryReportActionIDs[reportID] || []), temporaryReportActionID],
+        optimisticReportActionIDs: [...(optimisticReportActionIDs[reportID] || []), optimisticReportActionID],
     });
 
     // Optimistically add the new comment to the store before waiting to save it to the server
     Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`, {
-        [temporaryReportActionID]: {
+        [optimisticReportActionID]: {
             actionName: 'ADDCOMMENT',
             actorEmail: currentUserEmail,
             person: [
@@ -561,9 +561,9 @@ function addAction(reportID, text, file) {
             ],
             automatic: false,
 
-            // Use the client generated ID as a temporary action ID
+            // Use the client generated ID as a optimistic action ID
             // so we can remove it later
-            sequenceNumber: temporaryReportActionID,
+            sequenceNumber: optimisticReportActionID,
             avatar: myPersonalDetails.avatarURL,
             timestamp: moment().unix(),
             message: [
@@ -586,7 +586,7 @@ function addAction(reportID, text, file) {
         reportID,
         reportComment: htmlComment,
         file,
-        clientID: temporaryReportActionID,
+        clientID: optimisticReportActionID,
     })
         .then(({reportAction}) => updateReportWithNewAction(reportID, reportAction));
 }
@@ -671,8 +671,8 @@ function handleReportChanged(report) {
     // Store the max sequence number for each report
     reportMaxSequenceNumbers[report.reportID] = report.maxSequenceNumber;
 
-    // Store temporary actions IDs for each report
-    temporaryReportActionIDs[report.reportID] = report.temporaryReportActionIDs;
+    // Store optimistic actions IDs for each report
+    optimisticReportActionIDs[report.reportID] = report.optimisticReportActionIDs;
 }
 
 Onyx.connect({

From 65a29f8da4a0a7c95bfe9a3e5a16c3dcd520c4e8 Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Mon, 18 Jan 2021 10:24:18 -1000
Subject: [PATCH 18/72] Fix up test

---
 tests/actions/ReportTest.js | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/tests/actions/ReportTest.js b/tests/actions/ReportTest.js
index fbf7efe341e1..3e8bc41497ae 100644
--- a/tests/actions/ReportTest.js
+++ b/tests/actions/ReportTest.js
@@ -1,3 +1,4 @@
+import _ from 'underscore';
 import Onyx from 'react-native-onyx';
 import ONYXKEYS from '../../src/ONYXKEYS';
 import * as Pusher from '../../src/libs/Pusher/pusher';
@@ -50,6 +51,8 @@ describe('actions/Report', () => {
             callback: val => reportActions = val,
         });
 
+        let clientID;
+
         // Set up Onyx with some test user data
         return signInWithTestUser(TEST_USER_ACCOUNT_ID, TEST_USER_LOGIN)
             .then(() => {
@@ -71,7 +74,11 @@ describe('actions/Report', () => {
                 return waitForPromisesToResolve();
             })
             .then(() => {
-                const resultAction = reportActions[ACTION_ID];
+                const resultAction = _.first(_.values(reportActions));
+
+                // Store the generated clientID so that we can send it with our mock Pusher update
+                clientID = resultAction.sequenceNumber;
+
                 expect(resultAction.message).toEqual(REPORT_ACTION.message);
                 expect(resultAction.person).toEqual(REPORT_ACTION.person);
                 expect(resultAction.loading).toEqual(true);
@@ -82,7 +89,7 @@ describe('actions/Report', () => {
                 const channel = Pusher.getChannel('private-user-accountID-1');
                 channel.emit('reportComment', {
                     reportID: REPORT_ID,
-                    reportAction: REPORT_ACTION,
+                    reportAction: {...REPORT_ACTION, clientID},
                 });
 
                 // Once a reportComment event is emitted to the Pusher channel we should see the comment get processed
@@ -91,6 +98,9 @@ describe('actions/Report', () => {
                 return waitForPromisesToResolve();
             })
             .then(() => {
+                // Verify there is only one action and our optimistic comment has been removed
+                expect(_.size(reportActions)).toBe(1);
+
                 const resultAction = reportActions[ACTION_ID];
 
                 // Verify that our action is no longer in the loading state

From a28025bc929ea445caf894270f86e7fab7e3eb0d Mon Sep 17 00:00:00 2001
From: UpworkBartkoski <upworkbartkoski@gmail.com>
Date: Tue, 19 Jan 2021 11:42:35 -0600
Subject: [PATCH 19/72] fix: #1228

---
 src/components/TextInputFocusable/index.js   |  6 ++++++
 src/pages/home/report/ReportActionCompose.js | 20 +++++++++++++++++++-
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/src/components/TextInputFocusable/index.js b/src/components/TextInputFocusable/index.js
index 1c213c85d1fb..00ab22953056 100644
--- a/src/components/TextInputFocusable/index.js
+++ b/src/components/TextInputFocusable/index.js
@@ -35,6 +35,9 @@ const propTypes = {
 
     // Callback to fire when a file is dropped on the text input
     onDrop: PropTypes.func,
+
+    // If the chatswitcher is shown in iOS safari browser, the input should be disabled
+    isDisable: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -46,6 +49,7 @@ const defaultProps = {
     onDragEnter: () => {},
     onDragLeave: () => {},
     onDrop: () => {},
+    isDisable: false,
 };
 
 /**
@@ -186,6 +190,7 @@ class TextInputFocusable extends React.Component {
         const propStyles = StyleSheet.flatten(this.props.style);
         propStyles.outline = 'none';
         const propsWithoutStyles = _.omit(this.props, 'style');
+        const isDisable = this.props.isDisable;
         return (
             <TextInput
                 ref={el => this.textInput = el}
@@ -197,6 +202,7 @@ class TextInputFocusable extends React.Component {
                 style={propStyles}
                 /* eslint-disable-next-line react/jsx-props-no-spreading */
                 {...propsWithoutStyles}
+                disabled={isDisable}
             />
         );
     }
diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js
index e1fb0ae69b5e..c32c599f5075 100644
--- a/src/pages/home/report/ReportActionCompose.js
+++ b/src/pages/home/report/ReportActionCompose.js
@@ -1,10 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {View, Image, TouchableOpacity} from 'react-native';
+import {
+    View,
+    Image,
+    TouchableOpacity,
+    Dimensions,
+} from 'react-native';
 import _ from 'underscore';
 import lodashGet from 'lodash.get';
 import {withOnyx} from 'react-native-onyx';
 import styles from '../../../styles/styles';
+import variables from '../../../styles/variables';
 import themeColors from '../../../styles/themes/default';
 import TextInputFocusable from '../../../components/TextInputFocusable';
 import sendIcon from '../../../../assets/images/icon-send.png';
@@ -15,6 +21,8 @@ import {addAction, saveReportComment, broadcastUserIsTyping} from '../../../libs
 import ReportTypingIndicator from './ReportTypingIndicator';
 import AttachmentModal from '../../../components/AttachmentModal';
 
+const windowSize = Dimensions.get('window');
+
 const propTypes = {
     // A method to call when the form is submitted
     onSubmit: PropTypes.func.isRequired,
@@ -24,10 +32,13 @@ const propTypes = {
 
     // The ID of the report actions will be created for
     reportID: PropTypes.number.isRequired,
+
+    isSidebarShown: PropTypes.bool,
 };
 
 const defaultProps = {
     comment: '',
+    isSidebarShown: true,
 };
 
 class ReportActionCompose extends React.Component {
@@ -135,6 +146,9 @@ class ReportActionCompose extends React.Component {
     }
 
     render() {
+        const inputDisable = this.props.isSidebarShown
+            && windowSize.width <= variables.mobileResponsiveWidthBreakpoint;
+
         return (
             <View style={[styles.chatItemCompose]}>
                 <View style={[
@@ -205,6 +219,7 @@ class ReportActionCompose extends React.Component {
                                     onPasteFile={file => displayFileInModal({file})}
                                     shouldClear={this.state.textInputShouldClear}
                                     onClear={() => this.setTextInputShouldClear(false)}
+                                    isDisable={inputDisable}
                                 />
 
                             </>
@@ -238,4 +253,7 @@ export default withOnyx({
     comment: {
         key: ({reportID}) => `${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT}${reportID}`,
     },
+    isSidebarShown: {
+        key: ONYXKEYS.IS_SIDEBAR_SHOWN,
+    },
 })(ReportActionCompose);

From 9ffa37f8ca58b05340d7dd5589fb3c7e34f7445f Mon Sep 17 00:00:00 2001
From: UpworkBartkoski <upworkbartkoski@gmail.com>
Date: Wed, 20 Jan 2021 19:41:32 -0600
Subject: [PATCH 20/72] minor change

---
 src/pages/home/report/ReportActionCompose.js | 28 +++++++++++++++++---
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js
index c32c599f5075..ceaacaf4838c 100644
--- a/src/pages/home/report/ReportActionCompose.js
+++ b/src/pages/home/report/ReportActionCompose.js
@@ -21,8 +21,6 @@ import {addAction, saveReportComment, broadcastUserIsTyping} from '../../../libs
 import ReportTypingIndicator from './ReportTypingIndicator';
 import AttachmentModal from '../../../components/AttachmentModal';
 
-const windowSize = Dimensions.get('window');
-
 const propTypes = {
     // A method to call when the form is submitted
     onSubmit: PropTypes.func.isRequired,
@@ -52,14 +50,23 @@ class ReportActionCompose extends React.Component {
         this.triggerSubmitShortcut = this.triggerSubmitShortcut.bind(this);
         this.submitForm = this.submitForm.bind(this);
         this.setIsFocused = this.setIsFocused.bind(this);
+        this.disableInputBasedOnDimensions = this.disableInputBasedOnDimensions.bind(this);
         this.comment = props.comment;
+
+        const windowSize = Dimensions.get('window');
+        const isSmallScreenWidth = windowSize.width <= variables.mobileResponsiveWidthBreakpoint;
         this.state = {
             isFocused: false,
             textInputShouldClear: false,
             isCommentEmpty: props.comment.length === 0,
+            isSmallScreenWidth,
         };
     }
 
+    componentDidMount() {
+        Dimensions.addEventListener('change', this.disableInputBasedOnDimensions);
+    }
+
     componentDidUpdate(prevProps) {
         // The first time the component loads the props is empty and the next time it may contain value.
         // If it does let's update this.comment so that it matches the defaultValue that we show in textInput.
@@ -68,6 +75,10 @@ class ReportActionCompose extends React.Component {
         }
     }
 
+    componentWillUnmount() {
+        Dimensions.removeEventListener('change', this.disableInputBasedOnDimensions);
+    }
+
     /**
      * Updates the Highlight state of the composer
      *
@@ -145,9 +156,20 @@ class ReportActionCompose extends React.Component {
         this.setTextInputShouldClear(true);
     }
 
+    /**
+     * Fired when the windows dimensions changes
+     * @param {Object} changedWindow
+     */
+    disableInputBasedOnDimensions({window: changedWindow}) {
+        const isSmallScreenWidth = changedWindow.width <= variables.mobileResponsiveWidthBreakpoint;
+        this.setState({
+            isSmallScreenWidth,
+        });
+    }
+
     render() {
         const inputDisable = this.props.isSidebarShown
-            && windowSize.width <= variables.mobileResponsiveWidthBreakpoint;
+            && this.state.isSmallScreenWidth;
 
         return (
             <View style={[styles.chatItemCompose]}>

From 3cf5b69093a15a6f84a6f29a4328c67b33754f6a Mon Sep 17 00:00:00 2001
From: UpworkBartkoski <upworkbartkoski@gmail.com>
Date: Wed, 20 Jan 2021 20:15:29 -0600
Subject: [PATCH 21/72] change isDisable to isDisabled

---
 src/components/TextInputFocusable/index.js   | 7 +++----
 src/pages/home/report/ReportActionCompose.js | 2 +-
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/components/TextInputFocusable/index.js b/src/components/TextInputFocusable/index.js
index 00ab22953056..73c4b6d1a42f 100644
--- a/src/components/TextInputFocusable/index.js
+++ b/src/components/TextInputFocusable/index.js
@@ -37,7 +37,7 @@ const propTypes = {
     onDrop: PropTypes.func,
 
     // If the chatswitcher is shown in iOS safari browser, the input should be disabled
-    isDisable: PropTypes.bool,
+    isDisabled: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -49,7 +49,7 @@ const defaultProps = {
     onDragEnter: () => {},
     onDragLeave: () => {},
     onDrop: () => {},
-    isDisable: false,
+    isDisabled: false,
 };
 
 /**
@@ -190,7 +190,6 @@ class TextInputFocusable extends React.Component {
         const propStyles = StyleSheet.flatten(this.props.style);
         propStyles.outline = 'none';
         const propsWithoutStyles = _.omit(this.props, 'style');
-        const isDisable = this.props.isDisable;
         return (
             <TextInput
                 ref={el => this.textInput = el}
@@ -202,7 +201,7 @@ class TextInputFocusable extends React.Component {
                 style={propStyles}
                 /* eslint-disable-next-line react/jsx-props-no-spreading */
                 {...propsWithoutStyles}
-                disabled={isDisable}
+                disabled={this.props.isDisabled}
             />
         );
     }
diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js
index ceaacaf4838c..ab7ad24bc7dc 100644
--- a/src/pages/home/report/ReportActionCompose.js
+++ b/src/pages/home/report/ReportActionCompose.js
@@ -241,7 +241,7 @@ class ReportActionCompose extends React.Component {
                                     onPasteFile={file => displayFileInModal({file})}
                                     shouldClear={this.state.textInputShouldClear}
                                     onClear={() => this.setTextInputShouldClear(false)}
-                                    isDisable={inputDisable}
+                                    isDisabled={inputDisable}
                                 />
 
                             </>

From c13f0cffef46c71d23c6ad4fffb976447bf1ffbe Mon Sep 17 00:00:00 2001
From: Yuwen Memon <yuwen@expensify.com>
Date: Fri, 22 Jan 2021 17:16:24 -0800
Subject: [PATCH 22/72] Get settings modal popping in and out from the
 right-side of the screen

---
 src/CONST.js                    |  1 +
 src/components/Modal.js         |  1 +
 src/components/SettingsModal.js | 63 +++++++++++++++++++++++++++++++++
 src/pages/SettingsPage.js       |  2 --
 src/pages/home/HomePage.js      |  7 ++--
 src/styles/getModalStyles.js    | 17 +++++++++
 6 files changed, 86 insertions(+), 5 deletions(-)
 create mode 100644 src/components/SettingsModal.js

diff --git a/src/CONST.js b/src/CONST.js
index 6686f66ccb37..861523a32c0f 100644
--- 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
index 0bdfc913bd25..f692e17215c0 100644
--- a/src/components/Modal.js
+++ b/src/components/Modal.js
@@ -24,6 +24,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,
     ]),
 };
 
diff --git a/src/components/SettingsModal.js b/src/components/SettingsModal.js
new file mode 100644
index 000000000000..5c47b7bcbb69
--- /dev/null
+++ b/src/components/SettingsModal.js
@@ -0,0 +1,63 @@
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import {View} from 'react-native-web';
+import {withOnyx} from 'react-native-onyx';
+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';
+
+/**
+ * TODO
+ */
+const propTypes = {
+    // Title of the modal header
+    title: PropTypes.string,
+
+    isVisible: PropTypes.bool,
+};
+
+const defaultProps = {
+    isVisible: false,
+};
+
+class SettingsModal extends Component {
+    constructor(props) {
+        super(props);
+
+        this.onClose = this.onClose.bind(this);
+    }
+
+    onClose() {
+        redirect(ROUTES.ROOT);
+    }
+
+    render() {
+        return (
+            <>
+                <ModalWithHeader
+                    type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED}
+                    onClose={this.onClose}
+                    isVisible={this.props.isVisible}
+                    title="Settings"
+                    backgroundColor={themeColors.componentBG}
+                >
+                    <View>
+                        <SettingsPage />
+                    </View>
+                </ModalWithHeader>
+            </>
+        );
+    }
+}
+
+SettingsModal.propTypes = propTypes;
+SettingsModal.defaultProps = defaultProps;
+export default withOnyx({
+    session: {
+        key: ONYXKEYS.SESSION,
+    },
+})(SettingsModal);
diff --git a/src/pages/SettingsPage.js b/src/pages/SettingsPage.js
index f6c1ce6ef7b6..11fa2be5ed73 100644
--- a/src/pages/SettingsPage.js
+++ b/src/pages/SettingsPage.js
@@ -67,8 +67,6 @@ const SettingsPage = ({
         >
             <View
                 style={[
-                    styles.flexColumn,
-                    styles.settingsPageContainer,
                 ]}
             >
                 <HeaderWithCloseButton
diff --git a/src/pages/home/HomePage.js b/src/pages/home/HomePage.js
index 0c2f67748924..a4f4a53aaba2 100644
--- a/src/pages/home/HomePage.js
+++ b/src/pages/home/HomePage.js
@@ -14,7 +14,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,
@@ -40,6 +39,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';
 
 const propTypes = {
     isSidebarShown: PropTypes.bool,
@@ -167,7 +167,6 @@ class App extends React.Component {
      */
     navigateToSettings() {
         redirect(ROUTES.SETTINGS);
-        this.toggleNavigationMenu();
     }
 
     /**
@@ -322,7 +321,9 @@ class App extends React.Component {
                                         shouldShowNavigationMenuButton={this.state.isSmallScreenWidth}
                                         onNavigationMenuButtonClicked={this.toggleNavigationMenu}
                                     />
-                                    {this.props.currentURL === '/settings' && <SettingsPage />}
+                                    <SettingsModal
+                                        isVisible={this.props.currentURL === '/settings'}
+                                    />
                                     <Main />
                                 </View>
                             </Route>
diff --git a/src/styles/getModalStyles.js b/src/styles/getModalStyles.js
index 119af1f4bee0..15e35620720c 100644
--- a/src/styles/getModalStyles.js
+++ b/src/styles/getModalStyles.js
@@ -96,6 +96,23 @@ export default (type, windowDimensions) => {
             animationIn = 'fadeInLeft';
             animationOut = 'fadeOutLeft';
             break;
+        case CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED:
+            modalStyle = {
+                margin: 0,
+                flexDirection: 'row-reverse',
+                justifyContent: 'end',
+            };
+            modalContainerStyle = {
+                width: isSmallScreen ? '100%' : '40%',
+                height: '100%',
+                overflow: 'hidden',
+                marginRight: 0,
+            };
+
+            swipeDirection = 'right';
+            animationIn = 'slideInRight';
+            animationOut = 'slideOutLeft';
+            break;
         default:
             modalStyle = {};
             modalContainerStyle = {};

From 938a30b75dcef6a6d9279d4af21a00b5e3eed4e8 Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Fri, 22 Jan 2021 17:39:33 -1000
Subject: [PATCH 23/72] add new/group route

---
 src/ROUTES.js              | 1 +
 src/pages/home/HomePage.js | 6 ++++--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/ROUTES.js b/src/ROUTES.js
index 72be3144b6a1..2c367474d55a 100644
--- a/src/ROUTES.js
+++ b/src/ROUTES.js
@@ -4,6 +4,7 @@
 export default {
     HOME: '/home',
     SETTINGS: '/settings',
+    NEW_GROUP: '/new/group',
     REPORT: '/r/:reportID',
     getReportRoute: reportID => `/r/${reportID}`,
     ROOT: '/',
diff --git a/src/pages/home/HomePage.js b/src/pages/home/HomePage.js
index 0c2f67748924..4442d61a5ded 100644
--- a/src/pages/home/HomePage.js
+++ b/src/pages/home/HomePage.js
@@ -15,6 +15,7 @@ import variables from '../../styles/variables';
 import HeaderView from './HeaderView';
 import Sidebar from './sidebar/SidebarView';
 import SettingsPage from '../SettingsPage';
+import NewGroupPage from '../NewGroupPage';
 import Main from './MainView';
 import {
     hide as hideSidebar,
@@ -299,7 +300,7 @@ class App extends React.Component {
                                 getSafeAreaPadding(insets),
                             ]}
                         >
-                            <Route path={[ROUTES.REPORT, ROUTES.HOME, ROUTES.SETTINGS]}>
+                            <Route path={[ROUTES.REPORT, ROUTES.HOME, ROUTES.SETTINGS, ROUTES.NEW_GROUP]}>
                                 <Animated.View style={[
                                     getNavigationMenuStyle(this.state.windowWidth, this.props.isSidebarShown),
                                     {
@@ -322,7 +323,8 @@ class App extends React.Component {
                                         shouldShowNavigationMenuButton={this.state.isSmallScreenWidth}
                                         onNavigationMenuButtonClicked={this.toggleNavigationMenu}
                                     />
-                                    {this.props.currentURL === '/settings' && <SettingsPage />}
+                                    {this.props.currentURL === ROUTES.SETTINGS && <SettingsPage />}
+                                    {this.props.currentURL === ROUTES.NEW_GROUP && <NewGroupPage />}
                                     <Main />
                                 </View>
                             </Route>

From c37c59502a7f9e3202ae2516e4bd2565f0862f05 Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Fri, 22 Jan 2021 18:17:28 -1000
Subject: [PATCH 24/72] add new group page

---
 src/components/OptionsList.js              |  2 +-
 src/components/OptionsSelector.js          | 78 ++++++++++++++++++++++
 src/components/TextInputWithFocusStyles.js |  3 +-
 src/pages/NewGroupPage.js                  | 73 ++++++++++++++++++++
 src/styles/styles.js                       |  8 +++
 5 files changed, 162 insertions(+), 2 deletions(-)
 create mode 100644 src/components/OptionsSelector.js
 create mode 100644 src/pages/NewGroupPage.js

diff --git a/src/components/OptionsList.js b/src/components/OptionsList.js
index 0ddc39ed293e..f2526e0db85e 100644
--- a/src/components/OptionsList.js
+++ b/src/components/OptionsList.js
@@ -1,6 +1,6 @@
 import _ from 'underscore';
 import React from 'react';
-import {View, SectionList} from 'react-native';
+import {View, SectionList, Text} from 'react-native';
 import PropTypes from 'prop-types';
 import styles from '../styles/styles';
 import KeyboardSpacer from './KeyboardSpacer';
diff --git a/src/components/OptionsSelector.js b/src/components/OptionsSelector.js
new file mode 100644
index 000000000000..4233955962e8
--- /dev/null
+++ b/src/components/OptionsSelector.js
@@ -0,0 +1,78 @@
+import React, {Component} from 'react';
+import {View} from 'react-native';
+import TextInputWithFocusStyles from './TextInputWithFocusStyles';
+import OptionsList from './OptionsList';
+import styles from '../styles/styles';
+import themeColors from '../styles/themes/default';
+
+class OptionsSelector extends Component {
+    constructor(props) {
+        super(props);
+        this.updateOptions = this.updateOptions.bind(this);
+        // this.selectOption = this.selectOption.bind(this);
+        // this.handleKeyPress = this.handleKeyPress.bind(this);
+
+        this.state = {
+            // contacts,
+            // recentChats,
+            // focusedIndex: 0,
+            searchValue: '',
+            // userToInvite: null,
+        };
+    }
+
+    componentDidMount() {
+        this.textInput.focus();
+    }
+
+    componentDidUpdate(prevProps) {
+        if (prevProps.selectedOptions.length !== this.props.selectedOptions.length) {
+            this.updateOptions(this.state.searchValue);
+        }
+    }
+
+    /**
+     *
+     * @param {String} searchValue
+     */
+    updateOptions(searchValue) {
+        this.setState({searchValue});
+    }
+
+    render() {
+        return (
+            <View style={styles.flex1}>
+                <View style={styles.p2}>
+                    <TextInputWithFocusStyles
+                        styleFocusIn={[styles.textInputReversedFocus]}
+                        ref={el => this.textInput = el}
+                        style={[styles.textInput, styles.flex1]}
+                        value={this.state.searchValue}
+                        onChangeText={this.updateOptions}
+                        // onKeyPress={this.handleKeyPress}
+                        placeholder={this.props.placeholderText}
+                        placeholderTextColor={themeColors.textSupporting}
+                    />
+                    <OptionsList
+                        sections={this.props.sections}
+                        // focusedIndex={this.state.focusedIndex}
+                        // selectedOptions={this.props.selectedOptions}
+                        // onSelectRow={this.selectOption}
+                        headerTitle={this.props.headerTitle}
+                        canSelectMultipleOptions={this.props.canSelectMultipleOptions}
+                        hideSectionHeaders={this.props.hideSectionHeaders}
+
+                        // headerMessage={
+                        //     (!hasSelectableOptions && this.props.canInviteUsers)
+                        //         // eslint-disable-next-line max-len
+                        //         ? 'Don\'t see who you\'re looking for? Type their email or phone number to invite them to chat.'
+                        //         : this.props.headerMessage
+                        // }
+                    />
+                </View>
+            </View>
+        );
+    }
+}
+
+export default OptionsSelector;
diff --git a/src/components/TextInputWithFocusStyles.js b/src/components/TextInputWithFocusStyles.js
index 543efd55e96e..69ac333a2e1b 100644
--- a/src/components/TextInputWithFocusStyles.js
+++ b/src/components/TextInputWithFocusStyles.js
@@ -23,13 +23,14 @@ const propTypes = {
     onBlur: PropTypes.func,
 
     // A function to call when the input has gotten focus
-    onFocus: PropTypes.func.isRequired,
+    onFocus: PropTypes.func,
 };
 const defaultProps = {
     styleFocusIn: null,
     styleFocusOut: null,
     style: null,
     onBlur: () => {},
+    onFocus: () => {},
 };
 
 class TextInputWithFocusStyles extends React.Component {
diff --git a/src/pages/NewGroupPage.js b/src/pages/NewGroupPage.js
new file mode 100644
index 000000000000..497b54e6141c
--- /dev/null
+++ b/src/pages/NewGroupPage.js
@@ -0,0 +1,73 @@
+import React, {Component} from 'react';
+import {View} from 'react-native';
+import {withOnyx} from 'react-native-onyx';
+import HeaderWithCloseButton from '../components/HeaderWithCloseButton';
+import OptionsSelector from '../components/OptionsSelector';
+import {getNewGroupOptions} from '../libs/OptionsListUtils';
+import ONYXKEYS from '../ONYXKEYS';
+
+class NewGroupPage extends Component {
+    constructor(props) {
+        super(props);
+
+        const {recentReports, personalDetails} = getNewGroupOptions(
+            props.reports,
+            props.personalDetails,
+            '',
+            [],
+        );
+
+        this.state = {
+            recentReports,
+            personalDetails,
+            selectedOptions: [],
+        };
+    }
+
+    getSections() {
+        const sections = [];
+        sections.push({
+            title: undefined,
+            data: this.state.selectedOptions,
+            shouldShow: true,
+            indexOffset: 0,
+        });
+        sections.push({
+            title: 'RECENTS',
+            data: this.state.recentReports,
+            showShow: this.state.recentReports.length > 0,
+            indexOffset: sections.reduce((prev, {data}) => prev + data.length, 0),
+        });
+        sections.push({
+            title: 'CONTACTS',
+            data: this.state.personalDetails,
+            shouldShow: this.state.personalDetails.length > 0,
+            indexOffset: sections.reduce((prev, {data}) => prev + data.length, 0),
+        });
+        return sections;
+    }
+
+    render() {
+        const sections = this.getSections();
+        return (
+            <View style={{width: '100%', height: '100%'}}>
+                <HeaderWithCloseButton
+                    title="New Group"
+                />
+                <OptionsSelector
+                    sections={sections}
+                    selectedOptions={this.state.selectedOptions}
+                />
+            </View>
+        );
+    }
+}
+
+export default withOnyx({
+    reports: {
+        key: ONYXKEYS.COLLECTION.REPORT,
+    },
+    personalDetails: {
+        key: ONYXKEYS.PERSONAL_DETAILS,
+    },
+})(NewGroupPage);
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 090610232244..b5670b86fe56 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -1016,6 +1016,14 @@ const styles = {
         alignItems: 'center',
         padding: 20,
     },
+
+    subHeader: {
+        color: themeColors.text,
+        fontWeight: fontWeightBold,
+        fontFamily: fontFamily.GTA_BOLD,
+        fontSize: 12,
+        padding: 20,
+    },
 };
 
 const baseCodeTagStyles = {

From 4c3915f0f1f0b8952db45814e08fc635008d606e Mon Sep 17 00:00:00 2001
From: Yuwen Memon <yuwen@expensify.com>
Date: Mon, 25 Jan 2021 11:33:03 -0800
Subject: [PATCH 25/72] Cleanup style for the right-docked modal header

---
 src/pages/SettingsPage.js    | 6 ------
 src/styles/getModalStyles.js | 1 +
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/pages/SettingsPage.js b/src/pages/SettingsPage.js
index 11fa2be5ed73..1b4d6140c658 100644
--- a/src/pages/SettingsPage.js
+++ b/src/pages/SettingsPage.js
@@ -69,12 +69,6 @@ const SettingsPage = ({
                 style={[
                 ]}
             >
-                <HeaderWithCloseButton
-                    onCloseButtonPress={() => redirect(currentlyViewedReportID !== ''
-                        ? ROUTES.getReportRoute(currentlyViewedReportID)
-                        : ROUTES.HOME)}
-                    title="Settings"
-                />
                 <View style={styles.settingsWrapper}>
                     <View
                         style={[styles.largeAvatar, styles.mb3]}
diff --git a/src/styles/getModalStyles.js b/src/styles/getModalStyles.js
index 15e35620720c..54c05ea261c9 100644
--- a/src/styles/getModalStyles.js
+++ b/src/styles/getModalStyles.js
@@ -107,6 +107,7 @@ export default (type, windowDimensions) => {
                 height: '100%',
                 overflow: 'hidden',
                 marginRight: 0,
+                paddingTop: 0,
             };
 
             swipeDirection = 'right';

From 122ee3fb289163a6c86ca9a23f02c729f66b3068 Mon Sep 17 00:00:00 2001
From: Yuwen Memon <yuwen@expensify.com>
Date: Mon, 25 Jan 2021 14:00:59 -0800
Subject: [PATCH 26/72] Remember current report and slide in the right
 direction

---
 src/components/SettingsModal.js | 14 ++++++++++----
 src/pages/SettingsPage.js       | 14 ++------------
 src/pages/home/MainView.js      | 23 +++++++++++++++++++----
 src/styles/getModalStyles.js    |  2 +-
 4 files changed, 32 insertions(+), 21 deletions(-)

diff --git a/src/components/SettingsModal.js b/src/components/SettingsModal.js
index 5c47b7bcbb69..82877915dd7a 100644
--- a/src/components/SettingsModal.js
+++ b/src/components/SettingsModal.js
@@ -14,14 +14,17 @@ import ROUTES from '../ROUTES';
  * TODO
  */
 const propTypes = {
-    // Title of the modal header
-    title: PropTypes.string,
-
+    // Is the Settings Modal visible or not?
     isVisible: PropTypes.bool,
+
+    /* Onyx Props */
+    // Currently viewed reportID
+    currentlyViewedReportID: PropTypes.string,
 };
 
 const defaultProps = {
     isVisible: false,
+    currentlyViewedReportID: '',
 };
 
 class SettingsModal extends Component {
@@ -32,7 +35,7 @@ class SettingsModal extends Component {
     }
 
     onClose() {
-        redirect(ROUTES.ROOT);
+        redirect(ROUTES.getReportRoute(this.props.currentlyViewedReportID));
     }
 
     render() {
@@ -60,4 +63,7 @@ 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
index 1b4d6140c658..d1b38f2a9bc2 100644
--- a/src/pages/SettingsPage.js
+++ b/src/pages/SettingsPage.js
@@ -33,9 +33,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 +43,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,10 +61,7 @@ const SettingsPage = ({
                 styles.settingsPageBackground,
             ]}
         >
-            <View
-                style={[
-                ]}
-            >
+            <View>
                 <View style={styles.settingsWrapper}>
                     <View
                         style={[styles.largeAvatar, styles.mb3]}
@@ -120,7 +113,4 @@ export default withOnyx({
     session: {
         key: ONYXKEYS.SESSION,
     },
-    currentlyViewedReportID: {
-        key: ONYXKEYS.CURRENTLY_VIEWED_REPORTID,
-    },
 })(SettingsPage);
diff --git a/src/pages/home/MainView.js b/src/pages/home/MainView.js
index bc1c319dd27f..3ad1a76354a5 100644
--- a/src/pages/home/MainView.js
+++ b/src/pages/home/MainView.js
@@ -20,21 +20,30 @@ const propTypes = {
     reports: PropTypes.objectOf(PropTypes.shape({
         reportID: PropTypes.number,
     })),
+
+    currentlyViewedReportID: PropTypes.string,
+
+    currentURL: PropTypes.string,
 };
 
 const defaultProps = {
     reports: {},
+    currentlyViewedReportID: '',
+    currentURL: '',
 };
 
 class MainView extends Component {
     render() {
-        const reportIDInUrl = parseInt(this.props.match.params.reportID, 10);
+        let activeReportID = parseInt(this.props.match.params.reportID, 10);
+
+        if (this.props.currentURL === '/settings') {
+            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 +61,7 @@ class MainView extends Component {
         const reportsToDisplay = _.filter(this.props.reports, report => (
             report.isPinned
                 || report.unreadActionCount > 0
-                || report.reportID === reportIDInUrl
+                || report.reportID === activeReportID
         ));
         return (
             <>
@@ -81,5 +90,11 @@ export default compose(
         reports: {
             key: ONYXKEYS.COLLECTION.REPORT,
         },
+        currentURL: {
+            key: ONYXKEYS.CURRENT_URL,
+        },
+        currentlyViewedReportID: {
+            key: ONYXKEYS.CURRENTLY_VIEWED_REPORTID,
+        },
     }),
 )(MainView);
diff --git a/src/styles/getModalStyles.js b/src/styles/getModalStyles.js
index 54c05ea261c9..39988f82ec27 100644
--- a/src/styles/getModalStyles.js
+++ b/src/styles/getModalStyles.js
@@ -112,7 +112,7 @@ export default (type, windowDimensions) => {
 
             swipeDirection = 'right';
             animationIn = 'slideInRight';
-            animationOut = 'slideOutLeft';
+            animationOut = 'slideOutRight';
             break;
         default:
             modalStyle = {};

From 81808f52f3f8b2428aff8f750bbbc77d4071eb7d Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Mon, 25 Jan 2021 13:09:22 -1000
Subject: [PATCH 27/72] Add selected options

---
 src/CONST.js                          |   3 +
 src/components/OptionsSelector.js     | 140 +++++++++++++++++---------
 src/libs/OptionsListUtils.js          |  12 +++
 src/pages/NewGroupPage.js             | 117 ++++++++++++++++++++-
 src/pages/home/sidebar/ChatLinkRow.js |  19 ++++
 src/styles/styles.js                  |   8 ++
 src/styles/utilities/spacing.js       |   4 +
 7 files changed, 253 insertions(+), 50 deletions(-)

diff --git a/src/CONST.js b/src/CONST.js
index 6686f66ccb37..6110e174f07e 100644
--- a/src/CONST.js
+++ b/src/CONST.js
@@ -9,6 +9,9 @@ const CONST = {
         REPORT: 'report',
         PERSONAL_DETAIL: 'personalDetail',
     },
+    REPORT: {
+        MAXIMUM_PARTICIPANTS: 8,
+    },
     MODAL: {
         MODAL_TYPE: {
             CENTERED: 'centered',
diff --git a/src/components/OptionsSelector.js b/src/components/OptionsSelector.js
index 4233955962e8..ef3bc5a1ee76 100644
--- a/src/components/OptionsSelector.js
+++ b/src/components/OptionsSelector.js
@@ -1,23 +1,28 @@
+import _ from 'underscore';
 import React, {Component} from 'react';
+import PropTypes from 'prop-types';
 import {View} from 'react-native';
 import TextInputWithFocusStyles from './TextInputWithFocusStyles';
 import OptionsList from './OptionsList';
 import styles from '../styles/styles';
 import themeColors from '../styles/themes/default';
 
+const propTypes = {
+    onSelectRow: PropTypes.func,
+};
+
+const defaultProps = {
+    onSelectRow: () => {},
+};
+
 class OptionsSelector extends Component {
     constructor(props) {
         super(props);
-        this.updateOptions = this.updateOptions.bind(this);
-        // this.selectOption = this.selectOption.bind(this);
-        // this.handleKeyPress = this.handleKeyPress.bind(this);
+
+        this.handleKeyPress = this.handleKeyPress.bind(this);
 
         this.state = {
-            // contacts,
-            // recentChats,
-            // focusedIndex: 0,
-            searchValue: '',
-            // userToInvite: null,
+            focusedIndex: 0,
         };
     }
 
@@ -25,54 +30,97 @@ class OptionsSelector extends Component {
         this.textInput.focus();
     }
 
-    componentDidUpdate(prevProps) {
-        if (prevProps.selectedOptions.length !== this.props.selectedOptions.length) {
-            this.updateOptions(this.state.searchValue);
-        }
-    }
-
     /**
+     * Delegate key presses to specific callbacks
      *
-     * @param {String} searchValue
+     * @param {SyntheticEvent} e
      */
-    updateOptions(searchValue) {
-        this.setState({searchValue});
+    handleKeyPress(e) {
+        const allOptions = _.reduce(this.props.sections, (prev, curr) => (
+            [...prev, ...(curr.data || [])]
+        ), []);
+
+        switch (e.nativeEvent.key) {
+            case 'Enter': {
+                this.props.onSelectRow(allOptions[this.state.focusedIndex]);
+                e.preventDefault();
+                break;
+            }
+
+            case 'Backspace': {
+                // this.props.onBackspacePress();
+                break;
+            }
+
+            case 'ArrowDown': {
+                this.setState((prevState) => {
+                    let newFocusedIndex = prevState.focusedIndex + 1;
+
+                    // Wrap around to the top of the list
+                    if (newFocusedIndex > allOptions.length - 1) {
+                        newFocusedIndex = 0;
+                    }
+
+                    return {focusedIndex: newFocusedIndex};
+                });
+
+
+                e.preventDefault();
+                break;
+            }
+
+            case 'ArrowUp': {
+                this.setState((prevState) => {
+                    let newFocusedIndex = prevState.focusedIndex - 1;
+
+                    // Wrap around to the bottom of the list
+                    if (newFocusedIndex < 0) {
+                        newFocusedIndex = allOptions.length - 1;
+                    }
+
+                    return {focusedIndex: newFocusedIndex};
+                });
+                e.preventDefault();
+                break;
+            }
+
+            case 'Tab':
+            case 'Escape': {
+                break;
+            }
+
+            default:
+        }
     }
 
     render() {
         return (
-            <View style={styles.flex1}>
-                <View style={styles.p2}>
-                    <TextInputWithFocusStyles
-                        styleFocusIn={[styles.textInputReversedFocus]}
-                        ref={el => this.textInput = el}
-                        style={[styles.textInput, styles.flex1]}
-                        value={this.state.searchValue}
-                        onChangeText={this.updateOptions}
-                        // onKeyPress={this.handleKeyPress}
-                        placeholder={this.props.placeholderText}
-                        placeholderTextColor={themeColors.textSupporting}
-                    />
-                    <OptionsList
-                        sections={this.props.sections}
-                        // focusedIndex={this.state.focusedIndex}
-                        // selectedOptions={this.props.selectedOptions}
-                        // onSelectRow={this.selectOption}
-                        headerTitle={this.props.headerTitle}
-                        canSelectMultipleOptions={this.props.canSelectMultipleOptions}
-                        hideSectionHeaders={this.props.hideSectionHeaders}
-
-                        // headerMessage={
-                        //     (!hasSelectableOptions && this.props.canInviteUsers)
-                        //         // eslint-disable-next-line max-len
-                        //         ? 'Don\'t see who you\'re looking for? Type their email or phone number to invite them to chat.'
-                        //         : this.props.headerMessage
-                        // }
-                    />
-                </View>
+            <View style={[styles.flex1, styles.mt2]}>
+                <TextInputWithFocusStyles
+                    styleFocusIn={[styles.textInputReversedFocus]}
+                    ref={el => this.textInput = el}
+                    style={[styles.textInput]}
+                    value={this.props.searchValue}
+                    onChangeText={this.props.onChangeText}
+                    onKeyPress={this.handleKeyPress}
+                    placeholder={this.props.placeholderText}
+                    placeholderTextColor={themeColors.textSupporting}
+                />
+                <OptionsList
+                    onSelectRow={this.props.onSelectRow}
+                    sections={this.props.sections}
+                    focusedIndex={this.state.focusedIndex}
+                    selectedOptions={this.props.selectedOptions}
+                    headerTitle={this.props.headerTitle}
+                    canSelectMultipleOptions={this.props.canSelectMultipleOptions}
+                    hideSectionHeaders={this.props.hideSectionHeaders}
+                    headerMessage={this.props.headerMessage}
+                />
             </View>
         );
     }
 }
 
+OptionsSelector.defaultProps = defaultProps;
+OptionsSelector.propTypes = propTypes;
 export default OptionsSelector;
diff --git a/src/libs/OptionsListUtils.js b/src/libs/OptionsListUtils.js
index 3d48dcdf3de0..94185a4a745e 100644
--- a/src/libs/OptionsListUtils.js
+++ b/src/libs/OptionsListUtils.js
@@ -238,9 +238,21 @@ function getOptions(reports, personalDetails, draftComments, activeReportID, {
         });
     }
 
+    let userToInvite = null;
+    if (searchValue
+            && recentReportOptions.length === 0
+            && personalDetailsOptions.length === 0
+            && _.every(selectedOptions, option => option.login !== searchValue)
+            && (Str.isValidEmail(searchValue) || Str.isValidPhone(searchValue))
+    ) {
+        const userInvitePersonalDetails = getPersonalDetailsForLogins([searchValue], personalDetails);
+        userToInvite = createOption(userInvitePersonalDetails, null, draftComments, activeReportID);
+    }
+
     return {
         personalDetails: personalDetailsOptions,
         recentReports: recentReportOptions,
+        userToInvite,
     };
 }
 
diff --git a/src/pages/NewGroupPage.js b/src/pages/NewGroupPage.js
index 497b54e6141c..f6deb7df36ec 100644
--- a/src/pages/NewGroupPage.js
+++ b/src/pages/NewGroupPage.js
@@ -1,16 +1,26 @@
+import _ from 'underscore';
 import React, {Component} from 'react';
-import {View} from 'react-native';
+import {View, Text, TouchableOpacity} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import HeaderWithCloseButton from '../components/HeaderWithCloseButton';
 import OptionsSelector from '../components/OptionsSelector';
 import {getNewGroupOptions} from '../libs/OptionsListUtils';
 import ONYXKEYS from '../ONYXKEYS';
+import styles from '../styles/styles';
+import {fetchOrCreateChatReport} from '../libs/actions/Report';
+import CONST from '../CONST';
 
 class NewGroupPage extends Component {
     constructor(props) {
         super(props);
 
-        const {recentReports, personalDetails} = getNewGroupOptions(
+        this.toggleOption = this.toggleOption.bind(this);
+
+        const {
+            recentReports,
+            personalDetails,
+            userToInvite,
+        } = getNewGroupOptions(
             props.reports,
             props.personalDetails,
             '',
@@ -18,9 +28,11 @@ class NewGroupPage extends Component {
         );
 
         this.state = {
+            searchValue: '',
             recentReports,
             personalDetails,
             selectedOptions: [],
+            userToInvite,
         };
     }
 
@@ -35,7 +47,7 @@ class NewGroupPage extends Component {
         sections.push({
             title: 'RECENTS',
             data: this.state.recentReports,
-            showShow: this.state.recentReports.length > 0,
+            shouldShow: this.state.recentReports.length > 0,
             indexOffset: sections.reduce((prev, {data}) => prev + data.length, 0),
         });
         sections.push({
@@ -44,20 +56,114 @@ class NewGroupPage extends Component {
             shouldShow: this.state.personalDetails.length > 0,
             indexOffset: sections.reduce((prev, {data}) => prev + data.length, 0),
         });
+
+        if (this.state.userToInvite) {
+            sections.push(({
+                undefined,
+                data: [this.state.userToInvite],
+                shouldShow: true,
+                indexOffset: 0,
+            }));
+        }
         return sections;
     }
 
+    createGroup() {
+        const userLogins = _.map(this.state.selectedOptions, option => option.login);
+        fetchOrCreateChatReport([this.props.session.email, ...userLogins]);
+    }
+
+    /**
+     * Removes a selected option from list if already selected. If not already selected add this option to the list.
+     * @param {Object} option
+     */
+    toggleOption(option) {
+        this.setState((prevState) => {
+            const isOptionInList = _.some(prevState.selectedOptions, selectedOption => (
+                selectedOption.login === option.login
+            ));
+
+            let newSelectedOptions;
+
+            if (isOptionInList) {
+                newSelectedOptions = _.reject(prevState.selectedOptions, selectedOption => (
+                    selectedOption.login === option.login
+                ));
+            } else {
+                newSelectedOptions = [...prevState.selectedOptions, option];
+            }
+
+            const {
+                recentReports,
+                personalDetails,
+                userToInvite,
+            } = getNewGroupOptions(
+                this.props.reports,
+                this.props.personalDetails,
+                this.state.searchValue,
+                newSelectedOptions,
+            );
+
+            return {
+                selectedOptions: newSelectedOptions,
+                recentReports,
+                personalDetails,
+                userToInvite,
+            };
+        });
+    }
+
     render() {
         const sections = this.getSections();
+        const maxParticipantsReached = this.state.selectedOptions.length === CONST.REPORT.MAXIMUM_PARTICIPANTS;
         return (
-            <View style={{width: '100%', height: '100%'}}>
+            <View style={[styles.flex1, styles.p2]}>
                 <HeaderWithCloseButton
                     title="New Group"
                 />
                 <OptionsSelector
+                    canSelectMultipleOptions
                     sections={sections}
                     selectedOptions={this.state.selectedOptions}
+                    value={this.state.searchValue}
+                    onSelectRow={this.toggleOption}
+                    onChangeText={(searchValue = '') => {
+                        const {
+                            recentReports,
+                            personalDetails,
+                            userToInvite,
+                        } = getNewGroupOptions(
+                            this.props.reports,
+                            this.props.personalDetails,
+                            searchValue,
+                            [],
+                        );
+                        this.setState({
+                            searchValue,
+                            userToInvite,
+                            recentReports,
+                            personalDetails,
+                        });
+                    }}
+                    headerTitle={
+                        maxParticipantsReached
+                            ? 'Maximum participants reached'
+                            : ''
+                    }
+                    headerMessage={
+                        maxParticipantsReached
+                            ? 'You\'ve reached the maximum number of participants for a group chat.'
+                            : ''
+                    }
                 />
+                <TouchableOpacity
+                    onPress={this.createGroup}
+                    style={[styles.button, styles.buttonSuccess, styles.w100, styles.mt5]}
+                >
+                    <Text style={[styles.buttonText, styles.buttonSuccessText]}>
+                        Create Group
+                    </Text>
+                </TouchableOpacity>
             </View>
         );
     }
@@ -70,4 +176,7 @@ export default withOnyx({
     personalDetails: {
         key: ONYXKEYS.PERSONAL_DETAILS,
     },
+    session: {
+        key: ONYXKEYS.SESSION,
+    },
 })(NewGroupPage);
diff --git a/src/pages/home/sidebar/ChatLinkRow.js b/src/pages/home/sidebar/ChatLinkRow.js
index b5d6bad40a79..772918e450a2 100644
--- a/src/pages/home/sidebar/ChatLinkRow.js
+++ b/src/pages/home/sidebar/ChatLinkRow.js
@@ -28,11 +28,19 @@ const propTypes = {
 
     // A flag to indicate whether this comes from the Chat Switcher so we can display the group button
     isChatSwitcher: PropTypes.bool,
+
+    // Whether we should show the selected state
+    showSelectedState: PropTypes.bool,
+
+    // Whether this item is selected
+    isSelected: PropTypes.bool,
 };
 
 const defaultProps = {
     onAddToGroup: () => {},
     isChatSwitcher: false,
+    showSelectedState: false,
+    isSelected: false,
 };
 
 const ChatLinkRow = ({
@@ -41,6 +49,8 @@ const ChatLinkRow = ({
     onSelectRow,
     onAddToGroup,
     isChatSwitcher,
+    showSelectedState,
+    isSelected,
 }) => {
     const textStyle = optionIsFocused
         ? styles.sidebarLinkActiveText
@@ -101,6 +111,15 @@ const ChatLinkRow = ({
                             </>
                         )}
                     </View>
+                    {showSelectedState && (
+                        <View
+                            style={[styles.selectCircle]}
+                        >
+                            {isSelected && (
+                                <Text>X</Text>
+                            )}
+                        </View>
+                    )}
                 </View>
             </TouchableOpacity>
             {option.singleUserDM && isChatSwitcher && (
diff --git a/src/styles/styles.js b/src/styles/styles.js
index b5670b86fe56..e908c6b67043 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -1024,6 +1024,14 @@ const styles = {
         fontSize: 12,
         padding: 20,
     },
+
+    selectCircle: {
+        width: 30,
+        height: 30,
+        borderColor: colors.charcoal,
+        borderWidth: 1,
+        borderRadius: 15,
+    },
 };
 
 const baseCodeTagStyles = {
diff --git a/src/styles/utilities/spacing.js b/src/styles/utilities/spacing.js
index 9bcfef110919..54f03b590726 100644
--- a/src/styles/utilities/spacing.js
+++ b/src/styles/utilities/spacing.js
@@ -9,6 +9,10 @@ export default {
         margin: 0,
     },
 
+    m2: {
+        margin: 8,
+    },
+
     mr0: {
         marginRight: 0,
     },

From f67c266dc6d2d01b30ae6664eb90d851e21eedf3 Mon Sep 17 00:00:00 2001
From: Yuwen Memon <yuwen@expensify.com>
Date: Mon, 25 Jan 2021 15:18:33 -0800
Subject: [PATCH 28/72] Get rid unneccessary Views

---
 src/components/SettingsModal.js | 23 ++++++-------
 src/pages/SettingsPage.js       | 57 +++++++++++++++------------------
 src/styles/styles.js            |  3 +-
 3 files changed, 37 insertions(+), 46 deletions(-)

diff --git a/src/components/SettingsModal.js b/src/components/SettingsModal.js
index 82877915dd7a..73df11853019 100644
--- a/src/components/SettingsModal.js
+++ b/src/components/SettingsModal.js
@@ -4,6 +4,7 @@ import {View} from 'react-native-web';
 import {withOnyx} from 'react-native-onyx';
 import SettingsPage from '../pages/SettingsPage';
 import CONST from '../CONST';
+import styles from '../styles/styles';
 import themeColors from '../styles/themes/default';
 import ONYXKEYS from '../ONYXKEYS';
 import ModalWithHeader from './ModalWithHeader';
@@ -40,19 +41,15 @@ class SettingsModal extends Component {
 
     render() {
         return (
-            <>
-                <ModalWithHeader
-                    type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED}
-                    onClose={this.onClose}
-                    isVisible={this.props.isVisible}
-                    title="Settings"
-                    backgroundColor={themeColors.componentBG}
-                >
-                    <View>
-                        <SettingsPage />
-                    </View>
-                </ModalWithHeader>
-            </>
+            <ModalWithHeader
+                type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED}
+                onClose={this.onClose}
+                isVisible={this.props.isVisible}
+                title="Settings"
+                backgroundColor={themeColors.componentBG}
+            >
+                <SettingsPage />
+            </ModalWithHeader>
         );
     }
 }
diff --git a/src/pages/SettingsPage.js b/src/pages/SettingsPage.js
index d1b38f2a9bc2..bf643a48d2e2 100644
--- 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';
 
@@ -61,36 +58,34 @@ const SettingsPage = ({
                 styles.settingsPageBackground,
             ]}
         >
-            <View>
-                <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
                 {version}
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 59095e1a68b3..2890b8303a70 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -957,9 +957,8 @@ const styles = {
         flexDirection: 'column',
         width: '100%',
         height: '100%',
-        position: 'absolute',
+        position: 'relative',
         justifyContent: 'space-between',
-        backgroundColor: 'white',
         alignItems: 'center',
     },
 

From 38a1934c1c85ca2c73be129b5a9567b16771f852 Mon Sep 17 00:00:00 2001
From: Yuwen Memon <yuwen@expensify.com>
Date: Mon, 25 Jan 2021 16:04:22 -0800
Subject: [PATCH 29/72] Get the version number showing at the very bottom

---
 src/styles/styles.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/styles/styles.js b/src/styles/styles.js
index 2890b8303a70..f709f21bf2fe 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -956,8 +956,7 @@ const styles = {
     settingsPageBackground: {
         flexDirection: 'column',
         width: '100%',
-        height: '100%',
-        position: 'relative',
+        flexGrow: 1,
         justifyContent: 'space-between',
         alignItems: 'center',
     },

From 63df3138d60dcc51647c37a384db6efd5f098dd9 Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Mon, 25 Jan 2021 14:11:50 -1000
Subject: [PATCH 30/72] add optionPropTypes

---
 src/components/OptionsList.js     | 79 ++++++++++++++++---------------
 src/components/OptionsSelector.js | 47 ++++++++++++++++++
 src/components/optionPropTypes.js | 33 +++++++++++++
 src/pages/NewGroupPage.js         | 70 ++++++++++++++++++++++-----
 4 files changed, 179 insertions(+), 50 deletions(-)
 create mode 100644 src/components/optionPropTypes.js

diff --git a/src/components/OptionsList.js b/src/components/OptionsList.js
index f2526e0db85e..b8c9462fb22f 100644
--- a/src/components/OptionsList.js
+++ b/src/components/OptionsList.js
@@ -5,63 +5,47 @@ import PropTypes from 'prop-types';
 import styles from '../styles/styles';
 import KeyboardSpacer from './KeyboardSpacer';
 import ChatLinkRow from '../pages/home/sidebar/ChatLinkRow';
+import optionPropTypes from './optionPropTypes';
 
 const propTypes = {
-    /** Extra styles for the section list container */
+    // Extra styles for the section list container
     contentContainerStyles: PropTypes.arrayOf(PropTypes.object),
 
-    /** Sections for the section list */
+    // Sections for the section list
     sections: PropTypes.arrayOf(PropTypes.shape({
+        // Title of the section
         title: PropTypes.string,
+
+        // The initial index of this section given the total number of options in each section's data array
         indexOffset: PropTypes.number,
-        data: PropTypes.arrayOf(PropTypes.shape({})),
+
+        // Array of options
+        data: PropTypes.arrayOf(optionPropTypes),
+
+        // Whether this section should show or not
         shouldShow: PropTypes.bool,
     })),
 
-    /** Index for option to focus on */
+    // Index for option to focus on
     focusedIndex: PropTypes.number,
 
-    /** Array of already selected options */
-    selectedOptions: PropTypes.arrayOf(PropTypes.shape({
-        /** Text to display */
-        text: PropTypes.string,
-
-        /** Alternate text to display */
-        alternateText: PropTypes.string,
-
-        /** Array of icon urls */
-        icons: PropTypes.arrayOf(PropTypes.string),
-
-        /** Login (only present when there is a single participant) */
-        login: PropTypes.string,
-
-        /** reportID (only present when there is a matching report) */
-        reportID: PropTypes.number,
-
-        /** Whether the report has read or not */
-        isUnread: PropTypes.bool,
+    // Array of already selected options
+    selectedOptions: PropTypes.arrayOf(optionPropTypes),
 
-        /** Whether the report has a draft comment or not */
-        hasDraftComment: PropTypes.bool,
-
-        /** Key used internally by React */
-        keyForList: PropTypes.string,
-
-        /** Search text we use to filter options */
-        searchText: PropTypes.string,
-
-        /** Whether the report is pinned or not */
-        isPinned: PropTypes.bool,
-    })),
-
-    /** Whether we can select multiple options or not */
+    // Whether we can select multiple options or not
     canSelectMultipleOptions: PropTypes.bool,
 
-    /** Whether to show headers above each section or not */
+    // Whether to show headers above each section or not
     hideSectionHeaders: PropTypes.bool,
 
     /** Callback to fire when a row is selected */
     onSelectRow: PropTypes.func,
+
+    // Optional header title
+    headerTitle: PropTypes.string,
+
+    // Optional header message
+    headerMessage: PropTypes.string,
 };
 
 const defaultProps = {
@@ -72,6 +56,8 @@ const defaultProps = {
     canSelectMultipleOptions: false,
     hideSectionHeaders: false,
     onSelectRow: () => {},
+    headerMessage: '',
+    headerTitle: '',
 };
 
 const OptionsList = ({
@@ -82,8 +68,23 @@ const OptionsList = ({
     canSelectMultipleOptions,
     hideSectionHeaders,
     onSelectRow,
+    headerMessage,
+    headerTitle,
 }) => (
     <View style={[styles.flex1]}>
+        {headerMessage ? (
+            <View style={[styles.p3]}>
+                {headerTitle ? (
+                    <Text style={[styles.h4, styles.mb1]}>
+                        {headerTitle}
+                    </Text>
+                ) : null}
+
+                <Text style={[styles.textLabel]}>
+                    {headerMessage}
+                </Text>
+            </View>
+        ) : null}
         <SectionList
             bounces={false}
             indicatorStyle="white"
@@ -98,7 +99,7 @@ const OptionsList = ({
                     option={item}
                     optionIsFocused={focusedIndex === (index + section.indexOffset)}
                     onSelectRow={onSelectRow}
-                    isSelected={_.find(selectedOptions, option => option.login === item.login)}
+                    isSelected={Boolean(_.find(selectedOptions, option => option.login === item.login))}
                     showSelectedState={canSelectMultipleOptions}
                 />
             )}
diff --git a/src/components/OptionsSelector.js b/src/components/OptionsSelector.js
index ef3bc5a1ee76..4688fb138428 100644
--- a/src/components/OptionsSelector.js
+++ b/src/components/OptionsSelector.js
@@ -6,13 +6,60 @@ import TextInputWithFocusStyles from './TextInputWithFocusStyles';
 import OptionsList from './OptionsList';
 import styles from '../styles/styles';
 import themeColors from '../styles/themes/default';
+import optionPropTypes from './optionPropTypes';
 
 const propTypes = {
+    // Callback to fire when a row is tapped
     onSelectRow: PropTypes.func,
+
+    // Sections for the section list
+    sections: PropTypes.arrayOf(PropTypes.shape({
+        // Title of the section
+        title: PropTypes.string,
+
+        // The initial index of this section given the total number of options in each section's data array
+        indexOffset: PropTypes.number,
+
+        // Array of options
+        data: PropTypes.arrayOf(optionPropTypes),
+
+        // Whether this section should show or not
+        shouldShow: PropTypes.bool,
+    })).isRequired,
+
+    // Value in the search input field
+    searchValue: PropTypes.string.isRequired,
+
+    // Callback fired when text changes
+    onChangeText: PropTypes.func.isRequired,
+
+    // Optional placeholder text for the selector
+    placeholderText: PropTypes.string,
+
+    // Options that have already been selected
+    selectedOptions: PropTypes.arrayOf(optionPropTypes),
+
+    // Optional header title
+    headerTitle: PropTypes.string,
+
+    // Optional header message
+    headerMessage: PropTypes.string,
+
+    // Whether we can select multiple options
+    canSelectMultipleOptions: PropTypes.bool,
+
+    // Whether any section headers should be visible
+    hideSectionHeaders: PropTypes.bool,
 };
 
 const defaultProps = {
     onSelectRow: () => {},
+    placeholderText: 'Name, email, or phone number',
+    selectedOptions: [],
+    headerTitle: '',
+    headerMessage: '',
+    canSelectMultipleOptions: false,
+    hideSectionHeaders: false,
 };
 
 class OptionsSelector extends Component {
diff --git a/src/components/optionPropTypes.js b/src/components/optionPropTypes.js
new file mode 100644
index 000000000000..86eb82bf804d
--- /dev/null
+++ b/src/components/optionPropTypes.js
@@ -0,0 +1,33 @@
+import PropTypes from 'prop-types';
+
+export default PropTypes.shape({
+    // Text to display
+    text: PropTypes.string,
+
+    // Alternate text to display
+    alternateText: PropTypes.string,
+
+    // Array of icon urls
+    icons: PropTypes.arrayOf(PropTypes.string),
+
+    // Login (only present when there is a single participant)
+    login: PropTypes.string,
+
+    // reportID (only present when there is a matching report)
+    reportID: PropTypes.number,
+
+    // Whether the report has read or not
+    isUnread: PropTypes.bool,
+
+    // Whether the report has a draft comment or not
+    hasDraftComment: PropTypes.bool,
+
+    // Key used internally by React
+    keyForList: PropTypes.string,
+
+    // Search text we use to filter options
+    searchText: PropTypes.string,
+
+    // Whether the report is pinned or not
+    isPinned: PropTypes.bool,
+});
diff --git a/src/pages/NewGroupPage.js b/src/pages/NewGroupPage.js
index f6deb7df36ec..7f2175616e53 100644
--- a/src/pages/NewGroupPage.js
+++ b/src/pages/NewGroupPage.js
@@ -1,6 +1,7 @@
 import _ from 'underscore';
 import React, {Component} from 'react';
 import {View, Text, TouchableOpacity} from 'react-native';
+import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
 import HeaderWithCloseButton from '../components/HeaderWithCloseButton';
 import OptionsSelector from '../components/OptionsSelector';
@@ -10,11 +11,40 @@ import styles from '../styles/styles';
 import {fetchOrCreateChatReport} from '../libs/actions/Report';
 import CONST from '../CONST';
 
+const personalDetailsPropTypes = PropTypes.shape({
+    // The login of the person (either email or phone number)
+    login: PropTypes.string.isRequired,
+
+    // The URL of the person's avatar (there should already be a default avatarURL if
+    // the person doesn't have their own avatar uploaded yet)
+    avatarURL: PropTypes.string.isRequired,
+
+    // This is either the user's full name, or their login if full name is an empty string
+    displayName: PropTypes.string.isRequired,
+});
+
+const propTypes = {
+    // All of the personal details for everyone
+    personalDetails: PropTypes.objectOf(personalDetailsPropTypes).isRequired,
+
+    // All reports shared with the user
+    reports: PropTypes.shape({
+        reportID: PropTypes.number,
+        reportName: PropTypes.string,
+    }).isRequired,
+
+    // Session of currently logged in user
+    session: PropTypes.shape({
+        email: PropTypes.string.isRequired,
+    }).isRequired,
+};
+
 class NewGroupPage extends Component {
     constructor(props) {
         super(props);
 
         this.toggleOption = this.toggleOption.bind(this);
+        this.createGroup = this.createGroup.bind(this);
 
         const {
             recentReports,
@@ -36,6 +66,30 @@ class NewGroupPage extends Component {
         };
     }
 
+    getHeaderTitleAndMessage() {
+        const maxParticipantsReached = this.state.selectedOptions.length === CONST.REPORT.MAXIMUM_PARTICIPANTS;
+        if (maxParticipantsReached) {
+            return {
+                headerTitle: 'Maximum participants reached',
+                headerMessage: 'You\'ve reached the maximum number of participants for a group chat.',
+            };
+        }
+
+        const hasSelectableOptions = this.state.personalDetails.length + this.state.recentReports.length !== 0;
+        if (!hasSelectableOptions && !this.state.userToInvite) {
+            return {
+                headerTitle: '',
+                // eslint-disable-next-line max-len
+                headerMessage: 'Don\'t see who you\'re looking for? Type their email or phone number to invite them to chat.',
+            };
+        }
+
+        return {
+            headerTitle: '',
+            headerMessage: '',
+        };
+    }
+
     getSections() {
         const sections = [];
         sections.push({
@@ -115,7 +169,7 @@ class NewGroupPage extends Component {
 
     render() {
         const sections = this.getSections();
-        const maxParticipantsReached = this.state.selectedOptions.length === CONST.REPORT.MAXIMUM_PARTICIPANTS;
+        const {headerTitle, headerMessage} = this.getHeaderTitleAndMessage();
         return (
             <View style={[styles.flex1, styles.p2]}>
                 <HeaderWithCloseButton
@@ -145,16 +199,8 @@ class NewGroupPage extends Component {
                             personalDetails,
                         });
                     }}
-                    headerTitle={
-                        maxParticipantsReached
-                            ? 'Maximum participants reached'
-                            : ''
-                    }
-                    headerMessage={
-                        maxParticipantsReached
-                            ? 'You\'ve reached the maximum number of participants for a group chat.'
-                            : ''
-                    }
+                    headerTitle={headerTitle}
+                    headerMessage={headerMessage}
                 />
                 <TouchableOpacity
                     onPress={this.createGroup}
@@ -169,6 +215,8 @@ class NewGroupPage extends Component {
     }
 }
 
+NewGroupPage.propTypes = propTypes;
+
 export default withOnyx({
     reports: {
         key: ONYXKEYS.COLLECTION.REPORT,

From 49deead7f1efa1887b6fde95a70496213388218e Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Mon, 25 Jan 2021 14:16:33 -1000
Subject: [PATCH 31/72] only show selected users when participants have been
 reached

---
 src/pages/NewGroupPage.js | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/pages/NewGroupPage.js b/src/pages/NewGroupPage.js
index 7f2175616e53..91afa8569059 100644
--- a/src/pages/NewGroupPage.js
+++ b/src/pages/NewGroupPage.js
@@ -66,8 +66,7 @@ class NewGroupPage extends Component {
         };
     }
 
-    getHeaderTitleAndMessage() {
-        const maxParticipantsReached = this.state.selectedOptions.length === CONST.REPORT.MAXIMUM_PARTICIPANTS;
+    getHeaderTitleAndMessage(maxParticipantsReached) {
         if (maxParticipantsReached) {
             return {
                 headerTitle: 'Maximum participants reached',
@@ -90,7 +89,7 @@ class NewGroupPage extends Component {
         };
     }
 
-    getSections() {
+    getSections(maxParticipantsReached) {
         const sections = [];
         sections.push({
             title: undefined,
@@ -98,6 +97,11 @@ class NewGroupPage extends Component {
             shouldShow: true,
             indexOffset: 0,
         });
+
+        if (maxParticipantsReached) {
+            return sections;
+        }
+
         sections.push({
             title: 'RECENTS',
             data: this.state.recentReports,
@@ -168,8 +172,9 @@ class NewGroupPage extends Component {
     }
 
     render() {
-        const sections = this.getSections();
-        const {headerTitle, headerMessage} = this.getHeaderTitleAndMessage();
+        const maxParticipantsReached = this.state.selectedOptions.length === CONST.REPORT.MAXIMUM_PARTICIPANTS;
+        const sections = this.getSections(maxParticipantsReached);
+        const {headerTitle, headerMessage} = this.getHeaderTitleAndMessage(maxParticipantsReached);
         return (
             <View style={[styles.flex1, styles.p2]}>
                 <HeaderWithCloseButton

From 04f04664636a868069c2c71f7fdef4a8872c699a Mon Sep 17 00:00:00 2001
From: Yuwen Memon <yuwen@expensify.com>
Date: Mon, 25 Jan 2021 16:18:32 -0800
Subject: [PATCH 32/72] Cleanup code / add some comments

---
 src/components/SettingsModal.js | 7 ++++---
 src/pages/home/MainView.js      | 2 ++
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/SettingsModal.js b/src/components/SettingsModal.js
index 73df11853019..e0b598616e7f 100644
--- a/src/components/SettingsModal.js
+++ b/src/components/SettingsModal.js
@@ -1,10 +1,8 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-import {View} from 'react-native-web';
 import {withOnyx} from 'react-native-onyx';
 import SettingsPage from '../pages/SettingsPage';
 import CONST from '../CONST';
-import styles from '../styles/styles';
 import themeColors from '../styles/themes/default';
 import ONYXKEYS from '../ONYXKEYS';
 import ModalWithHeader from './ModalWithHeader';
@@ -12,7 +10,7 @@ import {redirect} from '../libs/actions/App';
 import ROUTES from '../ROUTES';
 
 /**
- * TODO
+ * Right-docked modal view showing a user's settings.
  */
 const propTypes = {
     // Is the Settings Modal visible or not?
@@ -35,6 +33,9 @@ class SettingsModal extends Component {
         this.onClose = this.onClose.bind(this);
     }
 
+    /**
+     * Return to the report that was being viewed upon close.
+     */
     onClose() {
         redirect(ROUTES.getReportRoute(this.props.currentlyViewedReportID));
     }
diff --git a/src/pages/home/MainView.js b/src/pages/home/MainView.js
index 3ad1a76354a5..f565e7c5bb16 100644
--- a/src/pages/home/MainView.js
+++ b/src/pages/home/MainView.js
@@ -21,8 +21,10 @@ const propTypes = {
         reportID: PropTypes.number,
     })),
 
+    // ID of Report being viewed
     currentlyViewedReportID: PropTypes.string,
 
+    // The Route to the current page we're viewing
     currentURL: PropTypes.string,
 };
 

From ae306f3fc3b4cc7e9eef1f3eb5d33780a7bc1ded Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Mon, 25 Jan 2021 14:20:50 -1000
Subject: [PATCH 33/72] remove backspace seems unused

---
 src/components/OptionsList.js     | 2 +-
 src/components/OptionsSelector.js | 5 -----
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/components/OptionsList.js b/src/components/OptionsList.js
index b8c9462fb22f..3e7d9b415e5b 100644
--- a/src/components/OptionsList.js
+++ b/src/components/OptionsList.js
@@ -38,7 +38,7 @@ const propTypes = {
     // Whether to show headers above each section or not
     hideSectionHeaders: PropTypes.bool,
 
-    /** Callback to fire when a row is selected */
+    // Callback to fire when a row is selected
     onSelectRow: PropTypes.func,
 
     // Optional header title
diff --git a/src/components/OptionsSelector.js b/src/components/OptionsSelector.js
index 4688fb138428..0ec41bb676a8 100644
--- a/src/components/OptionsSelector.js
+++ b/src/components/OptionsSelector.js
@@ -94,11 +94,6 @@ class OptionsSelector extends Component {
                 break;
             }
 
-            case 'Backspace': {
-                // this.props.onBackspacePress();
-                break;
-            }
-
             case 'ArrowDown': {
                 this.setState((prevState) => {
                     let newFocusedIndex = prevState.focusedIndex + 1;

From 55aa80cda9d3ca275ed3f359a835439a63a74789 Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Mon, 25 Jan 2021 14:25:11 -1000
Subject: [PATCH 34/72] When pressing x go back to current report

---
 src/pages/NewGroupPage.js | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/src/pages/NewGroupPage.js b/src/pages/NewGroupPage.js
index 91afa8569059..30ed78dd2bf3 100644
--- a/src/pages/NewGroupPage.js
+++ b/src/pages/NewGroupPage.js
@@ -10,6 +10,8 @@ import ONYXKEYS from '../ONYXKEYS';
 import styles from '../styles/styles';
 import {fetchOrCreateChatReport} from '../libs/actions/Report';
 import CONST from '../CONST';
+import {redirect} from '../libs/actions/App';
+import ROUTES from '../ROUTES';
 
 const personalDetailsPropTypes = PropTypes.shape({
     // The login of the person (either email or phone number)
@@ -37,6 +39,13 @@ const propTypes = {
     session: PropTypes.shape({
         email: PropTypes.string.isRequired,
     }).isRequired,
+
+    // Report ID currently in view
+    currentlyViewedReportID: PropTypes.string,
+};
+
+const defaultProps = {
+    currentlyViewedReportID: '',
 };
 
 class NewGroupPage extends Component {
@@ -179,6 +188,11 @@ class NewGroupPage extends Component {
             <View style={[styles.flex1, styles.p2]}>
                 <HeaderWithCloseButton
                     title="New Group"
+                    onCloseButtonPress={() => {
+                        redirect(this.props.currentlyViewedReportID !== ''
+                            ? ROUTES.getReportRoute(this.props.currentlyViewedReportID)
+                            : ROUTES.HOME);
+                    }}
                 />
                 <OptionsSelector
                     canSelectMultipleOptions
@@ -221,6 +235,7 @@ class NewGroupPage extends Component {
 }
 
 NewGroupPage.propTypes = propTypes;
+NewGroupPage.defaultProps = defaultProps;
 
 export default withOnyx({
     reports: {
@@ -232,4 +247,7 @@ export default withOnyx({
     session: {
         key: ONYXKEYS.SESSION,
     },
+    currentlyViewedReportID: {
+        key: ONYXKEYS.CURRENTLY_VIEWED_REPORTID,
+    },
 })(NewGroupPage);

From b854b2c4a6711724f0ef282c5aa111ee550b3fad Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Mon, 25 Jan 2021 15:22:35 -1000
Subject: [PATCH 35/72] add tests

---
 src/components/OptionsSelector.js  |  5 ----
 src/libs/OptionsListUtils.js       | 13 +++++++++-
 tests/unit/OptionsListUtilsTest.js | 40 ++++++++++++++++++++++++++++++
 3 files changed, 52 insertions(+), 6 deletions(-)

diff --git a/src/components/OptionsSelector.js b/src/components/OptionsSelector.js
index 0ec41bb676a8..fd5d34389230 100644
--- a/src/components/OptionsSelector.js
+++ b/src/components/OptionsSelector.js
@@ -126,11 +126,6 @@ class OptionsSelector extends Component {
                 break;
             }
 
-            case 'Tab':
-            case 'Escape': {
-                break;
-            }
-
             default:
         }
     }
diff --git a/src/libs/OptionsListUtils.js b/src/libs/OptionsListUtils.js
index 94185a4a745e..fb75506cf0de 100644
--- a/src/libs/OptionsListUtils.js
+++ b/src/libs/OptionsListUtils.js
@@ -14,6 +14,7 @@ import ONYXKEYS from '../ONYXKEYS';
  */
 
 let currentUserLogin;
+let countryCodeByIP;
 
 /**
  * Returns the personal details for an array of logins
@@ -99,6 +100,11 @@ Onyx.connect({
     callback: val => currentUserLogin = val && val.email,
 });
 
+Onyx.connect({
+    key: ONYXKEYS.COUNTRY_CODE,
+    callback: val => countryCodeByIP = val || 1,
+});
+
 /**
  * Searches for a match when provided with a value
  *
@@ -245,7 +251,12 @@ function getOptions(reports, personalDetails, draftComments, activeReportID, {
             && _.every(selectedOptions, option => option.login !== searchValue)
             && (Str.isValidEmail(searchValue) || Str.isValidPhone(searchValue))
     ) {
-        const userInvitePersonalDetails = getPersonalDetailsForLogins([searchValue], personalDetails);
+        // If the phone number doesn't have an international code then let's prefix it with the
+        // current users international code based on their IP address.
+        const login = (Str.isValidPhone(searchValue) && !searchValue.includes('+'))
+            ? `+${countryCodeByIP}${searchValue}`
+            : searchValue;
+        const userInvitePersonalDetails = getPersonalDetailsForLogins([login], personalDetails);
         userToInvite = createOption(userInvitePersonalDetails, null, draftComments, activeReportID);
     }
 
diff --git a/tests/unit/OptionsListUtilsTest.js b/tests/unit/OptionsListUtilsTest.js
index 19d47f9ee77f..8cdc9d5cde24 100644
--- a/tests/unit/OptionsListUtilsTest.js
+++ b/tests/unit/OptionsListUtilsTest.js
@@ -252,6 +252,46 @@ describe('OptionsListUtils', () => {
         // Then the option should not appear anywhere in either list
         expect(_.every(results.recentReports, option => option.login !== 'peterparker@expensify.com')).toBe(true);
         expect(_.every(results.personalDetails, option => option.login !== 'peterparker@expensify.com')).toBe(true);
+
+        // When we add a search term for which no options exist and the searchValue itself
+        // is not a potential email or phone
+        results = OptionsListUtils.getNewGroupOptions(REPORTS, PERSONAL_DETAILS, 'marc@expensify');
+
+        // Then we should have no options or personal details at all and also that there is no userToInvite
+        expect(results.recentReports.length).toBe(0);
+        expect(results.personalDetails.length).toBe(0);
+        expect(results.userToInvite).toBe(null);
+
+        // When we add a search term for which no options exist and the searchValue itself
+        // is a potential email
+        results = OptionsListUtils.getNewGroupOptions(REPORTS, PERSONAL_DETAILS, 'marc@expensify.com');
+
+        // Then we should have no options or personal details at all but there should be a userToInvite
+        expect(results.recentReports.length).toBe(0);
+        expect(results.personalDetails.length).toBe(0);
+        expect(results.userToInvite).not.toBe(null);
+
+        // When we add a search term for which no options exist and the searchValue itself
+        // is a potential phone number without country code added
+        results = OptionsListUtils.getNewGroupOptions(REPORTS, PERSONAL_DETAILS, '5005550006');
+
+        // Then we should have no options or personal details at all but there should be a userToInvite and the login
+        // should have the country code included
+        expect(results.recentReports.length).toBe(0);
+        expect(results.personalDetails.length).toBe(0);
+        expect(results.userToInvite).not.toBe(null);
+        expect(results.userToInvite.login).toBe('+15005550006');
+
+        // When we add a search term for which no options exist and the searchValue itself
+        // is a potential phone number with country code added
+        results = OptionsListUtils.getNewGroupOptions(REPORTS, PERSONAL_DETAILS, '+15005550006');
+
+        // Then we should have no options or personal details at all but there should be a userToInvite and the login
+        // should have the country code included
+        expect(results.recentReports.length).toBe(0);
+        expect(results.personalDetails.length).toBe(0);
+        expect(results.userToInvite).not.toBe(null);
+        expect(results.userToInvite.login).toBe('+15005550006');
     });
 
     it('getSidebarOptions()', () => {

From 59fdbab6281bca08e985f6095c5fee60ae399092 Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Mon, 25 Jan 2021 15:27:50 -1000
Subject: [PATCH 36/72] fix up some method docs

---
 src/pages/NewGroupPage.js | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/src/pages/NewGroupPage.js b/src/pages/NewGroupPage.js
index 30ed78dd2bf3..66df3c4ab057 100644
--- a/src/pages/NewGroupPage.js
+++ b/src/pages/NewGroupPage.js
@@ -75,6 +75,12 @@ class NewGroupPage extends Component {
         };
     }
 
+    /**
+     * Helper method that returns the text to be used for the header's message and title (if any)
+     *
+     * @param {Boolean} maxParticipantsReached
+     * @return {String}
+     */
     getHeaderTitleAndMessage(maxParticipantsReached) {
         if (maxParticipantsReached) {
             return {
@@ -98,6 +104,12 @@ class NewGroupPage extends Component {
         };
     }
 
+    /**
+     * Returns the sections needed for the OptionsSelector
+     *
+     * @param {Boolean} maxParticipantsReached
+     * @returns {Array}
+     */
     getSections(maxParticipantsReached) {
         const sections = [];
         sections.push({
@@ -117,6 +129,7 @@ class NewGroupPage extends Component {
             shouldShow: this.state.recentReports.length > 0,
             indexOffset: sections.reduce((prev, {data}) => prev + data.length, 0),
         });
+
         sections.push({
             title: 'CONTACTS',
             data: this.state.personalDetails,
@@ -132,9 +145,14 @@ class NewGroupPage extends Component {
                 indexOffset: 0,
             }));
         }
+
         return sections;
     }
 
+    /**
+     * Once all our options are selected this method will call the API and  create new chat between all selected users
+     * and the currently logged in user
+     */
     createGroup() {
         const userLogins = _.map(this.state.selectedOptions, option => option.login);
         fetchOrCreateChatReport([this.props.session.email, ...userLogins]);

From c929ff3e2141e2f8a89672b8322e2e520bdd76a1 Mon Sep 17 00:00:00 2001
From: Yuwen Memon <yuwen@expensify.com>
Date: Mon, 25 Jan 2021 21:07:06 -0800
Subject: [PATCH 37/72] Update styles for better padding on mobile

---
 src/styles/getModalStyles.js | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/styles/getModalStyles.js b/src/styles/getModalStyles.js
index 39988f82ec27..248ad83091b5 100644
--- a/src/styles/getModalStyles.js
+++ b/src/styles/getModalStyles.js
@@ -99,20 +99,19 @@ export default (type, windowDimensions) => {
         case CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED:
             modalStyle = {
                 margin: 0,
-                flexDirection: 'row-reverse',
-                justifyContent: 'end',
+                flexDirection: 'row',
+                justifyContent: 'flex-end',
             };
             modalContainerStyle = {
                 width: isSmallScreen ? '100%' : '40%',
                 height: '100%',
                 overflow: 'hidden',
-                marginRight: 0,
-                paddingTop: 0,
             };
 
             swipeDirection = 'right';
             animationIn = 'slideInRight';
             animationOut = 'slideOutRight';
+            needsSafeAreaPadding = true;
             break;
         default:
             modalStyle = {};

From 6039761be96bc45ec59abf8f7ab8971f93ddb359 Mon Sep 17 00:00:00 2001
From: Yuwen Memon <yuwen@expensify.com>
Date: Tue, 26 Jan 2021 13:34:06 -0800
Subject: [PATCH 38/72] PR comments

---
 src/components/SettingsModal.js        | 40 ++++++++------------------
 src/pages/SettingsPage.js              |  1 -
 src/pages/home/HeaderView.js           |  6 +++-
 src/pages/home/HomePage.js             |  7 ++++-
 src/pages/home/MainView.js             |  1 -
 src/pages/home/sidebar/SidebarLinks.js | 13 ++++++---
 src/styles/getModalStyles.js           |  2 +-
 7 files changed, 33 insertions(+), 37 deletions(-)

diff --git a/src/components/SettingsModal.js b/src/components/SettingsModal.js
index e0b598616e7f..9a4a1ddfb698 100644
--- a/src/components/SettingsModal.js
+++ b/src/components/SettingsModal.js
@@ -26,37 +26,21 @@ const defaultProps = {
     currentlyViewedReportID: '',
 };
 
-class SettingsModal extends Component {
-    constructor(props) {
-        super(props);
-
-        this.onClose = this.onClose.bind(this);
-    }
-
-    /**
-     * Return to the report that was being viewed upon close.
-     */
-    onClose() {
-        redirect(ROUTES.getReportRoute(this.props.currentlyViewedReportID));
-    }
-
-    render() {
-        return (
-            <ModalWithHeader
-                type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED}
-                onClose={this.onClose}
-                isVisible={this.props.isVisible}
-                title="Settings"
-                backgroundColor={themeColors.componentBG}
-            >
-                <SettingsPage />
-            </ModalWithHeader>
-        );
-    }
-}
+const SettingsModal = props => (
+    <ModalWithHeader
+        type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED}
+        onClose={() => redirect(ROUTES.getReportRoute(props.currentlyViewedReportID))}
+        isVisible={props.isVisible}
+        title="Settings"
+        backgroundColor={themeColors.componentBG}
+    >
+        <SettingsPage />
+    </ModalWithHeader>
+);
 
 SettingsModal.propTypes = propTypes;
 SettingsModal.defaultProps = defaultProps;
+
 export default withOnyx({
     session: {
         key: ONYXKEYS.SESSION,
diff --git a/src/pages/SettingsPage.js b/src/pages/SettingsPage.js
index bf643a48d2e2..6c4e8017f4a3 100644
--- a/src/pages/SettingsPage.js
+++ b/src/pages/SettingsPage.js
@@ -85,7 +85,6 @@ const SettingsPage = ({
                     </Text>
                 </TouchableOpacity>
             </View>
-
             <Text style={[styles.chatItemMessageHeaderTimestamp]} numberOfLines={1}>
                 v
                 {version}
diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js
index 9c53c591d606..09c3d1d09f16 100644
--- a/src/pages/home/HeaderView.js
+++ b/src/pages/home/HeaderView.js
@@ -19,6 +19,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({
@@ -80,7 +84,7 @@ 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
index 984e62590d5a..a3dcf440e5c6 100644
--- a/src/pages/home/HomePage.js
+++ b/src/pages/home/HomePage.js
@@ -47,6 +47,7 @@ const propTypes = {
     isChatSwitcherActive: PropTypes.bool,
     currentURL: PropTypes.string,
     network: PropTypes.shape({isOffline: PropTypes.bool}),
+    currentlyViewedReportID: PropTypes.string,
     ...windowDimensionsPropTypes,
 };
 const defaultProps = {
@@ -313,9 +314,10 @@ class HomePage extends React.Component {
                                     <HeaderView
                                         shouldShowNavigationMenuButton={isSmallScreenWidth}
                                         onNavigationMenuButtonClicked={this.toggleNavigationMenu}
+                                        reportID={this.props.currentlyViewedReportID}
                                     />
                                     <SettingsModal
-                                        isVisible={this.props.currentURL === '/settings'}
+                                        isVisible={this.props.currentURL === ROUTES.SETTINGS}
                                     />
                                     <Main />
                                 </View>
@@ -347,6 +349,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
index 62ffa253327c..82c82f1d205b 100644
--- a/src/pages/home/MainView.js
+++ b/src/pages/home/MainView.js
@@ -15,7 +15,6 @@ const propTypes = {
     match: PropTypes.object.isRequired,
 
     /* Onyx Props */
-
     // List of reports to display
     reports: PropTypes.objectOf(PropTypes.shape({
         reportID: PropTypes.number,
diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js
index 4f7ada9657e6..4582af5e09dc 100644
--- a/src/pages/home/sidebar/SidebarLinks.js
+++ b/src/pages/home/sidebar/SidebarLinks.js
@@ -35,7 +35,6 @@ const propTypes = {
     insets: SafeAreaInsetPropTypes.isRequired,
 
     /* Onyx Props */
-
     // List of reports
     reports: PropTypes.objectOf(PropTypes.shape({
         reportID: PropTypes.number,
@@ -70,6 +69,9 @@ const propTypes = {
         // Is the network currently offline or not
         isOffline: PropTypes.bool,
     }),
+
+    // Currently viewed reportID
+    currentlyViewedReportID: PropTypes.string,
 };
 
 const defaultProps = {
@@ -84,13 +86,13 @@ const defaultProps = {
 };
 
 const SidebarLinks = (props) => {
-    const reportIDInUrl = parseInt(props.match.params.reportID, 10);
+    const activeReportID = parseInt(props.currentlyViewedReportID, 10);
 
     const chatSwitcherStyle = props.isChatSwitcherActive
         ? [styles.sidebarHeader, styles.sidebarHeaderActive]
         : [styles.sidebarHeader];
 
-    const {recentReports} = getSidebarOptions(props.reports, props.personalDetails, props.draftComments, reportIDInUrl);
+    const {recentReports} = getSidebarOptions(props.reports, props.personalDetails, props.draftComments, activeReportID);
 
     const sections = [{
         title: '',
@@ -139,7 +141,7 @@ const SidebarLinks = (props) => {
                         ]}
                         sections={sections}
                         focusedIndex={_.findIndex(recentReports, (
-                            option => option.reportID === reportIDInUrl
+                            option => option.reportID === activeReportID
                         ))}
                         onSelectRow={(option) => {
                             redirect(ROUTES.getReportRoute(option.reportID));
@@ -179,5 +181,8 @@ export default compose(
             key: ONYXKEYS.IS_CHAT_SWITCHER_ACTIVE,
             initWithStoredValues: false,
         },
+        currentlyViewedReportID: {
+            key: ONYXKEYS.CURRENTLY_VIEWED_REPORTID,
+        },
     }),
 )(SidebarLinks);
diff --git a/src/styles/getModalStyles.js b/src/styles/getModalStyles.js
index a8db075742d4..37dd052a2dcb 100644
--- a/src/styles/getModalStyles.js
+++ b/src/styles/getModalStyles.js
@@ -102,7 +102,7 @@ export default (type, windowDimensions) => {
                 justifyContent: 'flex-end',
             });
             modalContainerStyle = {
-                width: isSmallScreen ? '100%' : '40%',
+                width: isSmallScreen ? '100%' : variables.sideBarWidth,
                 height: '100%',
                 overflow: 'hidden',
             };

From 6f20d8e431502e2c7de052b70de0196f183a345c Mon Sep 17 00:00:00 2001
From: Yuwen Memon <yuwen@expensify.com>
Date: Tue, 26 Jan 2021 13:43:01 -0800
Subject: [PATCH 39/72] JS linting

---
 src/components/SettingsModal.js        |  2 +-
 src/pages/home/HeaderView.js           |  2 --
 src/pages/home/HomePage.js             |  1 +
 src/pages/home/MainView.js             | 10 ----------
 src/pages/home/sidebar/SidebarLinks.js |  5 +----
 5 files changed, 3 insertions(+), 17 deletions(-)

diff --git a/src/components/SettingsModal.js b/src/components/SettingsModal.js
index 9a4a1ddfb698..1623f13eb3fd 100644
--- a/src/components/SettingsModal.js
+++ b/src/components/SettingsModal.js
@@ -1,4 +1,4 @@
-import React, {Component} from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
 import SettingsPage from '../pages/SettingsPage';
diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js
index 09c3d1d09f16..b13e584b904e 100644
--- 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';
@@ -81,7 +80,6 @@ HeaderView.displayName = 'HeaderView';
 HeaderView.defaultProps = defaultProps;
 
 export default compose(
-    withRouter,
     withOnyx({
         report: {
             key: ({reportID}) => `${ONYXKEYS.COLLECTION.REPORT}${reportID}`,
diff --git a/src/pages/home/HomePage.js b/src/pages/home/HomePage.js
index a3dcf440e5c6..be568a908e38 100644
--- a/src/pages/home/HomePage.js
+++ b/src/pages/home/HomePage.js
@@ -55,6 +55,7 @@ const defaultProps = {
     isChatSwitcherActive: false,
     currentURL: '',
     network: {isOffline: true},
+    currentlyViewedReportID: '',
 };
 
 class HomePage extends React.Component {
diff --git a/src/pages/home/MainView.js b/src/pages/home/MainView.js
index 82c82f1d205b..8f4f7bf57cff 100644
--- a/src/pages/home/MainView.js
+++ b/src/pages/home/MainView.js
@@ -6,14 +6,9 @@ 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({
@@ -22,15 +17,11 @@ const propTypes = {
 
     // ID of Report being viewed
     currentlyViewedReportID: PropTypes.string,
-
-    // The Route to the current page we're viewing
-    currentURL: PropTypes.string,
 };
 
 const defaultProps = {
     reports: {},
     currentlyViewedReportID: '',
-    currentURL: '',
 };
 
 class MainView extends Component {
@@ -82,7 +73,6 @@ MainView.propTypes = propTypes;
 MainView.defaultProps = defaultProps;
 
 export default compose(
-    withRouter,
     withOnyx({
         reports: {
             key: ONYXKEYS.COLLECTION.REPORT,
diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js
index 4582af5e09dc..0313860cab8b 100644
--- a/src/pages/home/sidebar/SidebarLinks.js
+++ b/src/pages/home/sidebar/SidebarLinks.js
@@ -21,10 +21,6 @@ import {getSidebarOptions} from '../../../libs/OptionsListUtils';
 import {getDefaultAvatar} from '../../../libs/actions/PersonalDetails';
 
 const propTypes = {
-    // These are from withRouter
-    // eslint-disable-next-line react/forbid-prop-types
-    match: PropTypes.object.isRequired,
-
     // Toggles the navigation menu open and closed
     onLinkClick: PropTypes.func.isRequired,
 
@@ -83,6 +79,7 @@ const defaultProps = {
         avatarURL: getDefaultAvatar(),
     },
     network: null,
+    currentlyViewedReportID: '',
 };
 
 const SidebarLinks = (props) => {

From 39e7069aa9499a2f10ccf6b328f3ab482b7ede8e Mon Sep 17 00:00:00 2001
From: Yuwen Memon <yuwen@expensify.com>
Date: Tue, 26 Jan 2021 16:19:29 -0800
Subject: [PATCH 40/72] Account for case where currentlyViewedReportID is empty

---
 src/components/SettingsModal.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/SettingsModal.js b/src/components/SettingsModal.js
index 1623f13eb3fd..8f39841270ef 100644
--- a/src/components/SettingsModal.js
+++ b/src/components/SettingsModal.js
@@ -1,6 +1,7 @@
 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';
@@ -29,7 +30,9 @@ const defaultProps = {
 const SettingsModal = props => (
     <ModalWithHeader
         type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED}
-        onClose={() => redirect(ROUTES.getReportRoute(props.currentlyViewedReportID))}
+        onClose={() => redirect(_.isEmpty(props.currentlyViewedReportID)
+            ? ROUTES.HOME
+            : ROUTES.getReportRoute(props.currentlyViewedReportID))}
         isVisible={props.isVisible}
         title="Settings"
         backgroundColor={themeColors.componentBG}
@@ -40,6 +43,7 @@ const SettingsModal = props => (
 
 SettingsModal.propTypes = propTypes;
 SettingsModal.defaultProps = defaultProps;
+SettingsModal.displayName = 'SettingsModal';
 
 export default withOnyx({
     session: {

From 91dff12695bac8b6e2eaf8b91b8dee669e964922 Mon Sep 17 00:00:00 2001
From: Yuwen Memon <yuwen@expensify.com>
Date: Tue, 26 Jan 2021 16:35:29 -0800
Subject: [PATCH 41/72] use spread operator instead of extend

---
 src/styles/getModalStyles.js | 47 ++++++++++++++++++++++--------------
 1 file changed, 29 insertions(+), 18 deletions(-)

diff --git a/src/styles/getModalStyles.js b/src/styles/getModalStyles.js
index 37dd052a2dcb..c3c38f8ed1a1 100644
--- a/src/styles/getModalStyles.js
+++ b/src/styles/getModalStyles.js
@@ -1,4 +1,3 @@
-import _ from 'underscore';
 import CONST from '../CONST';
 import colors from './colors';
 import variables from './variables';
@@ -23,9 +22,12 @@ export default (type, windowDimensions) => {
             // and can be dismissed by clicking outside of the modal.
             // This modal should take up the entire visible area when
             // viewed on a smaller device (e.g. mobile or mobile web).
-            modalStyle = _.extend(modalStyle, {
-                alignItems: 'center',
-            });
+            modalStyle = {
+                ...modalStyle,
+                ...{
+                    alignItems: 'center',
+                },
+            };
             modalContainerStyle = {
                 // Shadow Styles
                 shadowColor: colors.black,
@@ -54,10 +56,13 @@ export default (type, windowDimensions) => {
             needsSafeAreaPadding = true;
             break;
         case CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED:
-            modalStyle = _.extend(modalStyle, {
-                alignItems: 'center',
-                justifyContent: 'flex-end',
-            });
+            modalStyle = {
+                ...modalStyle,
+                ...{
+                    alignItems: 'center',
+                    justifyContent: 'flex-end',
+                },
+            };
             modalContainerStyle = {
                 width: '100%',
                 borderTopLeftRadius: 20,
@@ -73,12 +78,15 @@ export default (type, windowDimensions) => {
             animationOut = 'slideOutDown';
             break;
         case CONST.MODAL.MODAL_TYPE.POPOVER:
-            modalStyle = _.extend(modalStyle, {
-                alignItems: 'center',
-                justifyContent: 'flex-end',
-                marginRight: windowDimensions.width - variables.sideBarWidth,
-                marginBottom: 82,
-            });
+            modalStyle = {
+                ...modalStyle,
+                ...{
+                    alignItems: 'center',
+                    justifyContent: 'flex-end',
+                    marginRight: windowDimensions.width - variables.sideBarWidth,
+                    marginBottom: 82,
+                },
+            };
             modalContainerStyle = {
                 width: variables.sideBarWidth - 40,
                 borderRadius: 12,
@@ -97,10 +105,13 @@ export default (type, windowDimensions) => {
             animationOut = 'fadeOutLeft';
             break;
         case CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED:
-            modalStyle = _.extend(modalStyle, {
-                flexDirection: 'row',
-                justifyContent: 'flex-end',
-            });
+            modalStyle = {
+                ...modalStyle,
+                ...{
+                    flexDirection: 'row',
+                    justifyContent: 'flex-end',
+                },
+            };
             modalContainerStyle = {
                 width: isSmallScreen ? '100%' : variables.sideBarWidth,
                 height: '100%',

From ad28bf493dbfc7228fb553496bcb7943b1a6c8d5 Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Tue, 26 Jan 2021 15:58:34 -1000
Subject: [PATCH 42/72] clear input when adding someone to the list

---
 src/components/OptionsList.js     | 20 +++++++++++++++++---
 src/components/OptionsSelector.js | 28 ++++++++++++++++++++++++++--
 src/libs/OptionsListUtils.js      |  5 +++++
 src/pages/NewGroupPage.js         |  3 ++-
 src/styles/styles.js              | 23 +++++++++++------------
 5 files changed, 61 insertions(+), 18 deletions(-)

diff --git a/src/components/OptionsList.js b/src/components/OptionsList.js
index 3e7d9b415e5b..9eb6eec09bba 100644
--- a/src/components/OptionsList.js
+++ b/src/components/OptionsList.js
@@ -1,5 +1,5 @@
 import _ from 'underscore';
-import React from 'react';
+import React, {forwardRef} from 'react';
 import {View, SectionList, Text} from 'react-native';
 import PropTypes from 'prop-types';
 import styles from '../styles/styles';
@@ -46,6 +46,12 @@ const propTypes = {
 
     // Optional header message
     headerMessage: PropTypes.string,
+
+    // Passed via forwardRef so we can access the SectionList ref
+    innerRef: PropTypes.oneOfType([
+        PropTypes.func,
+        PropTypes.shape({current: PropTypes.instanceOf(SectionList)}),
+    ]),
 };
 
 const defaultProps = {
@@ -58,6 +64,7 @@ const defaultProps = {
     onSelectRow: () => {},
     headerMessage: '',
     headerTitle: '',
+    innerRef: null,
 };
 
 const OptionsList = ({
@@ -70,6 +77,7 @@ const OptionsList = ({
     onSelectRow,
     headerMessage,
     headerTitle,
+    innerRef,
 }) => (
     <View style={[styles.flex1]}>
         {headerMessage ? (
@@ -86,6 +94,7 @@ const OptionsList = ({
             </View>
         ) : null}
         <SectionList
+            ref={innerRef}
             bounces={false}
             indicatorStyle="white"
             keyboardShouldPersistTaps="always"
@@ -94,6 +103,7 @@ const OptionsList = ({
             sections={sections}
             keyExtractor={option => option.keyForList}
             initialNumToRender={200}
+            onScrollToIndexFailed={error => console.debug(error)}
             renderItem={({item, index, section}) => (
                 <ChatLinkRow
                     option={item}
@@ -107,7 +117,7 @@ const OptionsList = ({
                 if (title && shouldShow && !hideSectionHeaders) {
                     return (
                         <View>
-                            <Text style={styles.subHeader}>
+                            <Text style={[styles.p5, styles.textMicroBold]}>
                                 {title}
                             </Text>
                         </View>
@@ -125,4 +135,8 @@ const OptionsList = ({
 OptionsList.propTypes = propTypes;
 OptionsList.displayName = 'OptionsList';
 OptionsList.defaultProps = defaultProps;
-export default OptionsList;
+
+export default forwardRef((props, ref) => (
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    <OptionsList {...props} innerRef={ref} />
+));
diff --git a/src/components/OptionsSelector.js b/src/components/OptionsSelector.js
index fd5d34389230..b52c3afb8a6d 100644
--- a/src/components/OptionsSelector.js
+++ b/src/components/OptionsSelector.js
@@ -1,4 +1,5 @@
 import _ from 'underscore';
+import lodashGet from 'lodash.get';
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import {View} from 'react-native';
@@ -28,7 +29,7 @@ const propTypes = {
     })).isRequired,
 
     // Value in the search input field
-    searchValue: PropTypes.string.isRequired,
+    value: PropTypes.string.isRequired,
 
     // Callback fired when text changes
     onChangeText: PropTypes.func.isRequired,
@@ -77,6 +78,26 @@ class OptionsSelector extends Component {
         this.textInput.focus();
     }
 
+    /**
+     * Scrolls to the focused index within the SectionList
+     *
+     * @param {Array} allOptions
+     * @param {Number} newFocusedIndex
+     */
+    scrollToFocusedIndex(allOptions, newFocusedIndex) {
+        const focusedOption = allOptions[newFocusedIndex];
+        const sectionIndex = _.findIndex(this.props.sections, section => (
+            _.find(section.data, option => option.login === focusedOption.login)
+        ));
+
+        const sectionData = lodashGet(this.props.sections, [sectionIndex, 'data'], []);
+        const itemIndex = _.findIndex(sectionData, option => (
+            option.login === focusedOption.login
+        ));
+
+        this.list.scrollToLocation({sectionIndex, itemIndex});
+    }
+
     /**
      * Delegate key presses to specific callbacks
      *
@@ -103,6 +124,7 @@ class OptionsSelector extends Component {
                         newFocusedIndex = 0;
                     }
 
+                    this.scrollToFocusedIndex(allOptions, newFocusedIndex);
                     return {focusedIndex: newFocusedIndex};
                 });
 
@@ -120,6 +142,7 @@ class OptionsSelector extends Component {
                         newFocusedIndex = allOptions.length - 1;
                     }
 
+                    this.scrollToFocusedIndex(allOptions, newFocusedIndex);
                     return {focusedIndex: newFocusedIndex};
                 });
                 e.preventDefault();
@@ -137,13 +160,14 @@ class OptionsSelector extends Component {
                     styleFocusIn={[styles.textInputReversedFocus]}
                     ref={el => this.textInput = el}
                     style={[styles.textInput]}
-                    value={this.props.searchValue}
+                    value={this.props.value}
                     onChangeText={this.props.onChangeText}
                     onKeyPress={this.handleKeyPress}
                     placeholder={this.props.placeholderText}
                     placeholderTextColor={themeColors.textSupporting}
                 />
                 <OptionsList
+                    ref={el => this.list = el}
                     onSelectRow={this.props.onSelectRow}
                     sections={this.props.sections}
                     focusedIndex={this.state.focusedIndex}
diff --git a/src/libs/OptionsListUtils.js b/src/libs/OptionsListUtils.js
index 1851b02f33a3..af6322c8c792 100644
--- a/src/libs/OptionsListUtils.js
+++ b/src/libs/OptionsListUtils.js
@@ -16,6 +16,10 @@ import ONYXKEYS from '../ONYXKEYS';
 let currentUserLogin;
 let countryCodeByIP;
 
+// We are initializing a default avatar here so that we use the same default color for each user we are inviting. This
+// will update when the OptionsListUtils re-loads. But will stay the same color for the life of the JS session.
+const defaultAvatarForUserToInvite = getDefaultAvatar();
+
 /**
  * Returns the personal details for an array of logins
  *
@@ -265,6 +269,7 @@ function getOptions(reports, personalDetails, draftComments, activeReportID, {
             : searchValue;
         const userInvitePersonalDetails = getPersonalDetailsForLogins([login], personalDetails);
         userToInvite = createOption(userInvitePersonalDetails, null, draftComments, activeReportID);
+        userToInvite.icons = [defaultAvatarForUserToInvite];
     }
 
     return {
diff --git a/src/pages/NewGroupPage.js b/src/pages/NewGroupPage.js
index 66df3c4ab057..45e6c3f5ebb0 100644
--- a/src/pages/NewGroupPage.js
+++ b/src/pages/NewGroupPage.js
@@ -185,7 +185,7 @@ class NewGroupPage extends Component {
             } = getNewGroupOptions(
                 this.props.reports,
                 this.props.personalDetails,
-                this.state.searchValue,
+                isOptionInList ? prevState.searchValue : '',
                 newSelectedOptions,
             );
 
@@ -194,6 +194,7 @@ class NewGroupPage extends Component {
                 recentReports,
                 personalDetails,
                 userToInvite,
+                searchValue: isOptionInList ? prevState.searchValue : '',
             };
         });
     }
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 12386790b2b9..8dce7f20984e 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -64,6 +64,13 @@ const styles = {
         fontSize: variables.fontSizeSmall,
     },
 
+    textMicroBold: {
+        color: themeColors.text,
+        fontWeight: fontWeightBold,
+        fontFamily: fontFamily.GTA_BOLD,
+        fontSize: variables.fontSizeSmall,
+    },
+
     textLarge: {
         fontSize: variables.fontSizeLarge,
     },
@@ -1018,20 +1025,12 @@ const styles = {
         padding: 20,
     },
 
-    subHeader: {
-        color: themeColors.text,
-        fontWeight: fontWeightBold,
-        fontFamily: fontFamily.GTA_BOLD,
-        fontSize: 12,
-        padding: 20,
-    },
-
     selectCircle: {
-        width: 30,
-        height: 30,
-        borderColor: colors.charcoal,
+        width: variables.componentSizeSmall,
+        height: variables.componentSizeSmall,
+        borderColor: themeColors.border,
         borderWidth: 1,
-        borderRadius: 15,
+        borderRadius: variables.componentSizeSmall / 2,
     },
 };
 

From ffc269055c1dea822f53e045b0396a6b37a3dbe9 Mon Sep 17 00:00:00 2001
From: Rajat Parashar <parasharrajat@users.noreply.github.com>
Date: Sat, 23 Jan 2021 06:46:25 +0530
Subject: [PATCH 43/72] new: added Meta tags

---
 config/webpack/webpack.common.js |   1 +
 web/index.html                   |   9 +++++++++
 web/og-preview-image.png         | Bin 0 -> 16913 bytes
 3 files changed, 10 insertions(+)
 create mode 100644 web/og-preview-image.png

diff --git a/config/webpack/webpack.common.js b/config/webpack/webpack.common.js
index 2d6dc48b6156..4b75c6e43cdf 100644
--- a/config/webpack/webpack.common.js
+++ b/config/webpack/webpack.common.js
@@ -30,6 +30,7 @@ module.exports = {
             patterns: [
                 {from: 'web/favicon.png'},
                 {from: 'web/favicon-unread.png'},
+                {from: 'web/og-preview-image.png'},
                 {from: 'assets/css', to: 'css'},
 
                 // These files are copied over as per instructions here
diff --git a/web/index.html b/web/index.html
index 33831f4aa84d..11117a5c06b9 100644
--- a/web/index.html
+++ b/web/index.html
@@ -3,6 +3,15 @@
 <head>
     <meta charset="utf-8" />
     <title>Expensify.cash</title>
+    <meta name="description" content="Chat and payments are now the same thing. Launching Summer 2021, join the waitlist to be first in line!">
+    <meta property="twitter:card" content="summary">
+    <meta property="twitter:site" content="@expensify">
+    <meta property="og:type" content="website">
+    <meta property="og:site_name" content="Expensify.cash">
+    <meta property="og:url" content="https://expensify.cash">
+    <meta property="og:title" content="Expensify.cash - Chat with friends to send and receive money">
+    <meta property="og:description" content="Chat and payments are now the same thing. Launching Summer 2021, join the waitlist to be first in line!">
+    <meta property="og:image" content="https://expensify.cash/og-preview-image.png">
     <link rel="stylesheet" href="css/fonts.css" />
     <style>
         html,
diff --git a/web/og-preview-image.png b/web/og-preview-image.png
new file mode 100644
index 0000000000000000000000000000000000000000..9f0b1d09a469c07eba15abc8eb3a7b83adcb5642
GIT binary patch
literal 16913
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

literal 0
HcmV?d00001


From 701ae37aa7419fa36100f31345a2aa8f1ac469fd Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Wed, 27 Jan 2021 12:40:55 -1000
Subject: [PATCH 44/72] clean up comments

---
 src/libs/actions/Report.js                 | 12 +++++-------
 src/pages/home/report/ReportActionsView.js |  8 +++-----
 2 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js
index af60cad3d5a2..fb58812c544c 100644
--- a/src/libs/actions/Report.js
+++ b/src/libs/actions/Report.js
@@ -248,8 +248,8 @@ function updateReportWithNewAction(reportID, reportAction) {
 
     const reportActionsToMerge = {};
     if (reportAction.clientID) {
-        // Remove the optimistic action from the report since we are about to
-        // replace it with the real one (which has the true sequenceNumber)
+        // Remove the optimistic action from the report since we are about to replace it with the real one (which has
+        // the true sequenceNumber)
         reportActionsToMerge[reportAction.clientID] = null;
     }
 
@@ -429,9 +429,8 @@ function fetchChatReports() {
 function fetchActions(reportID) {
     API.Report_GetHistory({reportID})
         .then((data) => {
-            // We must remove all optimistic actions so there will not be any
-            // stuck comments. At this point, we should be caught up and no
-            // longer need any optimistic comments.
+            // We must remove all optimistic actions so there will not be any stuck comments. At this point, we should
+            // be caught up and no longer need any optimistic comments.
             removeOptimisticActions(reportID);
 
             const indexedData = _.indexBy(data.history, 'sequenceNumber');
@@ -588,8 +587,7 @@ function addAction(reportID, text, file) {
             ],
             automatic: false,
 
-            // Use the client generated ID as a optimistic action ID
-            // so we can remove it later
+            // Use the client generated ID as a optimistic action ID so we can remove it later
             sequenceNumber: optimisticReportActionID,
             avatar: myPersonalDetails.avatarURL,
             timestamp: moment().unix(),
diff --git a/src/pages/home/report/ReportActionsView.js b/src/pages/home/report/ReportActionsView.js
index 49b613fe7cb7..c9bfaad6cbec 100644
--- a/src/pages/home/report/ReportActionsView.js
+++ b/src/pages/home/report/ReportActionsView.js
@@ -183,11 +183,9 @@ class ReportActionsView extends React.Component {
         const maxVisibleSequenceNumber = _.chain(reportActions)
 
             // We want to avoid marking any pending actions as read since
-            // 1. Any action ID that hasn't been delivered by the server
-            //    is a temporary action ID.
-            // 2. We already set a comment someone has authored as the
-            //    lastReadActionID_<accountID> rNVP on the server and should
-            //    sync it locally when we handle it via Pusher or Airship
+            // 1. Any action ID that hasn't been delivered by the server is a temporary action ID.
+            // 2. We already set a comment someone has authored as the lastReadActionID_<accountID> rNVP on the server
+            // and should sync it locally when we handle it via Pusher or Airship
             .reject(action => action.loading)
             .pluck('sequenceNumber')
             .max()

From 0a3b457c8261cc3f25b192dcc959f19fba23f382 Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Wed, 27 Jan 2021 12:42:07 -1000
Subject: [PATCH 45/72] fix another comment

---
 src/libs/actions/Report.js | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js
index fb58812c544c..9bccd08a9958 100644
--- a/src/libs/actions/Report.js
+++ b/src/libs/actions/Report.js
@@ -564,10 +564,9 @@ function addAction(reportID, text, file) {
     // sequenceNumber if it is created before this one.
     const optimisticReportActionID = Str.guid(`${Date.now()}_`);
 
-    // Store the optimistic action ID on the report the comment was added to.
-    // It will be removed later when refetching report actions in order to clear out any
-    // stuck actions (i.e. actions where the client never received a Pusher event, for
-    // whatever reason, from the server with the new action data
+    // Store the optimistic action ID on the report the comment was added to. It will be removed later when refetching
+    // report actions in order to clear out any stuck actions (i.e. actions where the client never received a Pusher
+    // event, for whatever reason, from the server with the new action data
     Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`, {
         optimisticReportActionIDs: [...(optimisticReportActionIDs[reportID] || []), optimisticReportActionID],
     });

From 167d96da8f9958b2117f7f619a14156802af0aee Mon Sep 17 00:00:00 2001
From: Yuwen Memon <yuwen@expensify.com>
Date: Wed, 27 Jan 2021 15:23:17 -0800
Subject: [PATCH 46/72] Fix style of function call

---
 src/pages/home/sidebar/SidebarLinks.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js
index 0313860cab8b..1b00617610ec 100644
--- a/src/pages/home/sidebar/SidebarLinks.js
+++ b/src/pages/home/sidebar/SidebarLinks.js
@@ -89,7 +89,12 @@ const SidebarLinks = (props) => {
         ? [styles.sidebarHeader, styles.sidebarHeaderActive]
         : [styles.sidebarHeader];
 
-    const {recentReports} = getSidebarOptions(props.reports, props.personalDetails, props.draftComments, activeReportID);
+    const {recentReports} = getSidebarOptions(
+        props.reports,
+        props.personalDetails,
+        props.draftComments,
+        activeReportID,
+    );
 
     const sections = [{
         title: '',

From 59a021fb9be7f79af949f6a0a59efbf1f44f1e78 Mon Sep 17 00:00:00 2001
From: Luke Donahue <luke@expensify.com>
Date: Wed, 27 Jan 2021 15:32:12 -0800
Subject: [PATCH 47/72] Removed comments from .env.example

---
 .env.example | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/.env.example b/.env.example
index b381692b89fe..5f6532d36c15 100644
--- a/.env.example
+++ b/.env.example
@@ -1,6 +1,3 @@
-/**
- * Rename this file to `.env` and put your local config in here
- */
 EXPENSIFY_URL_COM=https://www.expensify.com.dev/
 EXPENSIFY_URL_CASH=https://expensify.cash/
 EXPENSIFY_PARTNER_NAME=android

From fd26348e876ad248eb3990965502a1cc72b2dade Mon Sep 17 00:00:00 2001
From: botify
 <runner@fv-az185-232.v0wfh45wcrsufnvf0kanlis2sd.cx.internal.cloudapp.net>
Date: Wed, 27 Jan 2021 23:55:13 +0000
Subject: [PATCH 48/72] Update version to 1.0.1-386

---
 android/app/build.gradle          | 4 ++--
 ios/ExpensifyCash/Info.plist      | 2 +-
 ios/ExpensifyCashTests/Info.plist | 2 +-
 package-lock.json                 | 2 +-
 package.json                      | 2 +-
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/android/app/build.gradle b/android/app/build.gradle
index 9f13d70eba13..467421776da3 100644
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -148,8 +148,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 386
-        versionName "1.0.1-385"
+        versionCode 387
+        versionName "1.0.1-386"
     }
     splits {
         abi {
diff --git a/ios/ExpensifyCash/Info.plist b/ios/ExpensifyCash/Info.plist
index 18ba9eef9094..da530fa6a947 100644
--- a/ios/ExpensifyCash/Info.plist
+++ b/ios/ExpensifyCash/Info.plist
@@ -21,7 +21,7 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>386</string>
+	<string>387</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false />
 	<key>LSRequiresIPhoneOS</key>
diff --git a/ios/ExpensifyCashTests/Info.plist b/ios/ExpensifyCashTests/Info.plist
index c53830dc5713..1508a652615f 100644
--- a/ios/ExpensifyCashTests/Info.plist
+++ b/ios/ExpensifyCashTests/Info.plist
@@ -19,6 +19,6 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>386</string>
+	<string>387</string>
 </dict>
 </plist>
diff --git a/package-lock.json b/package-lock.json
index 63ff60e29ea6..6f9fd07bd7ec 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "expensify.cash",
-  "version": "1.0.1-385",
+  "version": "1.0.1-386",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index 73c4d39b9efb..9e2da5ab045a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "expensify.cash",
-  "version": "1.0.1-385",
+  "version": "1.0.1-386",
   "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.",

From f0e0c87735bb02f171611bf26055abfe93c0fa17 Mon Sep 17 00:00:00 2001
From: andrew <andrew@expensify.com>
Date: Wed, 27 Jan 2021 17:27:08 -0700
Subject: [PATCH 49/72] Add @CLABotify

---
 .github/workflows/README.md | 23 ++++++++++++-----------
 .github/workflows/cla.yml   |  2 +-
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/.github/workflows/README.md b/.github/workflows/README.md
index c928769abca1..50a31f93e08f 100644
--- a/.github/workflows/README.md
+++ b/.github/workflows/README.md
@@ -25,17 +25,18 @@ The GitHub workflows require a large list of secrets to deploy, notify and test
    4. `ios/Certificates.p12.gpg`
 2. `SLACK_WEBHOOK` - Sends Slack notifications via Slack WebHook https://expensify.slack.com/services/B01AX48D7MM
 3. `OS_BOTIFY_TOKEN` - Personal access token for @OSBotify user in GitHub
-4. `CSC_LINK` - Required to be set for desktop code signing: https://www.electron.build/code-signing.html#travis-appveyor-and-other-ci-servers
-5. `CSC_KEY_PASSWORD` - Required to be set for desktop code signing: https://www.electron.build/code-signing.html#travis-appveyor-and-other-ci-servers
-6. `APPLE_ID` - Required for notarizing desktop code in `desktop/notarize.js`
-7. `APPLE_ID_PASSWORD` - Required for notarizing desktop code in `desktop/notarize.js`
-8. `AWS_ACCESS_KEY_ID` - Required for hosting website and desktop compiled code
-9. `AWS_SECRET_ACCESS_KEY` - Required for hosting website and desktop compiled code
-10. `CLOUDFLARE_TOKEN` - Required for hosting website
-11. `APPLE_CONTACT_EMAIL` - Email used for contact between Expensify and Apple for https://appstoreconnect.apple.com/
-12. `APPLE_CONTACT_PHONE` - Phone number used for contact between Expensify and Apple for https://appstoreconnect.apple.com/
-13. `APPLE_DEMO_EMAIL` - Demo account email used for https://appstoreconnect.apple.com/
-14. `APPLE_DEMO_PASSWORD` - Demo account password used for https://appstoreconnect.apple.com/
+4. `CLA_BOTIFY_TOKEN` - Personal access token for @CLABotify user in GitHub   
+5. `CSC_LINK` - Required to be set for desktop code signing: https://www.electron.build/code-signing.html#travis-appveyor-and-other-ci-servers
+6. `CSC_KEY_PASSWORD` - Required to be set for desktop code signing: https://www.electron.build/code-signing.html#travis-appveyor-and-other-ci-servers
+7. `APPLE_ID` - Required for notarizing desktop code in `desktop/notarize.js`
+8. `APPLE_ID_PASSWORD` - Required for notarizing desktop code in `desktop/notarize.js`
+9. `AWS_ACCESS_KEY_ID` - Required for hosting website and desktop compiled code
+10. `AWS_SECRET_ACCESS_KEY` - Required for hosting website and desktop compiled code
+11. `CLOUDFLARE_TOKEN` - Required for hosting website
+12. `APPLE_CONTACT_EMAIL` - Email used for contact between Expensify and Apple for https://appstoreconnect.apple.com/
+13. `APPLE_CONTACT_PHONE` - Phone number used for contact between Expensify and Apple for https://appstoreconnect.apple.com/
+14. `APPLE_DEMO_EMAIL` - Demo account email used for https://appstoreconnect.apple.com/
+15. `APPLE_DEMO_PASSWORD` - Demo account password used for https://appstoreconnect.apple.com/
 
 ## Actions
 
diff --git a/.github/workflows/cla.yml b/.github/workflows/cla.yml
index 2d2e2290c0c6..a0ff8149414f 100644
--- a/.github/workflows/cla.yml
+++ b/.github/workflows/cla.yml
@@ -26,7 +26,7 @@ jobs:
               uses: cla-assistant/github-action@c89158d361bea4a5a06ff7781b6c4e8aa49dbcc9
               env:
                   GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-                  PERSONAL_ACCESS_TOKEN : ${{ secrets.OS_BOTIFY_TOKEN }}
+                  PERSONAL_ACCESS_TOKEN : ${{ secrets.CLA_BOTIFY_TOKEN }}
               with:
                   path-to-signatures: '${{ github.repository }}/cla.json'
                   path-to-document: 'https://github.com/${{ github.repository }}/blob/master/CLA.md'

From f6a7cf979493945b6a245abce55d21ab42dd3d9e Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Wed, 27 Jan 2021 14:49:22 -1000
Subject: [PATCH 50/72] fix styling

---
 src/pages/NewGroupPage.js | 82 ++++++++++++++++++++++-----------------
 1 file changed, 46 insertions(+), 36 deletions(-)

diff --git a/src/pages/NewGroupPage.js b/src/pages/NewGroupPage.js
index 45e6c3f5ebb0..266712dfaf40 100644
--- a/src/pages/NewGroupPage.js
+++ b/src/pages/NewGroupPage.js
@@ -204,7 +204,15 @@ class NewGroupPage extends Component {
         const sections = this.getSections(maxParticipantsReached);
         const {headerTitle, headerMessage} = this.getHeaderTitleAndMessage(maxParticipantsReached);
         return (
-            <View style={[styles.flex1, styles.p2]}>
+            <View
+                style={[
+                    // Note: These are temporary styles and should be removed
+                    styles.flex1,
+                    styles.h100,
+                    styles.w100,
+                    {position: 'absolute', zIndex: 2, backgroundColor: 'white'},
+                ]}
+            >
                 <HeaderWithCloseButton
                     title="New Group"
                     onCloseButtonPress={() => {
@@ -213,41 +221,43 @@ class NewGroupPage extends Component {
                             : ROUTES.HOME);
                     }}
                 />
-                <OptionsSelector
-                    canSelectMultipleOptions
-                    sections={sections}
-                    selectedOptions={this.state.selectedOptions}
-                    value={this.state.searchValue}
-                    onSelectRow={this.toggleOption}
-                    onChangeText={(searchValue = '') => {
-                        const {
-                            recentReports,
-                            personalDetails,
-                            userToInvite,
-                        } = getNewGroupOptions(
-                            this.props.reports,
-                            this.props.personalDetails,
-                            searchValue,
-                            [],
-                        );
-                        this.setState({
-                            searchValue,
-                            userToInvite,
-                            recentReports,
-                            personalDetails,
-                        });
-                    }}
-                    headerTitle={headerTitle}
-                    headerMessage={headerMessage}
-                />
-                <TouchableOpacity
-                    onPress={this.createGroup}
-                    style={[styles.button, styles.buttonSuccess, styles.w100, styles.mt5]}
-                >
-                    <Text style={[styles.buttonText, styles.buttonSuccessText]}>
-                        Create Group
-                    </Text>
-                </TouchableOpacity>
+                <View style={[styles.p2, styles.flex1]}>
+                    <OptionsSelector
+                        canSelectMultipleOptions
+                        sections={sections}
+                        selectedOptions={this.state.selectedOptions}
+                        value={this.state.searchValue}
+                        onSelectRow={this.toggleOption}
+                        onChangeText={(searchValue = '') => {
+                            const {
+                                recentReports,
+                                personalDetails,
+                                userToInvite,
+                            } = getNewGroupOptions(
+                                this.props.reports,
+                                this.props.personalDetails,
+                                searchValue,
+                                [],
+                            );
+                            this.setState({
+                                searchValue,
+                                userToInvite,
+                                recentReports,
+                                personalDetails,
+                            });
+                        }}
+                        headerTitle={headerTitle}
+                        headerMessage={headerMessage}
+                    />
+                    <TouchableOpacity
+                        onPress={this.createGroup}
+                        style={[styles.button, styles.buttonSuccess, styles.w100, styles.mt5]}
+                    >
+                        <Text style={[styles.buttonText, styles.buttonSuccessText]}>
+                            Create Group
+                        </Text>
+                    </TouchableOpacity>
+                </View>
             </View>
         );
     }

From f4dfb973a10798d2e2619617347e3b082ccb15e1 Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Wed, 27 Jan 2021 15:38:46 -1000
Subject: [PATCH 51/72] Use React.memo for chatlist items

---
 src/components/OptionsList.js         |  2 +-
 src/components/OptionsSelector.js     | 34 +++++++++++++--------------
 src/pages/home/sidebar/ChatLinkRow.js |  5 ++--
 3 files changed, 20 insertions(+), 21 deletions(-)

diff --git a/src/components/OptionsList.js b/src/components/OptionsList.js
index 9eb6eec09bba..d69aed4047de 100644
--- a/src/components/OptionsList.js
+++ b/src/components/OptionsList.js
@@ -102,7 +102,7 @@ const OptionsList = ({
             showsVerticalScrollIndicator={false}
             sections={sections}
             keyExtractor={option => option.keyForList}
-            initialNumToRender={200}
+            initialNumToRender={500}
             onScrollToIndexFailed={error => console.debug(error)}
             renderItem={({item, index, section}) => (
                 <ChatLinkRow
diff --git a/src/components/OptionsSelector.js b/src/components/OptionsSelector.js
index b52c3afb8a6d..eafdd65dda84 100644
--- a/src/components/OptionsSelector.js
+++ b/src/components/OptionsSelector.js
@@ -1,5 +1,4 @@
 import _ from 'underscore';
-import lodashGet from 'lodash.get';
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import {View} from 'react-native';
@@ -68,6 +67,7 @@ class OptionsSelector extends Component {
         super(props);
 
         this.handleKeyPress = this.handleKeyPress.bind(this);
+        this.viewableItems = [];
 
         this.state = {
             focusedIndex: 0,
@@ -81,20 +81,10 @@ class OptionsSelector extends Component {
     /**
      * Scrolls to the focused index within the SectionList
      *
-     * @param {Array} allOptions
-     * @param {Number} newFocusedIndex
+     * @param {Number} sectionIndex
+     * @param {Number} itemIndex
      */
-    scrollToFocusedIndex(allOptions, newFocusedIndex) {
-        const focusedOption = allOptions[newFocusedIndex];
-        const sectionIndex = _.findIndex(this.props.sections, section => (
-            _.find(section.data, option => option.login === focusedOption.login)
-        ));
-
-        const sectionData = lodashGet(this.props.sections, [sectionIndex, 'data'], []);
-        const itemIndex = _.findIndex(sectionData, option => (
-            option.login === focusedOption.login
-        ));
-
+    scrollToFocusedIndex(sectionIndex, itemIndex) {
         this.list.scrollToLocation({sectionIndex, itemIndex});
     }
 
@@ -104,8 +94,14 @@ class OptionsSelector extends Component {
      * @param {SyntheticEvent} e
      */
     handleKeyPress(e) {
-        const allOptions = _.reduce(this.props.sections, (prev, curr) => (
-            [...prev, ...(curr.data || [])]
+        // We are mapping over all the options to combine them into a single array and also saving the section index
+        // index within that section so we can navigate
+        const allOptions = _.reduce(this.props.sections, (options, section, sectionIndex) => (
+            [...options, ..._.map(section.data, (option, index) => ({
+                ...option,
+                index,
+                sectionIndex,
+            }))]
         ), []);
 
         switch (e.nativeEvent.key) {
@@ -124,7 +120,8 @@ class OptionsSelector extends Component {
                         newFocusedIndex = 0;
                     }
 
-                    this.scrollToFocusedIndex(allOptions, newFocusedIndex);
+                    const {index, sectionIndex} = allOptions[newFocusedIndex];
+                    this.scrollToFocusedIndex(sectionIndex, index);
                     return {focusedIndex: newFocusedIndex};
                 });
 
@@ -142,7 +139,8 @@ class OptionsSelector extends Component {
                         newFocusedIndex = allOptions.length - 1;
                     }
 
-                    this.scrollToFocusedIndex(allOptions, newFocusedIndex);
+                    const {index, sectionIndex} = allOptions[newFocusedIndex];
+                    this.scrollToFocusedIndex(sectionIndex, index);
                     return {focusedIndex: newFocusedIndex};
                 });
                 e.preventDefault();
diff --git a/src/pages/home/sidebar/ChatLinkRow.js b/src/pages/home/sidebar/ChatLinkRow.js
index e5299931f827..706be6797afc 100644
--- a/src/pages/home/sidebar/ChatLinkRow.js
+++ b/src/pages/home/sidebar/ChatLinkRow.js
@@ -1,5 +1,5 @@
 import _ from 'underscore';
-import React from 'react';
+import React, {memo} from 'react';
 import PropTypes from 'prop-types';
 import {
     Text,
@@ -149,4 +149,5 @@ ChatLinkRow.propTypes = propTypes;
 ChatLinkRow.defaultProps = defaultProps;
 ChatLinkRow.displayName = 'ChatLinkRow';
 
-export default ChatLinkRow;
+// It it very important to use React.memo here so SectionList items will not unnecessarily re-render
+export default memo(ChatLinkRow);

From acb7f59e71c8bc80091e44d40c17fb5d5d37bd72 Mon Sep 17 00:00:00 2001
From: botify
 <runner@fv-az28-770.xyj22ws1smnu3c0lxiw4igceoe.cx.internal.cloudapp.net>
Date: Thu, 28 Jan 2021 02:01:37 +0000
Subject: [PATCH 52/72] Update version to 1.0.1-387

---
 android/app/build.gradle          | 4 ++--
 ios/ExpensifyCash/Info.plist      | 2 +-
 ios/ExpensifyCashTests/Info.plist | 2 +-
 package-lock.json                 | 2 +-
 package.json                      | 2 +-
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/android/app/build.gradle b/android/app/build.gradle
index 467421776da3..829ef04711df 100644
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -148,8 +148,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 387
-        versionName "1.0.1-386"
+        versionCode 388
+        versionName "1.0.1-387"
     }
     splits {
         abi {
diff --git a/ios/ExpensifyCash/Info.plist b/ios/ExpensifyCash/Info.plist
index da530fa6a947..e25fb9297146 100644
--- a/ios/ExpensifyCash/Info.plist
+++ b/ios/ExpensifyCash/Info.plist
@@ -21,7 +21,7 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>387</string>
+	<string>388</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false />
 	<key>LSRequiresIPhoneOS</key>
diff --git a/ios/ExpensifyCashTests/Info.plist b/ios/ExpensifyCashTests/Info.plist
index 1508a652615f..1ff822185119 100644
--- a/ios/ExpensifyCashTests/Info.plist
+++ b/ios/ExpensifyCashTests/Info.plist
@@ -19,6 +19,6 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>387</string>
+	<string>388</string>
 </dict>
 </plist>
diff --git a/package-lock.json b/package-lock.json
index 6f9fd07bd7ec..27e0dfba0af4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "expensify.cash",
-  "version": "1.0.1-386",
+  "version": "1.0.1-387",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index 9e2da5ab045a..b2bffd59c0eb 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "expensify.cash",
-  "version": "1.0.1-386",
+  "version": "1.0.1-387",
   "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.",

From 91e848ae3f29e19a88b096105bb5a481a15c1a34 Mon Sep 17 00:00:00 2001
From: botify
 <runner@fv-az35-120.bdgmqxxlabcedhehmbguwajfbe.cx.internal.cloudapp.net>
Date: Thu, 28 Jan 2021 02:24:13 +0000
Subject: [PATCH 53/72] Update version to 1.0.1-388

---
 android/app/build.gradle          | 4 ++--
 ios/ExpensifyCash/Info.plist      | 2 +-
 ios/ExpensifyCashTests/Info.plist | 2 +-
 package-lock.json                 | 2 +-
 package.json                      | 2 +-
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/android/app/build.gradle b/android/app/build.gradle
index 829ef04711df..cd65caff02b5 100644
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -148,8 +148,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 388
-        versionName "1.0.1-387"
+        versionCode 389
+        versionName "1.0.1-388"
     }
     splits {
         abi {
diff --git a/ios/ExpensifyCash/Info.plist b/ios/ExpensifyCash/Info.plist
index e25fb9297146..fb730a8b59ab 100644
--- a/ios/ExpensifyCash/Info.plist
+++ b/ios/ExpensifyCash/Info.plist
@@ -21,7 +21,7 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>388</string>
+	<string>389</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false />
 	<key>LSRequiresIPhoneOS</key>
diff --git a/ios/ExpensifyCashTests/Info.plist b/ios/ExpensifyCashTests/Info.plist
index 1ff822185119..6b7f3c260eed 100644
--- a/ios/ExpensifyCashTests/Info.plist
+++ b/ios/ExpensifyCashTests/Info.plist
@@ -19,6 +19,6 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>388</string>
+	<string>389</string>
 </dict>
 </plist>
diff --git a/package-lock.json b/package-lock.json
index 27e0dfba0af4..2093166919f7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "expensify.cash",
-  "version": "1.0.1-387",
+  "version": "1.0.1-388",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index b2bffd59c0eb..8581e24451f9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "expensify.cash",
-  "version": "1.0.1-387",
+  "version": "1.0.1-388",
   "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.",

From 7dbf6a37628ba3f2831611ed80a12ef6da0dc27e Mon Sep 17 00:00:00 2001
From: botify
 <runner@fv-az193-41.4vedam2jyjzuhhsfc5e5dexqsb.cx.internal.cloudapp.net>
Date: Thu, 28 Jan 2021 16:53:34 +0000
Subject: [PATCH 54/72] Update version to 1.0.1-389

---
 android/app/build.gradle          | 4 ++--
 ios/ExpensifyCash/Info.plist      | 2 +-
 ios/ExpensifyCashTests/Info.plist | 2 +-
 package-lock.json                 | 2 +-
 package.json                      | 2 +-
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/android/app/build.gradle b/android/app/build.gradle
index cd65caff02b5..5d454168a060 100644
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -148,8 +148,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 389
-        versionName "1.0.1-388"
+        versionCode 390
+        versionName "1.0.1-389"
     }
     splits {
         abi {
diff --git a/ios/ExpensifyCash/Info.plist b/ios/ExpensifyCash/Info.plist
index fb730a8b59ab..2e08b0bd60d5 100644
--- a/ios/ExpensifyCash/Info.plist
+++ b/ios/ExpensifyCash/Info.plist
@@ -21,7 +21,7 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>389</string>
+	<string>390</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false />
 	<key>LSRequiresIPhoneOS</key>
diff --git a/ios/ExpensifyCashTests/Info.plist b/ios/ExpensifyCashTests/Info.plist
index 6b7f3c260eed..f95b34804209 100644
--- a/ios/ExpensifyCashTests/Info.plist
+++ b/ios/ExpensifyCashTests/Info.plist
@@ -19,6 +19,6 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>389</string>
+	<string>390</string>
 </dict>
 </plist>
diff --git a/package-lock.json b/package-lock.json
index 2093166919f7..035142cd74de 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "expensify.cash",
-  "version": "1.0.1-388",
+  "version": "1.0.1-389",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index 8581e24451f9..76a74cc37097 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "expensify.cash",
-  "version": "1.0.1-388",
+  "version": "1.0.1-389",
   "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.",

From 6175097a7123ed0dcb993a7bfa3d813a30fd3e71 Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Thu, 28 Jan 2021 08:20:00 -1000
Subject: [PATCH 55/72] Add lastMessageText to a report to prep chat preview
 line issue

---
 src/libs/actions/Report.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js
index 18ccbc8eaea1..a60d08c9bffb 100644
--- a/src/libs/actions/Report.js
+++ b/src/libs/actions/Report.js
@@ -125,6 +125,10 @@ function getSimplifiedReportObject(report) {
     const lastReportAction = lodashGet(report, ['reportActionList'], []).pop();
     const createTimestamp = lastReportAction ? lastReportAction.created : 0;
     const lastMessageTimestamp = moment.utc(createTimestamp).unix();
+
+    // We are removing any html tags from the message html since we cannot access the text version of any comments as
+    // the report only has the raw reportActionList and not the processed version returned by Report_GetHistory
+    const lastMessageText = lodashGet(lastReportAction, ['message', 'html'], '').replace(/(<([^>]+)>)/gi, '');
     const reportName = lodashGet(report, 'reportNameValuePairs.type') === 'chat'
         ? getChatReportName(report.sharedReportList)
         : report.reportName;
@@ -142,6 +146,7 @@ function getSimplifiedReportObject(report) {
             'timestamp',
         ], 0),
         lastMessageTimestamp,
+        lastMessageText,
     };
 }
 
@@ -218,6 +223,8 @@ function updateReportWithNewAction(reportID, reportAction) {
         setLocalLastRead(reportID, newMaxSequenceNumber);
     }
 
+    const messageText = lodashGet(reportAction, ['message', 0, 'text'], '');
+
     // Always merge the reportID into Onyx
     // If the report doesn't exist in Onyx yet, then all the rest of the data will be filled out
     // by handleReportChanged
@@ -226,10 +233,10 @@ function updateReportWithNewAction(reportID, reportAction) {
         unreadActionCount: newMaxSequenceNumber - (lastReadSequenceNumbers[reportID] || 0),
         maxSequenceNumber: reportAction.sequenceNumber,
         lastMessageTimestamp: reportAction.timestamp,
+        lastMessageText: messageText,
     });
 
     // Add the action into Onyx
-    const messageText = lodashGet(reportAction, ['message', 0, 'text'], '');
     Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`, {
         [reportAction.sequenceNumber]: {
             ...reportAction,

From 2392700ad2f54b9efa8404ede0fb6f8af05a497b Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Thu, 28 Jan 2021 09:09:17 -1000
Subject: [PATCH 56/72] Update names of ChatLinkRow to OptionRow

---
 README.md                                          |  4 ++--
 src/components/OptionsList.js                      |  4 ++--
 src/pages/home/sidebar/ChatSwitcherList.js         |  8 ++++----
 src/pages/home/sidebar/ChatSwitcherSearchForm.js   |  4 ++--
 .../home/sidebar/{ChatLinkRow.js => OptionRow.js}  | 14 +++++++-------
 ...itcherOptionPropTypes.js => optionPropTypes.js} |  0
 6 files changed, 17 insertions(+), 17 deletions(-)
 rename src/pages/home/sidebar/{ChatLinkRow.js => OptionRow.js} (94%)
 rename src/pages/home/sidebar/{ChatSwitcherOptionPropTypes.js => optionPropTypes.js} (100%)

diff --git a/README.md b/README.md
index 1e215c33a4f8..93ae6d694015 100644
--- a/README.md
+++ b/README.md
@@ -27,7 +27,7 @@
 # Local development
 These instructions should get you set up ready to work on Expensify.cash 🙌
 
-## Getting Started 
+## Getting Started
 1. Install `node` & `npm`: `brew install node`
 2. Install `watchman`: `brew install watchman`
 3. Install dependencies: `npm install`
@@ -101,7 +101,7 @@ This is a persistent storage solution wrapped in a Pub/Sub library. In general t
 
 - Onyx stores and retrieves data from persistent storage
 - Data is stored as key/value pairs, where the value can be anything from a single piece of data to a complex object
-- Collections of data are usually not stored as a single key (eg. an array with multiple objects), but as individual keys+ID (eg. `report_1234`, `report_4567`, etc.). Store collections as individual keys when a component will bind directly to one of those keys. For example: reports are stored as individual keys because `ChatLinkRow.js` binds to the individual report keys for each link. However, report actions are stored as an array of objects because nothing binds directly to a single report action.
+- Collections of data are usually not stored as a single key (eg. an array with multiple objects), but as individual keys+ID (eg. `report_1234`, `report_4567`, etc.). Store collections as individual keys when a component will bind directly to one of those keys. For example: reports are stored as individual keys because `OptionRow.js` binds to the individual report keys for each link. However, report actions are stored as an array of objects because nothing binds directly to a single report action.
 - Onyx allows other code to subscribe to changes in data, and then publishes change events whenever data is changed
 - Anything needing to read Onyx data needs to:
     1. Know what key the data is stored in (for web, you can find this by looking in the JS console > Application > local storage)
diff --git a/src/components/OptionsList.js b/src/components/OptionsList.js
index d69aed4047de..277b0acb8d07 100644
--- a/src/components/OptionsList.js
+++ b/src/components/OptionsList.js
@@ -4,7 +4,7 @@ import {View, SectionList, Text} from 'react-native';
 import PropTypes from 'prop-types';
 import styles from '../styles/styles';
 import KeyboardSpacer from './KeyboardSpacer';
-import ChatLinkRow from '../pages/home/sidebar/ChatLinkRow';
+import OptionRow from '../pages/home/sidebar/OptionRow';
 import optionPropTypes from './optionPropTypes';
 
 const propTypes = {
@@ -105,7 +105,7 @@ const OptionsList = ({
             initialNumToRender={500}
             onScrollToIndexFailed={error => console.debug(error)}
             renderItem={({item, index, section}) => (
-                <ChatLinkRow
+                <OptionRow
                     option={item}
                     optionIsFocused={focusedIndex === (index + section.indexOffset)}
                     onSelectRow={onSelectRow}
diff --git a/src/pages/home/sidebar/ChatSwitcherList.js b/src/pages/home/sidebar/ChatSwitcherList.js
index 9c7e145ba1a0..2620f6bccd57 100644
--- a/src/pages/home/sidebar/ChatSwitcherList.js
+++ b/src/pages/home/sidebar/ChatSwitcherList.js
@@ -2,8 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {View, FlatList} from 'react-native';
 import styles from '../../../styles/styles';
-import ChatSwitcherOptionPropTypes from './ChatSwitcherOptionPropTypes';
-import ChatLinkRow from './ChatLinkRow';
+import optionPropTypes from './optionPropTypes';
+import OptionRow from './OptionRow';
 import KeyboardSpacer from '../../../components/KeyboardSpacer';
 
 const propTypes = {
@@ -11,7 +11,7 @@ const propTypes = {
     focusedIndex: PropTypes.number.isRequired,
 
     // An array of options to allow the user to choose from
-    options: PropTypes.arrayOf(ChatSwitcherOptionPropTypes),
+    options: PropTypes.arrayOf(optionPropTypes),
 
     // A function that is called when an option is selected. Selected option is passed as a param
     onSelectRow: PropTypes.func.isRequired,
@@ -37,7 +37,7 @@ const ChatSwitcherList = ({
                 data={options}
                 keyExtractor={option => option.keyForList}
                 renderItem={({item, index}) => (
-                    <ChatLinkRow
+                    <OptionRow
                         option={item}
                         optionIsFocused={index === focusedIndex}
                         onSelectRow={onSelectRow}
diff --git a/src/pages/home/sidebar/ChatSwitcherSearchForm.js b/src/pages/home/sidebar/ChatSwitcherSearchForm.js
index 2b0f91d469a5..7f6ee44485bb 100644
--- a/src/pages/home/sidebar/ChatSwitcherSearchForm.js
+++ b/src/pages/home/sidebar/ChatSwitcherSearchForm.js
@@ -13,7 +13,7 @@ import {Close} from '../../../components/Icon/Expensicons';
 import TextInputWithFocusStyles from '../../../components/TextInputWithFocusStyles';
 import {getDisplayName} from '../../../libs/actions/PersonalDetails';
 import PillWithCancelButton from '../../../components/PillWithCancelButton';
-import ChatSwitcherOptionPropTypes from './ChatSwitcherOptionPropTypes';
+import optionPropTypes from './optionPropTypes';
 import variables from '../../../styles/variables';
 
 const propTypes = {
@@ -42,7 +42,7 @@ const propTypes = {
     onConfirmUsers: PropTypes.func.isRequired,
 
     // Users selected to begin a group report DM
-    usersToStartGroupReportWith: PropTypes.arrayOf(ChatSwitcherOptionPropTypes),
+    usersToStartGroupReportWith: PropTypes.arrayOf(optionPropTypes),
 };
 
 const defaultProps = {
diff --git a/src/pages/home/sidebar/ChatLinkRow.js b/src/pages/home/sidebar/OptionRow.js
similarity index 94%
rename from src/pages/home/sidebar/ChatLinkRow.js
rename to src/pages/home/sidebar/OptionRow.js
index 706be6797afc..38eddaac9690 100644
--- a/src/pages/home/sidebar/ChatLinkRow.js
+++ b/src/pages/home/sidebar/OptionRow.js
@@ -8,7 +8,7 @@ import {
     StyleSheet,
 } from 'react-native';
 import styles from '../../../styles/styles';
-import ChatSwitcherOptionPropTypes from './ChatSwitcherOptionPropTypes';
+import optionPropTypes from './optionPropTypes';
 import Icon from '../../../components/Icon';
 import {Pencil} from '../../../components/Icon/Expensicons';
 import MultipleAvatars from '../../../components/MultipleAvatars';
@@ -16,7 +16,7 @@ import variables from '../../../styles/variables';
 
 const propTypes = {
     // Option to allow the user to choose from can be type 'report' or 'user'
-    option: ChatSwitcherOptionPropTypes.isRequired,
+    option: optionPropTypes.isRequired,
 
     // Whether this option is currently in focus so we can modify its style
     optionIsFocused: PropTypes.bool.isRequired,
@@ -44,7 +44,7 @@ const defaultProps = {
     isSelected: false,
 };
 
-const ChatLinkRow = ({
+const OptionRow = ({
     option,
     optionIsFocused,
     onSelectRow,
@@ -145,9 +145,9 @@ const ChatLinkRow = ({
     );
 };
 
-ChatLinkRow.propTypes = propTypes;
-ChatLinkRow.defaultProps = defaultProps;
-ChatLinkRow.displayName = 'ChatLinkRow';
+OptionRow.propTypes = propTypes;
+OptionRow.defaultProps = defaultProps;
+OptionRow.displayName = 'OptionRow';
 
 // It it very important to use React.memo here so SectionList items will not unnecessarily re-render
-export default memo(ChatLinkRow);
+export default memo(OptionRow);
diff --git a/src/pages/home/sidebar/ChatSwitcherOptionPropTypes.js b/src/pages/home/sidebar/optionPropTypes.js
similarity index 100%
rename from src/pages/home/sidebar/ChatSwitcherOptionPropTypes.js
rename to src/pages/home/sidebar/optionPropTypes.js

From 9833ea75489eb0bfc735d46d72d01c5c6c401613 Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Thu, 28 Jan 2021 09:20:47 -1000
Subject: [PATCH 57/72] Add more logs to help debug random sign outs

---
 src/libs/API.js                     | 18 ++++++++----------
 src/libs/PusherConnectionManager.js |  2 +-
 2 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/libs/API.js b/src/libs/API.js
index effdcc474585..f9b2776d6657 100644
--- a/src/libs/API.js
+++ b/src/libs/API.js
@@ -122,19 +122,11 @@ function handleExpiredAuthToken(originalCommand, originalParameters, originalTyp
     isAuthenticating = true;
 
     // eslint-disable-next-line no-use-before-define
-    return reauthenticate()
+    return reauthenticate(originalCommand)
         .then(() => {
             // Now that the API is authenticated, make the original request again with the new authToken
             const params = addDefaultValuesToParameters(originalCommand, originalParameters);
             return Network.post(originalCommand, params, originalType);
-        })
-
-        .catch((error) => {
-            // If authentication fails, then the network can be unpaused and app is redirected
-            // so the sign on screen.
-            Network.unpauseRequestQueue();
-            isAuthenticating = false;
-            redirectToSignIn(error.message);
         });
 }
 
@@ -256,9 +248,10 @@ function Authenticate(parameters) {
 /**
  * Reauthenticate using the stored credentials and redirect to the sign in page if unable to do so.
  *
+ * @param {String} [command] command name for loggin purposes
  * @returns {Promise}
  */
-function reauthenticate() {
+function reauthenticate(command = '') {
     return Authenticate({
         useExpensifyLogin: false,
         partnerName: CONFIG.EXPENSIFY.PARTNER_NAME,
@@ -290,6 +283,11 @@ function reauthenticate() {
             Network.unpauseRequestQueue();
             isAuthenticating = false;
             redirectToSignIn(error.message);
+
+            console.debug('Redirecting to Sign In because we failed to reauthenticate', {
+                command,
+                error: error.message,
+            });
         });
 }
 
diff --git a/src/libs/PusherConnectionManager.js b/src/libs/PusherConnectionManager.js
index 4dff980a3082..3abb9d9d449a 100644
--- a/src/libs/PusherConnectionManager.js
+++ b/src/libs/PusherConnectionManager.js
@@ -22,7 +22,7 @@ function init() {
                         callback(new Error('Pusher: Expensify session expired. Re-authenticating...'));
 
                         // Attempt to refresh the authToken then reconnect to Pusher
-                        API.reauthenticate().then(() => Pusher.reconnect());
+                        API.reauthenticate('Push_Authenticate').then(() => Pusher.reconnect());
                         return;
                     }
 

From 8a458fd1e648786880f528fcbc467fcbdb44eb21 Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Thu, 28 Jan 2021 09:23:46 -1000
Subject: [PATCH 58/72] add another log

---
 src/libs/actions/Session.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/libs/actions/Session.js b/src/libs/actions/Session.js
index 75ec55567451..9bce4c816550 100644
--- a/src/libs/actions/Session.js
+++ b/src/libs/actions/Session.js
@@ -60,6 +60,8 @@ function createAccount(login) {
 function signOut() {
     Timing.clearData();
     redirectToSignIn();
+
+    console.debug('Redirecting to Sign In because signOut() was called');
     if (!credentials || !credentials.autoGeneratedLogin) {
         return;
     }

From 5aa53c4605cbcbcfd7fa2ecc516a4c9b25ad74d9 Mon Sep 17 00:00:00 2001
From: Rory Abraham <rory@expensify.com>
Date: Thu, 28 Jan 2021 11:43:58 -0800
Subject: [PATCH 59/72] Submit attachment modal preview on enter keypress

---
 src/components/AttachmentModal.js            | 16 ++++++++++++----
 src/components/Modal.js                      | 16 ++++++++++++++--
 src/libs/KeyboardShortcut/index.js           | 10 +++++++---
 src/pages/home/report/ReportActionCompose.js | 14 +++++++++-----
 4 files changed, 42 insertions(+), 14 deletions(-)

diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js
index ce78c5e335b1..a3516f152866 100644
--- a/src/components/AttachmentModal.js
+++ b/src/components/AttachmentModal.js
@@ -57,6 +57,16 @@ class AttachmentModal extends Component {
             file: null,
             sourceURL: props.sourceURL,
         };
+
+        this.submitAndClose = this.submitAndClose.bind(this);
+    }
+
+    /**
+     * Execute the onConfirm callback and close the modal.
+     */
+    submitAndClose() {
+        this.props.onConfirm(this.state.file);
+        this.setState({isModalOpen: false});
     }
 
     render() {
@@ -74,6 +84,7 @@ class AttachmentModal extends Component {
             <>
                 <ModalWithHeader
                     type={CONST.MODAL.MODAL_TYPE.CENTERED}
+                    onSubmit={this.submitAndClose}
                     onClose={() => this.setState({isModalOpen: false})}
                     isVisible={this.state.isModalOpen}
                     title={this.props.title}
@@ -90,10 +101,7 @@ class AttachmentModal extends Component {
                         <TouchableOpacity
                             style={[styles.button, styles.buttonSuccess, styles.buttonConfirm]}
                             underlayColor={themeColors.componentBG}
-                            onPress={() => {
-                                this.props.onConfirm(this.state.file);
-                                this.setState({isModalOpen: false});
-                            }}
+                            onPress={this.submitAndClose}
                         >
                             <Text
                                 style={[
diff --git a/src/components/Modal.js b/src/components/Modal.js
index 9c7f7d172b79..5b5fba4bf25e 100644
--- a/src/components/Modal.js
+++ b/src/components/Modal.js
@@ -21,6 +21,9 @@ const propTypes = {
     // Modal contents
     children: PropTypes.node.isRequired,
 
+    // Callback method fired when the user requests to submit the modal content.
+    onSubmit: PropTypes.func,
+
     // Style of modal to display
     type: PropTypes.oneOf([
         CONST.MODAL.MODAL_TYPE.CENTERED,
@@ -33,10 +36,19 @@ const propTypes = {
 };
 
 const defaultProps = {
+    onSubmit: null,
     type: '',
 };
 
 const Modal = (props) => {
+    const subscribeToKeyEvents = () => {
+        KeyboardShortcut.subscribe('Escape', props.onClose, [], true);
+        KeyboardShortcut.subscribe('Enter', props.onSubmit, [], true);
+    };
+    const unsubscribeFromKeyEvents = () => {
+        KeyboardShortcut.unsubscribe('Escape');
+        KeyboardShortcut.unsubscribe('Enter');
+    };
     const {
         modalStyle,
         modalContainerStyle,
@@ -50,8 +62,8 @@ const Modal = (props) => {
         <ReactNativeModal
             onBackdropPress={props.onClose}
             onBackButtonPress={props.onClose}
-            onModalShow={() => KeyboardShortcut.subscribe('Escape', props.onClose, [], true)}
-            onModalHide={() => KeyboardShortcut.unsubscribe('Escape')}
+            onModalShow={subscribeToKeyEvents}
+            onModalHide={unsubscribeFromKeyEvents}
             onSwipeComplete={props.onClose}
             swipeDirection={swipeDirection}
             isVisible={props.isVisible}
diff --git a/src/libs/KeyboardShortcut/index.js b/src/libs/KeyboardShortcut/index.js
index 432f116e5feb..ae33703791da 100644
--- a/src/libs/KeyboardShortcut/index.js
+++ b/src/libs/KeyboardShortcut/index.js
@@ -74,10 +74,14 @@ const KeyboardShortcut = {
     getKeyCode(key) {
         // For keys that have longer names we must catch and return the correct key key.charCodeAt(0) would return the
         // key code for 'E' (the letter at index 0 in the string) not 'Escape'
-        if (key === 'Escape') {
-            return 27;
+        switch (key) {
+            case 'Enter':
+                return 13;
+            case 'Escape':
+                return 27;
+            default:
+                return key.charCodeAt(0);
         }
-        return key.charCodeAt(0);
     },
 
     /**
diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js
index e89dd3206c4c..ed4bb68e5f91 100644
--- a/src/pages/home/report/ReportActionCompose.js
+++ b/src/pages/home/report/ReportActionCompose.js
@@ -159,11 +159,15 @@ class ReportActionCompose extends React.Component {
                                         <TouchableOpacity
                                             onPress={(e) => {
                                                 e.preventDefault();
-                                                openPicker({
-                                                    onPicked: (file) => {
-                                                        displayFileInModal({file});
-                                                    },
-                                                });
+
+                                                // Do not open attachment picker from keypress event
+                                                if (!e.key) {
+                                                    openPicker({
+                                                        onPicked: (file) => {
+                                                            displayFileInModal({file});
+                                                        },
+                                                    });
+                                                }
                                             }}
                                             style={[styles.chatItemAttachButton]}
                                             underlayColor={themeColors.componentBG}

From 6f2f89f706f57dbc29a663e015ac8a84efd55cff Mon Sep 17 00:00:00 2001
From: botify
 <runner@fv-az193-12.gn5btzhyhkkehetqqv43p3c34d.cx.internal.cloudapp.net>
Date: Thu, 28 Jan 2021 20:20:55 +0000
Subject: [PATCH 60/72] Update version to 1.0.1-390

---
 android/app/build.gradle          | 4 ++--
 ios/ExpensifyCash/Info.plist      | 2 +-
 ios/ExpensifyCashTests/Info.plist | 2 +-
 package-lock.json                 | 2 +-
 package.json                      | 2 +-
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/android/app/build.gradle b/android/app/build.gradle
index 5d454168a060..649b456ee44e 100644
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -148,8 +148,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 390
-        versionName "1.0.1-389"
+        versionCode 391
+        versionName "1.0.1-390"
     }
     splits {
         abi {
diff --git a/ios/ExpensifyCash/Info.plist b/ios/ExpensifyCash/Info.plist
index 2e08b0bd60d5..65c6108d8168 100644
--- a/ios/ExpensifyCash/Info.plist
+++ b/ios/ExpensifyCash/Info.plist
@@ -21,7 +21,7 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>390</string>
+	<string>391</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false />
 	<key>LSRequiresIPhoneOS</key>
diff --git a/ios/ExpensifyCashTests/Info.plist b/ios/ExpensifyCashTests/Info.plist
index f95b34804209..3086ac32eeca 100644
--- a/ios/ExpensifyCashTests/Info.plist
+++ b/ios/ExpensifyCashTests/Info.plist
@@ -19,6 +19,6 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>390</string>
+	<string>391</string>
 </dict>
 </plist>
diff --git a/package-lock.json b/package-lock.json
index 035142cd74de..45821165c450 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "expensify.cash",
-  "version": "1.0.1-389",
+  "version": "1.0.1-390",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index 76a74cc37097..98e71d7a2c8c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "expensify.cash",
-  "version": "1.0.1-389",
+  "version": "1.0.1-390",
   "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.",

From 5e2a08abdd792deedd1359d498f8c923c4b89894 Mon Sep 17 00:00:00 2001
From: chiragsalian <chirag@expensify.com>
Date: Thu, 28 Jan 2021 13:17:22 -0800
Subject: [PATCH 61/72] ReportAction fix

---
 src/libs/actions/Report.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js
index 18ccbc8eaea1..415df4e3ac65 100644
--- a/src/libs/actions/Report.js
+++ b/src/libs/actions/Report.js
@@ -122,7 +122,8 @@ function getChatReportName(sharedReportList) {
  * @returns {Object}
  */
 function getSimplifiedReportObject(report) {
-    const lastReportAction = lodashGet(report, ['reportActionList'], []).pop();
+    const reportActionList = lodashGet(report, ['reportActionList'], []);
+    const lastReportAction = !_.isEmpty(reportActionList) ? reportActionList.slice(-1)[0] : null;
     const createTimestamp = lastReportAction ? lastReportAction.created : 0;
     const lastMessageTimestamp = moment.utc(createTimestamp).unix();
     const reportName = lodashGet(report, 'reportNameValuePairs.type') === 'chat'

From 6906c2bc58d8c6cdb7672c3fc4178787763ba99b Mon Sep 17 00:00:00 2001
From: botify
 <runner@fv-az28-377.ly1ix0c1gaaurhcyqyaq5gjdoc.cx.internal.cloudapp.net>
Date: Thu, 28 Jan 2021 23:39:27 +0000
Subject: [PATCH 62/72] Update version to 1.0.1-391

---
 android/app/build.gradle          | 4 ++--
 ios/ExpensifyCash/Info.plist      | 2 +-
 ios/ExpensifyCashTests/Info.plist | 2 +-
 package-lock.json                 | 2 +-
 package.json                      | 2 +-
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/android/app/build.gradle b/android/app/build.gradle
index 649b456ee44e..b6a34af485f3 100644
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -148,8 +148,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 391
-        versionName "1.0.1-390"
+        versionCode 392
+        versionName "1.0.1-391"
     }
     splits {
         abi {
diff --git a/ios/ExpensifyCash/Info.plist b/ios/ExpensifyCash/Info.plist
index 65c6108d8168..1a53c90892ec 100644
--- a/ios/ExpensifyCash/Info.plist
+++ b/ios/ExpensifyCash/Info.plist
@@ -21,7 +21,7 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>391</string>
+	<string>392</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false />
 	<key>LSRequiresIPhoneOS</key>
diff --git a/ios/ExpensifyCashTests/Info.plist b/ios/ExpensifyCashTests/Info.plist
index 3086ac32eeca..3000ec2705db 100644
--- a/ios/ExpensifyCashTests/Info.plist
+++ b/ios/ExpensifyCashTests/Info.plist
@@ -19,6 +19,6 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>391</string>
+	<string>392</string>
 </dict>
 </plist>
diff --git a/package-lock.json b/package-lock.json
index 45821165c450..e1fa3ab106ff 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "expensify.cash",
-  "version": "1.0.1-390",
+  "version": "1.0.1-391",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index 98e71d7a2c8c..4c662404009f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "expensify.cash",
-  "version": "1.0.1-390",
+  "version": "1.0.1-391",
   "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.",

From 625e76c290d3fd7533d7fb40d448459155d67b6d Mon Sep 17 00:00:00 2001
From: chiragsalian <chirag@expensify.com>
Date: Thu, 28 Jan 2021 16:21:18 -0800
Subject: [PATCH 63/72] simplify code

---
 src/libs/actions/Report.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js
index 9e0d96ae6af0..a753791fbc45 100644
--- a/src/libs/actions/Report.js
+++ b/src/libs/actions/Report.js
@@ -128,7 +128,7 @@ function getChatReportName(sharedReportList) {
  */
 function getSimplifiedReportObject(report) {
     const reportActionList = lodashGet(report, ['reportActionList'], []);
-    const lastReportAction = !_.isEmpty(reportActionList) ? reportActionList.slice(-1)[0] : null;
+    const lastReportAction = !_.isEmpty(reportActionList) ? _.last(reportActionList) : null;
     const createTimestamp = lastReportAction ? lastReportAction.created : 0;
     const lastMessageTimestamp = moment.utc(createTimestamp).unix();
     const reportName = lodashGet(report, 'reportNameValuePairs.type') === 'chat'

From aaa0baab7bea282eb62c89b4423ecc8e567e6076 Mon Sep 17 00:00:00 2001
From: botify
 <runner@fv-az130-24.bntzarb11huubarexhllo1zgdf.xx.internal.cloudapp.net>
Date: Fri, 29 Jan 2021 00:48:59 +0000
Subject: [PATCH 64/72] Update version to 1.0.1-392

---
 android/app/build.gradle          | 4 ++--
 ios/ExpensifyCash/Info.plist      | 2 +-
 ios/ExpensifyCashTests/Info.plist | 2 +-
 package-lock.json                 | 2 +-
 package.json                      | 2 +-
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/android/app/build.gradle b/android/app/build.gradle
index b6a34af485f3..aeccf0951ffb 100644
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -148,8 +148,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 392
-        versionName "1.0.1-391"
+        versionCode 393
+        versionName "1.0.1-392"
     }
     splits {
         abi {
diff --git a/ios/ExpensifyCash/Info.plist b/ios/ExpensifyCash/Info.plist
index 1a53c90892ec..fdd431ecbf58 100644
--- a/ios/ExpensifyCash/Info.plist
+++ b/ios/ExpensifyCash/Info.plist
@@ -21,7 +21,7 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>392</string>
+	<string>393</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false />
 	<key>LSRequiresIPhoneOS</key>
diff --git a/ios/ExpensifyCashTests/Info.plist b/ios/ExpensifyCashTests/Info.plist
index 3000ec2705db..08c9a8470daa 100644
--- a/ios/ExpensifyCashTests/Info.plist
+++ b/ios/ExpensifyCashTests/Info.plist
@@ -19,6 +19,6 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>392</string>
+	<string>393</string>
 </dict>
 </plist>
diff --git a/package-lock.json b/package-lock.json
index e1fa3ab106ff..99fd92df3f77 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "expensify.cash",
-  "version": "1.0.1-391",
+  "version": "1.0.1-392",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index 4c662404009f..876c4f28240d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "expensify.cash",
-  "version": "1.0.1-391",
+  "version": "1.0.1-392",
   "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.",

From 5340318f15abc2894fbfbff97016ccbbcac3de1d Mon Sep 17 00:00:00 2001
From: botify
 <runner@fv-az228-791.cxqor3xluo3ezdprvducmfypif.bx.internal.cloudapp.net>
Date: Fri, 29 Jan 2021 01:24:40 +0000
Subject: [PATCH 65/72] Update version to 1.0.1-393

---
 android/app/build.gradle          | 4 ++--
 ios/ExpensifyCash/Info.plist      | 2 +-
 ios/ExpensifyCashTests/Info.plist | 2 +-
 package-lock.json                 | 2 +-
 package.json                      | 2 +-
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/android/app/build.gradle b/android/app/build.gradle
index aeccf0951ffb..94a50708667d 100644
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -148,8 +148,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 393
-        versionName "1.0.1-392"
+        versionCode 394
+        versionName "1.0.1-393"
     }
     splits {
         abi {
diff --git a/ios/ExpensifyCash/Info.plist b/ios/ExpensifyCash/Info.plist
index fdd431ecbf58..4f29b1935032 100644
--- a/ios/ExpensifyCash/Info.plist
+++ b/ios/ExpensifyCash/Info.plist
@@ -21,7 +21,7 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>393</string>
+	<string>394</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false />
 	<key>LSRequiresIPhoneOS</key>
diff --git a/ios/ExpensifyCashTests/Info.plist b/ios/ExpensifyCashTests/Info.plist
index 08c9a8470daa..3761d5f0b9bf 100644
--- a/ios/ExpensifyCashTests/Info.plist
+++ b/ios/ExpensifyCashTests/Info.plist
@@ -19,6 +19,6 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>393</string>
+	<string>394</string>
 </dict>
 </plist>
diff --git a/package-lock.json b/package-lock.json
index 99fd92df3f77..ea8ab3d6ae42 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "expensify.cash",
-  "version": "1.0.1-392",
+  "version": "1.0.1-393",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index 876c4f28240d..ab7eb1d99612 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "expensify.cash",
-  "version": "1.0.1-392",
+  "version": "1.0.1-393",
   "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.",

From 823b957da3bf23f04f1403402b2db2c5be24805c Mon Sep 17 00:00:00 2001
From: botify
 <runner@fv-az30-787.tjg2hrfchbkepburhbfbdlbdid.bx.internal.cloudapp.net>
Date: Fri, 29 Jan 2021 11:43:23 +0000
Subject: [PATCH 66/72] Update version to 1.0.1-394

---
 android/app/build.gradle          | 4 ++--
 ios/ExpensifyCash/Info.plist      | 2 +-
 ios/ExpensifyCashTests/Info.plist | 2 +-
 package-lock.json                 | 2 +-
 package.json                      | 2 +-
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/android/app/build.gradle b/android/app/build.gradle
index 94a50708667d..472c9f1c09a5 100644
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -148,8 +148,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 394
-        versionName "1.0.1-393"
+        versionCode 395
+        versionName "1.0.1-394"
     }
     splits {
         abi {
diff --git a/ios/ExpensifyCash/Info.plist b/ios/ExpensifyCash/Info.plist
index 4f29b1935032..a4b122517d91 100644
--- a/ios/ExpensifyCash/Info.plist
+++ b/ios/ExpensifyCash/Info.plist
@@ -21,7 +21,7 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>394</string>
+	<string>395</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false />
 	<key>LSRequiresIPhoneOS</key>
diff --git a/ios/ExpensifyCashTests/Info.plist b/ios/ExpensifyCashTests/Info.plist
index 3761d5f0b9bf..54d820364710 100644
--- a/ios/ExpensifyCashTests/Info.plist
+++ b/ios/ExpensifyCashTests/Info.plist
@@ -19,6 +19,6 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>394</string>
+	<string>395</string>
 </dict>
 </plist>
diff --git a/package-lock.json b/package-lock.json
index ea8ab3d6ae42..a3e21e531be7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "expensify.cash",
-  "version": "1.0.1-393",
+  "version": "1.0.1-394",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index ab7eb1d99612..13c47b5b8c5b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "expensify.cash",
-  "version": "1.0.1-393",
+  "version": "1.0.1-394",
   "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.",

From e9e5b616504bedb08d91a6bfa016769c6cf5a18f Mon Sep 17 00:00:00 2001
From: botify
 <runner@fv-az193-12.vwjklj4kwshunbxuorjyywhj5e.cx.internal.cloudapp.net>
Date: Fri, 29 Jan 2021 16:31:14 +0000
Subject: [PATCH 67/72] Update version to 1.0.1-395

---
 android/app/build.gradle          | 4 ++--
 ios/ExpensifyCash/Info.plist      | 2 +-
 ios/ExpensifyCashTests/Info.plist | 2 +-
 package-lock.json                 | 2 +-
 package.json                      | 2 +-
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/android/app/build.gradle b/android/app/build.gradle
index 472c9f1c09a5..58e66f00326c 100644
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -148,8 +148,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 395
-        versionName "1.0.1-394"
+        versionCode 396
+        versionName "1.0.1-395"
     }
     splits {
         abi {
diff --git a/ios/ExpensifyCash/Info.plist b/ios/ExpensifyCash/Info.plist
index a4b122517d91..9346618b1d64 100644
--- a/ios/ExpensifyCash/Info.plist
+++ b/ios/ExpensifyCash/Info.plist
@@ -21,7 +21,7 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>395</string>
+	<string>396</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false />
 	<key>LSRequiresIPhoneOS</key>
diff --git a/ios/ExpensifyCashTests/Info.plist b/ios/ExpensifyCashTests/Info.plist
index 54d820364710..81dbe6869457 100644
--- a/ios/ExpensifyCashTests/Info.plist
+++ b/ios/ExpensifyCashTests/Info.plist
@@ -19,6 +19,6 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>395</string>
+	<string>396</string>
 </dict>
 </plist>
diff --git a/package-lock.json b/package-lock.json
index a3e21e531be7..523d631b23fc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "expensify.cash",
-  "version": "1.0.1-394",
+  "version": "1.0.1-395",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index 13c47b5b8c5b..b992a35ed9ee 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "expensify.cash",
-  "version": "1.0.1-394",
+  "version": "1.0.1-395",
   "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.",

From f3a063ef695948a76a203ab0f10fa08d21f51814 Mon Sep 17 00:00:00 2001
From: UpworkBartkoski <upworkbartkoski@gmail.com>
Date: Fri, 29 Jan 2021 19:26:02 -0600
Subject: [PATCH 68/72] updates for request changes

---
 src/components/TextInputFocusable/index.js   |  2 +-
 src/components/withWindowDimensions.js       |  4 ++
 src/pages/home/report/ReportActionCompose.js | 41 +++++---------------
 3 files changed, 14 insertions(+), 33 deletions(-)

diff --git a/src/components/TextInputFocusable/index.js b/src/components/TextInputFocusable/index.js
index 73c4b6d1a42f..e3aaf92da9e2 100644
--- a/src/components/TextInputFocusable/index.js
+++ b/src/components/TextInputFocusable/index.js
@@ -36,7 +36,7 @@ const propTypes = {
     // Callback to fire when a file is dropped on the text input
     onDrop: PropTypes.func,
 
-    // If the chatswitcher is shown in iOS safari browser, the input should be disabled
+    // Whether or not this TextInput is disabled.
     isDisabled: PropTypes.bool,
 };
 
diff --git a/src/components/withWindowDimensions.js b/src/components/withWindowDimensions.js
index 6c260ee5addb..6f69f2a27586 100644
--- a/src/components/withWindowDimensions.js
+++ b/src/components/withWindowDimensions.js
@@ -2,6 +2,7 @@ import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import {Dimensions} from 'react-native';
 import getComponentDisplayName from '../libs/getComponentDisplayName';
+import variables from '../styles/variables';
 
 const windowDimensionsPropTypes = {
     // via withWindowDimensions
@@ -11,6 +12,8 @@ const windowDimensionsPropTypes = {
 
         // Height of the window
         height: PropTypes.number.isRequired,
+
+        isSmallScreenWidth: PropTypes.bool,
     }).isRequired,
 };
 
@@ -51,6 +54,7 @@ export default function (WrappedComponent) {
                     // eslint-disable-next-line react/jsx-props-no-spreading
                     {...this.props}
                     windowDimensions={this.state.windowDimensions}
+                    isSmallScreenWidth={this.state.windowDimensions.width <= variables.mobileResponsiveWidthBreakpoint}
                 />
             );
         }
diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js
index 31eff204d043..2a9785103ab0 100644
--- a/src/pages/home/report/ReportActionCompose.js
+++ b/src/pages/home/report/ReportActionCompose.js
@@ -1,15 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {
-    View,
-    TouchableOpacity,
-    Dimensions,
-} from 'react-native';
+import {View, TouchableOpacity} from 'react-native';
 import _ from 'underscore';
 import lodashGet from 'lodash.get';
 import {withOnyx} from 'react-native-onyx';
 import styles from '../../../styles/styles';
-import variables from '../../../styles/variables';
 import themeColors from '../../../styles/themes/default';
 import TextInputFocusable from '../../../components/TextInputFocusable';
 import ONYXKEYS from '../../../ONYXKEYS';
@@ -19,6 +14,7 @@ import AttachmentPicker from '../../../components/AttachmentPicker';
 import {addAction, saveReportComment, broadcastUserIsTyping} from '../../../libs/actions/Report';
 import ReportTypingIndicator from './ReportTypingIndicator';
 import AttachmentModal from '../../../components/AttachmentModal';
+import withWindowDimensions from '../../../components/withWindowDimensions';
 
 const propTypes = {
     // A method to call when the form is submitted
@@ -31,11 +27,14 @@ const propTypes = {
     reportID: PropTypes.number.isRequired,
 
     isSidebarShown: PropTypes.bool,
+
+    isSmallScreenWidth: PropTypes.bool,
 };
 
 const defaultProps = {
     comment: '',
     isSidebarShown: true,
+    isSmallScreenWidth: false,
 };
 
 class ReportActionCompose extends React.Component {
@@ -49,23 +48,15 @@ class ReportActionCompose extends React.Component {
         this.triggerSubmitShortcut = this.triggerSubmitShortcut.bind(this);
         this.submitForm = this.submitForm.bind(this);
         this.setIsFocused = this.setIsFocused.bind(this);
-        this.disableInputBasedOnDimensions = this.disableInputBasedOnDimensions.bind(this);
         this.comment = props.comment;
 
-        const windowSize = Dimensions.get('window');
-        const isSmallScreenWidth = windowSize.width <= variables.mobileResponsiveWidthBreakpoint;
         this.state = {
             isFocused: false,
             textInputShouldClear: false,
             isCommentEmpty: props.comment.length === 0,
-            isSmallScreenWidth,
         };
     }
 
-    componentDidMount() {
-        Dimensions.addEventListener('change', this.disableInputBasedOnDimensions);
-    }
-
     componentDidUpdate(prevProps) {
         // The first time the component loads the props is empty and the next time it may contain value.
         // If it does let's update this.comment so that it matches the defaultValue that we show in textInput.
@@ -74,10 +65,6 @@ class ReportActionCompose extends React.Component {
         }
     }
 
-    componentWillUnmount() {
-        Dimensions.removeEventListener('change', this.disableInputBasedOnDimensions);
-    }
-
     /**
      * Updates the Highlight state of the composer
      *
@@ -155,20 +142,10 @@ class ReportActionCompose extends React.Component {
         this.setTextInputShouldClear(true);
     }
 
-    /**
-     * Fired when the windows dimensions changes
-     * @param {Object} changedWindow
-     */
-    disableInputBasedOnDimensions({window: changedWindow}) {
-        const isSmallScreenWidth = changedWindow.width <= variables.mobileResponsiveWidthBreakpoint;
-        this.setState({
-            isSmallScreenWidth,
-        });
-    }
-
     render() {
-        const inputDisable = this.props.isSidebarShown
-            && this.state.isSmallScreenWidth;
+        // We want to make sure to disable on small screens because in iOS safari the keyboard up/down buttons will
+        // focus this from the chat switcher. #1228
+        const inputDisable = this.props.isSidebarShown && this.props.isSmallScreenWidth;
 
         return (
             <View style={[styles.chatItemCompose]}>
@@ -273,4 +250,4 @@ export default withOnyx({
     isSidebarShown: {
         key: ONYXKEYS.IS_SIDEBAR_SHOWN,
     },
-})(ReportActionCompose);
+})(withWindowDimensions(ReportActionCompose));

From 469a151386553a12db6aa4b8fdf35e8500332c4f Mon Sep 17 00:00:00 2001
From: UpworkBartkoski <upworkbartkoski@gmail.com>
Date: Fri, 29 Jan 2021 21:38:51 -0600
Subject: [PATCH 69/72] fix code format

---
 src/components/withWindowDimensions.js       |  5 +++--
 src/pages/home/report/ReportActionCompose.js | 11 +++++------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/withWindowDimensions.js b/src/components/withWindowDimensions.js
index 6f69f2a27586..c4bbf0b76e5d 100644
--- a/src/components/withWindowDimensions.js
+++ b/src/components/withWindowDimensions.js
@@ -12,9 +12,10 @@ const windowDimensionsPropTypes = {
 
         // Height of the window
         height: PropTypes.number.isRequired,
-
-        isSmallScreenWidth: PropTypes.bool,
     }).isRequired,
+
+    // Is the window width narrow, like on a mobile device?
+    isSmallScreenWidth: PropTypes.bool.isRequired,
 };
 
 export default function (WrappedComponent) {
diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js
index 2a9785103ab0..4cac4f3e36b4 100644
--- a/src/pages/home/report/ReportActionCompose.js
+++ b/src/pages/home/report/ReportActionCompose.js
@@ -14,7 +14,7 @@ import AttachmentPicker from '../../../components/AttachmentPicker';
 import {addAction, saveReportComment, broadcastUserIsTyping} from '../../../libs/actions/Report';
 import ReportTypingIndicator from './ReportTypingIndicator';
 import AttachmentModal from '../../../components/AttachmentModal';
-import withWindowDimensions from '../../../components/withWindowDimensions';
+import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
 
 const propTypes = {
     // A method to call when the form is submitted
@@ -26,15 +26,13 @@ const propTypes = {
     // The ID of the report actions will be created for
     reportID: PropTypes.number.isRequired,
 
-    isSidebarShown: PropTypes.bool,
+    isSidebarShown: PropTypes.bool.isRequired,
 
-    isSmallScreenWidth: PropTypes.bool,
+    ...windowDimensionsPropTypes,
 };
 
 const defaultProps = {
     comment: '',
-    isSidebarShown: true,
-    isSmallScreenWidth: false,
 };
 
 class ReportActionCompose extends React.Component {
@@ -144,7 +142,8 @@ class ReportActionCompose extends React.Component {
 
     render() {
         // We want to make sure to disable on small screens because in iOS safari the keyboard up/down buttons will
-        // focus this from the chat switcher. #1228
+        // focus this from the chat switcher.
+        // https://github.com/Expensify/Expensify.cash/issues/1228
         const inputDisable = this.props.isSidebarShown && this.props.isSmallScreenWidth;
 
         return (

From f8dd74822387525bf958b07c5d09cdb65651c44c Mon Sep 17 00:00:00 2001
From: botify
 <runner@fv-az35-187.lbjtkcojw5vethidahyq2jz3sb.cx.internal.cloudapp.net>
Date: Sat, 30 Jan 2021 19:40:29 +0000
Subject: [PATCH 70/72] Update version to 1.0.1-396

---
 android/app/build.gradle          | 4 ++--
 ios/ExpensifyCash/Info.plist      | 2 +-
 ios/ExpensifyCashTests/Info.plist | 2 +-
 package-lock.json                 | 2 +-
 package.json                      | 2 +-
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/android/app/build.gradle b/android/app/build.gradle
index 58e66f00326c..8bc60624ca51 100644
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -148,8 +148,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 396
-        versionName "1.0.1-395"
+        versionCode 397
+        versionName "1.0.1-396"
     }
     splits {
         abi {
diff --git a/ios/ExpensifyCash/Info.plist b/ios/ExpensifyCash/Info.plist
index 9346618b1d64..bfe81f57dbde 100644
--- a/ios/ExpensifyCash/Info.plist
+++ b/ios/ExpensifyCash/Info.plist
@@ -21,7 +21,7 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>396</string>
+	<string>397</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false />
 	<key>LSRequiresIPhoneOS</key>
diff --git a/ios/ExpensifyCashTests/Info.plist b/ios/ExpensifyCashTests/Info.plist
index 81dbe6869457..33367348bc10 100644
--- a/ios/ExpensifyCashTests/Info.plist
+++ b/ios/ExpensifyCashTests/Info.plist
@@ -19,6 +19,6 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>396</string>
+	<string>397</string>
 </dict>
 </plist>
diff --git a/package-lock.json b/package-lock.json
index 523d631b23fc..4922b767eb33 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "expensify.cash",
-  "version": "1.0.1-395",
+  "version": "1.0.1-396",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index b992a35ed9ee..53a4e6b99740 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "expensify.cash",
-  "version": "1.0.1-395",
+  "version": "1.0.1-396",
   "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.",

From fa780e3adbfa3d173de6faacd3b18c3c4f7c9d73 Mon Sep 17 00:00:00 2001
From: Rory Abraham <rory@expensify.com>
Date: Sat, 30 Jan 2021 11:53:46 -0800
Subject: [PATCH 71/72] Use compose to chain HOCs

---
 src/pages/home/report/ReportActionCompose.js | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js
index 4cac4f3e36b4..9898c2024872 100644
--- a/src/pages/home/report/ReportActionCompose.js
+++ b/src/pages/home/report/ReportActionCompose.js
@@ -15,6 +15,7 @@ import {addAction, saveReportComment, broadcastUserIsTyping} from '../../../libs
 import ReportTypingIndicator from './ReportTypingIndicator';
 import AttachmentModal from '../../../components/AttachmentModal';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
+import compose from '../../../libs/compose';
 
 const propTypes = {
     // A method to call when the form is submitted
@@ -242,11 +243,14 @@ class ReportActionCompose extends React.Component {
 ReportActionCompose.propTypes = propTypes;
 ReportActionCompose.defaultProps = defaultProps;
 
-export default withOnyx({
-    comment: {
-        key: ({reportID}) => `${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT}${reportID}`,
-    },
-    isSidebarShown: {
-        key: ONYXKEYS.IS_SIDEBAR_SHOWN,
-    },
-})(withWindowDimensions(ReportActionCompose));
+export default compose(
+    withOnyx({
+        comment: {
+            key: ({reportID}) => `${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT}${reportID}`,
+        },
+        isSidebarShown: {
+            key: ONYXKEYS.IS_SIDEBAR_SHOWN,
+        },
+    }),
+    withWindowDimensions,
+)(ReportActionCompose);

From 61bd08fc384f62f917d050670220ae277c6ca520 Mon Sep 17 00:00:00 2001
From: botify
 <runner@fv-az30-787.y4hkrhbbrwjubdr353qr1kapdg.bx.internal.cloudapp.net>
Date: Mon, 1 Feb 2021 11:54:07 +0000
Subject: [PATCH 72/72] Update version to 1.0.1-397

---
 android/app/build.gradle          | 4 ++--
 ios/ExpensifyCash/Info.plist      | 2 +-
 ios/ExpensifyCashTests/Info.plist | 2 +-
 package-lock.json                 | 2 +-
 package.json                      | 2 +-
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/android/app/build.gradle b/android/app/build.gradle
index 8bc60624ca51..f5141bedf628 100644
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -148,8 +148,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 397
-        versionName "1.0.1-396"
+        versionCode 398
+        versionName "1.0.1-397"
     }
     splits {
         abi {
diff --git a/ios/ExpensifyCash/Info.plist b/ios/ExpensifyCash/Info.plist
index bfe81f57dbde..3a19f3c8c183 100644
--- a/ios/ExpensifyCash/Info.plist
+++ b/ios/ExpensifyCash/Info.plist
@@ -21,7 +21,7 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>397</string>
+	<string>398</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false />
 	<key>LSRequiresIPhoneOS</key>
diff --git a/ios/ExpensifyCashTests/Info.plist b/ios/ExpensifyCashTests/Info.plist
index 33367348bc10..79707225d5c5 100644
--- a/ios/ExpensifyCashTests/Info.plist
+++ b/ios/ExpensifyCashTests/Info.plist
@@ -19,6 +19,6 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>397</string>
+	<string>398</string>
 </dict>
 </plist>
diff --git a/package-lock.json b/package-lock.json
index 4922b767eb33..5734e4b6f93e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "expensify.cash",
-  "version": "1.0.1-396",
+  "version": "1.0.1-397",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index 53a4e6b99740..65b44e086c8c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "expensify.cash",
-  "version": "1.0.1-396",
+  "version": "1.0.1-397",
   "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.",