Add relationship counts

This commit is contained in:
V 2023-09-05 05:58:02 +02:00
parent eeedc531a3
commit d3b18bbcd2
No known key found for this signature in database
GPG Key ID: A1DC0CFB5615D905

@ -29,41 +29,35 @@ export function openGuildProfileModal(guild: Guild) {
); );
} }
const Tabs = { const enum TabsE {
ServerInfo: { ServerInfo,
label: "Server Info", Friends,
component: ServerInfoTab BlockedUsers
}, }
Friends: {
label: "Friends",
component: FriendsTab
},
BlockedUsers: {
label: "Blocked Users",
component: BlockedUsersTab
}
} as const;
type TabKeys = keyof typeof Tabs;
interface GuildProps { interface GuildProps {
guild: Guild; guild: Guild;
} }
interface RelationshipProps extends GuildProps {
setCount(count: number): void;
}
const fetched = { const fetched = {
friends: false, friends: false,
blocked: false blocked: false
}; };
function GuildProfileModal({ guild }: GuildProps) { function GuildProfileModal({ guild }: GuildProps) {
const [friendCount, setFriendCount] = useState<number>();
const [blockedCount, setBlockedCount] = useState<number>();
useEffect(() => { useEffect(() => {
fetched.friends = false; fetched.friends = false;
fetched.blocked = false; fetched.blocked = false;
}, []); }, []);
const [currentTab, setCurrentTab] = useState<TabKeys>("ServerInfo"); const [currentTab, setCurrentTab] = useState(TabsE.ServerInfo);
const Tab = Tabs[currentTab].component;
const bannerUrl = guild.banner && IconUtils.getGuildBannerURL({ const bannerUrl = guild.banner && IconUtils.getGuildBannerURL({
id: guild.id, id: guild.id,
@ -79,7 +73,7 @@ function GuildProfileModal({ guild }: GuildProps) {
return ( return (
<div className={cl("root")}> <div className={cl("root")}>
{bannerUrl && currentTab === "ServerInfo" && ( {bannerUrl && currentTab === TabsE.ServerInfo && (
<img <img
className={cl("banner")} className={cl("banner")}
src={bannerUrl} src={bannerUrl}
@ -111,19 +105,30 @@ function GuildProfileModal({ guild }: GuildProps) {
selectedItem={currentTab} selectedItem={currentTab}
onItemSelect={setCurrentTab} onItemSelect={setCurrentTab}
> >
{Object.entries(Tabs).map(([id, { label }]) => <TabBar.Item
<TabBar.Item className={cl("tab", { selected: currentTab === TabsE.ServerInfo })}
className={cl("tab", { selected: currentTab === id })} id={TabsE.ServerInfo}
id={id} >
key={id} Server Info
> </TabBar.Item>
{label} <TabBar.Item
</TabBar.Item> className={cl("tab", { selected: currentTab === TabsE.Friends })}
)} id={TabsE.Friends}
>
Friends{friendCount !== undefined ? ` (${friendCount})` : ""}
</TabBar.Item>
<TabBar.Item
className={cl("tab", { selected: currentTab === TabsE.BlockedUsers })}
id={TabsE.BlockedUsers}
>
Blocked Users{blockedCount !== undefined ? ` (${blockedCount})` : ""}
</TabBar.Item>
</TabBar> </TabBar>
<div className={cl("tab-content")}> <div className={cl("tab-content")}>
<Tab guild={guild} /> {currentTab === TabsE.ServerInfo && <ServerInfoTab guild={guild} />}
{currentTab === TabsE.Friends && <FriendsTab guild={guild} setCount={setFriendCount} />}
{currentTab === TabsE.BlockedUsers && <BlockedUsersTab guild={guild} setCount={setBlockedCount} />}
</div> </div>
</div> </div>
); );
@ -185,16 +190,16 @@ function ServerInfoTab({ guild }: GuildProps) {
); );
} }
function FriendsTab({ guild }: GuildProps) { function FriendsTab({ guild, setCount }: RelationshipProps) {
return UserList("friends", guild, RelationshipStore.getFriendIDs()); 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)); 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 missing = [] as string[];
const members = [] 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 ( return (
<ScrollerThin fade className={cl("scroller")}> <ScrollerThin fade className={cl("scroller")}>
{members.map(id => {members.map(id =>