[TS migration] Migrate 'NewChatSelector' page to TypeScript...

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 = {
@@ -143,3 +132,5 @@ function TabSelector({state, navigation, onTabPress = () => {}, position}: TabSe
 TabSelector.displayName = 'TabSelector';
 
 export default TabSelector;
+
+export type {TabSelectorProps};

src/libs/Navigation/OnyxTabNavigator.tsx

@@ -4,6 +4,7 @@ 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';
@@ -24,6 +25,8 @@ type OnyxTabNavigatorProps = OnyxTabNavigatorOnyxProps &
         /** A function triggered when a tab has been selected */
         onTabSelected?: (newIouType: string) => void;
 
+        tabBar: (props: TabSelectorProps) => React.ReactNode;
+
         screenListeners?: ScreenListeners<NavigationState, MaterialTopTabNavigationEventMap>;
     };
 

src/pages/NewChatPage.tsx

@@ -48,7 +48,7 @@ type NewChatPageWithOnyxProps = {
 };
 
 type NewChatPageProps = NewChatPageWithOnyxProps & {
-    isGroupChat: boolean;
+    isGroupChat?: boolean;
 };
 
 const excludedGroupEmails = CONST.EXPENSIFY_EMAILS.filter((value) => value !== CONST.EMAIL.CONCIERGE);

src/pages/NewChatSelectorPage.js → src/pages/NewChatSelectorPage.tsx

@@ -1,31 +1,16 @@
 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 useLocalize from '@hooks/useLocalize';
 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';
 
-const propTypes = {
-    ...windowDimensionsPropTypes,
-
-    ...withLocalizePropTypes,
-};
-
-const defaultProps = {
-    betas: [],
-    personalDetails: {},
-    reports: {},
-};
-
-function NewChatSelectorPage(props) {
+function NewChatSelectorPage() {
+    const {translate} = useLocalize();
     const navigation = useNavigation();
 
     return (
@@ -37,7 +22,7 @@ function NewChatSelectorPage(props) {
             testID={NewChatSelectorPage.displayName}
         >
             <HeaderWithBackButton
-                title={props.translate('sidebarScreen.fabNewChat')}
+                title={translate('sidebarScreen.fabNewChat')}
                 onBackButtonPress={navigation.goBack}
             />
             <OnyxTabNavigator
@@ -57,14 +42,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;