vnext: hide reply UI for anonymous users

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>&nbsp;&middot;&nbsp;</span>
-                  <span style={linkStyle} onClick={() => onStartEditing(msg)}>Edit</span>
-                </>
-              }
-            </>
-          ) : (
-            <>
-              <span>&nbsp;&middot;&nbsp;</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>&nbsp;&middot;&nbsp;</span>
+                    <span style={linkStyle} onClick={() => onStartEditing(msg)}>Edit</span>
+                  </>
+                }
+              </>
+            ) : (
+              <>
+                <span>&nbsp;&middot;&nbsp;</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 />