[frontend] avatar props の id を必須でなくした

利用するコンポーネントにid を持っていない可能性のあるコンポーネントがあったため
usatie · Feb 17, 2024 · 8b7cfd9 · 8b7cfd9
1 parent e62a2ed
commit 8b7cfd9
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 5 deletions.
diff --git 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<HTMLInputElement>(null);
   const submitAvatarForm = () => {
     const form = document.getElementById("avatar-form") as HTMLFormElement;
@@ -11,7 +17,7 @@ export default function AvatarForm({ avatarURL }: { avatarURL?: string }) {
   return (
     <form id="avatar-form" action={uploadAvatar}>
       <button type="button" onClick={() => inputRef.current?.click()}>
-        <Avatar avatarURL={avatarURL} size="large" />
+        <Avatar avatarURL={avatarURL} size="large" id={id} />
       </button>
       <input
         ref={inputRef}

diff --git a/frontend/app/ui/settings/profile-form.tsx b/frontend/app/ui/settings/profile-form.tsx
@@ -28,7 +28,7 @@ export default function ProfileForm() {
   // Profile : the rest
   return (
     <>
-      <AvatarForm avatarURL={currentUser?.avatarURL} />
+      <AvatarForm avatarURL={currentUser?.avatarURL} id={currentUser?.id} />
       <form action={action}>
         <Stack space="space-y-4">
           <ProfileItem type="text" title="name" value={currentUser?.name} />

diff --git 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 <Skeleton className={`flex-none rounded-full ${sizeClass}`} />;