From 837b987d46f156ccac663e9d36f4a0b4167ed809 Mon Sep 17 00:00:00 2001
From: PedroAugustoRamalhoDuarte <pedroaugustorduarte@gmail.com>
Date: Thu, 25 Jul 2024 15:34:12 -0300
Subject: [PATCH] :bug: small fixes when avatar name is blank

---
 src/components/Avatar/__tests__/index.test.tsx | 10 +++++++++-
 src/components/Avatar/index.tsx                |  7 +++++--
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/components/Avatar/__tests__/index.test.tsx b/src/components/Avatar/__tests__/index.test.tsx
index 68ef8bd..9a4ae78 100644
--- a/src/components/Avatar/__tests__/index.test.tsx
+++ b/src/components/Avatar/__tests__/index.test.tsx
@@ -7,7 +7,7 @@ describe("Avatar", () => {
     color: "primary" | "gray",
     size: "xl" | "lg" | "md" | "sm" | "xs",
     isOn: boolean,
-    name: string,
+    name: string | null,
     avatarUrl?: string,
   ) => {
     return <Avatar color={color} isOn={isOn} name={name} avatarUrl={avatarUrl} size={size} />;
@@ -20,6 +20,14 @@ describe("Avatar", () => {
     });
   });
 
+  describe("when name is nil", () => {
+    it("renders", () => {
+      const { container } = render(component("primary", "xl", false, null));
+      // its render the component
+      expect(container).toBeTruthy();
+    });
+  });
+
   describe("test the color props", () => {
     it("test the primary color", () => {
       const { container } = render(<Avatar color="primary" size="xl" name="marty mcfly" />);
diff --git a/src/components/Avatar/index.tsx b/src/components/Avatar/index.tsx
index 6603692..cf457c7 100644
--- a/src/components/Avatar/index.tsx
+++ b/src/components/Avatar/index.tsx
@@ -5,7 +5,7 @@ import { twMerge } from "tailwind-merge";
 export interface AvatarType extends HTMLAttributes<any> {
   color?: "primary" | "gray";
   isOn?: boolean;
-  name: string;
+  name: string | null;
   avatarUrl?: string;
   border?: boolean;
   size?: "xl" | "lg" | "md" | "sm" | "xs";
@@ -68,7 +68,10 @@ const Avatar = ({
   const avatarClass = twMerge(avatarVariants({ color, size, border }), className);
   const avatarOnlineClass = twMerge(avatarOnlineVariants({ size }), className);
 
-  const getInitials = (name: string) => {
+  const getInitials = (name: string | null) => {
+    if (!name) {
+      return "";
+    }
     const nameWords = name.trim().split(" ");
 
     if (nameWords.length === 1) {