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,
@@ -188,16 +198,16 @@ function getSearchText(report, personalDetailList, isDefaultChatRoom) {
  * @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 hasDraft = report
+        && reportsWithDraft
+        && lodashGet(reportsWithDraft, `${ONYXKEYS.COLLECTION.REPORTS_WITH_DRAFT}${report.reportID}`, false);
+    
     const hasOutstandingIOU = lodashGet(report, 'hasOutstandingIOU', false);
     const iouReport = hasOutstandingIOU
         ? lodashGet(iouReports, `${ONYXKEYS.COLLECTION.REPORT_IOUS}${report.iouReportID}`, {})
@@ -243,7 +253,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: hasDraft,
         keyForList: report ? String(report.reportID) : personalDetail.login,
         searchText: getSearchText(report, personalDetailList, isDefaultChatRoom),
         isPinned: lodashGet(report, 'isPinned', false),
@@ -398,14 +408,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 +532,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];

src/libs/actions/Report.js

@@ -1207,6 +1207,16 @@ 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
+ */
+ function setReportWithDraft(reportID, hasDraft) {
+    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 +1426,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';
@@ -332,6 +333,7 @@ class ReportActionCompose extends React.Component {
             isCommentEmpty: newComment.length === 0,
         });
         this.comment = newComment;
