From a07422053e581d4c18696e60ef09b31241a79f41 Mon Sep 17 00:00:00 2001 From: Vaibhav Surve Date: Wed, 16 Apr 2025 11:11:39 +0530 Subject: [PATCH 1/6] remove redundant type attribute from button in Dashboard component --- src/components/Dashboard/Dashboard.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/Dashboard/Dashboard.jsx b/src/components/Dashboard/Dashboard.jsx index 46bd2197..fd970c1a 100644 --- a/src/components/Dashboard/Dashboard.jsx +++ b/src/components/Dashboard/Dashboard.jsx @@ -200,7 +200,6 @@ const Dashboard = () => {
+
+ + -- 2.43.0 From de5337e5568ce5ba08076abe2be2bbd29eca064b Mon Sep 17 00:00:00 2001 From: Vaibhav Surve Date: Wed, 16 Apr 2025 15:55:28 +0530 Subject: [PATCH 5/6] refactor: optimize Avatar component for better performance and readability --- src/components/common/Avatar.jsx | 51 +++++++++++++++++++++++--------- 1 file changed, 37 insertions(+), 14 deletions(-) diff --git a/src/components/common/Avatar.jsx b/src/components/common/Avatar.jsx index 900c9403..537af159 100644 --- a/src/components/common/Avatar.jsx +++ b/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); - return bgClasses[randomIndex]; + // Use the hash value to pick a background color from the array + 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 ( - <> -
-
- - {generateAvatarText(firstName, lastName)} - -
+
+
+ + {generateAvatarText(firstName, lastName)} +
- +
); }; -- 2.43.0 From 08141a4a23e6a43c9dbb9efd1f1f57c2f2f89653 Mon Sep 17 00:00:00 2001 From: Vaibhav Surve Date: Wed, 16 Apr 2025 15:55:53 +0530 Subject: [PATCH 6/6] refactor: clean up Header component for improved readability --- src/components/Layout/Header.jsx | 21 ++++++++------------- 1 file changed, 8 insertions(+), 13 deletions(-) diff --git a/src/components/Layout/Header.jsx b/src/components/Layout/Header.jsx index ae380b24..dcaa306f 100644 --- a/src/components/Layout/Header.jsx +++ b/src/components/Layout/Header.jsx @@ -6,9 +6,8 @@ import {changeMaster} from "../../slices/localVariablesSlice"; import useMaster from "../../hooks/masterHook/useMaster"; import {useProfile} from "../../hooks/useProfile"; import {useNavigate} from "react-router-dom"; - -const Header = () => -{ +import Avatar from "../../components/common/Avatar"; +const Header = () =>{ const {profile} = useProfile() const dispatch = useDispatch( changeMaster( "Job Role" ) ) const {data, loading} = useMaster() @@ -88,11 +87,9 @@ const Header = () => data-bs-toggle="dropdown" >
- avatar-image
@@ -106,11 +103,9 @@ const Header = () =>
- avatar-image
-- 2.43.0