From 88692b70205a4e8b34c8fee19f16e13feee51445 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Wed, 21 Jun 2023 17:13:29 -0500 Subject: [PATCH] Fix Patron badge in profile info panel --- .../features/ui/components/profile-info-panel.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/app/soapbox/features/ui/components/profile-info-panel.tsx b/app/soapbox/features/ui/components/profile-info-panel.tsx index 9cb4e7135..cdc4d66b3 100644 --- a/app/soapbox/features/ui/components/profile-info-panel.tsx +++ b/app/soapbox/features/ui/components/profile-info-panel.tsx @@ -3,6 +3,7 @@ import React from 'react'; import { defineMessages, useIntl, FormattedMessage } from 'react-intl'; +import { usePatronUser } from 'soapbox/api/hooks'; import Badge from 'soapbox/components/badge'; import Markup from 'soapbox/components/markup'; import { Icon, HStack, Stack, Text } from 'soapbox/components/ui'; @@ -35,7 +36,7 @@ const messages = defineMessages({ }); interface IProfileInfoPanel { - account: Account + account?: Account /** Username from URL params, in case the account isn't found. */ username: string } @@ -44,6 +45,7 @@ interface IProfileInfoPanel { const ProfileInfoPanel: React.FC = ({ account, username }) => { const intl = useIntl(); const { displayFqn } = useSoapboxConfig(); + const { patronUser } = usePatronUser(account?.url); const getStaffBadge = (): React.ReactNode => { if (account?.admin) { @@ -56,7 +58,7 @@ const ProfileInfoPanel: React.FC = ({ account, username }) => }; const getCustomBadges = (): React.ReactNode[] => { - const badges = getAccountBadges(account); + const badges = account ? getAccountBadges(account) : []; return badges.map(badge => ( = ({ account, username }) => const getBadges = (): React.ReactNode[] => { const custom = getCustomBadges(); const staffBadge = getStaffBadge(); - const isPatron = account.getIn(['patron', 'is_patron']) === true; + const isPatron = patronUser?.is_patron === true; const badges = []; @@ -86,7 +88,7 @@ const ProfileInfoPanel: React.FC = ({ account, username }) => }; const renderBirthday = (): React.ReactNode => { - const birthday = account.pleroma?.birthday; + const birthday = account?.pleroma?.birthday; if (!birthday) return null; const formattedBirthday = intl.formatDate(birthday, { timeZone: 'UTC', day: 'numeric', month: 'long', year: 'numeric' });