From 4c3de63290b75ba4731718adb85e9f231b0c0037 Mon Sep 17 00:00:00 2001
From: Wiktoria Salamon <39302106+wiktoriasalamon@users.noreply.github.com>
Date: Mon, 29 Jul 2024 10:51:01 +0200
Subject: [PATCH] refactor: use Avatar component in PeopleTable (#132)

---
 .../common/Avatar/Avatar.interface.ts          |  3 +--
 .../src/components/common/Avatar/Avatar.tsx    | 17 ++++++++++-------
 .../src/components/modules/Topbar/Topbar.tsx   |  2 +-
 .../People/Modules/PeopleTable/PeopleTable.tsx | 18 +++++++-----------
 .../PersonalDetails/PersonalDetails.tsx        |  2 +-
 .../mySpace/MySpace/modules/Header/Header.tsx  |  2 +-
 frontend/src/utils/index.ts                    |  1 +
 frontend/src/utils/string.ts                   |  6 ++++++
 8 files changed, 28 insertions(+), 23 deletions(-)
 create mode 100644 frontend/src/utils/string.ts

diff --git a/frontend/src/components/common/Avatar/Avatar.interface.ts b/frontend/src/components/common/Avatar/Avatar.interface.ts
index bf712838..e545a0c6 100644
--- a/frontend/src/components/common/Avatar/Avatar.interface.ts
+++ b/frontend/src/components/common/Avatar/Avatar.interface.ts
@@ -1,7 +1,6 @@
 export interface AvatarProps {
   variant?: AvatarVariant;
-  firstName: string;
-  lastName: string;
+  initials: string;
   imageUrl?: string | undefined;
 }
 
diff --git a/frontend/src/components/common/Avatar/Avatar.tsx b/frontend/src/components/common/Avatar/Avatar.tsx
index eab27758..d9b83360 100644
--- a/frontend/src/components/common/Avatar/Avatar.tsx
+++ b/frontend/src/components/common/Avatar/Avatar.tsx
@@ -13,21 +13,24 @@ const variants: {
   '320': 'w-80 h-80 text-5xl',
 };
 
-export const Avatar: React.FC<AvatarProps> = ({ firstName, lastName, imageUrl, variant = '40' }) => {
+export const Avatar: React.FC<AvatarProps> = ({ initials, imageUrl, variant = '40' }) => {
   const avatarClass = generateClassNames(
-    'rounded-full bg-blue-700 flex justify-center items-center',
+    'rounded-full bg-blue-700 flex justify-center items-center object-cover',
     variants[variant],
   );
 
   return (
     <div className={avatarClass}>
       {imageUrl ? (
-        <Image className="inline-block h-full w-full rounded-full" src={imageUrl} alt="User avatar" />
+        <Image
+          width={variant}
+          height={variant}
+          className="inline-block h-full w-full rounded-full"
+          src={imageUrl}
+          alt="User avatar"
+        />
       ) : (
-        <span className="text-white">
-          {firstName[0]}
-          {lastName[0]}
-        </span>
+        <span className="text-white">{initials}</span>
       )}
     </div>
   );
diff --git a/frontend/src/components/modules/Topbar/Topbar.tsx b/frontend/src/components/modules/Topbar/Topbar.tsx
index 09f7965c..2987ae75 100644
--- a/frontend/src/components/modules/Topbar/Topbar.tsx
+++ b/frontend/src/components/modules/Topbar/Topbar.tsx
@@ -45,7 +45,7 @@ export const Topbar = () => {
             <MenuButton className="bg-gray-800 focus:ring-offset-gray-800 relative flex rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2">
               <span className="absolute -inset-1.5" />
               <span className="sr-only">Open user menu</span>
-              <Avatar firstName={user.firstName} lastName={user.lastName} variant="40" />
+              <Avatar initials={`${user.firstName[0]}${user.lastName[0]}`} variant="40" />
             </MenuButton>
           </div>
           <Transition
diff --git a/frontend/src/components/pages/People/Modules/PeopleTable/PeopleTable.tsx b/frontend/src/components/pages/People/Modules/PeopleTable/PeopleTable.tsx
index 9bec4aed..b1306769 100644
--- a/frontend/src/components/pages/People/Modules/PeopleTable/PeopleTable.tsx
+++ b/frontend/src/components/pages/People/Modules/PeopleTable/PeopleTable.tsx
@@ -1,5 +1,3 @@
-import Image from 'next/image';
-
 import { Typography } from '@app/components/common/Typography';
 import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react';
 import { FC, Fragment } from 'react';
@@ -8,6 +6,8 @@ import { CheckMarkIcon } from '@app/static/icons/CheckMarkIcon';
 import Link from 'next/link';
 import { employeeMenuOptions } from '../../People.utils';
 import { PeopleTableProps } from './PeopleTable.interface';
+import { Avatar } from '@app/components/common/Avatar';
+import { getInitials } from '@app/utils';
 import { formatDate } from '@app/utils';
 
 export const PeopleTable: FC<PeopleTableProps> = ({ people }) => {
@@ -48,16 +48,12 @@ export const PeopleTable: FC<PeopleTableProps> = ({ people }) => {
               {people?.map((person) => (
                 <tr key={person.id}>
                   <td className="flex whitespace-nowrap py-5 pl-4 pr-3 text-sm sm:pl-0">
+                    <Avatar
+                      initials={getInitials(person.name)}
+                      variant="28"
+                      imageUrl="/images/avatar_placeholder.jpeg"
+                    />
                     <div className="flex items-center">
-                      <div className="h-8 w-8">
-                        <Image
-                          width={200}
-                          height={200}
-                          alt="User image"
-                          src="/images/avatar_placeholder.jpeg"
-                          className="h-8 w-8 rounded-full object-cover"
-                        />
-                      </div>
                       <div className="ml-4">
                         <Typography variant="body-s/medium">{person.name}</Typography>
                         <Typography variant="body-s/regular" className="text-navy-600">
diff --git a/frontend/src/components/pages/ProfileSetting/modules/PersonalDetails/PersonalDetails.tsx b/frontend/src/components/pages/ProfileSetting/modules/PersonalDetails/PersonalDetails.tsx
index 1b7f7026..5cc9fea4 100644
--- a/frontend/src/components/pages/ProfileSetting/modules/PersonalDetails/PersonalDetails.tsx
+++ b/frontend/src/components/pages/ProfileSetting/modules/PersonalDetails/PersonalDetails.tsx
@@ -32,7 +32,7 @@ export const PersonalDetails: React.FC<PersonalDetailsProps> = ({ data }) => {
             <Typography variant="body-m/medium" className="mb-2">
               Profile photo
             </Typography>
-            <Avatar firstName={firstName} lastName={lastName} imageUrl={photo} variant="72" />
+            <Avatar initials={`${firstName[0]}${lastName[0]}`} imageUrl={photo} variant="72" />
           </div>
           <div className="flex flex-row gap-4">
             <label className="flex h-11 w-11 items-center justify-center rounded-full border border-navy-300 bg-white text-navy-600 shadow-sm hover:bg-navy-100">
diff --git a/frontend/src/components/pages/mySpace/MySpace/modules/Header/Header.tsx b/frontend/src/components/pages/mySpace/MySpace/modules/Header/Header.tsx
index 69c35dd7..1e3cc9cf 100644
--- a/frontend/src/components/pages/mySpace/MySpace/modules/Header/Header.tsx
+++ b/frontend/src/components/pages/mySpace/MySpace/modules/Header/Header.tsx
@@ -11,7 +11,7 @@ export const Header: React.FC<HeaderProps> = ({ user, currentLevel, nextLevel })
   return (
     <div className="flex w-full justify-between rounded-3xl bg-navy-200 px-6 py-9">
       <div className="flex items-center gap-6">
-        <Avatar firstName={firstName} lastName={lastName} imageUrl={photo} variant="100" />
+        <Avatar initials={`${firstName[0]}${lastName[0]}`} imageUrl={photo} variant="100" />
         <div className="flex flex-col justify-center gap-1">
           <Typography variant="head-m/medium">
             {firstName} {lastName}
diff --git a/frontend/src/utils/index.ts b/frontend/src/utils/index.ts
index 65a6e1b3..b9748c57 100644
--- a/frontend/src/utils/index.ts
+++ b/frontend/src/utils/index.ts
@@ -2,4 +2,5 @@ export { generateClassNames } from './generateClassNames';
 export { mapKeysToCamelCase } from './mapKeysToCamelCase';
 export { readFile } from './file';
 export { getCroppedImg, createImage } from './canvas';
+export { getInitials } from './string';
 export { formatDate } from './date';
diff --git a/frontend/src/utils/string.ts b/frontend/src/utils/string.ts
new file mode 100644
index 00000000..4d8c629c
--- /dev/null
+++ b/frontend/src/utils/string.ts
@@ -0,0 +1,6 @@
+export const getInitials = (text: string) => {
+  return text
+    .split(' ')
+    .map((word) => word[0])
+    .join('');
+};