feat: show teams

src/Avatar.tsx

@@ -4,13 +4,14 @@ import { User } from "./api";
 import { useTheme } from "./ThemeProvider";
 import { colourTheme, darkTheme, normalTheme, rainbowTheme } from "./themes";
 import { useNavigate } from "react-router";
+import { Team } from "./types";
 
 interface ContextMenuItem {
   label: string;
   onClick: () => void;
 }
 
-const UserInfo = (user: User) => {
+const UserInfo = (user: User, teams: Team[] | undefined) => {
   return (
     <div className="user-info">
       <div>
@@ -24,17 +25,38 @@ const UserInfo = (user: User) => {
       <div>
         <b>number: </b>
       </div>
-      <div>{user?.number ? user?.number : "-"}</div>
+      <div>{user?.number || "-"}</div>
       <div>
         <b>email: </b>
       </div>
-      <div>{user?.email ? user?.email : "-"}</div>
+      <div>{user?.email || "-"}</div>
+      {teams && (
+        <>
+          <div>
+            <b>teams: </b>
+          </div>
+          <ul
+            style={{
+              margin: 0,
+              padding: 0,
+              textAlign: "left",
+            }}
+          >
+            {teams.map((team) => (
+              <li>
+                {team.name} (
+                {team.location || team.country || "location unknown"})
+              </li>
+            ))}
+          </ul>
+        </>
+      )}
     </div>
   );
 };
 
 export default function Avatar() {
-  const { user, onLogout } = useSession();
+  const { user, teams, onLogout } = useSession();
   const { theme, setTheme } = useTheme();
   const navigate = useNavigate();
   const [contextMenu, setContextMenu] = useState<{
@@ -118,9 +140,9 @@ export default function Avatar() {
   const dialogRef = createRef<HTMLDialogElement>();
 
   function handleViewProfile() {
-    if (user) {
+    if (user && teams) {
       dialogRef.current?.showModal();
-      setDialog(UserInfo(user));
+      setDialog(UserInfo(user, teams));
     }
   }