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; };