Order by most recent along with report icons

src/CONST.js

@@ -4,6 +4,10 @@ const CONST = {
     CLOUDFRONT_URL,
     PDF_VIEWER_URL: '/pdf/web/viewer.html',
     EXPENSIFY_ICON_URL: `${CLOUDFRONT_URL}/images/favicon-2019.png`,
+    REPORT: {
+        SINGLE_USER_DM: 'singleUserDM',
+        GROUP_USERS_DM: 'groupUsersDM',
+    },
 };
 
 export default CONST;

src/components/TextInputWithFocusStyles.js

@@ -20,7 +20,7 @@ const propTypes = {
     style: PropTypes.any,
 
     // A function to call when the input has been blurred
-    onBlur: PropTypes.func.isRequired,
+    onBlur: PropTypes.func,
 
     // A function to call when the input has gotten focus
     onFocus: PropTypes.func.isRequired,
@@ -29,6 +29,7 @@ const defaultProps = {
     styleFocusIn: null,
     styleFocusOut: null,
     style: null,
+    onBlur: () => {},
 };
 
 class TextInputWithFocusStyles extends React.Component {

src/libs/API.js

@@ -387,10 +387,9 @@ function Report_TogglePinned(parameters) {
  * @param {Number} parameters.sequenceNumber
  * @returns {Promise}
  */
-function Report_SetLastReadActionID(parameters) {
-    const commandName = 'Report_SetLastReadActionID';
-    requireParameters(['accountID', 'reportID', 'sequenceNumber'],
-        parameters, commandName);
+function Report_UpdateLastRead(parameters) {
+    const commandName = 'Report_UpdateLastRead';
+    requireParameters(['accountID', 'reportID', 'sequenceNumber'], parameters, commandName);
     return request(commandName, parameters);
 }
 
@@ -407,5 +406,5 @@ export {
     Report_AddComment,
     Report_GetHistory,
     Report_TogglePinned,
-    Report_SetLastReadActionID
+    Report_UpdateLastRead
 };

src/libs/actions/PersonalDetails.js

@@ -19,6 +19,19 @@ Onyx.connect({
     callback: val => personalDetails = val,
 });
 
+/**
+ * Helper method to return a default avatar
+ *
+ * @param {String} login
+ * @returns {String}
+ */
+function getDefaultAvatar(login) {
+    // There are 8 possible default avatars, so we choose which one this user has based
+    // on a simple hash of their login (which is converted from HEX to INT)
+    const loginHashBucket = (parseInt(md5(login).substring(0, 4), 16) % 8) + 1;
+    return `${CONST.CLOUDFRONT_URL}/images/avatars/avatar_${loginHashBucket}.png`;
+}
+
 /**
  * Returns the URL for a user's avatar and handles someone not having any avatar at all
  *
@@ -31,10 +44,7 @@ function getAvatar(personalDetail, login) {
         return personalDetail.avatar.replace(/&d=404$/, '');
     }
 
-    // There are 8 possible default avatars, so we choose which one this user has based
-    // on a simple hash of their login (which is converted from HEX to INT)
-    const loginHashBucket = (parseInt(md5(login).substring(0, 4), 16) % 8) + 1;
-    return `${CONST.CLOUDFRONT_URL}/images/avatars/avatar_${loginHashBucket}.png`;
+    return getDefaultAvatar(login);
 }
 
 /**
@@ -129,15 +139,38 @@ function fetch() {
 }
 
 /**
- * Get personal details for a list of emails.
+ * Get personal details from report participants.
  *
- * @param {String} emailList
+ * @param {Object} reports
  */
-function getForEmails(emailList) {
-    API.PersonalDetails_GetForEmails({emailList})
+function getFromReportParticipants(reports) {
+    const participantEmails = _.chain(reports)
+        .pluck('participants')
+        .flatten()
+        .unique()
+        .value();
+
+    if (participantEmails.length === 0) {
+        return;
+    }
+
+    API.PersonalDetails_GetForEmails({emailList: participantEmails.join(',')})
         .then((data) => {
-            const details = _.pick(data, emailList.split(','));
+            const details = _.pick(data, participantEmails);
             Onyx.merge(ONYXKEYS.PERSONAL_DETAILS, formatPersonalDetails(details));
+
+            // The personalDetails of the participants contain their avatar images. Here we'll go over each
+            // report and based on the participants we'll link up their avatars to report icons.
+            _.each(reports, (report) => {
+                if (report.participants.length === 1) {
+                    const dmParticipant = report.participants[0];
+                    let icon = lodashGet(details, [dmParticipant, 'avatar'], '');
+                    if (!icon) {
+                        icon = getDefaultAvatar(dmParticipant);
+                    }
+                    Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${report.reportID}`, {icon});
+                }
+            });
         });
 }
 
@@ -147,6 +180,6 @@ NetworkConnection.onReconnect(fetch);
 export {
     fetch,
     fetchTimezone,
-    getForEmails,
+    getFromReportParticipants,
     getDisplayName,
 };

src/libs/actions/Report.js

@@ -53,7 +53,7 @@ const typingWatchTimers = {};
 const reportMaxSequenceNumbers = {};
 
 // Keeps track of the last read for each report
-const lastReadActionIDs = {};
+const lastReadSequenceNumbers = {};
 
 /**
  * Checks the report to see if there are any unread action items
@@ -62,25 +62,31 @@ const lastReadActionIDs = {};
  * @returns {Boolean}
  */
 function getUnreadActionCount(report) {
-    const usersLastReadActionID = lodashGet(report, [
+    // @todo remove the first check as part of cleanup https://github.com/Expensify/Expensify/issues/145243
+    // since we migrating our data from lastReadActionID_ value to lastRead_ object.
+    const lastReadSequenceNumber = lodashGet(report, [
         'reportNameValuePairs',
         `lastReadActionID_${currentUserAccountID}`,
+    ]) || lodashGet(report, [
+        'reportNameValuePairs',
+        `lastRead_${currentUserAccountID}`,
+        'sequenceNumber',
     ]);
 
     // Save the lastReadActionID locally so we can access this later
-    lastReadActionIDs[report.reportID] = usersLastReadActionID;
+    lastReadSequenceNumbers[report.reportID] = lastReadSequenceNumber;
 
     if (report.reportActionList.length === 0) {
         return 0;
     }
 
-    if (!usersLastReadActionID) {
+    if (!lastReadSequenceNumber) {
         return report.reportActionList.length;
     }
 
     // There are unread items if the last one the user has read is less
     // than the highest sequence number we have
-    const unreadActionCount = report.reportActionList.length - usersLastReadActionID;
+    const unreadActionCount = report.reportActionList.length - lastReadSequenceNumber;
     return Math.max(0, unreadActionCount);
 }
 
@@ -107,11 +113,15 @@ function getSimplifiedReportObject(report) {
     return {
         reportID: report.reportID,
         reportName: report.reportName,
-        reportNameValuePairs: report.reportNameValuePairs,
         unreadActionCount: getUnreadActionCount(report),
         maxSequenceNumber: report.reportActionList.length,
         participants: getParticipantEmailsFromReport(report),
         isPinned: report.isPinned,
+        lastVisitedTimestamp: lodashGet(report, [
+            'reportNameValuePairs',
+            `lastRead_${currentUserAccountID}`,
+            'timestamp'
+        ], 0)
     };
 }
 
@@ -148,15 +158,14 @@ function fetchChatReportsByIDs(chatList) {
         .then(({reports}) => {
             fetchedReports = reports;
 
-            // Build array of all participant emails so we can
-            // get the personal details.
-            let participantEmails = [];
-
-            // Process the reports and store them in Onyx
+            // Process the reports and store them in Onyx. At the same time we'll save the simplified reports in this
+            // variable called simplifiedReports which hold the participants (minus the current user) for each report.
+            // Using this simplifiedReport we can call PersonalDetails.getFromReportParticipants to get the
+            // personal details of all the participants and even link up their avatars to report icons.
+            const simplifiedReports = [];
             _.each(fetchedReports, (report) => {
                 const newReport = getSimplifiedReportObject(report);
-
-                participantEmails.push(newReport.participants);
+                simplifiedReports.push(newReport);
 
                 if (lodashGet(report, 'reportNameValuePairs.type') === 'chat') {
                     newReport.reportName = getChatReportName(report.sharedReportList);
@@ -166,31 +175,26 @@ function fetchChatReportsByIDs(chatList) {
                 Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${report.reportID}`, newReport);
             });
 
-            // Fetch the person details if there are any
-            participantEmails = _.unique(participantEmails);
-            if (participantEmails && participantEmails.length !== 0) {
-                PersonalDetails.getForEmails(participantEmails.join(','));
-            }
+            // Fetch the personal details if there are any
+            PersonalDetails.getFromReportParticipants(simplifiedReports);
 
             return _.map(fetchedReports, report => report.reportID);
         });
 }
 
 /**
- * Update the lastReadActionID in Onyx and local memory.
+ * Update the lastRead actionID and timestamp in local memory and Onyx
  *
  * @param {Number} reportID
  * @param {Number} sequenceNumber
  */
-function setLocalLastReadActionID(reportID, sequenceNumber) {
-    lastReadActionIDs[reportID] = sequenceNumber;
+function setLocalLastRead(reportID, sequenceNumber) {
+    lastReadSequenceNumbers[reportID] = sequenceNumber;
 
-    // Update the lastReadActionID on the report optimistically
+    // Update the report optimistically
     Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`, {
         unreadActionCount: 0,
-        reportNameValuePairs: {
-            [`lastReadActionID_${currentUserAccountID}`]: sequenceNumber,
-        }
+        lastVisitedTimestamp: Date.now(),
     });
 }
 
@@ -208,15 +212,15 @@ function updateReportWithNewAction(reportID, reportAction) {
     // last read actionID has been updated in the server but not necessarily reflected
     // locally so we must first update it and then calculate the unread (which should be 0)
     if (isFromCurrentUser) {
-        setLocalLastReadActionID(reportID, newMaxSequenceNumber);
+        setLocalLastRead(reportID, newMaxSequenceNumber);
     }
 
     // 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
     Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`, {
         reportID,
-        unreadActionCount: newMaxSequenceNumber - (lastReadActionIDs[reportID] || 0),
+        unreadActionCount: newMaxSequenceNumber - (lastReadSequenceNumbers[reportID] || 0),
         maxSequenceNumber: reportAction.sequenceNumber,
     });
 
@@ -451,6 +455,10 @@ function fetchOrCreateChatReport(participants) {
             const newReport = getSimplifiedReportObject(report);
             newReport.reportName = getChatReportName(report.sharedReportList);
 
+            // Optimistically update the last visited timestamp such that if the user immediately switches to another
+            // report the last visited order is still maintained.
+            newReport.lastVisitedTimestamp = Date.now();
+
             // Merge the data into Onyx. Don't use set() here or multiSet() because then that would
             // overwrite any existing data (like if they have unread messages)
             Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`, newReport);
@@ -536,10 +544,10 @@ function updateLastReadActionID(reportID, sequenceNumber) {
         return;
     }
 
-    setLocalLastReadActionID(reportID, sequenceNumber);
+    setLocalLastRead(reportID, sequenceNumber);
 
     // Mark the report as not having any unread items
-    API.Report_SetLastReadActionID({
+    API.Report_UpdateLastRead({
         accountID: currentUserAccountID,
         reportID,
         sequenceNumber,

src/pages/home/report/ReportActionsView.js

@@ -60,6 +60,7 @@ class ReportActionsView extends React.Component {
         });
         if (this.props.isActiveReport) {
             this.keyboardEvent = Keyboard.addListener('keyboardDidShow', this.scrollToListBottom);
+            this.recordMaxAction();
         }
 
         fetchActions(this.props.reportID);

src/pages/home/sidebar/ChatLinkRow.js

@@ -13,6 +13,7 @@ import ChatSwitcherOptionPropTypes from './ChatSwitcherOptionPropTypes';
 import ROUTES from '../../../ROUTES';
 import pencilIcon from '../../../../assets/images/icon-pencil.png';
 import PressableLink from '../../../components/PressableLink';
+import CONST from '../../../CONST';
 
 const propTypes = {
     // Option to allow the user to choose from can be type 'report' or 'user'
@@ -43,7 +44,7 @@ const ChatLinkRow = ({
     onAddToGroup,
     isChatSwitcher,
 }) => {
-    const isUserRow = option.type === 'user';
+    const isSingleUserDM = option.type === CONST.REPORT.SINGLE_USER_DM;
     const textStyle = optionIsFocused
         ? styles.sidebarLinkActiveText
         : styles.sidebarLinkText;
@@ -108,7 +109,7 @@ const ChatLinkRow = ({
                     </View>
                 </View>
             </PressableLink>
-            {isUserRow && isChatSwitcher && (
+            {isSingleUserDM && isChatSwitcher && (
                 <View>
                     <TouchableOpacity
                         style={[styles.chatSwitcherItemButton]}

src/pages/home/sidebar/ChatSwitcherList.js

@@ -35,7 +35,7 @@ const ChatSwitcherList = ({
                 keyboardShouldPersistTaps="always"
                 showsVerticalScrollIndicator={false}
                 data={options}
-                keyExtractor={option => (option.type === 'user' ? option.alternateText : String(option.reportID))}
+                keyExtractor={option => option.keyForList}
                 renderItem={({item, index}) => (
                     <ChatLinkRow
                         option={item}

src/pages/home/sidebar/ChatSwitcherOptionPropTypes.js

@@ -12,4 +12,7 @@ export default PropTypes.shape({
 
     // The type of option we have e.g. user or report
     type: PropTypes.string,
+
+    // The option key provided to FlatList keyExtractor
+    keyForList: PropTypes.string,
 });