feat: view profile

src/App.css

@@ -237,6 +237,7 @@ h3 {
 
 button,
 .button {
+  margin: 4px;
   font-weight: bold;
   font-size: large;
   color: aliceblue;
@@ -395,11 +396,23 @@ button,
 
 .avatar {
   background-color: lightsteelblue;
-  padding: 2px 8px;
+  padding: 3px 8px;
   width: fit-content;
-  margin: auto;
+  border: 3px solid black;
+  margin: 0 auto 16px auto;
 }
 
+.user-info {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 2px 16px;
+
+  div {
+    text-align: left;
+  }
+}
+
+
 .networkroute {
   z-index: 3;
   position: absolute;

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 (

src/Rankings.tsx

@@ -235,7 +235,7 @@ export default function Rankings() {
     setOpenTab(pageName);
   }
 
-  return user ? (
+  return (
     <>
       <div className="container navbar">
         <button
@@ -261,13 +261,11 @@ export default function Rankings() {
       </span>
 
       <div id="Chemistry" className="tabcontent">
-        <Chemistry {...{ user, players }} />
+        {user && <Chemistry {...{ user, players }} />}
       </div>
       <div id="MVP" className="tabcontent">
-        <MVP {...{ user, players }} />
+        {user && <MVP {...{ user, players }} />}
       </div>
     </>
-  ) : (
-    <span>not logged in. refresh the page...</span>
   );
 }