Wired up editing comments

apps/comments-ui/src/App.js

@@ -276,6 +276,12 @@ export default class App extends React.Component {
             comments,
             pagination,
             postId,
+            dispatchAction: (_action, data) => this.dispatchAction(_action, data),
+            
+            /**
+             * @deprecated
+             * Use dispatchAction instead
+             */
             onAction: (_action, data) => this.dispatchAction(_action, data)
         };
     }

apps/comments-ui/src/actions.js

@@ -115,9 +115,27 @@ async function deleteComment({state, api, data: comment}) {
     };
 }
 
+async function editComment({state, api, data: comment}) {
+    const data = await api.comments.edit({
+        comment
+    });
+    comment = data.comments[0];
+
+    // Replace the comment in the state with the new one
+    return {
+        comments: state.comments.map((c) => {
+            if (c.id === comment.id) {
+                return comment;
+            }
+            return c;
+        })
+    };
+}
+
 const Actions = {
     // Put your actions here
     addComment,
+    editComment,
     hideComment,
     deleteComment,
     showComment,

apps/comments-ui/src/components/EditForm.js

@@ -1,13 +1,27 @@
 import {formatRelativeTime} from '../utils/helpers';
-import React, {useState} from 'react';
+import React, {useContext, useState} from 'react';
 import Avatar from './Avatar';
+import AppContext from '../AppContext';
 
 const EditForm = (props) => {
     // todo: we need to convert the HTML back to an editable state instead of putting it into the textarea
     const [message, setMessage] = useState(props.comment.html);
+    const {dispatchAction} = useContext(AppContext);
+
+    const getHTML = () => {
+        // Convert newlines to <br> for now (until we add a real editor)
+        return message.replace('\n', '<br>');
+    };
 
     const submitForm = async (event) => {
         event.preventDefault();
+
+        await dispatchAction('editComment', {
+            id: props.comment.id,
+            html: getHTML()
+        });
+
+        props.toggle();
         
         return false;
     };