Skip to content

Commit bf1e59c

Browse files
yuwenmemonyuwenmemon
committed
Really non-performant comment editing
1 parent 94053ea commit bf1e59c

7 files changed

+116
-90
lines changed

‎src/libs/actions/Report.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -917,7 +917,7 @@ function editReportComment(reportID, reportAction, htmlForNewComment) {
917917
}
918918

919919
function saveReportActionDraft(reportID, reportActionID, draftMessage) {
920-
Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS_DRAFTS}${reportID}_${reportActionID}`, draftMessage);
920+
Onyx.set(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS_DRAFTS}${reportID}_${reportActionID}`, draftMessage);
921921
}
922922

923923
export {

‎src/pages/home/report/ReportActionContextMenu.js

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
} from '../../../components/Icon/Expensicons';
1010
import getReportActionContextMenuStyles from '../../../styles/getReportActionContextMenuStyles';
1111
import ReportActionContextMenuItem from './ReportActionContextMenuItem';
12-
import {editReportComment, saveReportActionDraft} from '../../../libs/actions/Report';
12+
import {saveReportActionDraft} from '../../../libs/actions/Report';
1313
import ReportActionPropTypes from './ReportActionPropTypes';
1414
import Clipboard from '../../../libs/Clipboard';
1515
import {isReportMessageAttachment} from '../../../libs/reportUtils';
@@ -95,10 +95,10 @@ class ReportActionContextMenu extends React.Component {
9595
{
9696
text: 'Edit Comment',
9797
icon: Pencil,
98-
shouldShow: this.props.reportAction.actorEmail === this.props.session.email,
98+
shouldShow: this.props.reportAction.actorEmail === this.props.session.email
99+
&& !isReportMessageAttachment(this.getActionText()),
99100
onPress: () => {
100-
editReportComment(this.props.reportID, this.props.reportAction, "blah blah Yuwen test 21");
101-
saveReportActionDraft(this.props.reportID, this.props.reportAction.reportActionID, "blah blah Yuwen test 21");
101+
saveReportActionDraft(this.props.reportID, this.props.reportAction.reportActionID, this.getActionText());
102102
},
103103
},
104104

@@ -111,6 +111,10 @@ class ReportActionContextMenu extends React.Component {
111111
},
112112
];
113113

114+
getActionText() {
115+
const message = _.last(lodashGet(this.props.reportAction, 'message', null));
116+
return lodashGet(message, 'text', '');
117+
}
114118

