Fakultas Ilmu Komputer UI

Commit dc05948e authored by Ryo Axtonlie's avatar Ryo Axtonlie
Browse files

Merge branch 'ryo' into 'master'

Ryo

See merge request functional-programming/diskuy-frontend!48
parents 104fe20d 4461dba7
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 comment 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>
);
}
......@@ -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"
......
......@@ -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="/comment/edit/:comment" component={EditComment} />
<Redirect exact from="" to="page/1" />
</Switch>
<Footer />
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment