refactor: create useFavourite and useReplyCompose hooks, used in PureStatus component

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<IPureStatus> = (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<IPureStatus> = (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 => {

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 };
+}

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 };
+}