Add relationship counts
This commit is contained in:
parent
eeedc531a3
commit
d3b18bbcd2
@ -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 === id })}
|
className={cl("tab", { selected: currentTab === TabsE.ServerInfo })}
|
||||||
id={id}
|
id={TabsE.ServerInfo}
|
||||||
key={id}
|
|
||||||
>
|
>
|
||||||
{label}
|
Server Info
|
||||||
|
</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.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 =>
|
||||||
|
Loading…
Reference in New Issue
Block a user