refactor: optimize Avatar component for better performance and readability

src/components/common/Avatar.jsx

@@ -1,6 +1,22 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
+
+// A simple hash function to generate a deterministic value from the name
+function hashString(str) {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    const char = str.charCodeAt(i);
+    hash = (hash << 5) - hash + char;
+  }
+  return hash;
+}
 
 const Avatar = ({ firstName, lastName, size='sm' }) => {
+  // Combine firstName and lastName to create a unique string for hashing
+  const fullName = `${firstName} ${lastName}`;
+
+  const [bgClass, setBgClass] = useState("");
+
+  // Function to generate the avatar text
   function generateAvatarText(firstName, lastName) {
     if (!firstName) return "";
     if (!lastName || lastName.trim() === "") {
@@ -9,7 +25,8 @@ const Avatar = ({ firstName, lastName, size='sm' }) => {
     return `${firstName[0]}${lastName[0]}`.toUpperCase();
   }
 
-  function getRandomBootstrapBgClass() {
+  // Function to map the hash value to a Bootstrap background class
+  function getBgClassFromHash(hash) {
     const bgClasses = [
       "bg-primary",
       "bg-secondary",
@@ -21,21 +38,27 @@ const Avatar = ({ firstName, lastName, size='sm' }) => {
       "text-light",
     ];
 
-    const randomIndex = Math.floor(Math.random() * bgClasses.length);
+    // Use the hash value to pick a background color from the array
-    return bgClasses[randomIndex];
+    const index = Math.abs(hash % bgClasses.length);
+    return bgClasses[index];
   }
+
+  useEffect(() => {
+    // Generate the hash from the full name and map it to a background class
+    const hash = hashString(fullName);
+    setBgClass(getBgClassFromHash(hash));
+  }, [fullName]); // Re-run if the fullName changes
+
   return (
-    <>
+    <div className="avatar-wrapper p-1">
-      <div className="avatar-wrapper p-1">
+      <div className={`avatar avatar-${size} me-2`}>
-        <div className={`avatar avatar-${size} me-2`}>
+        <span
-          <span
+          className={`avatar-initial rounded-circle ${bgClass}`}
-            className={`avatar-initial rounded-circle ${getRandomBootstrapBgClass()}`}
+        >
-          >
+          {generateAvatarText(firstName, lastName)}
-            {generateAvatarText(firstName, lastName)}
+        </span>
-          </span>
-        </div>
       </div>
-    </>
+    </div>
   );
 };