aboutsummaryrefslogtreecommitdiff
path: root/vnext/src/ui/Thread.js
diff options
context:
space:
mode:
Diffstat (limited to 'vnext/src/ui/Thread.js')
-rw-r--r--vnext/src/ui/Thread.js61
1 files changed, 39 insertions, 22 deletions
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 (
<div>
<div className="msg-header" style={{ padding: '6px', display: 'flex', alignItems: 'flex-start' }}>
@@ -59,6 +59,13 @@ function Comment({ msg, visitor, active, setActive, postComment }) {
visitor.uid > 0 ? (
<>
{active === msg.rid || <span style={linkStyle} onClick={() => setActive(msg.rid)}>Reply</span>}
+ {
+ visitor.uid == msg.user.uid &&
+ <>
+ <span>&nbsp;&middot;&nbsp;</span>
+ <span style={linkStyle} onClick={() => onStartEditing(msg)}>Edit</span>
+ </>
+ }
</>
) : (
<>
@@ -77,18 +84,18 @@ function Comment({ msg, visitor, active, setActive, postComment }) {
</div>
}
</div>
- {
- msg.photo &&
- <div className="msg-media">
- <a href={`//i.juick.com/p/${msg.mid}-${msg.rid}.${msg.attach}`} data-fname={`${msg.mid}-${msg.rid}.${msg.attach}`}>
- <img src={`//i.juick.com/p/${msg.mid}-${msg.rid}.${msg.attach}`} alt="" />
- </a>
- </div>
- }
+ {
+ msg.photo &&
+ <div className="msg-media">
+ <a href={`//i.juick.com/p/${msg.mid}-${msg.rid}.${msg.attach}`} data-fname={`${msg.mid}-${msg.rid}.${msg.attach}`}>
+ <img src={`//i.juick.com/p/${msg.mid}-${msg.rid}.${msg.attach}`} alt="" />
+ </a>
+ </div>
+ }
<div className="embedContainer" ref={embedRef} />
<div className="msg-links">
{
- active === msg.rid && <MessageInput data={msg} onSend={postComment}>Write a comment...</MessageInput>
+ active === msg.rid && <MessageInput data={msg} text={draft || ''} onSend={postComment}>Write a comment...</MessageInput>
}
</div>
</div>
@@ -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 ? (
<Message data={message} visitor={props.visitor}>
- {active === (message.rid || 0) && <MessageInput data={message} onSend={postComment}>Write a comment...</MessageInput>}
+ {active === (message.rid || 0) && <MessageInput data={message} text={editing.body || ''} onSend={postComment}>Write a comment...</MessageInput>}
</Message>
) : (
<Spinner />
@@ -179,7 +196,7 @@ export default function Thread(props) {
{
!loading ? replies.map((msg) => (
<li id={msg.rid} key={msg.rid}>
- <Comment msg={msg} visitor={props.visitor} active={active} setActive={setActive} postComment={postComment} />
+ <Comment msg={msg} draft={msg.rid === editing.replyto && editing.body} visitor={props.visitor} active={active} setActive={setActive} onStartEditing={startEditing} postComment={postComment} />
</li>
)) : (
<>
@@ -201,5 +218,5 @@ Thread.propTypes = {
history: ReactRouterPropTypes.history,
match: ReactRouterPropTypes.match,
visitor: UserType.isRequired,
- connection: PropTypes.object.isRequired
+ connection: PropTypes.object.isRequired,
};