Add gravatar picture to comments

app/javascript/components/Comments/Comment.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import Gravatar from 'react-gravatar';
 
 import NewComment from './NewComment';
 import Separator from '../shared/Separator';
@@ -12,6 +13,7 @@ interface Props {
   id: number;
   body: string;
   userFullName: string;
+  userEmail: string;
   updatedAt: string;
 
   replyForm: ReplyFormState;
@@ -27,6 +29,7 @@ const Comment = ({
   id,
   body,
   userFullName,
+  userEmail,
   updatedAt,
 
   replyForm,
@@ -39,6 +42,7 @@ const Comment = ({
 }: Props) => (
   <div className="comment">
     <div className="commentHeader">
+      <Gravatar email={userEmail} size={24} className="gravatar" />
       <span className="commentAuthor">{userFullName}</span>
     </div>
     <p className="commentBody">{body}</p>

app/javascript/interfaces/IComment.ts

@@ -3,6 +3,7 @@ interface IComment {
   body: string;
   parentId: number;
   userFullName: string;
+  userEmail: string;
   updatedAt: string;
 }
 

app/javascript/interfaces/json/IComment.ts

@@ -3,6 +3,7 @@ interface ICommentJSON {
   body: string;
   parent_id: number;
   user_full_name: string;
+  user_email: string;
   updated_at: string;
 }
 

app/javascript/reducers/commentReducer.ts

@@ -10,6 +10,7 @@ const initialState: IComment = {
   body: '',
   parentId: null,
   userFullName: '<Unknown user>',
+  userEmail: 'example@example.com',
   updatedAt: undefined,
 };
 
@@ -24,6 +25,7 @@ const commentReducer = (
         body: action.comment.body,
         parentId: action.comment.parent_id,
         userFullName: action.comment.user_full_name,
+        userEmail: action.comment.user_email,
         updatedAt: action.comment.updated_at,
       };
 

app/javascript/stylesheets/components/Comments.scss

@@ -45,6 +45,12 @@
 
     .commentHeader {
       @extend .titleText;
+
+      .commentAuthor {
+        @extend .ml-2;
+
+        vertical-align: middle;
+      }
     }
 
     .commentBody {