From ef84ab2f407f485542968b47d5e0b311b50b609e Mon Sep 17 00:00:00 2001
From: Simon Backx <simon@ghost.org>
Date: Fri, 8 Jul 2022 13:21:37 +0200
Subject: [PATCH] Moved Avatar to new style

---
 apps/comments-ui/src/components/Avatar.js | 74 +++++++++++------------
 1 file changed, 36 insertions(+), 38 deletions(-)

diff --git a/apps/comments-ui/src/components/Avatar.js b/apps/comments-ui/src/components/Avatar.js
index a948e8ae0c..9329d76f2b 100644
--- a/apps/comments-ui/src/components/Avatar.js
+++ b/apps/comments-ui/src/components/Avatar.js
@@ -1,76 +1,74 @@
-import React from 'react';
+import React, {useContext} from 'react';
 import AppContext from '../AppContext';
 import {getInitials} from '../utils/helpers';
 
-class Avatar extends React.Component {
-    static contextType = AppContext;
-    
-    getHashOfString(str) {
+const Avatar = (props) => {
+    const {member} = useContext(AppContext);
+
+    const getHashOfString = (str) => {
         let hash = 0;
         for (let i = 0; i < str.length; i++) {
             hash = str.charCodeAt(i) + ((hash << 5) - hash);
         }
         hash = Math.abs(hash);
         return hash;
-    }
+    };
 
-    normalizeHash(hash, min, max) {
+    const normalizeHash = (hash, min, max) => {
         return Math.floor((hash % (max - min)) + min);
-    }
+    };
 
-    generateHSL() {
-        let commentMember = (this.props.comment ? this.props.comment.member : this.context.member);
+    const generateHSL = () => {
+        let commentMember = (props.comment ? props.comment.member : member);
 
         if (!commentMember || !commentMember.name) {
             return [0,0,10];
         }
 
-        const saturation = isNaN(this.props.saturation) ? 50 : this.props.saturation;
+        const saturation = isNaN(props.saturation) ? 50 : props.saturation;
 
         const hRange = [0, 360];
         const lRangeTop = Math.round(saturation / (100 / 30)) + 30;
         const lRangeBottom = lRangeTop - 20;
         const lRange = [lRangeBottom, lRangeTop];
 
-        const hash = this.getHashOfString(commentMember.name);
-        const h = this.normalizeHash(hash, hRange[0], hRange[1]);
-        const l = this.normalizeHash(hash, lRange[0], lRange[1]);
+        const hash = getHashOfString(commentMember.name);
+        const h = normalizeHash(hash, hRange[0], hRange[1]);
+        const l = normalizeHash(hash, lRange[0], lRange[1]);
         
         return [h, saturation, l];
-    }
+    };
 
-    HSLtoString(hsl) {
+    const HSLtoString = (hsl) => {
         return `hsl(${hsl[0]}, ${hsl[1]}%, ${hsl[2]}%)`;
-    }
+    };
 
-    getInitials() {
-        let commentMember = (this.props.comment ? this.props.comment.member : this.context.member);
+    const commentGetInitials = () => {
+        let commentMember = (props.comment ? props.comment.member : member);
 
         if (!commentMember || !commentMember.name) {
             return getInitials('Anonymous');
         }
         return getInitials(commentMember.name);
-    }
+    };
 
-    render() {
-        let dimensionClasses = (this.props.size === 'small' ? 'w-8 h-8' : 'w-11 h-11');
-        let initialsClasses = (this.props.size === 'small' ? 'text-sm' : 'text-lg');
-        let commentMember = (this.props.comment ? this.props.comment.member : this.context.member);
+    let dimensionClasses = (props.size === 'small' ? 'w-8 h-8' : 'w-11 h-11');
+    let initialsClasses = (props.size === 'small' ? 'text-sm' : 'text-lg');
+    let commentMember = (props.comment ? props.comment.member : member);
 
-        const bgColor = this.HSLtoString(this.generateHSL());
-        const avatarStyle = {
-            background: bgColor
-        };
+    const bgColor = HSLtoString(generateHSL());
+    const avatarStyle = {
+        background: bgColor
+    };
 
-        return (
-            <figure className={`relative ${dimensionClasses}`}>
-                <div className={`flex justify-center items-center rounded-full ${dimensionClasses}`} style={avatarStyle}>
-                    <p className={`text-white font-sans font-semibold ${initialsClasses}`}>{ this.getInitials() }</p>
-                </div>
-                <img className={`absolute top-0 left-0 rounded-full ${dimensionClasses}`} src={commentMember.avatar_image} alt="Avatar"/>
-            </figure>
-        );
-    }
-}
+    return (
+        <figure className={`relative ${dimensionClasses}`}>
+            <div className={`flex justify-center items-center rounded-full ${dimensionClasses}`} style={avatarStyle}>
+                <p className={`text-white font-sans font-semibold ${initialsClasses}`}>{ commentGetInitials() }</p>
+            </div>
+            <img className={`absolute top-0 left-0 rounded-full ${dimensionClasses}`} src={commentMember.avatar_image} alt="Avatar"/>
+        </figure>
+    );
+};
 
 export default Avatar;