LHN: Hide the pencil icon when message is sent or draft is deleted and show the icon when user started to type #6050

src/ONYXKEYS.js

@@ -94,6 +94,7 @@ export default {
         REPORT_USER_IS_TYPING: 'reportUserIsTyping_',
         REPORT_IOUS: 'reportIOUs_',
         POLICY: 'policy_',
+        REPORTS_WITH_DRAFT: 'reportWithDraft_',
     },
 
     // Indicates which locale should be used

src/libs/OptionsListUtils.js

@@ -43,6 +43,16 @@ Onyx.connect({
     callback: val => preferredLocale = val || CONST.DEFAULT_LOCALE,
 });
 
+const reportsWithDraft = {};
+Onyx.connect({
+    key: ONYXKEYS.COLLECTION.REPORTS_WITH_DRAFT,
+    callback: (hasDraft, key) => {
+        if (key) {
+            reportsWithDraft[key] = hasDraft;
+        }
+    },
+});
+
 const policies = {};
 Onyx.connect({
     key: ONYXKEYS.COLLECTION.POLICY,
@@ -178,26 +188,34 @@ function getSearchText(report, personalDetailList, isDefaultChatRoom) {
     return _.unique(searchTerms).join(' ');
 }
 
+/**
+ * Determines whether a report has a draft comment.
+ *
+ * @param {Object} report
+ * @return {Boolean}
+ */
+function hasReportDraftComment(report) {
+    return report
+        && reportsWithDraft
+        && lodashGet(reportsWithDraft, `${ONYXKEYS.COLLECTION.REPORTS_WITH_DRAFT}${report.reportID}`, false);
+}
+
 /**
  * Creates a report list option
  *
  * @param {Array<Object>} personalDetailList
  * @param {Object} [report]
- * @param {Object} draftComments
  * @param {Boolean} showChatPreviewLine
  * @param {Boolean} forcePolicyNamePreview
  * @returns {Object}
  */
-function createOption(personalDetailList, report, draftComments, {
+function createOption(personalDetailList, report, {
     showChatPreviewLine = false, forcePolicyNamePreview = false,
 }) {
     const isDefaultChatRoom = isDefaultRoom(report);
     const hasMultipleParticipants = personalDetailList.length > 1 || isDefaultChatRoom;
     const personalDetail = personalDetailList[0];
-    const reportDraftComment = report
-        && draftComments
-        && lodashGet(draftComments, `${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT}${report.reportID}`, '');
-
+    const hasDraftComment = hasReportDraftComment(report);
     const hasOutstandingIOU = lodashGet(report, 'hasOutstandingIOU', false);
     const iouReport = hasOutstandingIOU
         ? lodashGet(iouReports, `${ONYXKEYS.COLLECTION.REPORT_IOUS}${report.iouReportID}`, {})
@@ -243,7 +261,7 @@ function createOption(personalDetailList, report, draftComments, {
         phoneNumber: !hasMultipleParticipants ? personalDetail.phoneNumber : null,
         payPalMeAddress: !hasMultipleParticipants ? personalDetail.payPalMeAddress : null,
         isUnread: report ? report.unreadActionCount > 0 : null,
-        hasDraftComment: _.size(reportDraftComment) > 0,
+        hasDraftComment,
         keyForList: report ? String(report.reportID) : personalDetail.login,
         searchText: getSearchText(report, personalDetailList, isDefaultChatRoom),
         isPinned: lodashGet(report, 'isPinned', false),
@@ -314,13 +332,12 @@ function isCurrentUser(userDetails) {
  *
  * @param {Object} reports
  * @param {Object} personalDetails
- * @param {Object} draftComments
  * @param {Number} activeReportID
  * @param {Object} options
  * @returns {Object}
  * @private
  */
-function getOptions(reports, personalDetails, draftComments, activeReportID, {
+function getOptions(reports, personalDetails, activeReportID, {
     betas = [],
     selectedOptions = [],
     maxRecentReportsToShow = 0,
@@ -367,17 +384,15 @@ function getOptions(reports, personalDetails, draftComments, activeReportID, {
             return;
         }
 
-        const reportDraftComment = report
-            && draftComments
-            && lodashGet(draftComments, `${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT}${report.reportID}`, '');
+        const hasDraftComment = hasReportDraftComment(report);
         const iouReportOwner = lodashGet(report, 'hasOutstandingIOU', false)
             ? lodashGet(iouReports, [`${ONYXKEYS.COLLECTION.REPORT_IOUS}${report.iouReportID}`, 'ownerEmail'], '')
             : '';
 
         const reportContainsIOUDebt = iouReportOwner && iouReportOwner !== currentUserLogin;
         const shouldFilterReportIfEmpty = !showReportsWithNoComments && report.lastMessageTimestamp === 0;
         const shouldFilterReportIfRead = hideReadReports && report.unreadActionCount === 0;
-        const shouldShowReportIfHasDraft = showReportsWithDrafts && reportDraftComment && reportDraftComment.length > 0;
+        const shouldShowReportIfHasDraft = showReportsWithDrafts && hasDraftComment;
         const shouldFilterReport = shouldFilterReportIfEmpty || shouldFilterReportIfRead;
         if (report.reportID !== activeReportID
             && !report.isPinned
@@ -398,14 +413,14 @@ function getOptions(reports, personalDetails, draftComments, activeReportID, {
         if (logins.length <= 1) {
             reportMapForLogins[logins[0]] = report;
         }
-        allReportOptions.push(createOption(reportPersonalDetails, report, draftComments, {
+        allReportOptions.push(createOption(reportPersonalDetails, report, {
             showChatPreviewLine,
             forcePolicyNamePreview,
         }));
     });
 
     const allPersonalDetailsOptions = _.map(personalDetails, personalDetail => (
-        createOption([personalDetail], reportMapForLogins[personalDetail.login], draftComments, {
+        createOption([personalDetail], reportMapForLogins[personalDetail.login], {
             showChatPreviewLine,
             forcePolicyNamePreview,
         })
@@ -522,7 +537,7 @@ function getOptions(reports, personalDetails, draftComments, activeReportID, {
             ? `+${countryCodeByIP}${searchValue}`
             : searchValue;
         const userInvitePersonalDetails = getPersonalDetailsForLogins([login], personalDetails);
-        userToInvite = createOption(userInvitePersonalDetails, null, draftComments, {
+        userToInvite = createOption(userInvitePersonalDetails, null, {
             showChatPreviewLine,
         });
         userToInvite.icons = [defaultAvatarForUserToInvite];
@@ -550,7 +565,7 @@ function getSearchOptions(
     searchValue = '',
     betas,
 ) {
-    return getOptions(reports, personalDetails, {}, 0, {
+    return getOptions(reports, personalDetails, 0, {
         betas,
         searchValue,
         includeRecentReports: true,
@@ -618,7 +633,7 @@ function getNewChatOptions(
     selectedOptions = [],
     excludeLogins = [],
 ) {
-    return getOptions(reports, personalDetails, {}, 0, {
+    return getOptions(reports, personalDetails, 0, {
         betas,
         searchValue,
         selectedOptions,
@@ -635,7 +650,6 @@ function getNewChatOptions(
  *
  * @param {Object} reports
  * @param {Object} personalDetails
- * @param {Object} draftComments
  * @param {Number} activeReportID
  * @param {String} priorityMode
  * @param {Array<String>} betas
@@ -644,7 +658,6 @@ function getNewChatOptions(
 function getSidebarOptions(
     reports,
     personalDetails,
-    draftComments,
     activeReportID,
     priorityMode,
     betas,
@@ -662,7 +675,7 @@ function getSidebarOptions(
         };
     }
 
-    return getOptions(reports, personalDetails, draftComments, activeReportID, {
+    return getOptions(reports, personalDetails, activeReportID, {
         betas,
         includeRecentReports: true,
         includeMultipleParticipantReports: true,

src/libs/actions/Report.js

@@ -1207,6 +1207,17 @@ function saveReportComment(reportID, comment) {
     Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT}${reportID}`, comment);
 }
 
+/**
+ * Immediate indication whether the report has a draft comment.
+ *
+ * @param {String} reportID
+ * @param {Boolean} hasDraft
+ * @returns {Promise}
+ */
+function setReportWithDraft(reportID, hasDraft) {
+    return Onyx.merge(`${ONYXKEYS.COLLECTION.REPORTS_WITH_DRAFT}${reportID}`, hasDraft);
+}
+
 /**
  * Broadcasts whether or not a user is typing on a report over the report's private pusher channel.
  *
@@ -1416,4 +1427,5 @@ export {
     syncChatAndIOUReports,
     navigateToConciergeChat,
     handleInaccessibleReport,
+    setReportWithDraft,
 };

src/pages/home/report/ReportActionCompose.js

@@ -33,6 +33,7 @@ import {
     saveReportComment,
     saveReportActionDraft,
     broadcastUserIsTyping,
+    setReportWithDraft,
 } from '../../../libs/actions/Report';
 import ReportTypingIndicator from './ReportTypingIndicator';
 import AttachmentModal from '../../../components/AttachmentModal';
@@ -331,6 +332,17 @@ class ReportActionCompose extends React.Component {
         this.setState({
             isCommentEmpty: newComment.length === 0,
         });
+
+        // Indicate that draft has been created.
+        if (this.comment.length === 0 && newComment.length !== 0) {
+            setReportWithDraft(this.props.reportID.toString(), true);
+        }
+
+        // The draft has been deleted.
+        if (newComment.length === 0) {
+            setReportWithDraft(this.props.reportID.toString(), false);
+        }
+
         this.comment = newComment;
         this.debouncedSaveReportComment(newComment);
         if (newComment) {