diff --git a/fluxer_app/src/components/channel/dm/DMWelcomeSection.tsx b/fluxer_app/src/components/channel/dm/DMWelcomeSection.tsx index 19ea7931..cd5fbbbd 100644 --- a/fluxer_app/src/components/channel/dm/DMWelcomeSection.tsx +++ b/fluxer_app/src/components/channel/dm/DMWelcomeSection.tsx @@ -30,8 +30,9 @@ import {Button} from '~/components/uikit/Button/Button'; import FocusRing from '~/components/uikit/FocusRing/FocusRing'; import {StatusAwareAvatar} from '~/components/uikit/StatusAwareAvatar'; import {Tooltip} from '~/components/uikit/Tooltip/Tooltip'; +import type {GuildRecord} from '~/records/GuildRecord'; import type {ProfileRecord} from '~/records/ProfileRecord'; -import GuildMemberStore from '~/stores/GuildMemberStore'; +import GuildStore from '~/stores/GuildStore'; import MobileLayoutStore from '~/stores/MobileLayoutStore'; import RelationshipStore from '~/stores/RelationshipStore'; import UserStore from '~/stores/UserStore'; @@ -45,11 +46,16 @@ export const DMWelcomeSection: React.FC = observer(functi const {t} = useLingui(); const user = UserStore.getUser(userId); - const mutualGuilds = GuildMemberStore.getMutualGuilds(user?.id ?? ''); const relationship = RelationshipStore.getRelationship(user?.id ?? ''); const relationshipType = relationship?.type; const [profile, setProfile] = React.useState(null); const mobileLayout = MobileLayoutStore; + const profileMutualGuilds = React.useMemo(() => profile?.mutualGuilds ?? [], [profile?.mutualGuilds]); + const mutualGuildRecords = React.useMemo(() => { + return profileMutualGuilds + .map((mutualGuild) => GuildStore.getGuild(mutualGuild.id)) + .filter((guild): guild is GuildRecord => guild !== undefined); + }, [profileMutualGuilds]); React.useEffect(() => { if (!user) return; @@ -92,7 +98,7 @@ export const DMWelcomeSection: React.FC = observer(functi RelationshipActionCreators.removeRelationship(user.id); }; - const hasMutualGuilds = mutualGuilds.length > 0; + const hasMutualGuilds = profileMutualGuilds.length > 0; const currentUserUnclaimed = !(UserStore.currentUser?.isClaimed() ?? true); const shouldShowActionButton = !user.bot && @@ -100,7 +106,7 @@ export const DMWelcomeSection: React.FC = observer(functi relationshipType === RelationshipTypes.INCOMING_REQUEST || relationshipType === RelationshipTypes.OUTGOING_REQUEST || relationshipType === RelationshipTypes.FRIEND); - const mutualGuildCount = mutualGuilds.length; + const mutualGuildCount = profileMutualGuilds.length; const renderActionButton = () => { if (user.bot) return null; @@ -154,13 +160,15 @@ export const DMWelcomeSection: React.FC = observer(functi return (
- - {mutualGuilds.map((guild) => ( -
- -
- ))} -
+ {mutualGuildRecords.length > 0 && ( + + {mutualGuildRecords.map((guild) => ( +
+ +
+ ))} +
+ )} {mutualGuildCount === 1 diff --git a/fluxer_app/src/stores/GuildMemberStore.tsx b/fluxer_app/src/stores/GuildMemberStore.tsx index c5cfea5b..058b9fcc 100644 --- a/fluxer_app/src/stores/GuildMemberStore.tsx +++ b/fluxer_app/src/stores/GuildMemberStore.tsx @@ -19,10 +19,9 @@ import {makeAutoObservable} from 'mobx'; import {type GuildMember, GuildMemberRecord} from '~/records/GuildMemberRecord'; -import type {GuildReadyData, GuildRecord} from '~/records/GuildRecord'; +import type {GuildReadyData} from '~/records/GuildRecord'; import AuthenticationStore from '~/stores/AuthenticationStore'; import ConnectionStore from '~/stores/ConnectionStore'; -import GuildStore from '~/stores/GuildStore'; type Members = Record; @@ -80,21 +79,6 @@ class GuildMemberStore { return Object.keys(this.members[guildId] ?? {}).length; } - getMutualGuilds(userId: string): Array { - const currentUserId = AuthenticationStore.currentUserId; - if (!currentUserId || !userId || currentUserId === userId) { - return []; - } - - const guilds = GuildStore.getGuilds(); - - return guilds.filter((guild) => { - const userIsMember = this.getMember(guild.id, userId) != null; - const currentUserIsMember = this.getMember(guild.id, currentUserId) != null; - return userIsMember && currentUserIsMember; - }); - } - handleConnectionOpen(guilds: Array): void { this.members = {}; for (const guild of guilds) {