Create an Avatar Component with DiceBear Integration

[rishav-jha-mech]

Is your feature request related to a problem? Please describe.
We are using Dicebear http api at many places in our code base, since it is not a good practice to load these avatars using the image tag like this

<img
    src={`https://api.dicebear.com/5.x/initials/svg?seed=${organization.name}`}
    alt={`Dummy Organization Picture`}
/>

For 2 reasons:

1. The images are loaded via network, if someone has a slow internet connection, rendering of the images are delayed
2. Security reasons
   • Server-Side Request Forgery (SSRF) attacks
   • Cross-Site Scripting (XSS) attacks

Describe the solution you'd like

1. Integrate Dicebear library to our project
2. Modify the tests that need to be changed
3. Create a single customisable component, that can be used throughout the project to show initials

Describe alternatives you've considered
NA

Approach to be followed (optional)
NA

Additional context
Add any other context or screenshots about the feature request here.

Potential internship candidates
Please read this if you are planning to apply for a Palisadoes Foundation internship PalisadoesFoundation/talawa#359

[MahendraDani]

@rishav-jha-mech I would like to work on this

[rishav-jha-mech]

@MahendraDani before opening the PR, you can ask all your doubts here

[MahendraDani]

@MahendraDani before opening the PR, you can ask all your doubts here

Yes, I am first going through the library and its use cases in the project. I will ask the doubts here first

[MahendraDani]

I went through the codebase to find all the use cases of dicebear api.
The dicebear api is used in 7 component/screens files and 8 test files:

Components

1. UserTableItem.tsx
2. LeftDrawer.tsx
3. LeftDrawerEvent.tsx
4. LeftDrawerOrg.tsx
5. OrgListCard.tsx
6. MemberDetail.tsx
7. ContactCard.tsx

Tests

1. LeftDrawer.test.tsx
2. LeftDrawerEvent.test.tsx
3. LeftDrawerEventWrapper.test.tsx
4. LeftDrawerorg.test.tsx
5. OrgListCard.test.tsx
6. UserTableItem.test.tsx
7. MemberDetail.test.tsx
8. OrganizationDashboard.test.tsx

My Approach

1. Install @dicebear/core and @dicebear/collection libraries
2. Create a global avatar component called Avatar.tsx with following basic template

import { createAvatar } from '@dicebear/core';
import { initials } from '@dicebear/collection';
import { useMemo } from 'react';

export const AvatarDiceBear = () => {
  const avatar = useMemo(() => {
    return createAvatar(initials, {
      size: 128,
      seed: "Jhon Doe"
      // ... other options
    }).toDataUriSync();
  }, []);
  return <img src={avatar} alt="Avatar" />;
}

3. Customize the above component and replace the api with Avatar.tsx component in project
4. Write test cases for components using the following template:

import React from 'react';
import { render, screen } from '@testing-library/react';
import Avatar from './Avatar';

test('renders AvatarDiceBear component', () => {
  render(<AvatarDiceBear />);

  // Check if the component renders without errors
  const avatarElement = screen.getByAltText('Avatar');
  expect(avatarElement).toBeInTheDocument();

  const avatarImage = screen.getByRole('img');
  expect(avatarImage).toHaveAttribute('src');
});

// Add more tests based on your specific use cases

Doubts

1. Which command should I use to install @dicebear/core and @dicebear/collection libraries? npm install or npm install --legacy-peer-deps ?
2. What should be allowed to customize in the component? size, seed, etc which can be passed as props when using the component.

@rishav-jha-mech
The above is my initial approach, please guide me if there are any changes and please clear the above doubts.
Thanks

[rishav-jha-mech]

@MahendraDani You should create a prop named "name", and just add a default customisable style to it, check for ChangeLanguageDropDown component, i have done the same thing there. Only Name and Style props are required.

Once this PR #1291 gets merged, install the package using npm install

[MahendraDani]

@MahendraDani You should create a prop named "name", and just add a default customisable style to it, check for ChangeLanguageDropDown component, i have done the same thing there. Only Name and Style props are required.

Once this PR #1291 gets merged, install the package using npm install

Understood.
I will hold until the mentioned PR gets merged

[MahendraDani]

I started working on the issues as the mentioned PR is now merged and I created the following component:
src/components/Avatar/Avatar.tsx

import React from 'react';
import { createAvatar } from '@dicebear/core';
import { initials } from '@dicebear/collection';
import { useMemo } from 'react';

interface InterfaceAvatarProps {
  name: string;
}

export const Avatar = ({ name }: InterfaceAvatarProps): JSX.Element => {
  const avatar = useMemo(() => {
    return createAvatar(initials, {
      size: 128,
      seed: name,
    }).toDataUriSync();
  }, []);
  return <img src={avatar} alt="Avatar" />;
};

Then I created the test file
src/components/Avatar/Avatar.test.tsx:

import React from 'react';
import { screen } from '@testing-library/react';
import { Avatar } from './Avatar';
import { BrowserRouter } from 'react-router-dom';
import { I18nextProvider } from 'react-i18next';
import i18nForTest from 'utils/i18nForTest';

describe('Avatar component', () => {
  it('renders with the correct alt text', () => {
    <BrowserRouter>
      <I18nextProvider i18n={i18nForTest}>
        <Avatar name="Jhon Doe" />
      </I18nextProvider>
    </BrowserRouter>;

    const avatarImage = screen.getByAltText('Avatar');
    expect(avatarImage).toBeInTheDocument();
  });
});

The component is working as expected but the test is failing and giving following error

 FAIL  src/components/Avatar/Avatar.test.tsx
  ● Test suite failed to run

    Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/configuration
    For information about custom transformations, see:
    https://jestjs.io/docs/code-transformation

    Details:

    /Users/mahendradani/Documents/Programming/GSOC24/Palisadoes/talawa-admin/node_modules/@dicebear/core/lib/index.js:7
    import * as license from './utils/license.js';
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      1 | import React from 'react';
    > 2 | import { createAvatar } from '@dicebear/core';
        | ^
      3 | import { initials } from '@dicebear/collection';
      4 | import { useMemo } from 'react';
      5 |

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1728:14)
      at Object.<anonymous> (src/components/Avatar/Avatar.tsx:2:1)
      at Object.<anonymous> (src/components/Avatar/Avatar.test.tsx:3:1)
      at TestScheduler.scheduleTests (node_modules/@jest/core/build/TestScheduler.js:333:13)
      at runJest (node_modules/@jest/core/build/runJest.js:404:19)

@rishav-jha-mech Would you please guide me how can I mock the component for tests?

[MahendraDani]

@rishav-jha-mech Would please help me mocking the component for test?

[github-actions]

This issue did not get any activity in the past 10 days and will be closed in 180 days if no update occurs. Please check if the develop branch has fixed it and report again or close the issue.

[palisadoes]

Unassigning due to inactivity

[manishjha-04]

Hii @palisadoes can I work on this?

[manishjha-04]

hey @rishav-jha-mech sir could you help me with this? i tried adding type:commonjs to tsconfig but still it didnt work ,also type:module is already added in package.json ! I am not getting why the problem is encountered while testing whereas everything is working fine!

[manishjha-04]

hey @Cioppolo14 i am unsassigning myself from this issue!

[akhilender-bongirwar]

I would like to work on this issue

[github-actions]

This issue did not get any activity in the past 10 days and will be closed in 180 days if no update occurs. Please check if the develop branch has fixed it and report again or close the issue.