From 7493cda1a6a93e6a44b14c5669a1028685bf466f Mon Sep 17 00:00:00 2001
From: James Morris <moreofmorris@users.noreply.github.com>
Date: Tue, 5 Jul 2022 16:16:48 +0100
Subject: [PATCH] Working avatars for comments but needs refactor

---
 apps/comments-ui/src/components/Comment.js | 82 ++++++++++------------
 1 file changed, 36 insertions(+), 46 deletions(-)

diff --git a/apps/comments-ui/src/components/Comment.js b/apps/comments-ui/src/components/Comment.js
index 335f279dde..6cc5b969ba 100644
--- a/apps/comments-ui/src/components/Comment.js
+++ b/apps/comments-ui/src/components/Comment.js
@@ -1,58 +1,48 @@
-import Avatar from './Avatar';
 import {formatRelativeTime} from '../utils/helpers';
-import {ReactComponent as MoreIcon} from '../images/icons/more.svg';
-import React from 'react';
-import AppContext from '../AppContext';
-import AuthorContextMenu from './modals/AuthorContextMenu';
 
-class Comment extends React.Component {
-    static contextType = AppContext;
+function Comment(props) {
+    const comment = props.comment;
 
-    constructor(props) {
-        super(props);
-        this.state = {
-            isContextMenuOpen: false
-        };
+    const html = {__html: comment.html};
 
-        this.toggleContextMenu = this.toggleContextMenu.bind(this);
+    function getInitials() {
+        if (!comment.member || !comment.member.name) {
+            return '';
+        }
+        const parts = comment.member.name.split(' ');
+
+        if (parts.length === 0) {
+            return '';
+        }
+
+        if (parts.length === 1) {
+            return parts[0].substring(0, 1);
+        }
+
+        return parts[0].substring(0, 1) + parts[parts.length - 1].substring(0, 1);
     }
-
-    toggleContextMenu() {
-        this.setState(state => ({
-            isContextMenuOpen: !state.isContextMenuOpen
-        }));
-    }
-
-    render() {
-        const comment = this.props.comment;
-
-        const html = {__html: comment.html};
-
-        return (
-            <div className="flex mb-4">
-                <div>
-                    <div className="flex mb-2 space-x-4 justify-start items-center">
-                        <Avatar />
-
-                        <div>
-                            <h4 className="text-lg font-sans font-bold mb-1 tracking-tight dark:text-neutral-300">{comment.member.name}</h4>
-                            <h6 className="text-xs text-neutral-400 font-sans">{formatRelativeTime(comment.created_at)}</h6>
+    
+    return (
+        <div className="flex mb-4">
+            <div>
+                <div className="flex mb-2 space-x-4 justify-start items-center">
+                    <figure className="relative w-10 h-10">
+                        <div className="flex justify-center items-center w-10 h-10 rounded-full bg-black">
+                            <p className="text-white font-sans font-semibold">{ getInitials() }</p>
                         </div>
-                        {/* <h6 className="text-sm text-neutral-400 font-sans">{comment.member.bio}</h6> */}
-                        {/* <div className="text-sm text-neutral-400 font-sans font-normal">
-                            {formatRelativeTime(comment.created_at)}
-                        </div> */}
+                        <img className="absolute top-0 left-0 w-10 h-10 rounded-full" src={comment.member.avatar_image} alt="Avatar"/>
+                    </figure>
+                    <div>
+                        <h4 className="text-lg font-sans font-bold mb-1 tracking-tight dark:text-neutral-300">{comment.member.name}</h4>
+                        <h6 className="text-xs text-neutral-400 font-sans">{formatRelativeTime(comment.created_at)}</h6>
                     </div>
-                    <div className="ml-14 mb-4 font-sans leading-normal dark:text-neutral-300">
-                        <p dangerouslySetInnerHTML={html} className="whitespace-pre-wrap"></p>
-                    </div>
-
-                    {/*</div>button><MoreIcon className='gh-comments-icon gh-comments-icon-more' /></button>
-                    {this.state.isContextMenuOpen ? <AuthorContextMenu /> : null}*/}
+                </div>
+                <div className="ml-14 mb-4 font-sans leading-normal dark:text-neutral-300">
+                    <p dangerouslySetInnerHTML={html} className="whitespace-pre-wrap"></p>
                 </div>
             </div>
-        );
-    }
+        </div>
+    );
 }
   
 export default Comment;