From 122cf2be1252e84f77ea788345e953fa8e40be43 Mon Sep 17 00:00:00 2001
From: Mahmudjon <toraqulovmahmudjon@gmail.com>
Date: Sun, 17 Mar 2024 10:18:35 +0500
Subject: [PATCH 1/5] [TS migration] Migrate 'NewChatSelector' page to
 TypeScript...

---
 src/components/TabSelector/TabSelector.tsx    |  2 +
 src/libs/Navigation/OnyxTabNavigator.tsx      |  7 ++-
 ...electorPage.js => NewChatSelectorPage.tsx} | 49 ++++++-------------
 3 files changed, 21 insertions(+), 37 deletions(-)
 rename src/pages/{NewChatSelectorPage.js => NewChatSelectorPage.tsx} (52%)

diff --git a/src/components/TabSelector/TabSelector.tsx b/src/components/TabSelector/TabSelector.tsx
index 1b8b6bc1b22b..60a7b48b0011 100644
--- a/src/components/TabSelector/TabSelector.tsx
+++ b/src/components/TabSelector/TabSelector.tsx
@@ -143,3 +143,5 @@ function TabSelector({state, navigation, onTabPress = () => {}, position}: TabSe
 TabSelector.displayName = 'TabSelector';
 
 export default TabSelector;
+
+export type { TabSelectorProps }
diff --git a/src/libs/Navigation/OnyxTabNavigator.tsx b/src/libs/Navigation/OnyxTabNavigator.tsx
index 2ae3414956a8..a90bf16a1d86 100644
--- a/src/libs/Navigation/OnyxTabNavigator.tsx
+++ b/src/libs/Navigation/OnyxTabNavigator.tsx
@@ -1,13 +1,14 @@
 import type {MaterialTopTabNavigationEventMap} from '@react-navigation/material-top-tabs';
 import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
 import type {EventMapCore, NavigationState, ScreenListeners} from '@react-navigation/native';
-import React from 'react';
+import React, { ReactNode } from 'react';
 import {withOnyx} from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
 import Tab from '@userActions/Tab';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type ChildrenProps from '@src/types/utils/ChildrenProps';
 import {defaultScreenOptions} from './OnyxTabNavigatorConfig';
+import { TabSelectorProps } from '@components/TabSelector/TabSelector';
 
 type OnyxTabNavigatorOnyxProps = {
     selectedTab: OnyxEntry<string>;
@@ -24,6 +25,8 @@ type OnyxTabNavigatorProps = OnyxTabNavigatorOnyxProps &
         /** A function triggered when a tab has been selected */
         onTabSelected?: (newIouType: string) => void;
 
+        tabBar: (props: TabSelectorProps) => ReactNode
+
         screenListeners?: ScreenListeners<NavigationState, MaterialTopTabNavigationEventMap>;
     };
 
@@ -32,7 +35,7 @@ export const TopTab = createMaterialTopTabNavigator();
 
 // This takes all the same props as MaterialTopTabsNavigator: https://reactnavigation.org/docs/material-top-tab-navigator/#props,
 // except ID is now required, and it gets a `selectedTab` from Onyx
-function OnyxTabNavigator({id, selectedTab = '', children, onTabSelected = () => {}, screenListeners, ...rest}: OnyxTabNavigatorProps) {
+function OnyxTabNavigator({id, selectedTab = '', children, onTabSelected = () => {}, screenListeners, tabBar, ...rest}: OnyxTabNavigatorProps) {
     return (
         <TopTab.Navigator
             /* eslint-disable-next-line react/jsx-props-no-spreading */
diff --git a/src/pages/NewChatSelectorPage.js b/src/pages/NewChatSelectorPage.tsx
similarity index 52%
rename from src/pages/NewChatSelectorPage.js
rename to src/pages/NewChatSelectorPage.tsx
index 5033c74cdad3..4a5902b58ccb 100755
--- a/src/pages/NewChatSelectorPage.js
+++ b/src/pages/NewChatSelectorPage.tsx
@@ -1,51 +1,38 @@
-import {useNavigation} from '@react-navigation/native';
 import React from 'react';
-import {withOnyx} from 'react-native-onyx';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import TabSelector from '@components/TabSelector/TabSelector';
-import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
-import compose from '@libs/compose';
 import OnyxTabNavigator, {TopTab} from '@libs/Navigation/OnyxTabNavigator';
 import CONST from '@src/CONST';
-import ONYXKEYS from '@src/ONYXKEYS';
 import NewChatPage from './NewChatPage';
 import WorkspaceNewRoomPage from './workspace/WorkspaceNewRoomPage';
+import useLocalize from '@hooks/useLocalize';
 
-const propTypes = {
-    ...windowDimensionsPropTypes,
-
-    ...withLocalizePropTypes,
-};
-
-const defaultProps = {
-    betas: [],
-    personalDetails: {},
-    reports: {},
-};
-
-function NewChatSelectorPage(props) {
-    const navigation = useNavigation();
 
+function NewChatSelectorPage() {
+    const {translate} = useLocalize();
     return (
-        <ScreenWrapper
+        <ScreenWrapper 
             shouldEnableKeyboardAvoidingView={false}
             includeSafeAreaPaddingBottom={false}
             shouldShowOfflineIndicator={false}
             shouldEnableMaxHeight
             testID={NewChatSelectorPage.displayName}
         >
-            <HeaderWithBackButton
-                title={props.translate('sidebarScreen.fabNewChat')}
-                onBackButtonPress={navigation.goBack}
-            />
+            <HeaderWithBackButton title={translate('sidebarScreen.fabNewChat')} />
             <OnyxTabNavigator
                 id={CONST.TAB.NEW_CHAT_TAB_ID}
-                tabBar={TabSelector}
+                tabBar={({state, navigation, position}) => (
+                    <TabSelector
+                        state={state}
+                        navigation={navigation}
+                        position={position}
+                    />
+                )}
             >
                 <TopTab.Screen
                     name={CONST.TAB.NEW_CHAT}
+                    // @ts-expect-error TODO: 'isGroupChat' is declared here.
                     component={NewChatPage}
                 />
                 <TopTab.Screen
@@ -57,14 +44,6 @@ function NewChatSelectorPage(props) {
     );
 }
 
-NewChatSelectorPage.propTypes = propTypes;
-NewChatSelectorPage.defaultProps = defaultProps;
 NewChatSelectorPage.displayName = 'NewChatSelectorPage';
 
-export default compose(
-    withLocalize,
-    withWindowDimensions,
-    withOnyx({
-        betas: {key: ONYXKEYS.BETAS},
-    }),
-)(NewChatSelectorPage);
+export default NewChatSelectorPage

From 3b0ded7d4f1baeb9f5ae2933595cbb9d19557478 Mon Sep 17 00:00:00 2001
From: Mahmudjon <toraqulovmahmudjon@gmail.com>
Date: Tue, 19 Mar 2024 13:55:23 +0500
Subject: [PATCH 2/5] Requested changes for NewChatPage and NewChatSelectorPage

---
 src/pages/NewChatPage.tsx         |  2 +-
 src/pages/NewChatSelectorPage.tsx | 19 +++++++++----------
 2 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/pages/NewChatPage.tsx b/src/pages/NewChatPage.tsx
index 72393e89ae1a..b16ceaf40c13 100755
--- a/src/pages/NewChatPage.tsx
+++ b/src/pages/NewChatPage.tsx
@@ -41,7 +41,7 @@ type NewChatPageWithOnyxProps = {
 };
 
 type NewChatPageProps = NewChatPageWithOnyxProps & {
-    isGroupChat: boolean;
+    isGroupChat?: boolean;
 };
 
 const excludedGroupEmails = CONST.EXPENSIFY_EMAILS.filter((value) => value !== CONST.EMAIL.CONCIERGE);
diff --git a/src/pages/NewChatSelectorPage.tsx b/src/pages/NewChatSelectorPage.tsx
index 4a5902b58ccb..4a0fe02b129b 100755
--- a/src/pages/NewChatSelectorPage.tsx
+++ b/src/pages/NewChatSelectorPage.tsx
@@ -7,32 +7,31 @@ import CONST from '@src/CONST';
 import NewChatPage from './NewChatPage';
 import WorkspaceNewRoomPage from './workspace/WorkspaceNewRoomPage';
 import useLocalize from '@hooks/useLocalize';
+import { useNavigation } from '@react-navigation/native';
 
 
 function NewChatSelectorPage() {
     const {translate} = useLocalize();
+    const navigation = useNavigation();
+
     return (
-        <ScreenWrapper 
+        <ScreenWrapper
             shouldEnableKeyboardAvoidingView={false}
             includeSafeAreaPaddingBottom={false}
             shouldShowOfflineIndicator={false}
             shouldEnableMaxHeight
             testID={NewChatSelectorPage.displayName}
         >
-            <HeaderWithBackButton title={translate('sidebarScreen.fabNewChat')} />
+            <HeaderWithBackButton
+                title={translate('sidebarScreen.fabNewChat')}
+                onBackButtonPress={navigation.goBack}
+            />
             <OnyxTabNavigator
                 id={CONST.TAB.NEW_CHAT_TAB_ID}
-                tabBar={({state, navigation, position}) => (
-                    <TabSelector
-                        state={state}
-                        navigation={navigation}
-                        position={position}
-                    />
-                )}
+                tabBar={TabSelector}
             >
                 <TopTab.Screen
                     name={CONST.TAB.NEW_CHAT}
-                    // @ts-expect-error TODO: 'isGroupChat' is declared here.
                     component={NewChatPage}
                 />
                 <TopTab.Screen

From 99b6effc4ccebff029f89288f510558612cb8196 Mon Sep 17 00:00:00 2001
From: Mahmudjon <toraqulovmahmudjon@gmail.com>
Date: Fri, 22 Mar 2024 15:06:14 +0500
Subject: [PATCH 3/5] Fixes for lint issues.

---
 src/libs/Navigation/OnyxTabNavigator.tsx | 6 +++---
 src/pages/NewChatSelectorPage.tsx        | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/libs/Navigation/OnyxTabNavigator.tsx b/src/libs/Navigation/OnyxTabNavigator.tsx
index a90bf16a1d86..61e78054138e 100644
--- a/src/libs/Navigation/OnyxTabNavigator.tsx
+++ b/src/libs/Navigation/OnyxTabNavigator.tsx
@@ -1,14 +1,14 @@
 import type {MaterialTopTabNavigationEventMap} from '@react-navigation/material-top-tabs';
 import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
 import type {EventMapCore, NavigationState, ScreenListeners} from '@react-navigation/native';
-import React, { ReactNode } from 'react';
+import React from 'react';
 import {withOnyx} from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
 import Tab from '@userActions/Tab';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type ChildrenProps from '@src/types/utils/ChildrenProps';
+import type { TabSelectorProps } from '@components/TabSelector/TabSelector';
 import {defaultScreenOptions} from './OnyxTabNavigatorConfig';
-import { TabSelectorProps } from '@components/TabSelector/TabSelector';
 
 type OnyxTabNavigatorOnyxProps = {
     selectedTab: OnyxEntry<string>;
@@ -25,7 +25,7 @@ type OnyxTabNavigatorProps = OnyxTabNavigatorOnyxProps &
         /** A function triggered when a tab has been selected */
         onTabSelected?: (newIouType: string) => void;
 
-        tabBar: (props: TabSelectorProps) => ReactNode
+        tabBar: (props: TabSelectorProps) => React.ReactNode
 
         screenListeners?: ScreenListeners<NavigationState, MaterialTopTabNavigationEventMap>;
     };
diff --git a/src/pages/NewChatSelectorPage.tsx b/src/pages/NewChatSelectorPage.tsx
index 4a0fe02b129b..324c06debf76 100755
--- a/src/pages/NewChatSelectorPage.tsx
+++ b/src/pages/NewChatSelectorPage.tsx
@@ -4,10 +4,10 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import TabSelector from '@components/TabSelector/TabSelector';
 import OnyxTabNavigator, {TopTab} from '@libs/Navigation/OnyxTabNavigator';
 import CONST from '@src/CONST';
-import NewChatPage from './NewChatPage';
-import WorkspaceNewRoomPage from './workspace/WorkspaceNewRoomPage';
 import useLocalize from '@hooks/useLocalize';
 import { useNavigation } from '@react-navigation/native';
+import WorkspaceNewRoomPage from './workspace/WorkspaceNewRoomPage';
+import NewChatPage from './NewChatPage';
 
 
 function NewChatSelectorPage() {

From c50a4079963bffa2a1b7558699884d355ee09e94 Mon Sep 17 00:00:00 2001
From: Mahmudjon <toraqulovmahmudjon@gmail.com>
Date: Tue, 26 Mar 2024 13:17:51 +0500
Subject: [PATCH 4/5] Fix for styling of tab selector is off

---
 src/libs/Navigation/OnyxTabNavigator.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/libs/Navigation/OnyxTabNavigator.tsx b/src/libs/Navigation/OnyxTabNavigator.tsx
index 61e78054138e..19a2d0085f05 100644
--- a/src/libs/Navigation/OnyxTabNavigator.tsx
+++ b/src/libs/Navigation/OnyxTabNavigator.tsx
@@ -25,7 +25,7 @@ type OnyxTabNavigatorProps = OnyxTabNavigatorOnyxProps &
         /** A function triggered when a tab has been selected */
         onTabSelected?: (newIouType: string) => void;
 
-        tabBar: (props: TabSelectorProps) => React.ReactNode
+        tabBar: (props:TabSelectorProps) => React.ReactNode
 
         screenListeners?: ScreenListeners<NavigationState, MaterialTopTabNavigationEventMap>;
     };
@@ -35,8 +35,9 @@ export const TopTab = createMaterialTopTabNavigator();
 
 // This takes all the same props as MaterialTopTabsNavigator: https://reactnavigation.org/docs/material-top-tab-navigator/#props,
 // except ID is now required, and it gets a `selectedTab` from Onyx
-function OnyxTabNavigator({id, selectedTab = '', children, onTabSelected = () => {}, screenListeners, tabBar, ...rest}: OnyxTabNavigatorProps) {
+function OnyxTabNavigator({id, selectedTab = '', children, onTabSelected = () => {}, screenListeners, ...rest}: OnyxTabNavigatorProps) {
     return (
+        // @ts-expect-error: Types of property 'tabBar' are incompatible.
         <TopTab.Navigator
             /* eslint-disable-next-line react/jsx-props-no-spreading */
             {...rest}

From 84a90b4f9c08d26f7489df1e3ee2a428e35fd253 Mon Sep 17 00:00:00 2001
From: Mahmudjon <toraqulovmahmudjon@gmail.com>
Date: Fri, 29 Mar 2024 11:19:13 +0500
Subject: [PATCH 5/5] I made final changes and ran prettier

---
 src/components/TabSelector/TabSelector.tsx | 17 +++--------------
 src/libs/Navigation/OnyxTabNavigator.tsx   |  5 ++---
 src/pages/NewChatSelectorPage.tsx          |  9 ++++-----
 3 files changed, 9 insertions(+), 22 deletions(-)

diff --git a/src/components/TabSelector/TabSelector.tsx b/src/components/TabSelector/TabSelector.tsx
index 60a7b48b0011..fc19e6a8062e 100644
--- a/src/components/TabSelector/TabSelector.tsx
+++ b/src/components/TabSelector/TabSelector.tsx
@@ -1,5 +1,4 @@
-import type {MaterialTopTabNavigationHelpers} from '@react-navigation/material-top-tabs/lib/typescript/src/types';
-import type {TabNavigationState} from '@react-navigation/native';
+import type {MaterialTopTabBarProps} from '@react-navigation/material-top-tabs/lib/typescript/src/types';
 import React, {useCallback, useEffect, useMemo, useState} from 'react';
 import type {Animated} from 'react-native';
 import {View} from 'react-native';
@@ -8,23 +7,13 @@ import type {LocaleContextProps} from '@components/LocaleContextProvider';
 import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import type {RootStackParamList} from '@libs/Navigation/types';
 import CONST from '@src/CONST';
 import type IconAsset from '@src/types/utils/IconAsset';
 import TabSelectorItem from './TabSelectorItem';
 
-type TabSelectorProps = {
-    /* Navigation state provided by React Navigation */
-    state: TabNavigationState<RootStackParamList>;
-
-    /* Navigation functions provided by React Navigation */
-    navigation: MaterialTopTabNavigationHelpers;
-
+type TabSelectorProps = MaterialTopTabBarProps & {
     /* Callback fired when tab is pressed */
     onTabPress?: (name: string) => void;
-
-    /* AnimatedValue for the position of the screen while swiping */
-    position: Animated.AnimatedInterpolation<number | string>;
 };
 
 type IconAndTitle = {
@@ -144,4 +133,4 @@ TabSelector.displayName = 'TabSelector';
 
 export default TabSelector;
 
-export type { TabSelectorProps }
+export type {TabSelectorProps};
diff --git a/src/libs/Navigation/OnyxTabNavigator.tsx b/src/libs/Navigation/OnyxTabNavigator.tsx
index 19a2d0085f05..3b2313afd5ad 100644
--- a/src/libs/Navigation/OnyxTabNavigator.tsx
+++ b/src/libs/Navigation/OnyxTabNavigator.tsx
@@ -4,10 +4,10 @@ import type {EventMapCore, NavigationState, ScreenListeners} from '@react-naviga
 import React from 'react';
 import {withOnyx} from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
+import type {TabSelectorProps} from '@components/TabSelector/TabSelector';
 import Tab from '@userActions/Tab';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type ChildrenProps from '@src/types/utils/ChildrenProps';
-import type { TabSelectorProps } from '@components/TabSelector/TabSelector';
 import {defaultScreenOptions} from './OnyxTabNavigatorConfig';
 
 type OnyxTabNavigatorOnyxProps = {
@@ -25,7 +25,7 @@ type OnyxTabNavigatorProps = OnyxTabNavigatorOnyxProps &
         /** A function triggered when a tab has been selected */
         onTabSelected?: (newIouType: string) => void;
 
-        tabBar: (props:TabSelectorProps) => React.ReactNode
+        tabBar: (props: TabSelectorProps) => React.ReactNode;
 
         screenListeners?: ScreenListeners<NavigationState, MaterialTopTabNavigationEventMap>;
     };
@@ -37,7 +37,6 @@ export const TopTab = createMaterialTopTabNavigator();
 // except ID is now required, and it gets a `selectedTab` from Onyx
 function OnyxTabNavigator({id, selectedTab = '', children, onTabSelected = () => {}, screenListeners, ...rest}: OnyxTabNavigatorProps) {
     return (
-        // @ts-expect-error: Types of property 'tabBar' are incompatible.
         <TopTab.Navigator
             /* eslint-disable-next-line react/jsx-props-no-spreading */
             {...rest}
diff --git a/src/pages/NewChatSelectorPage.tsx b/src/pages/NewChatSelectorPage.tsx
index 324c06debf76..6919dce33474 100755
--- a/src/pages/NewChatSelectorPage.tsx
+++ b/src/pages/NewChatSelectorPage.tsx
@@ -1,14 +1,13 @@
+import {useNavigation} from '@react-navigation/native';
 import React from 'react';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import TabSelector from '@components/TabSelector/TabSelector';
+import useLocalize from '@hooks/useLocalize';
 import OnyxTabNavigator, {TopTab} from '@libs/Navigation/OnyxTabNavigator';
 import CONST from '@src/CONST';
-import useLocalize from '@hooks/useLocalize';
-import { useNavigation } from '@react-navigation/native';
-import WorkspaceNewRoomPage from './workspace/WorkspaceNewRoomPage';
 import NewChatPage from './NewChatPage';
-
+import WorkspaceNewRoomPage from './workspace/WorkspaceNewRoomPage';
 
 function NewChatSelectorPage() {
     const {translate} = useLocalize();
@@ -45,4 +44,4 @@ function NewChatSelectorPage() {
 
 NewChatSelectorPage.displayName = 'NewChatSelectorPage';
 
-export default NewChatSelectorPage
+export default NewChatSelectorPage;