fix handle check regexp, fix user card avatar rendering

pingpad-io · Jun 12, 2024 · 9cf4a20 · 9cf4a20
1 parent 19ba85a
commit 9cf4a20
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 14 deletions.
diff --git a/src/components/Markdown.tsx b/src/components/Markdown.tsx
@@ -10,9 +10,10 @@ function replaceHandles(content) {
     return content;
   }
 
-  const handleRegex = /@(\w+\/\w+|\w+)/g;
-  const processedContent = content.replace(handleRegex, (_, p1) => {
-    const handle = p1.split("/")[1];
+  const handleRegex = /(?<!\S)@[\w/]+(?!\S)/g;
+  const processedContent = content.replace(handleRegex, (match) => {
+    const parts = match.slice(1).split("/"); // Remove the leading '@' and split by '/'
+    const handle = parts.length > 1 ? parts[1] : parts[0];
     return `${BASE_URL}u/${handle}`;
   });
 

diff --git a/src/components/user/UserAvatar.tsx b/src/components/user/UserAvatar.tsx
@@ -6,8 +6,8 @@ import { UserCard } from "./UserCard";
 export function UserAvatar({ user, link = true, card = true }: { user: User; link?: boolean; card?: boolean }) {
   const fallback = user?.name?.slice(0, 2) || user.handle.slice(0, 2);
   const avatar = (
-    <Avatar suppressHydrationWarning className="w-full h-full">
-      <AvatarImage alt={user?.profilePictureUrl} src={user?.profilePictureUrl} />
+    <Avatar suppressHydrationWarning className="w-full h-full m-0">
+      <AvatarImage alt={user?.profilePictureUrl} src={user?.profilePictureUrl} className="m-0" />
       <AvatarFallback>{fallback.toLowerCase()}</AvatarFallback>
     </Avatar>
   );

diff --git a/src/components/user/UserCard.tsx b/src/components/user/UserCard.tsx
@@ -2,7 +2,7 @@
 
 import { type ProfileId, useLazyProfile } from "@lens-protocol/react-web";
 import Link from "next/link";
-import type { PropsWithChildren } from "react";
+import { type PropsWithChildren, useState } from "react";
 import { LoadingSpinner } from "../LoadingIcon";
 import { HoverCard, HoverCardContent, HoverCardTrigger } from "../ui/hover-card";
 import { type User, lensProfileToUser } from "./User";
@@ -46,29 +46,34 @@ export const UserCard = ({ children, user }: PropsWithChildren & { user: User })
 
 export const UserHandleCard = ({ children, handle }: PropsWithChildren & { handle: string }) => {
   const { data: profile, error, loading, execute } = useLazyProfile();
+  const [user, setUser] = useState<User | null>(null);
 
   const loadCard = () => {
-    execute({ forHandle: `lens/${handle}` });
+    execute({ forHandle: `lens/${handle}` }).then((res) => {
+      if (res.isSuccess()) {
+        setUser(lensProfileToUser(res.unwrap()));
+      }
+    });
   };
 
   return (
     <HoverCard defaultOpen={false} onOpenChange={(open: boolean) => open && loadCard()} closeDelay={100}>
       <HoverCardTrigger asChild>
         <Link href={`/u/${handle}`}>{children}</Link>
       </HoverCardTrigger>
-      <HoverCardContent side="top">
+      <HoverCardContent className="p-3" side="top">
         {loading && !profile && <LoadingSpinner />}
         {error && <div>Error: {error.message}</div>}
-        {profile && (
+        {user && (
           <div className="flex flex-col gap-2">
             <div className="flex flex-row items-center gap-2 text-sm">
-              <div className="w-6 h-6">
-                <UserAvatar user={lensProfileToUser(profile)} />
+              <div className="w-8 h-8">
+                <UserAvatar link={false} card={false} user={user} />
               </div>
-              <span className="font-bold">{profile.metadata.displayName}</span>
-              <span className="font-light">@{handle}</span>
+              <span className="font-bold">{user.name}</span>
+              <span className="font-light">@{user.handle}</span>
             </div>
-            <span className="text-sm">{profile.metadata.bio}</span>
+            <span className="text-sm">{user.description}</span>
           </div>
         )}
       </HoverCardContent>