From 735ce18af035aa348158d8b0fe2ba978f563ea41 Mon Sep 17 00:00:00 2001 From: kotto5 Date: Sat, 17 Feb 2024 12:44:09 +0900 Subject: [PATCH 1/3] =?UTF-8?q?[frontend]=20avatar.tsx=20=E3=81=A7=20useCo?= =?UTF-8?q?ntext=20=E3=82=92=E7=94=A8=E3=81=84=E3=81=A6=E3=80=81onlineStat?= =?UTF-8?q?us=20=E3=82=92=E5=8F=96=E5=BE=97=E3=81=99=E3=82=8B=20=E3=81=BE?= =?UTF-8?q?=E3=81=9F=E3=80=81Context=20=E3=82=92=E4=BD=BF=E3=81=86?= =?UTF-8?q?=E3=81=9F=E3=82=81=E3=81=AB=20avatar=20component=20=E3=82=92=20?= =?UTF-8?q?client=20component=20=E3=81=AB=E3=81=97=E3=81=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/app/ui/user/avatar.tsx | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/frontend/app/ui/user/avatar.tsx b/frontend/app/ui/user/avatar.tsx index 2e71db43..47d4a777 100644 --- a/frontend/app/ui/user/avatar.tsx +++ b/frontend/app/ui/user/avatar.tsx @@ -1,3 +1,5 @@ +"use client"; + import { Skeleton } from "@/components/ui/skeleton"; import { Tooltip, @@ -6,6 +8,8 @@ import { TooltipTrigger, } from "@/components/ui/tooltip"; import Link from "next/link"; +import { useContext } from "react"; +import { OnlineContext } from "@/app/lib/hooks/useOnlineStatus"; export type AvatarSize = "small" | "medium" | "large"; @@ -14,11 +18,16 @@ export interface Props { size: AvatarSize; href?: string; alt?: string; - online?: boolean; + id: number; } -export function Avatar({ avatarURL, size, href, alt, online }: Props) { +export function Avatar({ avatarURL, size, href, alt, id }: Props) { + const onlineStatuses = useContext(OnlineContext); + const online = onlineStatuses[id]; let sizeClass = ""; + if (!avatarURL) { + return ; + } let onlineStatusClass = online ? "bg-green-500 " : "bg-gray-500 "; switch (size) { case "small": From fb2427cbc9abe938ec8469d7947a45f3621aa03c Mon Sep 17 00:00:00 2001 From: kotto5 Date: Sat, 17 Feb 2024 12:45:30 +0900 Subject: [PATCH 2/3] =?UTF-8?q?[frontend]=20avatar=20=E3=81=AE=20props=20?= =?UTF-8?q?=E3=81=AE=E5=A4=89=E6=9B=B4=E3=81=AB=E5=AF=BE=E5=BF=9C=20(user?= =?UTF-8?q?=20id=20=E3=82=92=E6=B8=A1=E3=81=99)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/app/pong/GameCard.tsx | 2 +- frontend/app/room/[id]/sidebar-item.tsx | 6 +++++- frontend/app/ui/room/ban-item.tsx | 2 +- frontend/app/ui/room/invite-item.tsx | 2 +- frontend/app/ui/room/message-item.tsx | 1 + frontend/app/ui/room/unban-item.tsx | 2 +- frontend/app/ui/user/match-history.tsx | 1 + frontend/app/ui/user/user-list.tsx | 5 +---- frontend/app/user/[id]/page.tsx | 2 +- 9 files changed, 13 insertions(+), 10 deletions(-) diff --git a/frontend/app/pong/GameCard.tsx b/frontend/app/pong/GameCard.tsx index 242cf7d4..6dd3e111 100644 --- 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} /> diff --git a/frontend/app/room/[id]/sidebar-item.tsx b/frontend/app/room/[id]/sidebar-item.tsx index 36d62963..5506d8c9 100644 --- a/frontend/app/room/[id]/sidebar-item.tsx +++ b/frontend/app/room/[id]/sidebar-item.tsx @@ -110,7 +110,11 @@ export default function SidebarItem({ <> - + {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 index 9de2414a..7dcd1e45 100644 --- 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 (
- +
{user.name} diff --git a/frontend/app/ui/room/invite-item.tsx b/frontend/app/ui/room/invite-item.tsx index 8cf10a85..46468f5a 100644 --- 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 (
- +
{user.name} diff --git a/frontend/app/ui/room/message-item.tsx b/frontend/app/ui/room/message-item.tsx index a379f7d4..e0b66662 100644 --- 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} > )} diff --git a/frontend/app/ui/room/unban-item.tsx b/frontend/app/ui/room/unban-item.tsx index 49db7199..a2b2d7bc 100644 --- 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 (
- +
{user.name} diff --git a/frontend/app/ui/user/match-history.tsx b/frontend/app/ui/user/match-history.tsx index 1eee8f11..de027359 100644 --- 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} />
{detail.user.name}
diff --git a/frontend/app/ui/user/user-list.tsx b/frontend/app/ui/user/user-list.tsx index 26cc1347..7cec9a5b 100644 --- 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 (
@@ -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 index cf7c328b..f30ab07c 100644 --- a/frontend/app/user/[id]/page.tsx +++ b/frontend/app/user/[id]/page.tsx @@ -47,7 +47,7 @@ export default async function FindUser({ return (
- +
{user.name}
{user.id !== currentUserId && ( From 8b7cfd9c996a7a54aa3bf2e7121ea49dd9882abc Mon Sep 17 00:00:00 2001 From: kotto5 Date: Sat, 17 Feb 2024 13:33:51 +0900 Subject: [PATCH 3/3] =?UTF-8?q?[frontend]=20avatar=20props=20=E3=81=AE=20i?= =?UTF-8?q?d=20=E3=82=92=20=E5=BF=85=E9=A0=88=E3=81=A7=E3=81=AA=E3=81=8F?= =?UTF-8?q?=E3=81=97=E3=81=9F=20=E5=88=A9=E7=94=A8=E3=81=99=E3=82=8B?= =?UTF-8?q?=E3=82=B3=E3=83=B3=E3=83=9D=E3=83=BC=E3=83=8D=E3=83=B3=E3=83=88?= =?UTF-8?q?=E3=81=ABid=20=E3=82=92=E6=8C=81=E3=81=A3=E3=81=A6=E3=81=84?= =?UTF-8?q?=E3=81=AA=E3=81=84=E5=8F=AF=E8=83=BD=E6=80=A7=E3=81=AE=E3=81=82?= =?UTF-8?q?=E3=82=8B=E3=82=B3=E3=83=B3=E3=83=9D=E3=83=BC=E3=83=8D=E3=83=B3?= =?UTF-8?q?=E3=83=88=E3=81=8C=E3=81=82=E3=81=A3=E3=81=9F=E3=81=9F=E3=82=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/app/ui/settings/avatar-form.tsx | 10 ++++++++-- frontend/app/ui/settings/profile-form.tsx | 2 +- frontend/app/ui/user/avatar.tsx | 4 ++-- 3 files changed, 11 insertions(+), 5 deletions(-) diff --git a/frontend/app/ui/settings/avatar-form.tsx b/frontend/app/ui/settings/avatar-form.tsx index 13354fa3..84dd8f2e 100644 --- a/frontend/app/ui/settings/avatar-form.tsx +++ b/frontend/app/ui/settings/avatar-form.tsx @@ -2,7 +2,13 @@ import { uploadAvatar } from "@/app/lib/actions"; import { Avatar } from "@/app/ui/user/avatar"; import { useRef } from "react"; -export default function AvatarForm({ avatarURL }: { avatarURL?: string }) { +export default function AvatarForm({ + avatarURL, + id, +}: { + avatarURL?: string; + id?: number; +}) { const inputRef = useRef(null); const submitAvatarForm = () => { const form = document.getElementById("avatar-form") as HTMLFormElement; @@ -11,7 +17,7 @@ export default function AvatarForm({ avatarURL }: { avatarURL?: string }) { return (
- + diff --git a/frontend/app/ui/user/avatar.tsx b/frontend/app/ui/user/avatar.tsx index 47d4a777..0d6d83ee 100644 --- a/frontend/app/ui/user/avatar.tsx +++ b/frontend/app/ui/user/avatar.tsx @@ -18,12 +18,12 @@ export interface Props { size: AvatarSize; href?: string; alt?: string; - id: number; + id?: number; } export function Avatar({ avatarURL, size, href, alt, id }: Props) { const onlineStatuses = useContext(OnlineContext); - const online = onlineStatuses[id]; + const online = id ? onlineStatuses[id] : false; let sizeClass = ""; if (!avatarURL) { return ;