From 623262315448705ac87991873c9d29515d0c887a Mon Sep 17 00:00:00 2001
From: tienifr <christianwen18@gmail.com>
Date: Wed, 20 Mar 2024 16:29:29 +0700
Subject: [PATCH] fix: no navigation object in state picker storybook

---
 src/components/HeaderWithBackButton/index.tsx |  5 +----
 src/components/ScreenWrapper.tsx              |  3 ++-
 src/stories/HeaderWithBackButton.stories.tsx  | 11 ++++-------
 3 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/src/components/HeaderWithBackButton/index.tsx b/src/components/HeaderWithBackButton/index.tsx
index 21f3e9a3b605..f3293596aa46 100755
--- a/src/components/HeaderWithBackButton/index.tsx
+++ b/src/components/HeaderWithBackButton/index.tsx
@@ -15,7 +15,6 @@ import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useThrottledButtonState from '@hooks/useThrottledButtonState';
-import useWaitForNavigation from '@hooks/useWaitForNavigation';
 import getButtonState from '@libs/getButtonState';
 import Navigation from '@libs/Navigation/Navigation';
 import variables from '@styles/variables';
@@ -58,7 +57,6 @@ function HeaderWithBackButton({
     children = null,
     shouldOverlayDots = false,
     shouldOverlay = false,
-    singleExecution = (func) => func,
     shouldNavigateToTopMostReport = false,
     style,
 }: HeaderWithBackButtonProps) {
@@ -68,7 +66,6 @@ function HeaderWithBackButton({
     const [isDownloadButtonActive, temporarilyDisableDownloadButton] = useThrottledButtonState();
     const {translate} = useLocalize();
     const {isKeyboardShown} = useKeyboardState();
-    const waitForNavigate = useWaitForNavigation();
 
     // If the icon is present, the header bar should be taller and use different font.
     const isCentralPaneSettings = !!icon;
@@ -175,7 +172,7 @@ function HeaderWithBackButton({
                         <Tooltip text={translate('getAssistancePage.questionMarkButtonTooltip')}>
                             <PressableWithoutFeedback
                                 disabled={shouldDisableGetAssistanceButton}
-                                onPress={singleExecution(waitForNavigate(() => Navigation.navigate(ROUTES.GET_ASSISTANCE.getRoute(guidesCallTaskID, Navigation.getActiveRoute()))))}
+                                onPress={() => Navigation.navigate(ROUTES.GET_ASSISTANCE.getRoute(guidesCallTaskID, Navigation.getActiveRoute()))}
                                 style={[styles.touchableButtonImage]}
                                 role="button"
                                 accessibilityLabel={translate('getAssistancePage.questionMarkButtonTooltip')}
diff --git a/src/components/ScreenWrapper.tsx b/src/components/ScreenWrapper.tsx
index 827eec8088a6..b78e274371ca 100644
--- a/src/components/ScreenWrapper.tsx
+++ b/src/components/ScreenWrapper.tsx
@@ -23,6 +23,7 @@ import KeyboardAvoidingView from './KeyboardAvoidingView';
 import OfflineIndicator from './OfflineIndicator';
 import SafeAreaConsumer from './SafeAreaConsumer';
 import TestToolsModal from './TestToolsModal';
+import withNavigationFallback from './withNavigationFallback';
 
 type ChildrenProps = {
     insets: EdgeInsets;
@@ -279,4 +280,4 @@ function ScreenWrapper(
 
 ScreenWrapper.displayName = 'ScreenWrapper';
 
-export default forwardRef(ScreenWrapper);
+export default withNavigationFallback(forwardRef(ScreenWrapper));
diff --git a/src/stories/HeaderWithBackButton.stories.tsx b/src/stories/HeaderWithBackButton.stories.tsx
index 8306d8e19225..ca723715d5f0 100644
--- a/src/stories/HeaderWithBackButton.stories.tsx
+++ b/src/stories/HeaderWithBackButton.stories.tsx
@@ -2,25 +2,22 @@ import type {ComponentMeta, ComponentStory} from '@storybook/react';
 import React from 'react';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import type HeaderWithBackButtonProps from '@components/HeaderWithBackButton/types';
-import withNavigationFallback from '@components/withNavigationFallback';
 
-const HeaderWithBackButtonWithNavigation = withNavigationFallback(HeaderWithBackButton);
-
-type HeaderWithBackButtonStory = ComponentStory<typeof HeaderWithBackButtonWithNavigation>;
+type HeaderWithBackButtonStory = ComponentStory<typeof HeaderWithBackButton>;
 
 /**
  * We use the Component Story Format for writing stories. Follow the docs here:
  *
  * https://storybook.js.org/docs/react/writing-stories/introduction#component-story-format
  */
-const story: ComponentMeta<typeof HeaderWithBackButtonWithNavigation> = {
+const story: ComponentMeta<typeof HeaderWithBackButton> = {
     title: 'Components/HeaderWithBackButton',
-    component: HeaderWithBackButtonWithNavigation,
+    component: HeaderWithBackButton,
 };
 
 function Template(props: HeaderWithBackButtonProps) {
     // eslint-disable-next-line react/jsx-props-no-spreading
-    return <HeaderWithBackButtonWithNavigation {...props} />;
+    return <HeaderWithBackButton {...props} />;
 }
 
 // Arguments can be passed to the component by binding