diff --git a/apps/comments-ui/src/App.js b/apps/comments-ui/src/App.js
index 9ca16a9b6a..db240ba5bf 100644
--- a/apps/comments-ui/src/App.js
+++ b/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)
};
}
diff --git a/apps/comments-ui/src/actions.js b/apps/comments-ui/src/actions.js
index 992e5f64ef..449e26b47b 100644
--- a/apps/comments-ui/src/actions.js
+++ b/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,
diff --git a/apps/comments-ui/src/components/EditForm.js b/apps/comments-ui/src/components/EditForm.js
index 185e817085..d5c9b3ceb6 100644
--- a/apps/comments-ui/src/components/EditForm.js
+++ b/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
for now (until we add a real editor)
+ return message.replace('\n', '
');
+ };
const submitForm = async (event) => {
event.preventDefault();
+
+ await dispatchAction('editComment', {
+ id: props.comment.id,
+ html: getHTML()
+ });
+
+ props.toggle();
return false;
};