Edit Comments

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

@@ -68,6 +68,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/components/TextInputFocusable/index.js

@@ -18,7 +18,7 @@ const propTypes = {
     onPasteFile: PropTypes.func,
 
     // A ref to forward to the text input
-    forwardedRef: PropTypes.func.isRequired,
+    forwardedRef: PropTypes.func,
 
     // General styles to apply to the text input
     // eslint-disable-next-line react/forbid-prop-types
@@ -62,6 +62,7 @@ const defaultProps = {
     onDrop: () => {},
     isDisabled: false,
     autoFocus: false,
+    forwardedRef: null,
 };
 
 const IMAGE_EXTENSIONS = {

src/components/TextInputFocusable/index.native.js

@@ -13,7 +13,7 @@ const propTypes = {
     shouldClear: PropTypes.bool,
 
     // A ref to forward to the text input
-    forwardedRef: PropTypes.func.isRequired,
+    forwardedRef: PropTypes.func,
 
     // When the input has cleared whoever owns this input should know about it
     onClear: PropTypes.func,
@@ -31,6 +31,7 @@ const defaultProps = {
     onClear: () => {},
     autoFocus: false,
     isDisabled: false,
+    forwardedRef: null,
 };
 
 class TextInputFocusable extends React.Component {

src/libs/API.js

@@ -544,6 +544,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
@@ -725,6 +738,7 @@ export {
     Report_AddComment,
     Report_GetHistory,
     Report_TogglePinned,
+    Report_EditComment,
     Report_UpdateLastRead,
     ResendValidateCode,
     ResetPassword,

src/libs/Pusher/EventType.js

@@ -4,5 +4,6 @@
  */
 export default {
     REPORT_COMMENT: 'reportComment',
+    REPORT_COMMENT_EDIT: 'reportCommentEdit',
     REPORT_TOGGLE_PINNED: 'reportTogglePinned',
 };

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,19 @@
+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.
+ *
+ * @param {Object} index
+ */
+function scrollToIndex(index) {
+    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';
@@ -424,6 +425,19 @@ function removeOptimisticActions(reportID) {
     });
 }
 
+/**
+ * Updates a report action's message to be a new value.
+ *
+ * @param {Number} reportID
+ * @param {Number} sequenceNumber
+ * @param {Object} message
+ */
+function updateReportActionMessage(reportID, sequenceNumber, message) {
+    const actionToMerge = {};
+    actionToMerge[sequenceNumber] = {message: [message]};
+    Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`, actionToMerge);
+}
+
 /**
  * Updates a report in the store with a new report action
  *
@@ -578,6 +592,26 @@ function subscribeToUserEvents() {
             );
         });
 
+    // Live-update a report's actions when an 'edit comment' event is received.
+    Pusher.subscribe(pusherChannelName, Pusher.TYPE.REPORT_COMMENT_EDIT, (pushJSON) => {
+        Log.info(
+            `[Report] Handled ${Pusher.TYPE.REPORT_COMMENT_EDIT} event sent by Pusher`, true, {
+                reportActionID: pushJSON.reportActionID,
+            },
+        );
+        updateReportActionMessage(pushJSON.reportID, pushJSON.sequenceNumber, pushJSON.message);
+    }, false,
+    () => {
+        NetworkConnection.triggerReconnectionCallbacks('pusher re-subscribed to private user channel');
+    })
+        .catch((error) => {
+            Log.info(
+                '[Report] Failed to subscribe to Pusher channel',
+                true,
+                {error, pusherChannelName, eventName: Pusher.TYPE.REPORT_COMMENT_EDIT},
+            );
+        });
+
     // Live-update a report's pinned state when a 'report toggle pinned' event is received.
     Pusher.subscribe(pusherChannelName, Pusher.TYPE.REPORT_TOGGLE_PINNED, (pushJSON) => {
         Log.info(
@@ -1047,6 +1081,49 @@ Onyx.connect({
 // When the app reconnects from being offline, fetch all of the reports and their actions
 NetworkConnection.onReconnect(fetchAllReports);
 
+/**
+ * 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,
+        sequenceNumber,
+    })
+        .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,
@@ -1061,6 +1138,8 @@ export {
     broadcastUserIsTyping,
     togglePinnedState,
     updateCurrentlyViewedReportID,
+    editReportComment,
+    saveReportActionDraft,
     getSimplifiedIOUReport,
     getSimplifiedReportObject,
 };

src/libs/toggleReportActionComposeView.js

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

src/pages/home/report/ReportActionCompose.js

@@ -170,7 +170,7 @@ class ReportActionCompose extends React.Component {
      * Focus the composer text input
      */
     focus() {
-        if (this.textInput) {
+        if (this.textInput && this.textInput.focus) {
             // There could be other animations running while we trigger manual focus.
             // This prevents focus from making those animations janky.
             InteractionManager.runAfterInteractions(() => {