From 90e0ced175d838733fcacbb3fa42a140d8123ef0 Mon Sep 17 00:00:00 2001
From: Simon Backx <simon@ghost.org>
Date: Wed, 31 Aug 2022 13:28:37 +0200
Subject: [PATCH] Added separate BlankAvatar component

refs https://github.com/TryGhost/Team/issues/1858
---
 apps/comments-ui/src/components/Avatar.js  | 36 +++++++++++-----------
 apps/comments-ui/src/components/Comment.js |  7 ++---
 apps/comments-ui/src/components/Form.js    |  2 +-
 3 files changed, 22 insertions(+), 23 deletions(-)

diff --git a/apps/comments-ui/src/components/Avatar.js b/apps/comments-ui/src/components/Avatar.js
index e421c7864a..090f3a2daf 100644
--- a/apps/comments-ui/src/components/Avatar.js
+++ b/apps/comments-ui/src/components/Avatar.js
@@ -3,21 +3,24 @@ import AppContext from '../AppContext';
 import {getInitials} from '../utils/helpers';
 import {ReactComponent as AvatarIcon} from '../images/icons/avatar.svg';
 
-const Avatar = ({comment, size, isBlank}) => {
-    const {member, avatarSaturation} = useContext(AppContext);
-    const dimensionClasses = (size === 'small' ? 'w-6 h-6 sm:w-8 sm:h-8' : 'w-9 h-9 sm:w-[40px] sm:h-[40px]');
+function getDimensionClasses() {
+    return 'w-9 h-9 sm:w-[40px] sm:h-[40px]';
+}
 
-    // When an avatar has been deleted or hidden
-    // todo: move to seperate component
-    if (isBlank) {
-        return (
-            <figure className={`relative ${dimensionClasses}`}>
-                <div className={`flex items-center justify-center rounded-full bg-[rgba(200,200,200,0.3)] ${dimensionClasses}`}>
-                    <AvatarIcon className="stroke-white dark:opacity-70" />
-                </div>
-            </figure>
-        );
-    }
+export const BlankAvatar = () => {
+    const dimensionClasses = getDimensionClasses();
+    return (
+        <figure className={`relative ${dimensionClasses}`}>
+            <div className={`flex items-center justify-center rounded-full bg-[rgba(200,200,200,0.3)] ${dimensionClasses}`}>
+                <AvatarIcon className="stroke-white dark:opacity-70" />
+            </div>
+        </figure>
+    );
+}
+
+export const Avatar = ({comment}) => {
+    const {member, avatarSaturation} = useContext(AppContext);
+    const dimensionClasses = getDimensionClasses();
 
     const memberName = member?.name ?? comment?.member?.name;
 
@@ -72,7 +75,6 @@ const Avatar = ({comment, size, isBlank}) => {
         return getInitials(commentMember.name);
     };
 
-    let initialsClasses = (size === 'small' ? 'text-sm' : 'text-lg');
     let commentMember = (comment ? comment.member : member);
 
     const bgColor = HSLtoString(generateHSL());
@@ -84,7 +86,7 @@ const Avatar = ({comment, size, isBlank}) => {
         <>
             {memberName ?
                 (<div className={`flex items-center justify-center rounded-full ${dimensionClasses}`} style={avatarStyle}>
-                    <p className={`font-sans font-semibold text-white ${initialsClasses}`}>{ commentGetInitials() }</p>
+                    <p className="font-sans font-semibold text-white text-lg">{ commentGetInitials() }</p>
                 </div>) :
                 (<div className={`flex items-center justify-center rounded-full bg-neutral-900 dark:bg-[rgba(255,255,255,0.7)] ${dimensionClasses}`}>
                     <AvatarIcon className="stroke-white dark:stroke-[rgba(0,0,0,0.6)]" />
@@ -99,5 +101,3 @@ const Avatar = ({comment, size, isBlank}) => {
         </figure>
     );
 };
-
-export default Avatar;
diff --git a/apps/comments-ui/src/components/Comment.js b/apps/comments-ui/src/components/Comment.js
index 76c2f66e62..a15a05e917 100644
--- a/apps/comments-ui/src/components/Comment.js
+++ b/apps/comments-ui/src/components/Comment.js
@@ -1,6 +1,6 @@
 import React, {useContext, useState} from 'react';
 import {Transition} from '@headlessui/react';
-import Avatar from './Avatar';
+import {BlankAvatar, Avatar} from './Avatar';
 import Like from './Like';
 import Reply from './Reply';
 import More from './More';
@@ -96,12 +96,11 @@ function UnpublishedComment({comment, openEditMode}) {
         notPublishedMessage = 'This comment has been removed.';
     }
 
-    // TODO: consider swapping this with a seperate avatar component
-    const blankAvatar = (<Avatar isBlank={true} />);
+    const avatar = (<BlankAvatar />);
     const hasReplies = comment.replies && comment.replies.length > 0;
 
     return (
-        <CommentLayout hasReplies={hasReplies} avatar={blankAvatar}>
+        <CommentLayout hasReplies={hasReplies} avatar={avatar}>
             <div className="-mt-[3px] mb-2 flex items-start">
                 <div className="flex h-12 flex-row items-center gap-4 pb-[8px] pr-4">
                     <p className="mt-[4px] font-sans text-[16px] italic leading-normal text-neutral-300 dark:text-[rgba(255,255,255,0.5)]">{notPublishedMessage}</p>
diff --git a/apps/comments-ui/src/components/Form.js b/apps/comments-ui/src/components/Form.js
index 59be73c722..d966be9fd8 100644
--- a/apps/comments-ui/src/components/Form.js
+++ b/apps/comments-ui/src/components/Form.js
@@ -1,7 +1,7 @@
 import React, {useCallback, useContext, useEffect, useRef, useState} from 'react';
 import {Transition} from '@headlessui/react';
 import AppContext from '../AppContext';
-import Avatar from './Avatar';
+import {Avatar} from './Avatar';
 import {useEditor, EditorContent} from '@tiptap/react';
 import {getEditorConfig} from '../utils/editor';
 import {isMobile} from '../utils/helpers';