Add gravatar picture to comments

app/controllers/comments_controller.rb

@@ -3,9 +3,16 @@ class CommentsController < ApplicationController
   
   def index
     comments = Comment
+      .select(
+        :id,
+        :body,
+        :parent_id,
+        :updated_at,
+        'users.full_name as user_full_name',
+        'users.email as user_email',
+      )
       .where(post_id: params[:post_id])
       .left_outer_joins(:user)
-      .select('comments.id, comments.body, comments.parent_id, comments.updated_at, users.full_name as user_full_name')
       .order(updated_at: :desc)
 
     render json: comments
@@ -15,8 +22,9 @@ class CommentsController < ApplicationController
     comment = Comment.new(comment_params)
 
     if comment.save
-      render json: comment.attributes.merge({ user_full_name: current_user.full_name}),
+      render json: comment.attributes.merge(
-        status: :created
+        { user_full_name: current_user.full_name, user_email: current_user.email}
+      ), status: :created
     else
       render json: {
         error: I18n.t('errors.comment.create', message: comment.errors.full_messages)

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 {