diff --git a/app/javascript/mastodon/features/picture_in_picture/components/footer.tsx b/app/javascript/mastodon/features/picture_in_picture/components/footer.tsx index 26cb2172a94..080aaca4512 100644 --- a/app/javascript/mastodon/features/picture_in_picture/components/footer.tsx +++ b/app/javascript/mastodon/features/picture_in_picture/components/footer.tsx @@ -1,4 +1,4 @@ -import { useCallback } from 'react'; +import { useCallback, useMemo } from 'react'; import { defineMessages, useIntl } from 'react-intl'; @@ -21,6 +21,9 @@ import { openModal } from 'mastodon/actions/modal'; import { IconButton } from 'mastodon/components/icon_button'; import { useIdentity } from 'mastodon/identity_context'; import { me } from 'mastodon/initial_state'; +import type { Status } from 'mastodon/models/status'; +import { makeGetStatus } from 'mastodon/selectors'; +import type { RootState } from 'mastodon/store'; import { useAppSelector, useAppDispatch } from 'mastodon/store'; const messages = defineMessages({ @@ -47,6 +50,11 @@ const messages = defineMessages({ open: { id: 'status.open', defaultMessage: 'Expand this status' }, }); +type GetStatusSelector = ( + state: RootState, + props: { id?: string | null; contextType?: string }, +) => Status | null; + export const Footer: React.FC<{ statusId: string; withOpenButton?: boolean; @@ -56,7 +64,8 @@ export const Footer: React.FC<{ const intl = useIntl(); const history = useHistory(); const dispatch = useAppDispatch(); - const status = useAppSelector((state) => state.statuses.get(statusId)); + const getStatus = useMemo(() => makeGetStatus(), []) as GetStatusSelector; + const status = useAppSelector((state) => getStatus(state, { id: statusId })); const accountId = status?.get('account') as string | undefined; const account = useAppSelector((state) => accountId ? state.accounts.get(accountId) : undefined,