+ {bannerUrl && currentTab === Tabs.ServerInfo && (
+
openImageModal(bannerUrl)}
+ />
+ )}
+
+
+ {guild.icon
+ ?
openImageModal(iconUrl)}
+ />
+ :
{guild.acronym}
+ }
+
+
+ {guild.name}
+ {guild.description && {guild.description}}
+
+
+
+
+
+ Server Info
+
+
+ Friends{friendCount !== undefined ? ` (${friendCount})` : ""}
+
+
+ Blocked Users{blockedCount !== undefined ? ` (${blockedCount})` : ""}
+
+
+
+
+ {currentTab === Tabs.ServerInfo && }
+ {currentTab === Tabs.Friends && }
+ {currentTab === Tabs.BlockedUsers && }
+
+
+ );
+}
+
+
+function Owner(guildId: string, owner: User) {
+ const guildAvatar = GuildMemberStore.getMember(guildId, owner.id)?.avatar;
+ const ownerAvatarUrl =
+ guildAvatar
+ ? IconUtils.getGuildMemberAvatarURLSimple({
+ userId: owner!.id,
+ avatar: guildAvatar,
+ guildId,
+ canAnimate: true
+ }, true)
+ : IconUtils.getUserAvatarURL(owner, true);
+
+ return (
+
+ {Object.entries(Fields).map(([name, node]) =>
+
+ {name}
+ {typeof node === "string" ? {node} : node}
+
+ )}
+
+ );
+}
+
+function FriendsTab({ guild, setCount }: RelationshipProps) {
+ return UserList("friends", guild, RelationshipStore.getFriendIDs(), setCount);
+}
+
+function BlockedUsersTab({ guild, setCount }: RelationshipProps) {
+ const blockedIds = Object.keys(RelationshipStore.getRelationships()).filter(id => RelationshipStore.isBlocked(id));
+ return UserList("blocked", guild, blockedIds, setCount);
+}
+
+function UserList(type: "friends" | "blocked", guild: Guild, ids: string[], setCount: (count: number) => void) {
+ const missing = [] as string[];
+ const members = [] as string[];
+
+ for (const id of ids) {
+ if (GuildMemberStore.isMember(guild.id, id))
+ members.push(id);
+ else
+ missing.push(id);
+ }
+
+ // Used for side effects (rerender on member request success)
+ useStateFromStores(
+ [GuildMemberStore],
+ () => GuildMemberStore.getMemberIds(guild.id),
+ null,
+ (old, curr) => old.length === curr.length
+ );
+
+ useEffect(() => {
+ if (!fetched[type] && missing.length) {
+ fetched[type] = true;
+ FluxDispatcher.dispatch({
+ type: "GUILD_MEMBERS_REQUEST",
+ guildIds: [guild.id],
+ userIds: missing
+ });
+ }
+ }, []);
+
+ useEffect(() => setCount(members.length), [members.length]);
+
+ return (
+