feat: avatar with fallback icons component (#1763)

* feat: avatar with fallback icons component

Signed-off-by: Adam Setch <[email protected]>

* feat: avatar with fallback icons component

Signed-off-by: Adam Setch <[email protected]>

---------

Signed-off-by: Adam Setch <[email protected]>

Author: setchy

src/renderer/components/avatars/AvatarWithFallback.test.tsx

@@ -0,0 +1,67 @@
+import { render, screen } from '@testing-library/react';
+
+import { type Link, Size } from '../../types';
+import {
+  AvatarWithFallback,
+  type IAvatarWithFallback,
+} from './AvatarWithFallback';
+
+describe('renderer/components/avatars/AvatarWithFallback.tsx', () => {
+  const props: IAvatarWithFallback = {
+    src: 'https://avatars.githubusercontent.com/u/133795385?s=200&v=4' as Link,
+    alt: 'gitify-app',
+    name: '@gitify-app',
+    size: Size.MEDIUM,
+    userType: 'User',
+  };
+
+  it('should render avatar - human user', () => {
+    const tree = render(<AvatarWithFallback {...props} />);
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('should render avatar - non-human user', () => {
+    const tree = render(
+      <AvatarWithFallback {...props} userType={'Organization'} />,
+    );
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders the fallback icon when no src url - human user', () => {
+    const tree = render(<AvatarWithFallback {...props} src={null} />);
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders the fallback icon when no src url - non human user', () => {
+    const tree = render(
+      <AvatarWithFallback {...props} src={null} userType="Bot" />,
+    );
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders the fallback icon when the image fails to load (isBroken = true) - human user', () => {
+    render(<AvatarWithFallback {...props} />);
+
+    // Find the avatar element by its alt text
+    const avatar = screen.getByAltText('gitify-app') as HTMLImageElement;
+
+    // Simulate an error event on the image element
+    avatar.dispatchEvent(new Event('error'));
+
+    expect(screen.getByTestId('avatar')).toMatchSnapshot();
+  });
+
+  it('renders the fallback icon when the image fails to load (isBroken = true) - non human user', () => {
+    render(<AvatarWithFallback {...props} userType={'Bot'} />);
+
+    // Find the avatar element by its alt text
+    const avatar = screen.getByAltText('gitify-app') as HTMLImageElement;
+
+    // Simulate an error event on the image element
+    avatar.dispatchEvent(new Event('error'));
+
+    expect(screen.getByTestId('avatar')).toMatchSnapshot();
+  });
+});

src/renderer/components/avatars/AvatarWithFallback.tsx

@@ -0,0 +1,54 @@
+import type React from 'react';
+import { useState } from 'react';
+
+import { FeedPersonIcon, MarkGithubIcon } from '@primer/octicons-react';
+import { Avatar, Stack, Text } from '@primer/react';
+
+import { type Link, Size } from '../../types';
+import type { UserType } from '../../typesGitHub';
+import { isNonHumanUser } from '../../utils/helpers';
+
+export interface IAvatarWithFallback {
+  src?: Link;
+  alt?: string;
+  name?: string;
+  size?: number;
+  userType?: UserType;
+}
+
+export const AvatarWithFallback: React.FC<IAvatarWithFallback> = ({
+  src,
+  alt,
+  name,
+  size = Size.MEDIUM,
+  userType = 'User',
+}) => {
+  const [isBroken, setIsBroken] = useState(false);
+
+  const isNonHuman = isNonHumanUser(userType);
+  return (
+    <Stack
+      direction="horizontal"
+      align="center"
+      gap="condensed"
+      data-testid="avatar"
+    >
+      {!src || isBroken ? (
+        isNonHuman ? (
+          <MarkGithubIcon size={size} />
+        ) : (
+          <FeedPersonIcon size={size} />
+        )
+      ) : (
+        <Avatar
+          src={src}
+          alt={alt}
+          size={size}
+          square={isNonHuman}
+          onError={() => setIsBroken(true)}
+        />
+      )}
+      {name && <Text>{name}</Text>}
+    </Stack>
+  );
+};