Really non-performant comment editing

Expensify · Apr 9, 2021 · bf1e59c · bf1e59c
1 parent 94053ea
commit bf1e59c
Show file tree

Hide file tree

Showing 7 changed files with 116 additions and 90 deletions.
diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js
@@ -917,7 +917,7 @@ function editReportComment(reportID, reportAction, htmlForNewComment) {
 }
 
 function saveReportActionDraft(reportID, reportActionID, draftMessage) {
-    Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS_DRAFTS}${reportID}_${reportActionID}`, draftMessage);
+    Onyx.set(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS_DRAFTS}${reportID}_${reportActionID}`, draftMessage);
 }
 
 export {

diff --git a/src/pages/home/report/ReportActionContextMenu.js b/src/pages/home/report/ReportActionContextMenu.js
@@ -9,7 +9,7 @@ import {
 } from '../../../components/Icon/Expensicons';
 import getReportActionContextMenuStyles from '../../../styles/getReportActionContextMenuStyles';
 import ReportActionContextMenuItem from './ReportActionContextMenuItem';
-import {editReportComment, saveReportActionDraft} from '../../../libs/actions/Report';
+import {saveReportActionDraft} from '../../../libs/actions/Report';
 import ReportActionPropTypes from './ReportActionPropTypes';
 import Clipboard from '../../../libs/Clipboard';
 import {isReportMessageAttachment} from '../../../libs/reportUtils';
@@ -95,10 +95,10 @@ class ReportActionContextMenu extends React.Component {
         {
             text: 'Edit Comment',
             icon: Pencil,
-            shouldShow: this.props.reportAction.actorEmail === this.props.session.email,
+            shouldShow: this.props.reportAction.actorEmail === this.props.session.email
+                && !isReportMessageAttachment(this.getActionText()),
             onPress: () => {
-                editReportComment(this.props.reportID, this.props.reportAction, "blah blah Yuwen test 21");
-                saveReportActionDraft(this.props.reportID, this.props.reportAction.reportActionID, "blah blah Yuwen test 21");
+                saveReportActionDraft(this.props.reportID, this.props.reportAction.reportActionID, this.getActionText());
             },
         },
 
@@ -111,6 +111,10 @@ class ReportActionContextMenu extends React.Component {
         },
     ];
 
+    getActionText() {
+        const message = _.last(lodashGet(this.props.reportAction, 'message', null));
+        return lodashGet(message, 'text', '');
+    }
 
     render() {
         const wrapperStyle = getReportActionContextMenuStyles(this.props.isMini);

diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js
@@ -15,7 +15,6 @@ import PopoverWithMeasuredContent from '../../../components/PopoverWithMeasuredC
 import ReportActionItemSingle from './ReportActionItemSingle';
 import ReportActionItemGrouped from './ReportActionItemGrouped';
 import ReportActionContextMenu from './ReportActionContextMenu';
-import ReportActionItemEdit from './ReportActionItemEdit';
 
 const propTypes = {
     // The ID of the report this action is on.
@@ -91,17 +90,15 @@ class ReportActionItem extends Component {
     }
 
     render() {
-        return this.props.draftMessage ? (
-            <ReportActionItemEdit action={this.props.action} draftMessage={this.props.draftMessage} />
-        ) : (
+        return (
             <PressableWithSecondaryInteraction onSecondaryInteraction={this.showPopover}>
                 <Hoverable>
                     {hovered => (
                         <View>
                             <View style={getReportActionItemStyle(hovered)}>
                                 {!this.props.displayAsGroup
-                                    ? <ReportActionItemSingle action={this.props.action} />
-                                    : <ReportActionItemGrouped action={this.props.action} />}
+                                    ? <ReportActionItemSingle action={this.props.action} draftMessage={this.props.draftMessage} reportID={this.props.reportID} />
+                                    : <ReportActionItemGrouped action={this.props.action} draftMessage={this.props.draftMessage} reportID={this.props.reportID} />}
                             </View>
                             <View style={getMiniReportActionContextMenuWrapperStyle(this.props.displayAsGroup)}>
                                 <ReportActionContextMenu

diff --git a/src/pages/home/report/ReportActionItemEdit.js b/src/pages/home/report/ReportActionItemEdit.js
diff --git a/src/pages/home/report/ReportActionItemGrouped.js b/src/pages/home/report/ReportActionItemGrouped.js
@@ -1,19 +1,27 @@
 import React from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
+import _ from 'underscore';
 import ReportActionPropTypes from './ReportActionPropTypes';
 import ReportActionItemMessage from './ReportActionItemMessage';
 import styles from '../../../styles/styles';
+import ReportActionItemMessageEdit from './ReportActionItemMessageEdit';
 
 const propTypes = {
     // All the data of the action
     action: PropTypes.shape(ReportActionPropTypes).isRequired,
+
+    draftMessage: PropTypes.string.isRequired,
+
+    reportID: PropTypes.number.isRequired,
 };
 
-const ReportActionItemGrouped = ({action}) => (
+const ReportActionItemGrouped = ({action, draftMessage}) => (
     <View style={[styles.chatItem]}>
         <View style={[styles.chatItemRightGrouped]}>
-            <ReportActionItemMessage action={action} />
+            {_.isEmpty(draftMessage)
+                ? <ReportActionItemMessage action={action} />
+                : <ReportActionItemMessageEdit action={action} draftMessage={draftMessage} reportID={reportID} />}
         </View>
     </View>
 );

diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js
@@ -0,0 +1,85 @@
+import React from 'react';
+import {View, Pressable, Text} from 'react-native';
+import PropTypes from 'prop-types';
+import _ from 'underscore';
+import ReportActionPropTypes from './ReportActionPropTypes';
+import styles from '../../../styles/styles';
+import TextInputFocusable from '../../../components/TextInputFocusable';
+import {editReportComment, saveReportActionDraft} from '../../../libs/actions/Report';
+
+const propTypes = {
+    // All the data of the action
+    action: PropTypes.shape(ReportActionPropTypes).isRequired,
+
+    // Draft message
+    draftMessage: PropTypes.string.isRequired,
+
+    reportID: PropTypes.number.isRequired,
+};
+
+class ReportActionItemMessageEdit extends React.Component {
+    constructor(props) {
+        super(props);
+        this.updateDraft = this.updateDraft.bind(this);
+        this.deleteDraft = this.deleteDraft.bind(this);
+        this.debouncedSaveDraft = _.debounce(this.debouncedSaveDraft.bind(this), 1000, false);
+        this.publishDraft = this.publishDraft.bind(this);
+
+        this.state = {
+            draft: this.props.draftMessage,
+        };
+    }
+
+    /**
+     * Update the value of the draft in Onyx
+     *
+     * @param {String} newDraft
+     */
+    updateDraft(newDraft) {
+        this.setState({draft: newDraft});
+        this.debouncedSaveDraft(newDraft);
+    }
+
+    deleteDraft() {
+        saveReportActionDraft(this.props.reportID, this.props.action.reportActionID, '');
+    }
+
+    debouncedSaveDraft() {
+        saveReportActionDraft(this.props.reportID, this.props.action.reportActionID, this.state.draft);
+    }
+
+    publishDraft() {
+        editReportComment(this.props.reportID, this.props.action, this.state.draft);
+        this.deleteDraft();
+    }
+
+    render() {
+        return (
+            <View style={[styles.chatItemMessage]}>
+                <TextInputFocusable
+                    multiline
+                    ref={el => this.textInput = el}
+                    onChangeText={this.updateDraft} // Debounced saveDraftComment
+                    defaultValue={this.props.draftMessage}
+                    maxLines={16} // This is the same that slack has
+                    style={[styles.textInputCompose, styles.flex4]}
+                />
+                <View>
+                    <Pressable>
+                        <Text onPress={this.deleteDraft}>
+                            Cancel
+                        </Text>
+                    </Pressable>
+                    <Pressable>
+                        <Text onPress={this.publishDraft}>
+                            Save
+                        </Text>
+                    </Pressable>
+                </View>
+            </View>
+        );
+    }
+}
+
+ReportActionItemMessageEdit.propTypes = propTypes;
+export default ReportActionItemMessageEdit;
diff --git a/src/pages/home/report/ReportActionItemSingle.js b/src/pages/home/report/ReportActionItemSingle.js
@@ -12,16 +12,21 @@ import ReportActionItemDate from './ReportActionItemDate';
 import Avatar from '../../../components/Avatar';
 import ONYXKEYS from '../../../ONYXKEYS';
 import personalDetailsPropType from '../../personalDetailsPropType';
+import ReportActionItemMessageEdit from './ReportActionItemMessageEdit';
 
 const propTypes = {
     // All the data of the action
     action: PropTypes.shape(ReportActionPropTypes).isRequired,
 
     // All of the personalDetails
     personalDetails: PropTypes.objectOf(personalDetailsPropType).isRequired,
+
+    draftMessage: PropTypes.string.isRequired,
+
+    reportID: PropTypes.number.isRequired,
 };
 
-const ReportActionItemSingle = ({action, personalDetails}) => {
+const ReportActionItemSingle = ({action, personalDetails, draftMessage, reportID}) => {
     const {avatar, displayName} = personalDetails[action.actorEmail] || {};
     const avatarUrl = action.automatic
         ? `${CONST.CLOUDFRONT_URL}/images/icons/concierge_2019.svg`
@@ -52,7 +57,9 @@ const ReportActionItemSingle = ({action, personalDetails}) => {
                     ))}
                     <ReportActionItemDate timestamp={action.timestamp} />
                 </View>
-                <ReportActionItemMessage action={action} />
+                {_.isEmpty(draftMessage)
+                    ? <ReportActionItemMessage action={action} />
+                    : <ReportActionItemMessageEdit action={action} draftMessage={draftMessage} reportID={reportID} />}
             </View>
         </View>
     );