Add staff badge near comment author (#280)

app/assets/stylesheets/common/_index.scss

@@ -276,4 +276,9 @@ body {
     
     vertical-align: middle;
   }
+}
+
+.staffIcon {
+  font-size: 24px;
+  margin: 0 4px;
 }

app/controllers/comments_controller.rb

@@ -12,6 +12,7 @@ class CommentsController < ApplicationController
         :updated_at,
         'users.full_name as user_full_name',
         'users.email as user_email',
+        'users.role as user_role',
       )
       .where(post_id: params[:post_id])
       .left_outer_joins(:user)
@@ -28,7 +29,7 @@ class CommentsController < ApplicationController
       SendNotificationForCommentWorkflow.new(comment: @comment).run
 
       render json: @comment.attributes.merge(
-        { user_full_name: current_user.full_name, user_email: current_user.email }
+        { user_full_name: current_user.full_name, user_email: current_user.email, user_role: current_user.role_before_type_cast }
       ), status: :created
     else
       render json: {
@@ -43,7 +44,7 @@ class CommentsController < ApplicationController
 
     if @comment.update(comment_update_params)
       render json: @comment.attributes.merge(
-        { user_full_name: @comment.user.full_name, user_email: @comment.user.email }
+        { user_full_name: @comment.user.full_name, user_email: @comment.user.email, user_role: @comment.user.role_before_type_cast }
       )
     else
       render json: {

app/javascript/components/Comments/Comment.tsx

@@ -9,6 +9,7 @@ import { ReplyFormState } from '../../reducers/replyFormReducer';
 
 import CommentEditForm from './CommentEditForm';
 import CommentFooter from './CommentFooter';
+import { StaffIcon } from '../common/Icons';
 
 interface Props {
   id: number;
@@ -16,6 +17,7 @@ interface Props {
   isPostUpdate: boolean;
   userFullName: string;
   userEmail: string;
+  userRole: number;
   createdAt: string;
   updatedAt: string;
 
@@ -68,6 +70,7 @@ class Comment extends React.Component<Props, State> {
       isPostUpdate,
       userFullName,
       userEmail,
+      userRole,
       createdAt,
       updatedAt,
     
@@ -88,6 +91,9 @@ class Comment extends React.Component<Props, State> {
         <div className="commentHeader">
           <Gravatar email={userEmail} size={28} className="gravatar" />
           <span className="commentAuthor">{userFullName}</span>
+          
+          { userRole > 0 && <StaffIcon /> }
+
           {
             isPostUpdate ?
               <span className="postUpdateBadge">

app/javascript/components/common/Icons.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import I18n from 'i18n-js';
 
 import { BsReply } from 'react-icons/bs';
 import { FiEdit, FiDelete } from 'react-icons/fi';
@@ -7,6 +8,7 @@ import { TbLock, TbLockOpen } from 'react-icons/tb';
 import { MdContentCopy, MdDone, MdOutlineArrowBack } from 'react-icons/md';
 import { GrTest } from 'react-icons/gr';
 import { MdOutlineLibraryBooks } from "react-icons/md";
+import { MdVerified } from "react-icons/md";
 
 export const EditIcon = () => <FiEdit />;
 
@@ -28,4 +30,10 @@ export const BackIcon = () => <MdOutlineArrowBack />;
 
 export const ReplyIcon = () => <BsReply />;
 
-export const LearnMoreIcon = () => <MdOutlineLibraryBooks />;
+export const LearnMoreIcon = () => <MdOutlineLibraryBooks />;
+
+export const StaffIcon = () => (
+  <span title={I18n.t('common.user_staff')} className="staffIcon">
+    <MdVerified />
+  </span>
+);

app/javascript/interfaces/IComment.ts

@@ -5,6 +5,7 @@ interface IComment {
   isPostUpdate: boolean;
   userFullName: string;
   userEmail: string;
+  userRole: number;
   createdAt: string;
   updatedAt: string;
 }

app/javascript/interfaces/json/IComment.ts

@@ -5,6 +5,7 @@ interface ICommentJSON {
   is_post_update: boolean;
   user_full_name: string;
   user_email: string;
+  user_role: number;
   created_at: string;
   updated_at: string;
 }

app/javascript/reducers/commentReducer.ts

@@ -17,6 +17,7 @@ const initialState: IComment = {
   isPostUpdate: false,
   userFullName: '<Unknown user>',
   userEmail: 'example@example.com',
+  userRole: 0,
   createdAt: undefined,
   updatedAt: undefined,
 };
@@ -35,6 +36,7 @@ const commentReducer = (
         isPostUpdate: action.comment.is_post_update,
         userFullName: action.comment.user_full_name,
         userEmail: action.comment.user_email,
+        userRole: action.comment.user_role,
         createdAt: action.comment.created_at,
         updatedAt: action.comment.updated_at,
       };