From ee5f3a4a78cd9a4cc2ed259ce599db95765f24ce Mon Sep 17 00:00:00 2001
From: Vitaly Takmazov
Date: Tue, 11 Jun 2019 14:56:08 +0300
Subject: Message editing
---
vnext/src/ui/Thread.js | 61 ++++++++++++++++++++++++++++++++------------------
1 file changed, 39 insertions(+), 22 deletions(-)
(limited to 'vnext/src/ui/Thread.js')
diff --git a/vnext/src/ui/Thread.js b/vnext/src/ui/Thread.js
index 30fa0723..6cbb5188 100644
--- a/vnext/src/ui/Thread.js
+++ b/vnext/src/ui/Thread.js
@@ -12,13 +12,13 @@ import Button from './Button';
import { format, embedUrls } from '../utils/embed';
-import { getMessages, comment, markReadTracker, fetchUserUri } from '../api';
+import { getMessages, comment, update, markReadTracker, fetchUserUri, updateAvatar } from '../api';
import './Thread.css';
let isMounted;
-function Comment({ msg, visitor, active, setActive, postComment }) {
+function Comment({ msg, draft, visitor, active, setActive, onStartEditing, postComment }) {
const embedRef = useRef();
const msgRef = useRef();
const [author, setAuthor] = useState(msg.user);
@@ -33,16 +33,16 @@ function Comment({ msg, visitor, active, setActive, postComment }) {
useEffect(() => {
isMounted = true;
if (author.uri) {
- fetchUserUri(author.uri).then(response => {
- if (isMounted) {
- setAuthor(response.data);
- }
- });
+ fetchUserUri(author.uri).then(response => {
+ if (isMounted) {
+ setAuthor(response.data);
+ }
+ });
}
return () => {
- isMounted = false;
+ isMounted = false;
};
-}, [author.uri]);
+ }, [author.uri]);
return (
@@ -59,6 +59,13 @@ function Comment({ msg, visitor, active, setActive, postComment }) {
visitor.uid > 0 ? (
<>
{active === msg.rid || setActive(msg.rid)}>Reply}
+ {
+ visitor.uid == msg.user.uid &&
+ <>
+ ·
+ onStartEditing(msg)}>Edit
+ >
+ }
>
) : (
<>
@@ -77,18 +84,18 @@ function Comment({ msg, visitor, active, setActive, postComment }) {
}
- {
- msg.photo &&
-
- }
+ {
+ msg.photo &&
+
+ }
{
- active === msg.rid && Write a comment...
+ active === msg.rid && Write a comment...
}
@@ -97,9 +104,11 @@ function Comment({ msg, visitor, active, setActive, postComment }) {
Comment.propTypes = {
msg: MessageType.isRequired,
+ draft: PropTypes.string.isRequired,
visitor: UserType.isRequired,
active: PropTypes.number.isRequired,
setActive: PropTypes.func.isRequired,
+ onStartEditing: PropTypes.func.isRequired,
postComment: PropTypes.func.isRequired
};
@@ -108,6 +117,7 @@ export default function Thread(props) {
const [replies, setReplies] = useState([]);
const [loading, setLoading] = useState(false);
const [active, setActive] = useState(0);
+ const [editing, setEditing] = useState({});
useEffect(() => {
setActive(0);
loadReplies();
@@ -157,19 +167,26 @@ export default function Thread(props) {
}, [message]);
let postComment = (template) => {
const { mid, rid, body, attach } = template;
- comment(mid, rid, body, attach).then(res => {
+ let commentAction = editing.rid ? update(mid, editing.rid, body) : comment(mid, rid, body, attach);
+ commentAction.then(res => {
+ setEditing({});
loadReplies();
})
.catch(console.log);
};
+ let startEditing = (reply) => {
+ setActive(reply.replyto);
+ setEditing(reply);
+ };
+
const loaders = Math.min(message.replies || 0, 10);
return (
<>
{
message.mid ? (
- {active === (message.rid || 0) && Write a comment...}
+ {active === (message.rid || 0) && Write a comment...}
) : (
@@ -179,7 +196,7 @@ export default function Thread(props) {
{
!loading ? replies.map((msg) => (
-
+
)) : (
<>
@@ -201,5 +218,5 @@ Thread.propTypes = {
history: ReactRouterPropTypes.history,
match: ReactRouterPropTypes.match,
visitor: UserType.isRequired,
- connection: PropTypes.object.isRequired
+ connection: PropTypes.object.isRequired,
};
--
cgit v1.2.3