diff --git a/src/plugins/serverProfile/GuildProfileModal.tsx b/src/plugins/serverProfile/GuildProfileModal.tsx index 1c1d4d7f..d7bacef8 100644 --- a/src/plugins/serverProfile/GuildProfileModal.tsx +++ b/src/plugins/serverProfile/GuildProfileModal.tsx @@ -29,41 +29,35 @@ export function openGuildProfileModal(guild: Guild) { ); } -const Tabs = { - ServerInfo: { - label: "Server Info", - component: ServerInfoTab - }, - Friends: { - label: "Friends", - component: FriendsTab - }, - BlockedUsers: { - label: "Blocked Users", - component: BlockedUsersTab - } -} as const; - -type TabKeys = keyof typeof Tabs; +const enum TabsE { + ServerInfo, + Friends, + BlockedUsers +} interface GuildProps { guild: Guild; } +interface RelationshipProps extends GuildProps { + setCount(count: number): void; +} + const fetched = { friends: false, blocked: false }; function GuildProfileModal({ guild }: GuildProps) { + const [friendCount, setFriendCount] = useState(); + const [blockedCount, setBlockedCount] = useState(); + useEffect(() => { fetched.friends = false; fetched.blocked = false; }, []); - const [currentTab, setCurrentTab] = useState("ServerInfo"); - - const Tab = Tabs[currentTab].component; + const [currentTab, setCurrentTab] = useState(TabsE.ServerInfo); const bannerUrl = guild.banner && IconUtils.getGuildBannerURL({ id: guild.id, @@ -79,7 +73,7 @@ function GuildProfileModal({ guild }: GuildProps) { return (
- {bannerUrl && currentTab === "ServerInfo" && ( + {bannerUrl && currentTab === TabsE.ServerInfo && ( - {Object.entries(Tabs).map(([id, { label }]) => - - {label} - - )} + + Server Info + + + Friends{friendCount !== undefined ? ` (${friendCount})` : ""} + + + Blocked Users{blockedCount !== undefined ? ` (${blockedCount})` : ""} +
- + {currentTab === TabsE.ServerInfo && } + {currentTab === TabsE.Friends && } + {currentTab === TabsE.BlockedUsers && }
); @@ -185,16 +190,16 @@ function ServerInfoTab({ guild }: GuildProps) { ); } -function FriendsTab({ guild }: GuildProps) { - return UserList("friends", guild, RelationshipStore.getFriendIDs()); +function FriendsTab({ guild, setCount }: RelationshipProps) { + return UserList("friends", guild, RelationshipStore.getFriendIDs(), setCount); } -function BlockedUsersTab({ guild }: GuildProps) { +function BlockedUsersTab({ guild, setCount }: RelationshipProps) { const blockedIds = Object.keys(RelationshipStore.getRelationships()).filter(id => RelationshipStore.isBlocked(id)); - return UserList("blocked", guild, blockedIds); + return UserList("blocked", guild, blockedIds, setCount); } -function UserList(type: "friends" | "blocked", guild: Guild, ids: string[]) { +function UserList(type: "friends" | "blocked", guild: Guild, ids: string[], setCount: (count: number) => void) { const missing = [] as string[]; const members = [] as string[]; @@ -224,6 +229,8 @@ function UserList(type: "friends" | "blocked", guild: Guild, ids: string[]) { } }, []); + useEffect(() => setCount(members.length), [members.length]); + return ( {members.map(id =>