diff --git a/src/pages/comments/CommentEditForm.js b/src/pages/comments/CommentEditForm.js new file mode 100644 index 0000000..012874f --- /dev/null +++ b/src/pages/comments/CommentEditForm.js @@ -0,0 +1,72 @@ +import React, { useState } from "react"; + +import Form from "react-bootstrap/Form"; +import { axiosRes } from "../../api/axiosDefaults"; + +import styles from "../../styles/CommentCreateEditForm.module.css"; + +function CommentEditForm(props) { + const { id, content, setShowEditForm, setComments } = props; + + const [formContent, setFormContent] = useState(content); + + const handleChange = (event) => { + setFormContent(event.target.value); + }; + + const handleSubmit = async (event) => { + event.preventDefault(); + try { + await axiosRes.put(`/comments/${id}/`, { + content: formContent.trim(), + }); + setComments((prevComments) => ({ + ...prevComments, + results: prevComments.results.map((comment) => { + return comment.id === id + ? { + ...comment, + content: formContent.trim(), + updated_at: "now", + } + : comment; + }), + })); + setShowEditForm(false); + } catch (err) { + console.log(err); + } + }; + + return ( +
+ + + +
+ + +
+
+ ); +} + +export default CommentEditForm; \ No newline at end of file