From 38345f9c42a205277ad108c2d1d3ebfae5f35a87 Mon Sep 17 00:00:00 2001
From: riggraz <riccardo.graziosi97@gmail.com>
Date: Fri, 20 Sep 2019 18:43:24 +0200
Subject: [PATCH] Improve comments component

---
 .../components/Comments/Comment.tsx           |  7 ++++
 .../components/Comments/CommentList.tsx       |  8 +++++
 .../components/Comments/CommentsP.tsx         | 11 +++++-
 .../components/Comments/NewComment.tsx        | 36 +++++++++++++------
 app/javascript/components/Post/PostP.tsx      |  2 ++
 app/javascript/components/shared/Button.tsx   |  2 +-
 app/javascript/components/shared/Spinner.tsx  |  2 +-
 .../stylesheets/general/_components.scss      |  6 ++++
 .../stylesheets/general/_index.scss           |  4 +++
 9 files changed, 64 insertions(+), 14 deletions(-)

diff --git a/app/javascript/components/Comments/Comment.tsx b/app/javascript/components/Comments/Comment.tsx
index b489fe18..647fa6da 100644
--- a/app/javascript/components/Comments/Comment.tsx
+++ b/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
diff --git a/app/javascript/components/Comments/CommentList.tsx b/app/javascript/components/Comments/CommentList.tsx
index 674409f1..f2b3fe4e 100644
--- a/app/javascript/components/Comments/CommentList.tsx
+++ b/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>
         );
diff --git a/app/javascript/components/Comments/CommentsP.tsx b/app/javascript/components/Comments/CommentsP.tsx
index 4efd3c5f..58fcb7c6 100644
--- a/app/javascript/components/Comments/CommentsP.tsx
+++ b/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>
     );
diff --git a/app/javascript/components/Comments/NewComment.tsx b/app/javascript/components/Comments/NewComment.tsx
index 31494522..f6f230b1 100644
--- a/app/javascript/components/Comments/NewComment.tsx
+++ b/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>
 );
 
diff --git a/app/javascript/components/Post/PostP.tsx b/app/javascript/components/Post/PostP.tsx
index ada2766e..c09d7d8a 100644
--- a/app/javascript/components/Post/PostP.tsx
+++ b/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>
diff --git a/app/javascript/components/shared/Button.tsx b/app/javascript/components/shared/Button.tsx
index d4b79522..43a74b74 100644
--- a/app/javascript/components/shared/Button.tsx
+++ b/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;
diff --git a/app/javascript/components/shared/Spinner.tsx b/app/javascript/components/shared/Spinner.tsx
index 603b0d10..a21164ca 100644
--- a/app/javascript/components/shared/Spinner.tsx
+++ b/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>
 );
diff --git a/app/javascript/stylesheets/general/_components.scss b/app/javascript/stylesheets/general/_components.scss
index e361eb40..478bb5b6 100644
--- a/app/javascript/stylesheets/general/_components.scss
+++ b/app/javascript/stylesheets/general/_components.scss
@@ -1,3 +1,9 @@
+a {
+  color: #333;
+
+  &:hover { color: inherit; }
+}
+
 .card {
   @extend .card;
 
diff --git a/app/javascript/stylesheets/general/_index.scss b/app/javascript/stylesheets/general/_index.scss
index 494e78e2..fea8515e 100644
--- a/app/javascript/stylesheets/general/_index.scss
+++ b/app/javascript/stylesheets/general/_index.scss
@@ -19,4 +19,8 @@
   margin-top: auto;
   margin-bottom: auto;
   margin-right: 4px;
+}
+
+.loginInfo {
+  text-decoration: underline;
 }
\ No newline at end of file