Fix switching Priority Mode with an active draft message from crashing app

src/pages/home/sidebar/SidebarLinks.js

@@ -144,7 +144,8 @@ class SidebarLinks extends React.Component {
             return true;
         }
 
-        // Do not re-order if the active report has a draft and vice versa.
+        // Do not re-order if the active report has a draft
+        // Unless, we are switching priority modes from "#focus" to "Most Recent". Otherwise, we won't display any of the previously hidden conversations
         if (nextProps.currentlyViewedReportID) {
             const hasActiveReportDraft = lodashGet(nextProps.reportsWithDraft, `${ONYXKEYS.COLLECTION.REPORTS_WITH_DRAFT}${nextProps.currentlyViewedReportID}`, false);
             return !hasActiveReportDraft;
@@ -158,23 +159,34 @@ class SidebarLinks extends React.Component {
         this.state = {
             currentlyViewedReportID: props.currentlyViewedReportID,
             orderedReports: [],
+            priorityMode: props.priorityMode,
             unreadReports: SidebarLinks.getUnreadReports(props.reports || {}),
         };
     }
 
     static getDerivedStateFromProps(nextProps, prevState) {
         const shouldReorder = SidebarLinks.shouldReorder(nextProps, prevState.orderedReports, prevState.currentlyViewedReportID, prevState.unreadReports);
+        const switchingPriorityModes = nextProps.priorityMode !== prevState.priorityMode;
+
+        // Pull the reports we want to show on the left hand nav
         const recentReports = SidebarLinks.getRecentReports(nextProps);
-        const orderedReports = shouldReorder
+
+        // Determine whether we want to re-order/sort the reports on the left hand nav
+        const orderedReports = shouldReorder || switchingPriorityModes
             ? recentReports
-            : _.map(prevState.orderedReports,
-                orderedReport => _.chain(recentReports)
-                    .filter(recentReport => orderedReport.reportID === recentReport.reportID)
-                    .first()
-                    .value());
+            : _.chain(prevState.orderedReports)
+
+            // To preserve the order of the conversations, we map over the previous state's order of reports.
+            // Then match and replace older reports with the newer report conversations from recentReports
+                .map(orderedReport => _.find(recentReports, recentReport => orderedReport.reportID === recentReport.reportID))
+
+            // Because we are using map, we have to filter out any undefined reports that may happen when switching priority modes
+                .filter(orderedReport => orderedReport !== undefined)
+                .value();
 
         return {
             orderedReports,
+            priorityMode: nextProps.priorityMode,
             currentlyViewedReportID: nextProps.currentlyViewedReportID,
             unreadReports: SidebarLinks.getUnreadReports(nextProps.reports || {}),
         };