Revert "feat: Integrated Dicebear Library To Enhance Security (Palisa…

…doesFoundation#1585)" (PalisadoesFoundation#1634) This reverts commit 7828c40.
AVtheking · Feb 28, 2024 · ebcc977 · ebcc977
1 parent da8df05
commit ebcc977
Show file tree

Hide file tree

Showing 14 changed files with 580 additions and 1,291 deletions.
diff --git a/__mocks__/@dicebear/collection.ts b/__mocks__/@dicebear/collection.ts
diff --git a/__mocks__/@dicebear/core.ts b/__mocks__/@dicebear/core.ts
diff --git a/jest.config.js b/jest.config.js
@@ -25,8 +25,6 @@ export default {
   moduleNameMapper: {
     '^react-native$': 'react-native-web',
     '^@mui/(.*)$': '<rootDir>/node_modules/@mui/$1',
-    '^@dicebear/core$': '<rootDir>/__mocks__/@dicebear/core.ts',
-    '^@dicebear/collection$': '<rootDir>/__mocks__/@dicebear/collection.ts',
   },
   moduleFileExtensions: [
     'web.js',

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,8 +8,6 @@
     "@apollo/client": "^3.4.0-beta.19",
     "@apollo/link-error": "^2.0.0-beta.3",
     "@apollo/react-testing": "^4.0.0",
-    "@dicebear/collection": "^7.0.4",
-    "@dicebear/core": "^7.0.4",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.8.3",

diff --git a/src/components/Avatar/Avatar.test.tsx b/src/components/Avatar/Avatar.test.tsx
diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx
diff --git a/src/components/LeftDrawer/LeftDrawer.tsx b/src/components/LeftDrawer/LeftDrawer.tsx
@@ -11,7 +11,6 @@ import styles from './LeftDrawer.module.css';
 import { useMutation } from '@apollo/client';
 import { REVOKE_REFRESH_TOKEN } from 'GraphQl/Mutations/mutations';
 import useLocalStorage from 'utils/useLocalstorage';
-import Avatar from 'components/Avatar/Avatar';
 
 export interface InterfaceLeftDrawerProps {
   hideDrawer: boolean | null;
@@ -116,8 +115,8 @@ const leftDrawer = ({
               {userImage && userImage !== 'null' ? (
                 <img src={userImage} alt={`profile picture`} />
               ) : (
-                <Avatar
-                  name={`${firstName} ${lastName}`}
+                <img
+                  src={`https://api.dicebear.com/5.x/initials/svg?seed=${firstName}%20${lastName}`}
                   alt={`dummy picture`}
                 />
               )}

diff --git a/src/components/LeftDrawerEvent/LeftDrawerEvent.tsx b/src/components/LeftDrawerEvent/LeftDrawerEvent.tsx
@@ -12,7 +12,6 @@ import { EventStatsWrapper } from 'components/EventStats/EventStatsWrapper';
 import { REVOKE_REFRESH_TOKEN } from 'GraphQl/Mutations/mutations';
 import { useMutation } from '@apollo/client';
 import useLocalStorage from 'utils/useLocalstorage';
-import Avatar from 'components/Avatar/Avatar';
 
 export interface InterfaceLeftDrawerProps {
   event: {
@@ -69,8 +68,10 @@ const leftDrawerEvent = ({
         <div className={styles.organizationContainer}>
           <button className={styles.profileContainer} data-testid="OrgBtn">
             <div className={styles.imageContainer}>
-              <Avatar
-                name={event.title.split(' ').join('%20')}
+              <img
+                src={`https://api.dicebear.com/5.x/initials/svg?seed=${event.title
+                  .split(' ')
+                  .join('%20')}`}
                 alt="Dummy Event Picture"
               />
             </div>
@@ -134,8 +135,8 @@ const leftDrawerEvent = ({
               {userImage && userImage !== 'null' ? (
                 <img src={userImage} alt={`Profile Picture`} />
               ) : (
-                <Avatar
-                  name={`${firstName} ${lastName}`}
+                <img
+                  src={`https://api.dicebear.com/5.x/initials/svg?seed=${firstName}%20${lastName}`}
                   alt={`Dummy User Picture`}
                 />
               )}

diff --git a/src/components/LeftDrawerOrg/LeftDrawerOrg.tsx b/src/components/LeftDrawerOrg/LeftDrawerOrg.tsx
@@ -15,7 +15,6 @@ import { ReactComponent as TalawaLogo } from 'assets/svgs/talawa.svg';
 import styles from './LeftDrawerOrg.module.css';
 import { REVOKE_REFRESH_TOKEN } from 'GraphQl/Mutations/mutations';
 import useLocalStorage from 'utils/useLocalstorage';
-import Avatar from 'components/Avatar/Avatar';
 
 export interface InterfaceLeftDrawerProps {
   orgId: string;
@@ -119,9 +118,9 @@ const leftDrawerOrg = ({
                 {organization.image ? (
                   <img src={organization.image} alt={`profile picture`} />
                 ) : (
-                  <Avatar
-                    name={organization.name}
-                    alt={'Dummy Organization Picture'}
+                  <img
+                    src={`https://api.dicebear.com/5.x/initials/svg?seed=${organization.name}`}
+                    alt={`Dummy Organization Picture`}
                   />
                 )}
               </div>
@@ -188,8 +187,8 @@ const leftDrawerOrg = ({
               {userImage && userImage !== 'null' ? (
                 <img src={userImage} alt={`profile picture`} />
               ) : (
-                <Avatar
-                  name={`${firstName} ${lastName}`}
+                <img
+                  src={`https://api.dicebear.com/5.x/initials/svg?seed=${firstName}%20${lastName}`}
                   alt={`dummy picture`}
                 />
               )}

diff --git a/src/components/OrgListCard/OrgListCard.tsx b/src/components/OrgListCard/OrgListCard.tsx
@@ -9,7 +9,6 @@ import LocationOnIcon from '@mui/icons-material/LocationOn';
 import { IS_SAMPLE_ORGANIZATION_QUERY } from 'GraphQl/Queries/Queries';
 import { useQuery } from '@apollo/client';
 import { Tooltip } from '@mui/material';
-import Avatar from 'components/Avatar/Avatar';
 
 export interface InterfaceOrgListCardProps {
   data: InterfaceOrgConnectionInfoType;
@@ -43,15 +42,19 @@ function orgListCard(props: InterfaceOrgListCardProps): JSX.Element {
       <div className={styles.orgCard}>
         <div className={styles.innerContainer}>
           <div className={styles.orgImgContainer}>
-            {image ? (
-              <img src={image} alt={`${name} image`} />
-            ) : (
-              <Avatar
-                name={name}
-                alt={`${name} image`}
-                dataTestId="emptyContainerForImage"
-              />
-            )}
+            <img
+              src={
+                image
+                  ? image
+                  : `https://api.dicebear.com/5.x/initials/svg?seed=${name
+                      .split(/\s+/)
+                      .map((word) => word.charAt(0))
+                      .slice(0, 2)
+                      .join('')}`
+              }
+              alt={`${name} image`}
+              data-testid={image ? '' : 'emptyContainerForImage'}
+            />
           </div>
           <div className={styles.content}>
             <Tooltip title={name} placement="top-end">

diff --git a/src/components/UserPortal/ContactCard/ContactCard.tsx b/src/components/UserPortal/ContactCard/ContactCard.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import styles from './ContactCard.module.css';
-import Avatar from 'components/Avatar/Avatar';
 
 interface InterfaceContactCardProps {
   id: string;
@@ -15,6 +14,9 @@ interface InterfaceContactCardProps {
 
 function contactCard(props: InterfaceContactCardProps): JSX.Element {
   const contactName = `${props.firstName} ${props.lastName}`;
+  const imageUrl = props.image
+    ? props.image
+    : `https://api.dicebear.com/5.x/initials/svg?seed=${contactName}`;
 
   const handleSelectedContactChange = (): void => {
     props.setSelectedContact(props.id);
@@ -38,19 +40,7 @@ function contactCard(props: InterfaceContactCardProps): JSX.Element {
         onClick={handleSelectedContactChange}
         data-testid="contactContainer"
       >
-        {props.image ? (
-          <img
-            src={props.image}
-            alt={contactName}
-            className={styles.contactImage}
-          />
-        ) : (
-          <Avatar
-            name={contactName}
-            alt={contactName}
-            avatarStyle={styles.contactImage}
-          />
-        )}
+        <img src={imageUrl} alt={contactName} className={styles.contactImage} />
         <div className={styles.contactNameContainer}>
           <b>{contactName}</b>
           <small className={styles.grey}>{props.email}</small>

diff --git a/src/components/UsersTableItem/UsersTableItem.tsx b/src/components/UsersTableItem/UsersTableItem.tsx
@@ -14,7 +14,6 @@ import { toast } from 'react-toastify';
 import { errorHandler } from 'utils/errorHandler';
 import type { InterfaceQueryUserListItem } from 'utils/interfaces';
 import styles from './UsersTableItem.module.css';
-import Avatar from 'components/Avatar/Avatar';
 
 type Props = {
   user: InterfaceQueryUserListItem;
@@ -307,11 +306,14 @@ const UsersTableItem = (props: Props): JSX.Element => {
                             className="p-0"
                             onClick={() => goToOrg(org._id)}
                           >
-                            {org.image ? (
-                              <img src={org.image} alt="orgImage" />
-                            ) : (
-                              <Avatar name={org.name} alt="orgImage" />
-                            )}
+                            <img
+                              src={
+                                org.image
+                                  ? org.image
+                                  : `https://api.dicebear.com/5.x/initials/svg?seed=${org.name}`
+                              }
+                              alt="orgImage"
+                            />
                             {org.name}
                           </Button>
                         </td>
@@ -324,14 +326,14 @@ const UsersTableItem = (props: Props): JSX.Element => {
                             onClick={() => handleCreator()}
                             data-testid={`creator${org._id}`}
                           >
-                            {org.creator.image ? (
-                              <img src={org.creator.image} alt="creator" />
-                            ) : (
-                              <Avatar
-                                name={`${org.creator.firstName} ${org.creator.lastName}`}
-                                alt="creator"
-                              />
-                            )}
+                            <img
+                              src={
+                                org.creator.image
+                                  ? org.creator.image
+                                  : `https://api.dicebear.com/5.x/initials/svg?seed=${org.creator.firstName} ${org.creator.lastName}`
+                              }
+                              alt="creator"
+                            />
                             {org.creator.firstName} {org.creator.lastName}
                           </Button>
                         </td>
@@ -481,11 +483,14 @@ const UsersTableItem = (props: Props): JSX.Element => {
                             className="p-0"
                             onClick={() => goToOrg(org._id)}
                           >
-                            {org.image ? (
-                              <img src={org.image} alt="orgImage" />
-                            ) : (
-                              <Avatar name={org.name} alt="orgImage" />
-                            )}
+                            <img
+                              src={
+                                org.image
+                                  ? org.image
+                                  : `https://api.dicebear.com/5.x/initials/svg?seed=${org.name}`
+                              }
+                              alt="orgImage"
+                            />
                             {org.name}
                           </Button>
                         </td>
@@ -498,14 +503,14 @@ const UsersTableItem = (props: Props): JSX.Element => {
                             onClick={() => handleCreator()}
                             data-testid={`creator${org._id}`}
                           >
-                            {org.creator.image ? (
-                              <img src={org.creator.image} alt="creator" />
-                            ) : (
-                              <Avatar
-                                name={`${org.creator.firstName} ${org.creator.lastName}`}
-                                alt="creator"
-                              />
-                            )}
+                            <img
+                              src={
+                                org.creator.image
+                                  ? org.creator.image
+                                  : `https://api.dicebear.com/5.x/initials/svg?seed=${org.creator.firstName} ${org.creator.lastName}`
+                              }
+                              alt="creator"
+                            />
                             {org.creator.firstName} {org.creator.lastName}
                           </Button>
                         </td>

diff --git a/src/screens/MemberDetail/MemberDetail.tsx b/src/screens/MemberDetail/MemberDetail.tsx
@@ -18,7 +18,6 @@ import { toast } from 'react-toastify';
 import { errorHandler } from 'utils/errorHandler';
 import Loader from 'components/Loader/Loader';
 import useLocalStorage from 'utils/useLocalstorage';
-import Avatar from 'components/Avatar/Avatar';
 
 const { getItem } = useLocalStorage();
 
@@ -155,12 +154,10 @@ const MemberDetail: React.FC<MemberDetailProps> = ({ id }): JSX.Element => {
                           data-testid="userImagePresent"
                         />
                       ) : (
-                        <Avatar
-                          name={`${userData?.user?.firstName} ${userData?.user?.lastName}`}
-                          alt="User Image"
-                          size={180}
-                          avatarStyle={styles.userImage}
-                          dataTestId="userImageAbsent"
+                        <img
+                          className={styles.userImage}
+                          src={`https://api.dicebear.com/5.x/initials/svg?seed=${userData?.user?.firstName} ${userData?.user?.lastName}`}
+                          data-testid="userImageAbsent"
                         />
                       )}
                     </div>