[frontend] avatar の props の変更に対応 (user id を渡す)

usatie · Feb 17, 2024 · fb2427c · fb2427c
1 parent 735ce18
commit fb2427c
Show file tree

Hide file tree

Showing 9 changed files with 13 additions and 10 deletions.
diff --git a/frontend/app/pong/GameCard.tsx b/frontend/app/pong/GameCard.tsx
@@ -17,7 +17,7 @@ function UserCard({ user }: { user: PublicUserEntity }) {
           size="medium"
           href={`/user/${user.id}`}
           alt={user.name}
-          online={true}
+          id={user.id}
         />
       </div>
     </>

diff --git a/frontend/app/room/[id]/sidebar-item.tsx b/frontend/app/room/[id]/sidebar-item.tsx
@@ -110,7 +110,11 @@ export default function SidebarItem({
     <>
       <ContextMenu>
         <ContextMenuTrigger className="flex gap-2 items-center group hover:opacity-60">
-          <Avatar avatarURL={user.user.avatarURL} size="small" />
+          <Avatar
+            avatarURL={user.user.avatarURL}
+            size="small"
+            id={user.userId}
+          />
           <span className="text-muted-foreground text-sm whitespace-nowrap group-hover:text-primary">
             {truncateString(user.user.name, 15)}
             {room.accessLevel !== "DIRECT" && isUserOwner && " 👑"}

diff --git a/frontend/app/ui/room/ban-item.tsx b/frontend/app/ui/room/ban-item.tsx
@@ -39,7 +39,7 @@ export default function BanItem({
 
   return (
     <div key={user.id} className="flex items-center gap-x-2 mb-6">
-      <Avatar avatarURL={user.avatarURL} size="medium" />
+      <Avatar avatarURL={user.avatarURL} size="medium" id={user.id} />
       <div className="flex flex-col gap-y-1">
         <div className="text-xs font-semibold flex items-center gap-x-1">
           {user.name}

diff --git a/frontend/app/ui/room/invite-item.tsx b/frontend/app/ui/room/invite-item.tsx
@@ -39,7 +39,7 @@ export default function InviteItem({
 
   return (
     <div key={user.id} className="flex items-center gap-x-2 mb-6">
-      <Avatar avatarURL={user.avatarURL} size="medium" />
+      <Avatar avatarURL={user.avatarURL} size="medium" id={user.id} />
       <div className="flex flex-col gap-y-1">
         <div className="text-xs font-semibold flex items-center gap-x-1">
           {user.name}

diff --git a/frontend/app/ui/room/message-item.tsx b/frontend/app/ui/room/message-item.tsx
@@ -21,6 +21,7 @@ export function MessageItem({
             avatarURL={message.user.avatarURL}
             size="medium"
             href={`/user/${message.user.id}`}
+            id={message.user.id}
           ></Avatar>
         </TooltipProvider>
       )}

diff --git a/frontend/app/ui/room/unban-item.tsx b/frontend/app/ui/room/unban-item.tsx
@@ -39,7 +39,7 @@ export default function UnbanItem({
 
   return (
     <div key={user.id} className="flex items-center gap-x-2 mb-6">
-      <Avatar avatarURL={user.avatarURL} size="medium" />
+      <Avatar avatarURL={user.avatarURL} size="medium" id={user.id} />
       <div className="flex flex-col gap-y-1">
         <div className="text-xs font-semibold flex items-center gap-x-1">
           {user.name}

diff --git a/frontend/app/ui/user/match-history.tsx b/frontend/app/ui/user/match-history.tsx
@@ -22,6 +22,7 @@ function MatchDetailItem({
           avatarURL={detail.user.avatarURL}
           href={`/user/${detail.user.id}`}
           size="medium"
+          id={detail.user.id}
         />
         <div>{detail.user.name}</div>
         <div className={`font-bold ${textColor}`}>

diff --git a/frontend/app/ui/user/user-list.tsx b/frontend/app/ui/user/user-list.tsx
@@ -3,8 +3,6 @@
 import type { PublicUserEntity } from "@/app/lib/dtos";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { Avatar, AvatarSize } from "./avatar";
-import { OnlineContext } from "@/app/lib/hooks/useOnlineStatus";
-import { useContext } from "react";
 
 export default function UserList({
   users,
@@ -13,7 +11,6 @@ export default function UserList({
   users: PublicUserEntity[];
   avatarSize: AvatarSize;
 }) {
-  const onlineStatus = useContext(OnlineContext);
   return (
     <TooltipProvider delayDuration={0}>
       <div className="flex flex-wrap gap-2">
@@ -24,7 +21,7 @@ export default function UserList({
             size={avatarSize}
             href={`/user/${u.id}`}
             alt={u.name}
-            online={onlineStatus[u.id] === 1}
+            id={u.id}
             key={u.id}
           />
         ))}

diff --git a/frontend/app/user/[id]/page.tsx b/frontend/app/user/[id]/page.tsx
@@ -47,7 +47,7 @@ export default async function FindUser({
   return (
     <div className="flex flex-col gap-4">
       <div>
-        <Avatar avatarURL={user.avatarURL} size="large" />
+        <Avatar avatarURL={user.avatarURL} size="large" id={user.id} />
       </div>
       <div className="text-3xl font-bold">{user.name}</div>
       {user.id !== currentUserId && (