From 66cd4219875e1813080b4420e4cf834c89a18bd6 Mon Sep 17 00:00:00 2001
From: ryoaxton2000 <ryoaxton@gmail.com>
Date: Mon, 1 Mar 2021 13:52:41 +0700
Subject: [PATCH 1/3] add routing for editComment
---
src/routes/App.jsx | 2 ++
1 file changed, 2 insertions(+)
diff --git a/src/routes/App.jsx b/src/routes/App.jsx
index 9a8bcf1..279ee10 100644
--- a/src/routes/App.jsx
+++ b/src/routes/App.jsx
@@ -12,6 +12,7 @@ import Search from '../components/Search';
import EditThread from '../components/thread/EditThread';
import Footer from '../components/utility/Footer';
import UpdateProfileForm from '../components/profile/UpdateProfileForm.jsx';
+import EditComment from '../components/thread/EditComment';
import {
BrowserRouter as Router,
Route,
@@ -61,6 +62,7 @@ function App() {
<Route exact path="/threads" component={ListThreads} />
<Route exact path="/thread/edit/:thread" component={EditThread} />
<Route exact path="/profile/update" component={UpdateProfileForm} />
+ <Route exact path="/thread/edit/comment/:comment" component={EditComment} />
<Redirect exact from="" to="page/1" />
</Switch>
<Footer />
--
GitLab
From 94711be9df5c4d816b113ac72995f06c7a20cfbc Mon Sep 17 00:00:00 2001
From: ryoaxton2000 <ryoaxton@gmail.com>
Date: Mon, 1 Mar 2021 14:09:16 +0700
Subject: [PATCH 2/3] add edit comment function
---
src/components/thread/EditComment.jsx | 102 ++++++++++++++++++++++++++
src/components/thread/Post.jsx | 6 ++
src/routes/App.jsx | 2 +-
3 files changed, 109 insertions(+), 1 deletion(-)
create mode 100644 src/components/thread/EditComment.jsx
diff --git a/src/components/thread/EditComment.jsx b/src/components/thread/EditComment.jsx
new file mode 100644
index 0000000..9352c0f
--- /dev/null
+++ b/src/components/thread/EditComment.jsx
@@ -0,0 +1,102 @@
+import axios from 'axios';
+import React, { useState, useEffect } from 'react';
+import { useInput } from '../../helpers/hooks/input-hook';
+import { authHeader } from '../../helpers/services/auth.service';
+import { API_URL } from '../../config/keys';
+import '../../styles/thread/Form.css';
+
+export default function EditComment(props) {
+ const { history } = props;
+
+ const back = () => {
+ history.goBack();
+ };
+
+ const redirect = (path) => {
+ history.push(path);
+ };
+
+ const commentId = props.match.params.comment;
+
+ const {
+ value: body,
+ setValue: setBody,
+ bind: bindBody,
+ reset: resetBody,
+ } = useInput('');
+
+ const [message, setMessage] = useState('');
+
+ useEffect(() => {
+ async function getDetailComment(commentId) {
+ // Grab thread detail
+ const content = await (
+ await axios.get(`${API_URL}/post/${commentId}`)
+ ).data?.data.message;
+ setBody(content);
+ }
+ getDetailComment(commentId);
+ }, [setBody, commentId]);
+
+ const handleSubmit = async (event) => {
+ event.preventDefault();
+ try {
+ const thisComment = await axios.put(
+ `${API_URL}/post/${commentId}`,
+ {
+ post: {
+ message: body,
+ },
+ },
+ {
+ headers: authHeader(),
+ }
+ );
+ const { data } = thisComment?.data;
+ redirect(`/topic/${data?.topic_name}/${data?.thread_id}/page/1`);
+ } catch (error) {
+ setMessage("Failed to edit comment");
+ }
+ resetBody();
+ };
+
+ return (
+ <div className="formContainer">
+ <div className="back" onClick={back}>
+ <i className="fas fa-angle-left"></i>
+ <h5>Back</h5>
+ </div>
+ <div className="header">
+ <h1>
+ <b>Edit a Comment</b>
+ </h1>
+ </div>
+ <div className="form_section">
+ <div>
+ {message && (
+ <div>
+ <div className="alert alert-danger" role="alert">
+ <p>{message}</p>
+ </div>
+ </div>
+ )}
+ <form onSubmit={handleSubmit}>
+ <div className="form_container">
+ <label for="body">Body</label>
+ <textarea
+ className="body"
+ name="body"
+ placeholder="Tulis"
+ required="false"
+ {...bindBody}
+ />
+ <div className="buttonContainer">
+ <input type="submit" className="buttonSubmit" value="Edit Comment" />
+ </div>
+ </div>
+ </form>
+ </div>
+ </div>
+ </div>
+ );
+}
diff --git a/src/components/thread/Post.jsx b/src/components/thread/Post.jsx
index 0a8f129..4fef779 100644
--- a/src/components/thread/Post.jsx
+++ b/src/components/thread/Post.jsx
@@ -133,6 +133,12 @@ export default function Post(props) {
)}
{checkType == 'post' && (
<div classname="commentDeleteButton">
+ <Button
+ type="button"
+ text="Edit"
+ color="none-green"
+ url={`comment/edit/${content.id}`}
+ />
<button
type="button"
className="deleteButton"
diff --git a/src/routes/App.jsx b/src/routes/App.jsx
index 279ee10..6f72f0c 100644
--- a/src/routes/App.jsx
+++ b/src/routes/App.jsx
@@ -62,7 +62,7 @@ function App() {
<Route exact path="/threads" component={ListThreads} />
<Route exact path="/thread/edit/:thread" component={EditThread} />
<Route exact path="/profile/update" component={UpdateProfileForm} />
- <Route exact path="/thread/edit/comment/:comment" component={EditComment} />
+ <Route exact path="/comment/edit/:comment" component={EditComment} />
<Redirect exact from="" to="page/1" />
</Switch>
<Footer />
--
GitLab
From 4461dba736b842e588e12f5df39676bf42a484f7 Mon Sep 17 00:00:00 2001
From: ryoaxton2000 <ryoaxton@gmail.com>
Date: Mon, 1 Mar 2021 14:12:16 +0700
Subject: [PATCH 3/3] edit comment description for getDetailComment function
---
src/components/thread/EditComment.jsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/thread/EditComment.jsx b/src/components/thread/EditComment.jsx
index 9352c0f..7672d49 100644
--- a/src/components/thread/EditComment.jsx
+++ b/src/components/thread/EditComment.jsx
@@ -29,7 +29,7 @@ export default function EditComment(props) {
useEffect(() => {
async function getDetailComment(commentId) {
- // Grab thread detail
+ // Grab comment detail
const content = await (
await axios.get(`${API_URL}/post/${commentId}`)
).data?.data.message;
--
GitLab