feat: view profile

src/Avatar.tsx

@@ -1,11 +1,35 @@
 import { createRef, MouseEventHandler, useEffect, useState } from "react";
 import { useSession } from "./Session";
+import { User } from "./api";
 
 interface ContextMenuItem {
   label: string;
   onClick: () => void;
 }
 
+const UserInfo = (user: User) => {
+  return (
+    <div className="user-info">
+      <div>
+        <b>username: </b>
+      </div>
+      <div>{user?.username}</div>
+      <div>
+        <b>display name: </b>
+      </div>
+      <div>{user?.display_name}</div>
+      <div>
+        <b>number: </b>
+      </div>
+      <div>{user?.number ? user?.number : "-"}</div>
+      <div>
+        <b>email: </b>
+      </div>
+      <div>{user?.email ? user?.email : "-"}</div>
+    </div>
+  );
+};
+
 export default function Avatar() {
   const { user, onLogout } = useSession();
   const [contextMenu, setContextMenu] = useState<{
@@ -62,13 +86,11 @@ export default function Avatar() {
 
   function handleViewProfile() {
     handleMenuClose();
-    setContextMenu({ ...contextMenu, allowOpen: false });
-    dialogRef.current?.showModal();
-    setDialog(
-      <ul style={{ listStyle: "none" }}>
-        <li>username: {user?.username}</li>
-      </ul>
-    );
+    if (user) {
+      setContextMenu({ ...contextMenu, allowOpen: false });
+      dialogRef.current?.showModal();
+      setDialog(UserInfo(user));
+    }
   }
 
   return (