diff --git a/package-lock.json b/package-lock.json index 377704412112..bee4868ade28 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21206,8 +21206,8 @@ } }, "react-native-onyx": { - "version": "git+https://github.com/Expensify/react-native-onyx.git#4e810bfd30cbb02aaf663ba69456fd233346a774", - "from": "git+https://github.com/Expensify/react-native-onyx.git#4e810bfd30cbb02aaf663ba69456fd233346a774", + "version": "git+https://github.com/Expensify/react-native-onyx.git#c12a1e7e2dccf06e61e4afb905d85d822521d9ee", + "from": "git+https://github.com/Expensify/react-native-onyx.git#c12a1e7e2dccf06e61e4afb905d85d822521d9ee", "requires": { "@react-native-community/async-storage": "^1.12.1", "expensify-common": "git+https://github.com/Expensify/expensify-common.git#cd9f195ed1fd340e7e890c41672a97af4f2956ca", diff --git a/package.json b/package.json index c9844f545f3f..9e04260659f4 100644 --- a/package.json +++ b/package.json @@ -63,7 +63,7 @@ "react-native-image-picker": "^2.3.3", "react-native-keyboard-spacer": "^0.4.1", "react-native-modal": "^11.5.6", - "react-native-onyx": "git+https://github.com/Expensify/react-native-onyx.git#4e810bfd30cbb02aaf663ba69456fd233346a774", + "react-native-onyx": "git+https://github.com/Expensify/react-native-onyx.git#c12a1e7e2dccf06e61e4afb905d85d822521d9ee", "react-native-pdf": "^6.2.2", "react-native-render-html": "^6.0.0-alpha.10", "react-native-safe-area-context": "^3.1.4", diff --git a/src/libs/actions/PersonalDetails.js b/src/libs/actions/PersonalDetails.js index 1d24a44814d2..afab367b0b3e 100644 --- a/src/libs/actions/PersonalDetails.js +++ b/src/libs/actions/PersonalDetails.js @@ -155,6 +155,7 @@ function getFromReportParticipants(reports) { // 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. + const reportsToUpdate = {}; _.each(reports, (report) => { if (report.participants.length > 0) { const avatars = _.map(report.participants, dmParticipant => ({ @@ -164,9 +165,14 @@ function getFromReportParticipants(reports) { .sort((first, second) => first.firstName - second.firstName) .map(item => item.avatar); - Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${report.reportID}`, {icons: avatars}); + reportsToUpdate[`${ONYXKEYS.COLLECTION.REPORT}${report.reportID}`] = {icons: avatars}; } }); + + // We use mergeCollection such that it updates ONYXKEYS.COLLECTION.REPORT in one go. + // Any withOnyx subscribers to this key will also receive the complete updated props just once + // than updating props for each report and re-rendering had merge been used. + Onyx.mergeCollection(ONYXKEYS.COLLECTION.REPORT, reportsToUpdate); }); } diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js index e51ffff88e52..18ccbc8eaea1 100644 --- a/src/libs/actions/Report.js +++ b/src/libs/actions/Report.js @@ -96,6 +96,21 @@ function getParticipantEmailsFromReport({sharedReportList}) { return _.without(emailArray, currentUserEmail); } +/** + * Returns a generated report title based on the participants + * + * @param {Array} sharedReportList + * @return {String} + */ +function getChatReportName(sharedReportList) { + return _.chain(sharedReportList) + .map(participant => participant.email) + .filter(participant => participant !== currentUserEmail) + .map(participant => PersonalDetails.getDisplayName(participant)) + .value() + .join(', '); +} + /** * Only store the minimal amount of data in Onyx that needs to be stored * because space is limited @@ -110,10 +125,13 @@ function getSimplifiedReportObject(report) { const lastReportAction = lodashGet(report, ['reportActionList'], []).pop(); const createTimestamp = lastReportAction ? lastReportAction.created : 0; const lastMessageTimestamp = moment.utc(createTimestamp).unix(); + const reportName = lodashGet(report, 'reportNameValuePairs.type') === 'chat' + ? getChatReportName(report.sharedReportList) + : report.reportName; return { reportID: report.reportID, - reportName: report.reportName, + reportName, unreadActionCount: getUnreadActionCount(report), maxSequenceNumber: report.reportActionList.length, participants: getParticipantEmailsFromReport(report), @@ -127,21 +145,6 @@ function getSimplifiedReportObject(report) { }; } -/** - * Returns a generated report title based on the participants - * - * @param {Array} sharedReportList - * @return {String} - */ -function getChatReportName(sharedReportList) { - return _.chain(sharedReportList) - .map(participant => participant.email) - .filter(participant => participant !== currentUserEmail) - .map(participant => PersonalDetails.getDisplayName(participant)) - .value() - .join(', '); -} - /** * Fetches chat reports when provided a list of * chat report IDs @@ -164,21 +167,19 @@ function fetchChatReportsByIDs(chatList) { // 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 = []; + const simplifiedReports = {}; _.each(fetchedReports, (report) => { - const newReport = getSimplifiedReportObject(report); - simplifiedReports.push(newReport); - - if (lodashGet(report, 'reportNameValuePairs.type') === 'chat') { - newReport.reportName = getChatReportName(report.sharedReportList); - } - - // Merge the data into Onyx - Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${report.reportID}`, newReport); + const key = `${ONYXKEYS.COLLECTION.REPORT}${report.reportID}`; + simplifiedReports[key] = getSimplifiedReportObject(report); }); + // We use mergeCollection such that it updates ONYXKEYS.COLLECTION.REPORT in one go. + // Any withOnyx subscribers to this key will also receive the complete updated props just once + // than updating props for each report and re-rendering had merge been used. + Onyx.mergeCollection(ONYXKEYS.COLLECTION.REPORT, simplifiedReports); + // Fetch the personal details if there are any - PersonalDetails.getFromReportParticipants(simplifiedReports); + PersonalDetails.getFromReportParticipants(Object.values(simplifiedReports)); return _.map(fetchedReports, report => report.reportID); });