Edit Comments

package.json

@@ -57,7 +57,7 @@
     "electron-log": "^4.2.4",
     "electron-serve": "^1.0.0",
     "electron-updater": "^4.3.4",
-    "expensify-common": "git+https://github.com/Expensify/expensify-common.git#d5edd0a956ef5c12fb6e9493d1f4608289f82a0e",
+    "expensify-common": "git+https://github.com/Expensify/expensify-common.git#758b46bc0b50320a006c7892faec56c2d3952135",
     "file-loader": "^6.0.0",
     "html-entities": "^1.3.1",
     "lodash": "4.17.21",

src/Expensify.js

@@ -23,7 +23,7 @@ Onyx.init({
     initialKeyStates: {
 
         // Clear any loading and error messages so they do not appear on app startup
-        [ONYXKEYS.SESSION]: {loading: false},
+        [ONYXKEYS.SESSION]: {loading: false, shouldShowComposeInput: true},
         [ONYXKEYS.ACCOUNT]: CONST.DEFAULT_ACCOUNT_DATA,
         [ONYXKEYS.NETWORK]: {isOffline: false},
         [ONYXKEYS.IOU]: {loading: false},

src/ONYXKEYS.js

@@ -65,6 +65,7 @@ export default {
         REPORT: 'report_',
         REPORT_ACTIONS: 'reportActions_',
         REPORT_DRAFT_COMMENT: 'reportDraftComment_',
+        REPORT_ACTIONS_DRAFTS: 'reportActionsDrafts_',
         REPORT_USER_IS_TYPING: 'reportUserIsTyping_',
         REPORT_IOUS: 'reportIOUs_',
     },

src/components/InvertedFlatList/index.js

@@ -5,11 +5,15 @@ import React, {
     forwardRef,
 } from 'react';
 import PropTypes from 'prop-types';
+import {FlatList} from 'react-native';
+import _ from 'underscore';
 import BaseInvertedFlatList from './BaseInvertedFlatList';
 
 const propTypes = {
     // Passed via forwardRef so we can access the FlatList ref
-    innerRef: PropTypes.func.isRequired,
+    innerRef: PropTypes.shape({
+        current: PropTypes.instanceOf(FlatList),
+    }).isRequired,
 };
 
 // This is copied from https://codesandbox.io/s/react-native-dsyse
@@ -23,7 +27,12 @@ const InvertedFlatList = (props) => {
     }, []);
 
     useEffect(() => {
-        props.innerRef(ref.current);
+        if (!_.isFunction(props.innerRef)) {
+            // eslint-disable-next-line no-param-reassign
+            props.innerRef.current = ref.current;
+        } else {
+            props.innerRef(ref.current);
+        }
     }, []);
 
     useEffect(() => {

src/libs/API.js

@@ -543,6 +543,19 @@ function Report_TogglePinned(parameters) {
     return Network.post(commandName, parameters);
 }
 
+/**
+ * @param {Object} parameters
+ * @param {Number} parameters.reportID
+ * @param {String} parameters.reportActionID
+ * @param {String} parameters.reportComment
+ * @return {Promise}
+ */
+function Report_EditComment(parameters) {
+    const commandName = 'Report_EditComment';
+    requireParameters(['reportID', 'reportActionID', 'reportComment'], parameters, commandName);
+    return Network.post(commandName, parameters);
+}
+
 /**
  * @param {Object} parameters
  * @param {Number} parameters.accountID
@@ -709,6 +722,7 @@ export {
     Report_AddComment,
     Report_GetHistory,
     Report_TogglePinned,
+    Report_EditComment,
     Report_UpdateLastRead,
     ResendValidateCode,
     ResetPassword,

src/libs/ReportScrollManager/index.js

@@ -0,0 +1,25 @@
+import React from 'react';
+
+// This ref is created using React.createRef here because this function is used by a component that doesn't have access
+// to the original ref.
+const flatListRef = React.createRef();
+
+/**
+ * Scroll to the provided index. On non-native implementations we do not want to scroll when we are scrolling because
+ * we are editing a comment.
+ *
+ * @param {Object} index
+ * @param {Boolean} isEditing
+ */
+function scrollToIndex(index, isEditing) {
+    if (isEditing) {
+        return;
+    }
+
+    flatListRef.current.scrollToIndex(index);
+}
+
+export {
+    flatListRef,
+    scrollToIndex,
+};

src/libs/ReportScrollManager/index.native.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+// This ref is created using React.createRef here because this function is used by a component that doesn't have access
+// to the original ref.
+const flatListRef = React.createRef();
+
+function scrollToIndex(index) {
+    return flatListRef.current.scrollToIndex(index);
+}
+
+export {
+    flatListRef,
+    scrollToIndex,
+};

src/libs/actions/Report.js

@@ -2,6 +2,7 @@ import moment from 'moment';
 import _ from 'underscore';
 import lodashGet from 'lodash/get';
 import ExpensiMark from 'expensify-common/lib/ExpensiMark';
+import Str from 'expensify-common/lib/str';
 import Onyx from 'react-native-onyx';
 import ONYXKEYS from '../../ONYXKEYS';
 import * as Pusher from '../Pusher/pusher';
@@ -1000,6 +1001,48 @@ NetworkConnection.onReconnect(() => {
     fetchAllReports(false);
 });
 
+/**
+ * Saves a new message for a comment. Marks the comment as edited, which will be reflected in the UI.
+ *
+ * @param {Number} reportID
+ * @param {Object} originalReportAction
+ * @param {String} htmlForNewComment
+ */
+function editReportComment(reportID, originalReportAction, htmlForNewComment) {
+    // Optimistically update the report action with the new message
+    const sequenceNumber = originalReportAction.sequenceNumber;
+    const newReportAction = {...originalReportAction};
+    const actionToMerge = {};
+    newReportAction.message[0].isEdited = true;
+    newReportAction.message[0].html = htmlForNewComment;
+    newReportAction.message[0].text = Str.stripHTML(htmlForNewComment);
+    actionToMerge[sequenceNumber] = newReportAction;
+    Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`, actionToMerge);
+
+    // Persist the updated report comment
+    API.Report_EditComment({
+        reportID,
+        reportActionID: originalReportAction.reportActionID,
+        reportComment: htmlForNewComment,
+    })
+        .catch(() => {
+            // If it fails, reset Onyx
+            actionToMerge[sequenceNumber] = originalReportAction;
+            Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`, actionToMerge);
+        });
+}
+
+/**
+ * Saves the draft for a comment report action. This will put the comment into "edit mode"
+ *
+ * @param {Number} reportID
+ * @param {Number} reportActionID
+ * @param {String} draftMessage
+ */
+function saveReportActionDraft(reportID, reportActionID, draftMessage) {
+    Onyx.set(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS_DRAFTS}${reportID}_${reportActionID}`, draftMessage);
+}
+
 export {
     fetchAllReports,
     fetchActions,
@@ -1013,6 +1056,8 @@ export {
     broadcastUserIsTyping,
     togglePinnedState,
     updateCurrentlyViewedReportID,
+    editReportComment,
+    saveReportActionDraft,
     getSimplifiedIOUReport,
     getSimplifiedReportObject,
 };

src/libs/toggleReportActionComposeView/index.js

@@ -0,0 +1 @@
+export default () => {};

src/libs/toggleReportActionComposeView/index.native.js

@@ -0,0 +1,4 @@
+import Onyx from 'react-native-onyx';
+import ONYXKEYS from '../../ONYXKEYS';
+
+export default shouldShowComposeInput => Onyx.merge(ONYXKEYS.SESSION, {shouldShowComposeInput});