+        setReportWithDraft(this.props.reportID.toString(), newComment.length !== 0);
         this.debouncedSaveReportComment(newComment);
         if (newComment) {
             this.debouncedBroadcastUserIsTyping();

src/pages/home/sidebar/SidebarLinks.js

@@ -22,6 +22,7 @@ import {participantPropTypes} from './optionPropTypes';
 import themeColors from '../../../styles/themes/default';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
 import * as App from '../../../libs/actions/App';
+import lodashGet from 'lodash/get';
 
 const propTypes = {
     /** Toggles the navigation menu open and closed */
@@ -44,6 +45,9 @@ const propTypes = {
     /** List of draft comments. We don't know the shape, since the keys include the report numbers */
     draftComments: PropTypes.objectOf(PropTypes.string),
 
+    /** List of reports that have a draft comment. */
+    reportsWithDraft: PropTypes.objectOf(PropTypes.bool),
+
     /** List of users' personal details */
     personalDetails: PropTypes.objectOf(participantPropTypes),
 
@@ -83,6 +87,7 @@ const propTypes = {
 const defaultProps = {
     reports: {},
     draftComments: {},
+    reportsWithDraft: {},
     personalDetails: {},
     myPersonalDetails: {
         avatar: getDefaultAvatar(),
@@ -95,7 +100,46 @@ const defaultProps = {
 };
 
 class SidebarLinks extends React.Component {
-    shouldComponentUpdate(nextProps) {
+    constructor(props) {
+        super(props);
+        this.state = {
+            orderedReports: []
+        };
+    }
+
+    getRecentReports(props) {
+        const activeReportID = parseInt(props.currentlyViewedReportID, 10);
+        const {recentReports} = getSidebarOptions(
+            props.reports,
+            props.personalDetails,
+            props.draftComments,
+            activeReportID,
+            props.priorityMode,
+            props.betas,
+        );
+        return recentReports
+    }
+
+    componentDidMount() {
+        this.setState({
+            orderedReports: this.getRecentReports(this.props)
+        });
+    }
+
+    componentWillReceiveProps(nextProps) {
+        const shouldReorder = this.shouldReorder(nextProps);
+        const recentReports = this.getRecentReports(nextProps);
+        const orderedReports = shouldReorder
+            ? recentReports
+            : this.state.orderedReports.map(ordRep => 
+                recentReports.filter(recRep => ordRep.reportID == recRep.reportID)[0]);
+
+        this.setState({        
+            orderedReports: orderedReports
+        });
+    }
+
+    shouldReorder(nextProps) {
         // We do not want to re-order reports in the LHN if the only change is the draft comment in the
         // current report.
 
@@ -111,48 +155,12 @@ class SidebarLinks extends React.Component {
             return true;
         }
 
-        const previousDraftComments = this.props.draftComments;
-        const nextDraftComments = nextProps.draftComments;
-
-        const previousDraftReports = Object.keys(previousDraftComments);
-        const nextDraftReports = Object.keys(nextDraftComments);
-
-        const reportsWithNewDraftComments = nextDraftReports.filter((report) => {
-            const isNewDraftComment = !previousDraftReports.includes(report);
-            const wasNonEmptyDraftComment = previousDraftComments[report] === '';
-            const hasDraftCommentChanged = previousDraftComments[report] !== nextDraftComments[report];
-
-            return isNewDraftComment || (hasDraftCommentChanged && wasNonEmptyDraftComment);
-        });
-        const reportsWithRemovedDraftComments = previousDraftReports.filter((report) => {
-            const isRemovedDraftComment = !nextDraftReports.includes(report);
-            const isEmptyDraftComment = nextDraftComments[report] === '';
-            const hasDraftCommentChanged = previousDraftComments[report] !== nextDraftComments[report];
-
-            return isRemovedDraftComment || (hasDraftCommentChanged && isEmptyDraftComment);
-        });
-        const reportsWithEditedDraftComments = nextDraftReports.filter((report) => {
-            const didDraftCommentExistPreviously = previousDraftReports.includes(report);
-            const hasDraftCommentChanged = previousDraftComments[report] !== nextDraftComments[report];
-            const isNotANewDraftComment = !reportsWithNewDraftComments.includes(report);
-            const isNotARemovedDraftComment = !reportsWithRemovedDraftComments.includes(report);
-
-            return didDraftCommentExistPreviously && hasDraftCommentChanged && isNotANewDraftComment && isNotARemovedDraftComment;
-        });
-
-        const allReportsWithDraftCommentChanges = [
-            ...reportsWithNewDraftComments,
-            ...reportsWithRemovedDraftComments,
-            ...reportsWithEditedDraftComments,
-        ];
-
-        const activeReportID = this.props.currentlyViewedReportID;
-        const reportKey = `${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT}${activeReportID}`;
-
-        // Do not re-order reports if draft comment changes are only in the current report.
-        if (allReportsWithDraftCommentChanges.length === 1 && allReportsWithDraftCommentChanges.includes(reportKey)) {
-            return false;
+        // Never re-order if the active report has a draft and vice versa
+        if (nextProps.currentlyViewedReportID) {
+            const hasActiveReportDraft = lodashGet(nextProps.reportsWithDraft, `${ONYXKEYS.COLLECTION.REPORTS_WITH_DRAFT}${nextProps.currentlyViewedReportID}`, false)
+            return !hasActiveReportDraft;
         }
+
         return true;
     }
 
@@ -161,26 +169,17 @@ class SidebarLinks extends React.Component {
     }
 
     render() {
+        const activeReportID = parseInt(this.props.currentlyViewedReportID, 10);
+
         // Wait until the reports and personalDetails are actually loaded before displaying the LHN
         if (!this.props.initialReportDataLoaded || _.isEmpty(this.props.personalDetails)) {
             return null;
         }
 
-        const activeReportID = parseInt(this.props.currentlyViewedReportID, 10);
-
-        const {recentReports} = getSidebarOptions(
-            this.props.reports,
-            this.props.personalDetails,
-            this.props.draftComments,
-            activeReportID,
-            this.props.priorityMode,
-            this.props.betas,
-        );
-
         const sections = [{
             title: '',
             indexOffset: 0,
-            data: recentReports,
+            data: this.state.orderedReports ?? [],
             shouldShow: true,
         }];
 
@@ -233,7 +232,7 @@ class SidebarLinks extends React.Component {
                         {paddingBottom: getSafeAreaMargins(this.props.insets).marginBottom},
                     ]}
                     sections={sections}
-                    focusedIndex={_.findIndex(recentReports, (
+                    focusedIndex={_.findIndex(this.state.orderedReports, (
                         option => option.reportID === activeReportID
                     ))}
                     onSelectRow={(option) => {
@@ -289,5 +288,8 @@ export default compose(
         betas: {
             key: ONYXKEYS.BETAS,
         },
+        reportsWithDraft: {
+            key: ONYXKEYS.COLLECTION.REPORTS_WITH_DRAFT,
+        }
     }),
 )(SidebarLinks);