From 808d2c3da6c85830813f1964c6fb2424d79794f8 Mon Sep 17 00:00:00 2001
From: Viktoryia Kliushun <vikstash@gmail.com>
Date: Thu, 12 Oct 2023 15:58:54 +0200
Subject: [PATCH 1/4] [TS migration] Migrate 'withNavigationFallback.js' HOC

---
 .eslintrc.js                              |  2 +-
 src/components/withNavigationFallback.js  | 43 -----------------------
 src/components/withNavigationFallback.tsx | 39 ++++++++++++++++++++
 src/libs/getComponentDisplayName.ts       |  2 +-
 4 files changed, 41 insertions(+), 45 deletions(-)
 delete mode 100644 src/components/withNavigationFallback.js
 create mode 100644 src/components/withNavigationFallback.tsx

diff --git a/.eslintrc.js b/.eslintrc.js
index 75a74ed371c..83e9479ce0c 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -116,7 +116,7 @@ module.exports = {
                     },
                     {
                         selector: ['parameter', 'method'],
-                        format: ['camelCase'],
+                        format: ['camelCase', 'PascalCase'],
                     },
                 ],
                 '@typescript-eslint/ban-types': [
diff --git a/src/components/withNavigationFallback.js b/src/components/withNavigationFallback.js
deleted file mode 100644
index e82946c9e04..00000000000
--- a/src/components/withNavigationFallback.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import React, {forwardRef, useContext, useMemo} from 'react';
-import {NavigationContext} from '@react-navigation/core';
-import getComponentDisplayName from '../libs/getComponentDisplayName';
-import refPropTypes from './refPropTypes';
-
-export default function (WrappedComponent) {
-    function WithNavigationFallback(props) {
-        const context = useContext(NavigationContext);
-
-        const navigationContextValue = useMemo(() => ({isFocused: () => true, addListener: () => () => {}, removeListener: () => () => {}}), []);
-
-        return context ? (
-            <WrappedComponent
-                // eslint-disable-next-line react/jsx-props-no-spreading
-                {...props}
-                ref={props.forwardedRef}
-            />
-        ) : (
-            <NavigationContext.Provider value={navigationContextValue}>
-                <WrappedComponent
-                    // eslint-disable-next-line react/jsx-props-no-spreading
-                    {...props}
-                    ref={props.forwardedRef}
-                />
-            </NavigationContext.Provider>
-        );
-    }
-    WithNavigationFallback.displayName = `WithNavigationFocusWithFallback(${getComponentDisplayName(WrappedComponent)})`;
-    WithNavigationFallback.propTypes = {
-        forwardedRef: refPropTypes,
-    };
-    WithNavigationFallback.defaultProps = {
-        forwardedRef: undefined,
-    };
-
-    return forwardRef((props, ref) => (
-        <WithNavigationFallback
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...props}
-            forwardedRef={ref}
-        />
-    ));
-}
diff --git a/src/components/withNavigationFallback.tsx b/src/components/withNavigationFallback.tsx
new file mode 100644
index 00000000000..59a7028ca79
--- /dev/null
+++ b/src/components/withNavigationFallback.tsx
@@ -0,0 +1,39 @@
+import React, {ComponentType, RefAttributes, ForwardedRef, forwardRef, useContext, useMemo} from 'react';
+import {NavigationContext} from '@react-navigation/core';
+import {NavigationProp} from '@react-navigation/native';
+import {ParamListBase} from '@react-navigation/routers';
+import getComponentDisplayName from '../libs/getComponentDisplayName';
+
+type NavigationContextValue = {
+    isFocused: () => true;
+    addListener: () => () => void;
+    removeListener: () => () => void;
+};
+
+export default function <TProps, TRef>(WrappedComponent: ComponentType<TProps & RefAttributes<TRef>>) {
+    function WithNavigationFallback(props: TProps, ref: ForwardedRef<TRef>) {
+        const context = useContext(NavigationContext);
+
+        const navigationContextValue: NavigationContextValue = useMemo(() => ({isFocused: () => true, addListener: () => () => {}, removeListener: () => () => {}}), []);
+
+        return context ? (
+            <WrappedComponent
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...props}
+                ref={ref}
+            />
+        ) : (
+            <NavigationContext.Provider value={navigationContextValue as unknown as NavigationProp<ParamListBase>}>
+                <WrappedComponent
+                    // eslint-disable-next-line react/jsx-props-no-spreading
+                    {...props}
+                    ref={ref}
+                />
+            </NavigationContext.Provider>
+        );
+    }
+
+    WithNavigationFallback.displayName = `WithNavigationFocusWithFallback(${getComponentDisplayName(WrappedComponent)})`;
+
+    return forwardRef(WithNavigationFallback);
+}
diff --git a/src/libs/getComponentDisplayName.ts b/src/libs/getComponentDisplayName.ts
index fd1bbcaea52..0bf52d543a8 100644
--- a/src/libs/getComponentDisplayName.ts
+++ b/src/libs/getComponentDisplayName.ts
@@ -1,6 +1,6 @@
 import {ComponentType} from 'react';
 
 /** Returns the display name of a component */
