fix/user-avatar (#85)

* wip: user info avatar * feat: create a component for user avatar
iaurg · Nov 4, 2023 · 86f2b3b · 86f2b3b
1 parent fd23d6d
commit 86f2b3b
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 20 deletions.
diff --git a/frontend/src/components/LeaderBoardCard/index.tsx b/frontend/src/components/LeaderBoardCard/index.tsx
@@ -2,6 +2,7 @@
 import { Trophy, UserPlus } from "@phosphor-icons/react";
 import { StatusTag } from "../StatusTag";
 import ProfilePopOver from "../ProfilePopOver";
+import UserAvatar from "../UserAvatar";
 
 type LeaderBoardCardProps = {
   name: string;
@@ -20,20 +21,8 @@ export function LeaderBoardCard({
     <div className="flex flex-row justify-between items-center py-3 bg-black42-200 p-4 rounded-lg w-full">
       <ProfilePopOver name={name} score={score}>
         <div className="flex flex-row justify-between items-center">
-          {avatar ? (
-            <img
-              src={`${avatar}`}
-              width={40}
-              height={40}
-              className="rounded-full mr-3"
-            />
-          ) : (
-            <div className="rounded-full mr-3 bg-purple42-200 w-10 h-10 flex justify-center items-center">
-              <span className="text-white text-2xl">{name[0]}</span>
-            </div>
-          )}
-
-          <div className="text-white text-lg mr-3">{name}</div>
+          <UserAvatar imageUrl={avatar} login={name} />
+          <div className="text-white text-lg mx-3">{name}</div>
           <StatusTag status="offline" />
         </div>
       </ProfilePopOver>

diff --git a/frontend/src/components/Sidebar/index.tsx b/frontend/src/components/Sidebar/index.tsx
@@ -2,8 +2,13 @@
 import { Play, SignOut, Trophy } from "@phosphor-icons/react";
 import Image from "next/image";
 import Link from "next/link";
+import UserAvatar from "../UserAvatar";
+import { AuthContext } from "@/contexts/AuthContext";
+import { useContext } from "react";
 
 export default function Sidebar() {
+  const { user } = useContext(AuthContext);
+
   return (
     <div className="flex flex-col h-screen max-wd-[93] bg-black42-300">
       <div className="flex flex-col flex-1 justify-between items-center">
@@ -38,7 +43,7 @@ export default function Sidebar() {
         </div>
         <ul className="flex flex-col space-y-5 items-center justify-center pb-4">
           <li>
-            <img src="https://bigheads.io/svg" width={48} height={48} />
+            <UserAvatar imageUrl={user.avatar} login={user.displayName} />
           </li>
           <li>
             <Link

diff --git a/frontend/src/components/UserAvatar/index.tsx b/frontend/src/components/UserAvatar/index.tsx
@@ -0,0 +1,27 @@
+type UserAvatarProps = {
+  imageUrl: string;
+  login: string;
+};
+
+export default function UserAvatar({ imageUrl, login }: UserAvatarProps) {
+  if (imageUrl) {
+    // TODO: change to next/image when all urls comes from our server
+    return (
+      <img
+        src={`${imageUrl}`}
+        alt="avatar"
+        width={40}
+        height={40}
+        className="rounded-full"
+      />
+    );
+  }
+
+  return (
+    <div className="rounded-full bg-purple42-200 w-10 h-10 flex justify-center items-center">
+      <span className="text-white text-2xl">
+        {login && login[0].toLocaleUpperCase()}
+      </span>
+    </div>
+  );
+}
diff --git a/frontend/src/components/UserInfo/index.tsx b/frontend/src/components/UserInfo/index.tsx
@@ -4,18 +4,15 @@ import MFAModal from "../MFAModal";
 import { useContext } from "react";
 import { AuthContext } from "@/contexts/AuthContext";
 import EditUserModal from "../EditUserModal";
+import UserAvatar from "../UserAvatar";
 
 export function UserInfo() {
   const { user } = useContext(AuthContext);
   return (
     <div className="flex justify-between items-center">
       <div className="flex items-center space-x-3">
         <div>
-          <img
-            src={user.avatar}
-            alt="Avatar"
-            className="rounded-full w-14 h-14"
-          />
+          <UserAvatar imageUrl={user.avatar} login={user.displayName} />
         </div>
         <div className="text-white">
           <div className="text-lg">{user.displayName}</div>{" "}