diff --git a/src/components/pure-status.tsx b/src/components/pure-status.tsx index 5a867a9f3..f3da09e52 100644 --- a/src/components/pure-status.tsx +++ b/src/components/pure-status.tsx @@ -6,8 +6,8 @@ import { useCallback, useEffect, useRef, useState } from 'react'; import { useIntl, FormattedMessage, defineMessages } from 'react-intl'; import { Link, useHistory } from 'react-router-dom'; -import { mentionCompose, replyCompose } from 'soapbox/actions/compose.ts'; -import { toggleFavourite, toggleReblog } from 'soapbox/actions/interactions.ts'; +import { mentionCompose } from 'soapbox/actions/compose.ts'; +import { toggleReblog } from 'soapbox/actions/interactions.ts'; import { openModal } from 'soapbox/actions/modals.ts'; import { toggleStatusHidden, unfilterStatus } from 'soapbox/actions/statuses.ts'; import TranslateButton from 'soapbox/components/translate-button.tsx'; @@ -21,6 +21,8 @@ import QuotedStatus from 'soapbox/features/status/containers/quoted-status-conta import { HotKeys } from 'soapbox/features/ui/components/hotkeys.tsx'; import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts'; import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts'; +import { useFavourite } from 'soapbox/hooks/useFavourite.ts'; +import { useReplyCompose } from 'soapbox/hooks/useReplyCompose.ts'; import { useSettings } from 'soapbox/hooks/useSettings.ts'; import { makeGetStatus } from 'soapbox/selectors/index.ts'; import { emojifyText } from 'soapbox/utils/emojify.tsx'; @@ -35,8 +37,6 @@ import SensitiveContentOverlay from './statuses/sensitive-content-overlay.tsx'; import StatusInfo from './statuses/status-info.tsx'; import Tombstone from './tombstone.tsx'; - - // Defined in components/scrollable-list export type ScrollPosition = { height: number; top: number }; @@ -104,6 +104,9 @@ const PureStatus: React.FC = (props) => { const filtered = (status.filtered.length || actualStatus.filtered.length) > 0; + const { replyCompose } = useReplyCompose(); + const { toggleFavourite } = useFavourite(); + // Track height changes we know about to compensate scrolling. useEffect(() => { didShowCard.current = Boolean(!muted && !hidden && status?.card); @@ -165,11 +168,11 @@ const PureStatus: React.FC = (props) => { const handleHotkeyReply = (e?: KeyboardEvent): void => { e?.preventDefault(); - dispatch(replyCompose(statusImmutable)); // fix later + replyCompose(status.id); }; const handleHotkeyFavourite = (): void => { - toggleFavourite(statusImmutable); // fix later + toggleFavourite(status.id); }; const handleHotkeyBoost = (e?: KeyboardEvent): void => { diff --git a/src/hooks/useFavourite.ts b/src/hooks/useFavourite.ts new file mode 100644 index 000000000..54158e9b6 --- /dev/null +++ b/src/hooks/useFavourite.ts @@ -0,0 +1,31 @@ +import { favourite as favouriteAction, unfavourite as unfavouriteAction, toggleFavourite as toggleFavouriteAction } from 'soapbox/actions/interactions.ts'; +import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts'; +import { useGetState } from 'soapbox/hooks/useGetState.ts'; + +export function useFavourite() { + const getState = useGetState(); + const dispatch = useAppDispatch(); + + const favourite = (statusId: string) => { + const status = getState().statuses.get(statusId); + if (status) { + dispatch(favouriteAction(status)); + } + }; + + const unfavourite = (statusId: string) => { + const status = getState().statuses.get(statusId); + if (status) { + dispatch(unfavouriteAction(status)); + } + }; + + const toggleFavourite = (statusId: string) => { + const status = getState().statuses.get(statusId); + if (status) { + dispatch(toggleFavouriteAction(status)); + } + }; + + return { favourite, unfavourite, toggleFavourite }; +} diff --git a/src/hooks/useReplyCompose.ts b/src/hooks/useReplyCompose.ts new file mode 100644 index 000000000..407083d09 --- /dev/null +++ b/src/hooks/useReplyCompose.ts @@ -0,0 +1,17 @@ +import { replyCompose as replyComposeAction } from 'soapbox/actions/compose.ts'; +import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts'; +import { useGetState } from 'soapbox/hooks/useGetState.ts'; + +export function useReplyCompose() { + const getState = useGetState(); + const dispatch = useAppDispatch(); + + const replyCompose = (statusId: string) => { + const status = getState().statuses.get(statusId); + if (status) { + dispatch(replyComposeAction(status)); + } + }; + + return { replyCompose }; +} \ No newline at end of file