Apply name shortening logic to UserAvatar and CustomerGridIter

eisbuk · Jul 11, 2023 · 244985e · 244985e
1 parent 08ce677
commit 244985e
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 4 deletions.
diff --git a/packages/ui/src/CustomerGrid/CustomerGrid.stories.tsx b/packages/ui/src/CustomerGrid/CustomerGrid.stories.tsx
@@ -23,6 +23,14 @@ const customers: CustomerFull[] = Object.values({
     photoURL:
       "https://avatars.akamai.steamstatic.com/3f8169f3268ec0601dc642ab94eb8cbed57ab66e_full.jpg",
   },
+  pablo: {
+    ...c.saul,
+    id: "pablo",
+    name: "Pablo Emilio",
+    surname: "Escobar Gaviria",
+    photoURL:
+      "https://cdn.britannica.com/62/192062-131-96B933EF/mug-shot-Colombia-control-agency-Medellin.jpg",
+  },
 });
 
 export const Default = (): JSX.Element => {

diff --git a/packages/ui/src/CustomerGrid/CustomerGridItem.tsx b/packages/ui/src/CustomerGrid/CustomerGridItem.tsx
@@ -4,6 +4,8 @@ import { Customer } from "@eisbuk/shared";
 
 import { CustomerAvatar, BadgeSize } from "../UserAvatar";
 
+import { shortName } from "../utils/helpers";
+
 export interface GridItemProps extends Customer {
   onClick?: (customer: Customer) => void;
 }
@@ -14,6 +16,8 @@ const CustomerGridItem: React.FC<GridItemProps> = ({
 }) => {
   const customerValidated = customer.categories.length > 0;
 
+  const [sName, sSurname] = shortName(customer.name, customer.surname);
+
   return (
     <div
       style={
@@ -27,8 +31,8 @@ const CustomerGridItem: React.FC<GridItemProps> = ({
         className="w-20 h-20 mb-2"
         {...{ customer }}
       />
-      <p className="w-full text-center truncate">{customer.name}</p>
-      <p className="w-full text-center truncate">{customer.surname}</p>
+      <p className="w-full text-center truncate">{sName}</p>
+      <p className="w-full text-center truncate">{sSurname}</p>
     </div>
   );
 };

diff --git a/packages/ui/src/UserAvatar/UserAvatar.stories.tsx b/packages/ui/src/UserAvatar/UserAvatar.stories.tsx
@@ -4,7 +4,7 @@ import { ComponentMeta } from "@storybook/react";
 import UserAvatar from "./UserAvatar";
 
 export default {
-  title: "Header Avatar",
+  title: "User Avatar",
   component: UserAvatar,
 } as ComponentMeta<typeof UserAvatar>;
 
@@ -20,6 +20,18 @@ export const Default = (): JSX.Element => (
         />
       </div>
     </div>
+    <div>
+      <h1 className="text-lg font-bold mb-4">
+        Avatar with shortened long name
+      </h1>
+      <div className="flex items-center justify-end max-w-max bg-gray-800 p-4">
+        <UserAvatar
+          name="Pablo Emilio"
+          surname="Escobar Gaviria"
+          photoURL="https://cdn.britannica.com/62/192062-131-96B933EF/mug-shot-Colombia-control-agency-Medellin.jpg"
+        />
+      </div>
+    </div>
     <div>
       <h1 className="text-lg font-bold mb-4">No Image</h1>
       <div className="flex items-center justify-end max-w-max bg-gray-800 p-4">

diff --git a/packages/ui/src/UserAvatar/UserAvatar.tsx b/packages/ui/src/UserAvatar/UserAvatar.tsx
@@ -2,6 +2,8 @@ import React from "react";
 
 import Avatar from "./Avatar";
 
+import { shortName } from "../utils/helpers";
+
 export interface UserAvatarProps {
   name?: string;
   surname?: string;
@@ -13,7 +15,7 @@ export const UserAvatar: React.FC<UserAvatarProps> = ({
   surname = "",
   photoURL,
 }) => {
-  const displayName = [name, surname].join(" ").trim();
+  const displayName = shortName(name, surname).join(" ");
 
   const containerClassNames = containerClasses.join(" ");
   const userNameClassNames = userNameClasses.join(" ");