-export default function getComponentDisplayName(component: ComponentType): string {
+export default function getComponentDisplayName<TProps>(component: ComponentType<TProps>): string {
     return component.displayName ?? component.name ?? 'Component';
 }

From 52b6a0e57d616d8c7034d508db35fcdbd13055d6 Mon Sep 17 00:00:00 2001
From: Viktoryia Kliushun <vikstash@gmail.com>
Date: Thu, 12 Oct 2023 16:15:04 +0200
Subject: [PATCH 2/4] Fix NavigationContextValue type

---
 src/components/withNavigationFallback.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/withNavigationFallback.tsx b/src/components/withNavigationFallback.tsx
index 59a7028ca79..60c04ec65f6 100644
--- a/src/components/withNavigationFallback.tsx
+++ b/src/components/withNavigationFallback.tsx
@@ -5,7 +5,7 @@ import {ParamListBase} from '@react-navigation/routers';
 import getComponentDisplayName from '../libs/getComponentDisplayName';
 
 type NavigationContextValue = {
-    isFocused: () => true;
+    isFocused: () => boolean;
     addListener: () => () => void;
     removeListener: () => () => void;
 };

From 8480a8f89e31c10a58a1b91a5014cc0cc9f4dafe Mon Sep 17 00:00:00 2001
From: Viktoryia Kliushun <vikstash@gmail.com>
Date: Thu, 12 Oct 2023 16:21:16 +0200
Subject: [PATCH 3/4] Add callbacks types

---
 src/components/withNavigationFallback.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/withNavigationFallback.tsx b/src/components/withNavigationFallback.tsx
index 60c04ec65f6..2bbed245119 100644
--- a/src/components/withNavigationFallback.tsx
+++ b/src/components/withNavigationFallback.tsx
@@ -4,10 +4,14 @@ import {NavigationProp} from '@react-navigation/native';
 import {ParamListBase} from '@react-navigation/routers';
 import getComponentDisplayName from '../libs/getComponentDisplayName';
 
+type AddListenerCallback = () => void;
+
+type RemoveListenerCallback = () => void;
+
 type NavigationContextValue = {
     isFocused: () => boolean;
-    addListener: () => () => void;
-    removeListener: () => () => void;
+    addListener: () => AddListenerCallback;
+    removeListener: () => RemoveListenerCallback;
 };
 
 export default function <TProps, TRef>(WrappedComponent: ComponentType<TProps & RefAttributes<TRef>>) {

From bdf58362f2432de40a7a6d47608b7fb3e4815802 Mon Sep 17 00:00:00 2001
From: Viktoryia Kliushun <vikstash@gmail.com>
Date: Mon, 16 Oct 2023 16:22:04 +0200
Subject: [PATCH 4/4] Remove withNavigationFallback HOC

---
 src/components/Button/index.js            |  7 +---
 src/components/withNavigationFallback.tsx | 43 -----------------------
 src/stories/Composer.stories.js           | 29 +++++++--------
 3 files changed, 16 insertions(+), 63 deletions(-)
 delete mode 100644 src/components/withNavigationFallback.tsx

diff --git a/src/components/Button/index.js b/src/components/Button/index.js
index dc12a4ded5c..16654ce87d3 100644
--- a/src/components/Button/index.js
+++ b/src/components/Button/index.js
@@ -9,8 +9,6 @@ import Icon from '../Icon';
 import CONST from '../../CONST';
 import * as StyleUtils from '../../styles/StyleUtils';
 import HapticFeedback from '../../libs/HapticFeedback';
-import withNavigationFallback from '../withNavigationFallback';
-import compose from '../../libs/compose';
 import * as Expensicons from '../Icon/Expensicons';
 import withNavigationFocus from '../withNavigationFocus';
 import validateSubmitShortcut from './validateSubmitShortcut';
@@ -328,10 +326,7 @@ class Button extends Component {
 Button.propTypes = propTypes;
 Button.defaultProps = defaultProps;
 
-export default compose(
-    withNavigationFallback,
-    withNavigationFocus,
-)(
+export default withNavigationFocus(
     React.forwardRef((props, ref) => (
         <Button
             // eslint-disable-next-line react/jsx-props-no-spreading
diff --git a/src/components/withNavigationFallback.tsx b/src/components/withNavigationFallback.tsx
deleted file mode 100644
index 2bbed245119..00000000000
--- a/src/components/withNavigationFallback.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import React, {ComponentType, RefAttributes, ForwardedRef, forwardRef, useContext, useMemo} from 'react';
-import {NavigationContext} from '@react-navigation/core';
-import {NavigationProp} from '@react-navigation/native';
-import {ParamListBase} from '@react-navigation/routers';
-import getComponentDisplayName from '../libs/getComponentDisplayName';
-
-type AddListenerCallback = () => void;
-
-type RemoveListenerCallback = () => void;
-
-type NavigationContextValue = {
-    isFocused: () => boolean;
-    addListener: () => AddListenerCallback;
-    removeListener: () => RemoveListenerCallback;
-};
-
-export default function <TProps, TRef>(WrappedComponent: ComponentType<TProps & RefAttributes<TRef>>) {
-    function WithNavigationFallback(props: TProps, ref: ForwardedRef<TRef>) {
-        const context = useContext(NavigationContext);
-
-        const navigationContextValue: NavigationContextValue = useMemo(() => ({isFocused: () => true, addListener: () => () => {}, removeListener: () => () => {}}), []);
-
-        return context ? (
-            <WrappedComponent
-                // eslint-disable-next-line react/jsx-props-no-spreading
-                {...props}
-                ref={ref}
-            />
-        ) : (
-            <NavigationContext.Provider value={navigationContextValue as unknown as NavigationProp<ParamListBase>}>
-                <WrappedComponent
-                    // eslint-disable-next-line react/jsx-props-no-spreading
-                    {...props}
-                    ref={ref}
-                />
-            </NavigationContext.Provider>
-        );
-    }
-
-    WithNavigationFallback.displayName = `WithNavigationFocusWithFallback(${getComponentDisplayName(WrappedComponent)})`;
-
-    return forwardRef(WithNavigationFallback);
-}
diff --git a/src/stories/Composer.stories.js b/src/stories/Composer.stories.js
index 50039d7d537..2eedd6b97c3 100644
--- a/src/stories/Composer.stories.js
+++ b/src/stories/Composer.stories.js
@@ -1,6 +1,7 @@
 import ExpensiMark from 'expensify-common/lib/ExpensiMark';
-import React, {useState} from 'react';
+import React, {useMemo, useState} from 'react';
 import {View, Image} from 'react-native';
+import {NavigationContext} from '@react-navigation/core';
 import Composer from '../components/Composer';
 import RenderHTML from '../components/RenderHTML';
 import Text from '../components/Text';
@@ -8,9 +9,6 @@ import styles from '../styles/styles';
 import themeColors from '../styles/themes/default';
 import * as StyleUtils from '../styles/StyleUtils';
 import CONST from '../CONST';
-import withNavigationFallback from '../components/withNavigationFallback';
-
-const ComposerWithNavigation = withNavigationFallback(Composer);
 
 /**
  * We use the Component Story Format for writing stories. Follow the docs here:
@@ -19,7 +17,7 @@ const ComposerWithNavigation = withNavigationFallback(Composer);
  */
 const story = {
     title: 'Components/Composer',
-    component: ComposerWithNavigation,
+    component: Composer,
 };
 
 const parser = new ExpensiMark();
@@ -28,19 +26,22 @@ function Default(args) {
     const [pastedFile, setPastedFile] = useState(null);
     const [comment, setComment] = useState(args.defaultValue);
     const renderedHTML = parser.replace(comment);
+    const navigationContextValue = useMemo(() => ({addListener: () => () => {}, removeListener: () => () => {}}), []);
 
     return (
         <View>
             <View style={[styles.border, styles.p4]}>
-                <ComposerWithNavigation
-                    // eslint-disable-next-line react/jsx-props-no-spreading
-                    {...args}
-                    multiline
-                    textAlignVertical="top"
-                    onChangeText={setComment}
-                    onPasteFile={setPastedFile}
-                    style={[styles.textInputCompose, styles.w100]}
-                />
+                <NavigationContext.Provider value={navigationContextValue}>
+                    <Composer
+                        // eslint-disable-next-line react/jsx-props-no-spreading
+                        {...args}
+                        multiline
+                        textAlignVertical="top"
+                        onChangeText={setComment}
+                        onPasteFile={setPastedFile}
+                        style={[styles.textInputCompose, styles.w100]}
+                    />
+                </NavigationContext.Provider>
             </View>
             <View style={[styles.flexRow, styles.mv5, styles.flexWrap, styles.w100]}>
                 <View