Improve comments component

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>
 );