From be8f003d70756584b15ddf27fdf176bc74bb0af6 Mon Sep 17 00:00:00 2001
From: riggraz <riccardo.graziosi97@gmail.com>
Date: Mon, 30 Sep 2019 23:28:52 +0200
Subject: [PATCH] Add gravatar picture to comments

---
 app/controllers/comments_controller.rb             | 14 +++++++++++---
 app/javascript/components/Comments/Comment.tsx     |  4 ++++
 app/javascript/interfaces/IComment.ts              |  1 +
 app/javascript/interfaces/json/IComment.ts         |  1 +
 app/javascript/reducers/commentReducer.ts          |  2 ++
 .../stylesheets/components/Comments.scss           |  6 ++++++
 6 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/app/controllers/comments_controller.rb b/app/controllers/comments_controller.rb
index 4a8ab393..1828e96a 100644
--- a/app/controllers/comments_controller.rb
+++ b/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}),
-        status: :created
+      render json: comment.attributes.merge(
+        { 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)
diff --git a/app/javascript/components/Comments/Comment.tsx b/app/javascript/components/Comments/Comment.tsx
index 737d9824..3886f529 100644
--- a/app/javascript/components/Comments/Comment.tsx
+++ b/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>
diff --git a/app/javascript/interfaces/IComment.ts b/app/javascript/interfaces/IComment.ts
index 42f51017..fa0bdb4f 100644
--- a/app/javascript/interfaces/IComment.ts
+++ b/app/javascript/interfaces/IComment.ts
@@ -3,6 +3,7 @@ interface IComment {
   body: string;
   parentId: number;
   userFullName: string;
+  userEmail: string;
   updatedAt: string;
 }
 
diff --git a/app/javascript/interfaces/json/IComment.ts b/app/javascript/interfaces/json/IComment.ts
index 4d5da8f5..50be0730 100644
--- a/app/javascript/interfaces/json/IComment.ts
+++ b/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;
 }
 
diff --git a/app/javascript/reducers/commentReducer.ts b/app/javascript/reducers/commentReducer.ts
index 77f1193b..7328bef2 100644
--- a/app/javascript/reducers/commentReducer.ts
+++ b/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,
       };
 
diff --git a/app/javascript/stylesheets/components/Comments.scss b/app/javascript/stylesheets/components/Comments.scss
index 8a7807fe..2ca835f3 100644
--- a/app/javascript/stylesheets/components/Comments.scss
+++ b/app/javascript/stylesheets/components/Comments.scss
@@ -45,6 +45,12 @@
 
     .commentHeader {
       @extend .titleText;
+
+      .commentAuthor {
+        @extend .ml-2;
+
+        vertical-align: middle;
+      }
     }
 
     .commentBody {