diff options
| -rw-r--r-- | vnext/src/ui/Comment.js | 44 | ||||
| -rw-r--r-- | vnext/src/ui/Message.js | 85 | ||||
| -rw-r--r-- | vnext/src/ui/Thread.js | 2 |
3 files changed, 68 insertions, 63 deletions
diff --git a/vnext/src/ui/Comment.js b/vnext/src/ui/Comment.js index 40ce0863..e8fb2afb 100644 --- a/vnext/src/ui/Comment.js +++ b/vnext/src/ui/Comment.js @@ -71,26 +71,28 @@ export default function Comment({ msg, draft, active, setActive, onStartEditing, { active === msg.rid && <MessageInput text={draft || ''} onSend={postComment} placeholder="Write a comment..." /> } - <div className="msg-links"> - { - visitor.uid > 0 ? ( - <> - {active === msg.rid || <span style={linkStyle} onClick={() => setActive(msg.rid)}>Reply</span>} - { - visitor.uid == msg.user.uid && - <> - <span> · </span> - <span style={linkStyle} onClick={() => onStartEditing(msg)}>Edit</span> - </> - } - </> - ) : ( - <> - <span> · </span>{active === msg.rid || <Button>Reply</Button>} - </> - ) - } - </div> + {visitor.uid > 0 && + <div className="msg-links"> + { + visitor.uid > 0 ? ( + <> + {active === msg.rid || <span style={linkStyle} onClick={() => setActive(msg.rid)}>Reply</span>} + { + visitor.uid == msg.user.uid && + <> + <span> · </span> + <span style={linkStyle} onClick={() => onStartEditing(msg)}>Edit</span> + </> + } + </> + ) : ( + <> + <span> · </span>{active === msg.rid || <Button>Reply</Button>} + </> + ) + } + </div> + } </div> ); } @@ -99,4 +101,4 @@ export default function Comment({ msg, draft, active, setActive, onStartEditing, */ const linkStyle = { cursor: 'pointer' -};
\ No newline at end of file +}; diff --git a/vnext/src/ui/Message.js b/vnext/src/ui/Message.js index 640512ea..595d2178 100644 --- a/vnext/src/ui/Message.js +++ b/vnext/src/ui/Message.js @@ -31,7 +31,7 @@ import { useVisitor } from './VisitorContext'; * * @param {React.PropsWithChildren<{}> & MessageProps} props props */ -export default function Message({ data, isThread = false, onToggleSubscription, children }) { +export default function Message({ data, isThread, onToggleSubscription, children }) { const [visitor] = useVisitor(); const isCode = (data.tags || []).indexOf('code') >= 0; const likesSummary = data.likes ? `${data.likes}` : 'Recommend'; @@ -54,7 +54,8 @@ export default function Message({ data, isThread = false, onToggleSubscription, } } }, []); - const canComment = data.user && visitor.uid === data.user.uid || !data.ReadOnly; + const canComment = data.user && visitor.uid === data.user.uid || !data.ReadOnly && visitor.uid > 0 + || !data.ReadOnly && !isThread; return ( <div className="msg-cont"> <Recommendations forMessage={data} /> @@ -98,47 +99,49 @@ export default function Message({ data, isThread = false, onToggleSubscription, </div> } <div className="embedContainer" ref={embedRef} /> - <nav className="l"> - {data.user && visitor.uid === data.user.uid ? ( - <Link to={`/${data.user.uname}/${data.mid}`} className="a-like msg-button" - state={{ data: data }}> - <Icon name="ei-heart" size="s" /> - <span>{likesSummary}</span> - </Link> - ) : visitor.uid > 0 ? ( - <Link to={'/post'} className="a-like msg-button"> - <Icon name="ei-heart" size="s" /> - <span>{likesSummary}</span> - </Link> - ) : ( - <Link to="/login" className="a-login msg-button"> - <Icon name="ei-heart" size="s" /> - <span>{likesSummary}</span> - </Link> - )} - { - data.user && canComment && (( - isThread ? ( + {canComment && + <nav className="l"> + {data.user && visitor.uid === data.user.uid ? ( + <Link to={`/${data.user.uname}/${data.mid}`} className="a-like msg-button" + state={{ data: data }}> + <Icon name="ei-heart" size="s" /> + <span>{likesSummary}</span> + </Link> + ) : visitor.uid > 0 ? ( + <Link to={'/post'} className="a-like msg-button"> + <Icon name="ei-heart" size="s" /> + <span>{likesSummary}</span> + </Link> + ) : ( + <Link to="/login" className="a-login msg-button"> + <Icon name="ei-heart" size="s" /> + <span>{likesSummary}</span> + </Link> + )} + { + data.user && canComment && (( + isThread ? ( <a className="msg-button" onClick={() => { onToggleSubscription(data); }}> - { - data.subscribed ? (<> - <Icon name="ei-check" size="s" /> - <span>Subscribed</span> - </>) : (<> - <Icon name="ei-eye" size="s" /> - <span>Subscribe</span> - </>)} + { + data.subscribed ? (<> + <Icon name="ei-check" size="s" /> + <span>Subscribed</span> + </>) : (<> + <Icon name="ei-eye" size="s" /> + <span>Subscribe</span> + </>)} </a> - ) : ( - <Link to={`/${data.user.uname}/${data.mid}`} className="a-comment msg-button" - state={{ data: data }}> - <Icon name="ei-comment" size="s" /> - <span>{commentsSummary}</span> - </Link> - ) - )) - } - </nav> + ) : ( + <Link to={`/${data.user.uname}/${data.mid}`} className="a-comment msg-button" + state={{ data: data }}> + <Icon name="ei-comment" size="s" /> + <span>{commentsSummary}</span> + </Link> + ) + )) + } + </nav> + } {children} </div > ); diff --git a/vnext/src/ui/Thread.js b/vnext/src/ui/Thread.js index 2919e830..f26eead6 100644 --- a/vnext/src/ui/Thread.js +++ b/vnext/src/ui/Thread.js @@ -132,7 +132,7 @@ export default function Thread(props) { { message.mid ? ( <Message key={message.mid} data={message} isThread={true} onToggleSubscription={handleSubsciptionToggle}> - {active === (message.rid || 0) && <MessageInput data={message} text={editing.body || ''} onSend={postComment}>Write a comment...</MessageInput>} + {active === (message.rid || 0) && visitor.uid > 0 && <MessageInput data={message} text={editing.body || ''} onSend={postComment}>Write a comment...</MessageInput>} </Message> ) : ( <Spinner /> |