refactor: extract duplicate computation code into hook

Author: chrispader

src/pages/inbox/report/ReportActionsList.tsx

@@ -72,14 +72,14 @@ import type * as OnyxTypes from '@src/types/onyx';
 import FloatingMessageCounter from './FloatingMessageCounter';
 import getInitialNumToRender from './getInitialNumReportActionsToRender';
 import getReportActionsListInitialNumToRender from './getReportActionsListInitialNumToRender';
-import {useReportActionActiveEdit} from './ReportActionEditMessageContext';
 import ReportActionsListHeader from './ReportActionsListHeader';
 import ReportActionsListItemRenderer from './ReportActionsListItemRenderer';
 import {getUnreadMarkerReportAction} from './shouldDisplayNewMarkerOnReportAction';
 import ShowPreviousMessagesButton from './ShowPreviousMessagesButton';
 import StaticReportActionsPreview from './StaticReportActionsPreview';
 import useReportActionsNewActionLiveTail from './useReportActionsNewActionLiveTail';
 import useReportUnreadMessageScrollTracking from './useReportUnreadMessageScrollTracking';
+import useShouldShowComposerForActiveEditDraft from './useShouldShowComposerForActiveEditDraft';
 
 type ReportActionsListProps = {
     /** The report currently being looked at */
@@ -842,8 +842,7 @@ function ReportActionsList({
         () => [shouldUseNarrowLayout ? unreadMarkerReportActionID : undefined, isArchivedNonExpenseReport(report, isReportArchived), draftReportAction?.reportActionID, draftMessageHTML],
         [draftMessageHTML, draftReportAction?.reportActionID, unreadMarkerReportActionID, shouldUseNarrowLayout, report, isReportArchived],
     );
-    const {editingReportActionID} = useReportActionActiveEdit();
-    const shouldShowComposerForActiveEditDraft = shouldUseNarrowLayout && editingReportActionID !== null;
+    const shouldShowComposerForActiveEditDraft = useShouldShowComposerForActiveEditDraft();
     const hideComposer = !canUserPerformWriteAction(report, isReportArchived) && !shouldShowComposerForActiveEditDraft;
     const shouldShowReportRecipientLocalTime = canShowReportRecipientLocalTime(personalDetailsList, report, currentUserAccountID) && !isComposerFullSize;
     const canShowHeader = isOffline || hasHeaderRendered.current;

src/pages/inbox/report/ReportFooter.tsx

@@ -32,8 +32,8 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import {isLoadingInitialReportActionsSelector} from '@src/selectors/ReportMetaData';
 import type * as OnyxTypes from '@src/types/onyx';
 import ReportActionCompose from './ReportActionCompose/ReportActionCompose';
-import {useReportActionActiveEdit} from './ReportActionEditMessageContext';
 import SystemChatReportFooterMessage from './SystemChatReportFooterMessage';
+import useShouldShowComposerForActiveEditDraft from './useShouldShowComposerForActiveEditDraft';
 
 const policyRoleSelector = (policy: OnyxEntry<OnyxTypes.Policy>) => policy?.role;
 
@@ -78,10 +78,7 @@ function ReportFooter() {
     const canWriteInReport = canWriteInReportUtil(report);
     const isSystemChat = isSystemChatUtil(report);
     const isAdminsOnlyPostingRoom = isAdminsOnlyPostingRoomUtil(report);
-    const {editingReportActionID} = useReportActionActiveEdit();
-
-    // Narrow-screen edits use the bottom composer (#90516); mount it when a draft exists even if posting is admin-only.
-    const shouldShowComposerForActiveEditDraft = shouldUseNarrowLayout && editingReportActionID !== null;
+    const shouldShowComposerForActiveEditDraft = useShouldShowComposerForActiveEditDraft();
 
     if (!isCurrentReportLoadedFromOnyx || !report || !reportIDFromRoute) {
         return null;

src/pages/inbox/report/useShouldShowComposerForActiveEditDraft.ts

@@ -0,0 +1,11 @@
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import {useReportActionActiveEdit} from './ReportActionEditMessageContext';
+
+/** Narrow-screen edits use the bottom composer (#90516); mount it when a draft exists even if posting is admin-only. */
+function useShouldShowComposerForActiveEditDraft() {
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
+    const {editingReportActionID} = useReportActionActiveEdit();
+    return shouldUseNarrowLayout && editingReportActionID !== null;
+}
+
+export default useShouldShowComposerForActiveEditDraft;