Improve comments component

app/javascript/components/Comments/Comment.tsx

@@ -20,6 +20,8 @@ interface Props {
   handleToggleCommentReply(): void;
   handleCommentReplyBodyChange(e: FormEvent): void;
   handleSubmitComment(body: string, parentId: number): void;
+
+  isLoggedIn: boolean;
 }
 
 const Comment = ({
@@ -34,6 +36,8 @@ const Comment = ({
   handleToggleCommentReply,
   handleCommentReplyBodyChange,
   handleSubmitComment,
+
+  isLoggedIn,
 }: Props) => (
   <div className="comment">
     <div className="commentHeader">
@@ -52,8 +56,11 @@ const Comment = ({
         <NewComment
           body={reply.body}
           parentId={id}
+          isSubmitting={reply.isSubmitting}
           handleChange={handleCommentReplyBodyChange}
           handleSubmit={handleSubmitComment}
+
+          isLoggedIn={isLoggedIn}
         />
         :
         null

app/javascript/components/Comments/CommentList.tsx

@@ -15,6 +15,8 @@ interface Props {
   toggleCommentReply(commentId: number): void;
   setCommentReplyBody(commentId: number, body: string): void;
   handleSubmitComment(body: string, parentId: number): void;
+
+  isLoggedIn: boolean;
 }
 
 const CommentList = ({
@@ -26,6 +28,8 @@ const CommentList = ({
   toggleCommentReply,
   setCommentReplyBody,
   handleSubmitComment,
+
+  isLoggedIn,
 }: Props) => (
   <React.Fragment>
     {comments.map((comment, i) => {
@@ -43,6 +47,8 @@ const CommentList = ({
               }
               handleSubmitComment={handleSubmitComment}
               {...comment}
+
+              isLoggedIn={isLoggedIn}
             />
 
             <CommentList
@@ -54,6 +60,8 @@ const CommentList = ({
               toggleCommentReply={toggleCommentReply}
               setCommentReplyBody={setCommentReplyBody}
               handleSubmitComment={handleSubmitComment}
+
+              isLoggedIn={isLoggedIn}
             />
           </div>
         );

app/javascript/components/Comments/CommentsP.tsx

@@ -11,6 +11,7 @@ import { CommentRepliesState } from '../../reducers/commentRepliesReducer';
 
 interface Props {
   postId: number;
+  isLoggedIn: boolean;
   authenticityToken: string;
 
   comments: Array<IComment>;
@@ -45,6 +46,8 @@ class CommentsP extends React.Component<Props> {
 
   render() {
     const {
+      isLoggedIn,
+
       comments,
       replies,
       areLoading,
@@ -55,17 +58,22 @@ class CommentsP extends React.Component<Props> {
       submitComment,
     } = this.props;
 
+    const postReply = replies.find(reply => reply.commentId === -1);
+
     return (
       <div className="commentsContainer">
         <NewComment
-          body={replies.find(reply => reply.commentId === -1) && replies.find(reply => reply.commentId === -1).body}
+          body={postReply && postReply.body}
           parentId={null}
+          isSubmitting={postReply && postReply.isSubmitting}
           handleChange={
             (e: FormEvent) => (
               setCommentReplyBody(-1, (e.target as HTMLTextAreaElement).value)
             )
           }
           handleSubmit={this._handleSubmitComment}
+
+          isLoggedIn={isLoggedIn}
         />
 
         { areLoading ? <Spinner /> : null }
@@ -83,6 +91,7 @@ class CommentsP extends React.Component<Props> {
           handleSubmitComment={this._handleSubmitComment}
           parentId={null}
           level={1}
+          isLoggedIn={isLoggedIn}
         />
       </div>
     );

app/javascript/components/Comments/NewComment.tsx

@@ -2,32 +2,46 @@ import * as React from 'react';
 import { FormEvent } from 'react';
 
 import Button from '../shared/Button';
+import Spinner from '../shared/Spinner';
 
 interface Props {
   body: string;
   parentId: number;
+  isSubmitting: boolean;
   handleChange(e: FormEvent): void;
   handleSubmit(body: string, parentId: number): void;
+
+  isLoggedIn: boolean;
 }
 
 const NewComment = ({
   body,
   parentId,
+  isSubmitting,
   handleChange,
   handleSubmit,
+
+  isLoggedIn,
 }: Props) => (
   <div className="newCommentForm">
-    <textarea
-      value={body}
-      onChange={handleChange}
-      placeholder="Leave a comment"
-      className="newCommentBody"
-    />
-    <Button
-      onClick={() => handleSubmit(body, parentId)}
-      className="submitCommentButton">
-      Submit
-    </Button>
+    {
+      isLoggedIn ?
+        <React.Fragment>
+          <textarea
+            value={body}
+            onChange={handleChange}
+            placeholder="Leave a comment"
+            className="newCommentBody"
+          />
+          <Button
+            onClick={() => handleSubmit(body, parentId)}
+            className="submitCommentButton">
+            { isSubmitting ? <Spinner /> : 'Submit' }
+          </Button>
+        </React.Fragment>
+      :
+        <a href="/users/sign_in" className="loginInfo">You need to log in to post comments.</a>
+    }
   </div>
 );
 

app/javascript/components/Post/PostP.tsx

@@ -36,6 +36,7 @@ class PostP extends React.Component<Props> {
       post,
       postStatuses,
 
+      isLoggedIn,
       isPowerUser,
       authenticityToken,
 
@@ -73,6 +74,7 @@ class PostP extends React.Component<Props> {
 
           <Comments
             postId={this.props.postId}
+            isLoggedIn={isLoggedIn}
             authenticityToken={authenticityToken}
           />
         </div>

app/javascript/components/shared/Button.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { FormEvent } from 'react';
 
 interface Props {
-  children: string;
+  children: any;
   onClick(e: FormEvent): void;
   className?: string;
   outline?: boolean;

app/javascript/components/shared/Spinner.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 const Spinner = () => (
-  <div className="spinner-border d-block mx-auto" role="status">
+  <div className="spinner-grow d-block mx-auto" role="status">
     <span className="sr-only">Loading...</span>
   </div>
 );

app/javascript/stylesheets/general/_components.scss

@@ -1,3 +1,9 @@
+a {
+  color: #333;
+
+  &:hover { color: inherit; }
+}
+
 .card {
   @extend .card;
 

app/javascript/stylesheets/general/_index.scss

@@ -19,4 +19,8 @@
   margin-top: auto;
   margin-bottom: auto;
   margin-right: 4px;
+}
+
+.loginInfo {
+  text-decoration: underline;
 }