Merge pull request #1317 from Expensify/chirag-multiMerge-support

Support for mergeCollection
Expensify · Jan 27, 2021 · 624bcaf · 624bcaf
2 parents be4a3c5 + 8670987
commit 624bcaf
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 31 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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
@@ -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);
         });