Add gravatar image to new comment form

app/javascript/components/Comments/Comment.tsx

@@ -23,6 +23,7 @@ interface Props {
 
   isLoggedIn: boolean;
   isPowerUser: boolean;
+  currentUserEmail: string;
 }
 
 const Comment = ({
@@ -39,6 +40,7 @@ const Comment = ({
 
   isLoggedIn,
   isPowerUser,
+  currentUserEmail,
 }: Props) => (
   <div className="comment">
     <div className="commentHeader">
@@ -73,6 +75,7 @@ const Comment = ({
           handleSubmit={handleSubmitComment}
 
           isLoggedIn={isLoggedIn}
+          userEmail={currentUserEmail}
         />
         :
         null

app/javascript/components/Comments/CommentList.tsx

@@ -17,6 +17,7 @@ interface Props {
 
   isLoggedIn: boolean;
   isPowerUser: boolean;
+  userEmail: string;
 }
 
 const CommentList = ({
@@ -31,6 +32,7 @@ const CommentList = ({
 
   isLoggedIn,
   isPowerUser,
+  userEmail,
 }: Props) => (
   <React.Fragment>
     {comments.map((comment, i) => {
@@ -50,6 +52,7 @@ const CommentList = ({
 
               isLoggedIn={isLoggedIn}
               isPowerUser={isPowerUser}
+              currentUserEmail={userEmail}
             />
 
             <CommentList
@@ -64,6 +67,7 @@ const CommentList = ({
 
               isLoggedIn={isLoggedIn}
               isPowerUser={isPowerUser}
+              userEmail={userEmail}
             />
           </div>
         );

app/javascript/components/Comments/CommentsP.tsx

@@ -12,6 +12,7 @@ interface Props {
   postId: number;
   isLoggedIn: boolean;
   isPowerUser: boolean;
+  userEmail: string;
   authenticityToken: string;
 
   comments: Array<IComment>;
@@ -48,6 +49,7 @@ class CommentsP extends React.Component<Props> {
     const {
       isLoggedIn,
       isPowerUser,
+      userEmail,
 
       comments,
       replyForms,
@@ -75,6 +77,7 @@ class CommentsP extends React.Component<Props> {
           handleSubmit={this._handleSubmitComment}
 
           isLoggedIn={isLoggedIn}
+          userEmail={userEmail}
         />
 
         { areLoading ? <Spinner /> : null }
@@ -94,6 +97,7 @@ class CommentsP extends React.Component<Props> {
           level={1}
           isLoggedIn={isLoggedIn}
           isPowerUser={isPowerUser}
+          userEmail={userEmail}
         />
       </div>
     );

app/javascript/components/Comments/NewComment.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import Gravatar from 'react-gravatar';
 
 import Button from '../shared/Button';
 import Spinner from '../shared/Spinner';
@@ -13,6 +14,7 @@ interface Props {
   handleSubmit(body: string, parentId: number): void;
 
   isLoggedIn: boolean;
+  userEmail: string;
 }
 
 const NewComment = ({
@@ -24,12 +26,14 @@ const NewComment = ({
   handleSubmit,
 
   isLoggedIn,
+  userEmail,
 }: Props) => (
   <React.Fragment>
     <div className="newCommentForm">
       {
         isLoggedIn ?
           <React.Fragment>
+            <Gravatar email={userEmail} size={36} className="currentUserAvatar" />
             <textarea
               value={body}
               onChange={handleChange}

app/javascript/components/Post/PostP.tsx

@@ -135,6 +135,7 @@ class PostP extends React.Component<Props> {
             postId={this.props.postId}
             isLoggedIn={isLoggedIn}
             isPowerUser={isPowerUser}
+            userEmail={userEmail}
             authenticityToken={authenticityToken}
           />
         </div>

app/javascript/stylesheets/components/Comments.scss

@@ -4,6 +4,13 @@
       .d-flex,
       .my-3;
 
+    .currentUserAvatar {
+      @extend
+        .gravatar,
+        .align-self-end,
+        .mr-2;
+    }
+
     .newCommentBody {
       @extend
         .form-control,