diff --git a/packages/pl-fe/src/features/admin/components/report.tsx b/packages/pl-fe/src/features/admin/components/report.tsx index c90818df7..f94fad341 100644 --- a/packages/pl-fe/src/features/admin/components/report.tsx +++ b/packages/pl-fe/src/features/admin/components/report.tsx @@ -2,6 +2,7 @@ import React, { useCallback } from 'react'; import { FormattedMessage } from 'react-intl'; import { Link } from 'react-router-dom'; +import { useAccount } from 'pl-fe/api/hooks/accounts/use-account'; import HoverAccountWrapper from 'pl-fe/components/hover-account-wrapper'; import Avatar from 'pl-fe/components/ui/avatar'; import HStack from 'pl-fe/components/ui/hstack'; @@ -23,10 +24,11 @@ const Report: React.FC = ({ id }) => { const report = useAppSelector((state) => getReport(state, minifiedReport)); + const { account: targetAccount } = useAccount(report?.target_account_id); + if (!report) return null; const account = report.account; - const targetAccount = report.target_account!; const statuses = report.statuses; const statusCount = statuses.length; @@ -35,25 +37,27 @@ const Report: React.FC = ({ id }) => { return ( - - - - - - - - - @{targetAccount.fqn} - - - - + {targetAccount && ( + + + + + + + + + @{targetAccount.fqn} + + + + + )} {!!account && ( diff --git a/packages/pl-fe/src/pages/dashboard/report.tsx b/packages/pl-fe/src/pages/dashboard/report.tsx index 969ff3bf9..8d82f357a 100644 --- a/packages/pl-fe/src/pages/dashboard/report.tsx +++ b/packages/pl-fe/src/pages/dashboard/report.tsx @@ -3,6 +3,7 @@ import { defineMessages, FormattedDate, FormattedMessage, useIntl } from 'react- import { Link } from 'react-router-dom'; import ReactSwipeableViews from 'react-swipeable-views'; +import { useAccount } from 'pl-fe/api/hooks/accounts/use-account'; import Account from 'pl-fe/components/account'; import List, { ListItem } from 'pl-fe/components/list'; import Card from 'pl-fe/components/ui/card'; @@ -92,6 +93,9 @@ const ReportPage: React.FC = (props) => { const report = useAppSelector((state) => getReport(state, minifiedReport)); + const { account: authorAccount } = useAccount(report?.account_id); + const { account: targetAccount } = useAccount(report?.target_account_id); + const { mutate: selfAssignReport } = useSelfAssignReport(reportId); const { mutate: unassignReport } = useUnassignReport(reportId); const { mutate: resolveReport } = useResolveReport(reportId); @@ -148,14 +152,14 @@ const ReportPage: React.FC = (props) => {
- {report.target_account && ( - + {targetAccount && ( + - + @@ -175,7 +179,7 @@ const ReportPage: React.FC = (props) => { - {report.account && ( + {authorAccount && ( @@ -186,7 +190,7 @@ const ReportPage: React.FC = (props) => { - @{report.account.acct} + @{authorAccount.acct} diff --git a/packages/pl-fe/src/queries/admin/use-accounts.ts b/packages/pl-fe/src/queries/admin/use-accounts.ts index 6a0849d82..6088ce4c5 100644 --- a/packages/pl-fe/src/queries/admin/use-accounts.ts +++ b/packages/pl-fe/src/queries/admin/use-accounts.ts @@ -22,16 +22,17 @@ const useAdminAccounts = makePaginatedResponseQuery( 'isAdmin', ); -const useAdminAccount = (accountId: string) => { +const useAdminAccount = (accountId?: string) => { const client = useClient(); const dispatch = useAppDispatch(); const query = useQuery({ queryKey: ['admin', 'accounts', accountId], - queryFn: () => client.admin.accounts.getAccount(accountId).then(({ account, ...adminAccount }) => { + queryFn: () => client.admin.accounts.getAccount(accountId!).then(({ account, ...adminAccount }) => { dispatch(importEntities({ accounts: [account] })); return adminAccount as AdminAccount; }), + enabled: !!accountId, }); const { account } = useAccount(query.data ? accountId : undefined); diff --git a/packages/pl-fe/src/queries/utils/minify-list.ts b/packages/pl-fe/src/queries/utils/minify-list.ts index 760e89059..6af1bb865 100644 --- a/packages/pl-fe/src/queries/utils/minify-list.ts +++ b/packages/pl-fe/src/queries/utils/minify-list.ts @@ -42,6 +42,13 @@ const minifyAdminAccountList = (response: PaginatedResponse) => }); const minifyAdminReport = ({ account, action_taken_by_account, assigned_account, target_account, statuses, ...adminReport }: AdminReport) => { + minifyAdminAccountList({ + items: [account, action_taken_by_account, assigned_account, target_account].filter((a): a is AdminAccount => !!a), + previous: null, + next: null, + partial: false, + }); + store.dispatch(importEntities({ accounts: [account.account, action_taken_by_account?.account, assigned_account?.account, target_account?.account], statuses: statuses as any, diff --git a/packages/pl-fe/src/styles/new/components.scss b/packages/pl-fe/src/styles/new/components.scss index 6c458f641..8a5e3899d 100644 --- a/packages/pl-fe/src/styles/new/components.scss +++ b/packages/pl-fe/src/styles/new/components.scss @@ -68,7 +68,17 @@ flex-direction: column; &__counter { - @apply absolute -right-3 -top-2 flex h-5 min-w-[20px] shrink-0 items-center justify-center whitespace-nowrap break-words; + position: absolute; + right: -0.75rem; + top: -0.5rem; + display: flex; + height: 1.25rem; + min-width: 1.25rem; + flex-shrink: 0; + align-items: center; + justify-content: center; + white-space: nowrap; + word-break: break-word; } }