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,
       };

config/locales/en.yml

@@ -44,6 +44,7 @@ en:
     enabled: 'Enabled'
     disabled: 'Disabled'
     copied: 'Copied!'
+    user_staff: 'Staff'
     buttons:
       new: 'New'
       edit: 'Edit'

package.json

@@ -31,7 +31,7 @@
     "react-dom": "16.9.0",
     "react-gravatar": "2.6.3",
     "react-hook-form": "7.33.1",
-    "react-icons": "4.4.0",
+    "react-icons": "5.0.1",
     "react-infinite-scroller": "1.2.4",
     "react-markdown": "5.0.3",
     "react-redux": "7.1.1",

yarn.lock

@@ -2411,10 +2411,10 @@ react-hook-form@7.33.1:
   resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.33.1.tgz#8c4410e3420788d3b804d62cc4c142915c2e46d0"
   integrity sha512-ydTfTxEJdvgjCZBj5DDXRc58oTEfnFupEwwTAQ9FSKzykEJkX+3CiAkGtAMiZG7IPWHuzgT6AOBfogiKhUvKgg==
 
-react-icons@4.4.0:
-  version "4.4.0"
-  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.4.0.tgz#a13a8a20c254854e1ec9aecef28a95cdf24ef703"
-  integrity sha512-fSbvHeVYo/B5/L4VhB7sBA1i2tS8MkT0Hb9t2H1AVPkwGfVHLJCqyr2Py9dKMxsyM63Eng1GkdZfbWj+Fmv8Rg==
+react-icons@5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-5.0.1.tgz#1694e11bfa2a2888cab47dcc30154ce90485feee"
+  integrity sha512-WqLZJ4bLzlhmsvme6iFdgO8gfZP17rfjYEJ2m9RsZjZ+cc4k1hTzknEz63YS1MeT50kVzoa1Nz36f4BEx+Wigw==
 
 react-infinite-scroller@1.2.4:
   version "1.2.4"