Fix lint / formatting

bryphe-coder · bryphe-coder · commit 5c11f7cc1a22 · 2022-01-22T02:44:48.000Z
diff --git a/site/components/Navbar/UserDropdown.tsx b/site/components/Navbar/UserDropdown.tsx
@@ -1,5 +1,5 @@
-import Avatar from "@material-ui/core/Avatar"
 import Badge from "@material-ui/core/Badge"
+import Divider from "@material-ui/core/Divider"
 import ListItemIcon from "@material-ui/core/ListItemIcon"
 import ListItemText from "@material-ui/core/ListItemText"
 import MenuItem from "@material-ui/core/MenuItem"
@@ -12,7 +12,7 @@ import { BorderedMenu } from "./BorderedMenu"
 import { UserProfileCard } from "../User/UserProfileCard"
 
 import { User } from "../../contexts/UserContext"
-import Divider from "@material-ui/core/Divider"
+import { UserAvatar } from "../User"
 
 export interface UserDropdownProps {
   user: User
@@ -37,7 +37,7 @@ export const UserDropdown: React.FC<UserDropdownProps> = ({ user, onSignOut }: U
           <div className={styles.inner}>
             {user && (
               <Badge overlap="circle">
-                <Avatar>T</Avatar>
+                <UserAvatar user={user} />
               </Badge>
             )}
             {anchorEl ? (
diff --git a/site/components/User/UserAvatar.tsx b/site/components/User/UserAvatar.tsx
@@ -0,0 +1,25 @@
+import Avatar from "@material-ui/core/Avatar"
+import React from "react"
+import { User } from "../../contexts/UserContext"
+
+export interface UserAvatarProps {
+  user: User
+  className?: string
+}
+
+export const UserAvatar: React.FC<UserAvatarProps> = ({ user, className }) => {
+  return <Avatar className={className}>{firstLetter(user.username)}</Avatar>
+}
+
+/**
+ * `firstLetter` extracts the first character and returns it, uppercased
+ *
+ * If the string is empty or null, returns an empty string
+ */
+export const firstLetter = (str: string): string => {
+  if (str && str.length > 0) {
+    return str[0].toLocaleUpperCase()
+  }
+
+  return ""
+}
diff --git a/site/components/User/UserProfileCard.tsx b/site/components/User/UserProfileCard.tsx
@@ -1,9 +1,9 @@
-import Avatar from "@material-ui/core/Avatar"
 import { makeStyles } from "@material-ui/core/styles"
 import Typography from "@material-ui/core/Typography"
 import React from "react"
 
 import { User } from "../../contexts/UserContext"
+import { UserAvatar } from "./UserAvatar"
 
 interface UserProfileCardProps {
   user: User
@@ -15,7 +15,7 @@ export const UserProfileCard: React.FC<UserProfileCardProps> = ({ user }) => {
   return (
     <div className={styles.root}>
       <div className={styles.avatarContainer}>
-        <Avatar className={styles.avatar}>T</Avatar>
+        <UserAvatar className={styles.avatar} user={user} />
       </div>
       <Typography className={styles.userName}>{user.username}</Typography>
       <Typography className={styles.userEmail}>{user.email}</Typography>
diff --git a/site/components/User/index.ts b/site/components/User/index.ts
@@ -0,0 +1,2 @@
+export * from "./UserAvatar"
+export * from "./UserProfileCard"

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+export * from "./UserAvatar"`
	`2`	`+export * from "./UserProfileCard"`