115119
render() {
116120
const wrapperStyle = getReportActionContextMenuStyles(this.props.isMini);

‎src/pages/home/report/ReportActionItem.js

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ import PopoverWithMeasuredContent from '../../../components/PopoverWithMeasuredC
1515
import ReportActionItemSingle from './ReportActionItemSingle';
1616
import ReportActionItemGrouped from './ReportActionItemGrouped';
1717
import ReportActionContextMenu from './ReportActionContextMenu';
18-
import ReportActionItemEdit from './ReportActionItemEdit';
1918

2019
const propTypes = {
2120
// The ID of the report this action is on.
@@ -91,17 +90,15 @@ class ReportActionItem extends Component {
9190
}
9291

9392
render() {
94-
return this.props.draftMessage ? (
95-
<ReportActionItemEdit action={this.props.action} draftMessage={this.props.draftMessage} />
96-
) : (
93+
return (
9794
<PressableWithSecondaryInteraction onSecondaryInteraction={this.showPopover}>
9895
<Hoverable>
9996
{hovered => (
10097
<View>
10198
<View style={getReportActionItemStyle(hovered)}>
10299
{!this.props.displayAsGroup
103-
? <ReportActionItemSingle action={this.props.action} />
104-
: <ReportActionItemGrouped action={this.props.action} />}
100+
? <ReportActionItemSingle action={this.props.action} draftMessage={this.props.draftMessage} reportID={this.props.reportID} />
101+
: <ReportActionItemGrouped action={this.props.action} draftMessage={this.props.draftMessage} reportID={this.props.reportID} />}
105102
</View>
106103
<View style={getMiniReportActionContextMenuWrapperStyle(this.props.displayAsGroup)}>
107104
<ReportActionContextMenu

‎src/pages/home/report/ReportActionItemEdit.js

Lines changed: 0 additions & 75 deletions
This file was deleted.

‎src/pages/home/report/ReportActionItemGrouped.js

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,27 @@
11
import React from 'react';
22
import {View} from 'react-native';
33
import PropTypes from 'prop-types';
4+
import _ from 'underscore';
45
import ReportActionPropTypes from './ReportActionPropTypes';
56
import ReportActionItemMessage from './ReportActionItemMessage';
67
import styles from '../../../styles/styles';
8+
import ReportActionItemMessageEdit from './ReportActionItemMessageEdit';
79

810
const propTypes = {
911
// All the data of the action
1012
action: PropTypes.shape(ReportActionPropTypes).isRequired,
13+
14+
draftMessage: PropTypes.string.isRequired,
15+
16+
reportID: PropTypes.number.isRequired,
1117
};
1218

13-
const ReportActionItemGrouped = ({action}) => (
19+
const ReportActionItemGrouped = ({action, draftMessage}) => (
1420
<View style={[styles.chatItem]}>
1521
<View style={[styles.chatItemRightGrouped]}>
16-
<ReportActionItemMessage action={action} />
22+
{_.isEmpty(draftMessage)
23+
? <ReportActionItemMessage action={action} />
24+
: <ReportActionItemMessageEdit action={action} draftMessage={draftMessage} reportID={reportID} />}
1725
</View>
1826
</View>
1927
);

‎src/pages/home/report/ReportActionItemMessageEdit.js

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
import React from 'react';
2+
import {View, Pressable, Text} from 'react-native';
3+
import PropTypes from 'prop-types';
4+
import _ from 'underscore';
5+
import ReportActionPropTypes from './ReportActionPropTypes';
6+
import styles from '../../../styles/styles';
7+
import TextInputFocusable from '../../../components/TextInputFocusable';
8+
import {editReportComment, saveReportActionDraft} from '../../../libs/actions/Report';
9+
10+
const propTypes = {
11+
// All the data of the action
12+
action: PropTypes.shape(ReportActionPropTypes).isRequired,
13+
14+
// Draft message
15+
draftMessage: PropTypes.string.isRequired,
16+
17+
reportID: PropTypes.number.isRequired,
18+
};
19+
20+
class ReportActionItemMessageEdit extends React.Component {
21+
constructor(props) {
22+
super(props);
23+
this.updateDraft = this.updateDraft.bind(this);
24+
this.deleteDraft = this.deleteDraft.bind(this);
25+
this.debouncedSaveDraft = _.debounce(this.debouncedSaveDraft.bind(this), 1000, false);
26+
this.publishDraft = this.publishDraft.bind(this);
27+
28+
this.state = {
29+
draft: this.props.draftMessage,
30+
};
31+
}
32+
33+
/**
34+
* Update the value of the draft in Onyx
35+
*
36+
* @param {String} newDraft
37+
*/
38+
updateDraft(newDraft) {
39+
this.setState({draft: newDraft});
40+
this.debouncedSaveDraft(newDraft);
41+
}
42+
43+
deleteDraft() {
44+
saveReportActionDraft(this.props.reportID, this.props.action.reportActionID, '');
45+
}
46+
47+
debouncedSaveDraft() {
48+
saveReportActionDraft(this.props.reportID, this.props.action.reportActionID, this.state.draft);
49+
}
50+
51+
publishDraft() {
52+
editReportComment(this.props.reportID, this.props.action, this.state.draft);
53+
this.deleteDraft();
54+
}
55+
56+
render() {
57+
return (
58+
<View style={[styles.chatItemMessage]}>
59+
<TextInputFocusable
60+
multiline
61+
ref={el => this.textInput = el}
62+
onChangeText={this.updateDraft} // Debounced saveDraftComment
63+
defaultValue={this.props.draftMessage}
64+
maxLines={16} // This is the same that slack has
65+
style={[styles.textInputCompose, styles.flex4]}
66+
/>
67+
<View>
68+
<Pressable>
69+
<Text onPress={this.deleteDraft}>
70+
Cancel
71+
</Text>
72+
</Pressable>
73+
<Pressable>
74+
<Text onPress={this.publishDraft}>
75+
Save
76+
</Text>
77+
</Pressable>
78+
</View>
79+
</View>
80+
);
81+
}
82+
}
83+
84+
ReportActionItemMessageEdit.propTypes = propTypes;
85+
export default ReportActionItemMessageEdit;

‎src/pages/home/report/ReportActionItemSingle.js

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,21 @@ import ReportActionItemDate from './ReportActionItemDate';
1212
import Avatar from '../../../components/Avatar';
1313
import ONYXKEYS from '../../../ONYXKEYS';
1414
import personalDetailsPropType from '../../personalDetailsPropType';
15+
import ReportActionItemMessageEdit from './ReportActionItemMessageEdit';
1516

1617
const propTypes = {
1718
// All the data of the action
1819
action: PropTypes.shape(ReportActionPropTypes).isRequired,
1920

2021
// All of the personalDetails
2122
personalDetails: PropTypes.objectOf(personalDetailsPropType).isRequired,
23+
24+
draftMessage: PropTypes.string.isRequired,
25+
26+
reportID: PropTypes.number.isRequired,
2227
};
2328

24-
const ReportActionItemSingle = ({action, personalDetails}) => {
29+
const ReportActionItemSingle = ({action, personalDetails, draftMessage, reportID}) => {
2530
const {avatar, displayName} = personalDetails[action.actorEmail] || {};
2631
const avatarUrl = action.automatic
2732
? `${CONST.CLOUDFRONT_URL}/images/icons/concierge_2019.svg`
@@ -52,7 +57,9 @@ const ReportActionItemSingle = ({action, personalDetails}) => {
5257
))}
5358
<ReportActionItemDate timestamp={action.timestamp} />
5459
</View>
55-
<ReportActionItemMessage action={action} />
60+
{_.isEmpty(draftMessage)
61+
? <ReportActionItemMessage action={action} />
62+
: <ReportActionItemMessageEdit action={action} draftMessage={draftMessage} reportID={reportID} />}
5663
</View>
5764
</View>
5865
);

0 commit comments

Comments
 (0)