Chore: Migrate react-navigation to TypeScript (#3480)

Co-authored-by: AlexAlexandre <alexalexandrejr@gmail.com>

app/AppContainer.tsx

@@ -3,6 +3,7 @@ import { NavigationContainer } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
 import { connect } from 'react-redux';
 
+import { SetUsernameStackParamList, StackParamList } from './navigationTypes';
 import Navigation from './lib/Navigation';
 import { defaultHeader, getActiveRouteName, navigationTheme } from './utils/navigation';
 import { ROOT_INSIDE, ROOT_LOADING, ROOT_OUTSIDE, ROOT_SET_USERNAME } from './actions/app';
@@ -17,15 +18,15 @@ import { ThemeContext } from './theme';
 import { setCurrentScreen } from './utils/log';
 
 // SetUsernameStack
-const SetUsername = createStackNavigator();
+const SetUsername = createStackNavigator<SetUsernameStackParamList>();
 const SetUsernameStack = () => (
 	<SetUsername.Navigator screenOptions={defaultHeader}>
 		<SetUsername.Screen name='SetUsernameView' component={SetUsernameView} />
 	</SetUsername.Navigator>
 );
 
 // App
-const Stack = createStackNavigator();
+const Stack = createStackNavigator<StackParamList>();
 const App = React.memo(({ root, isMasterDetail }: { root: string; isMasterDetail: boolean }) => {
 	if (!root) {
 		return null;

app/containers/ActionSheet/Provider.tsx

@@ -17,7 +17,7 @@ export const useActionSheet = () => useContext(context);
 
 const { Provider, Consumer } = context;
 
-export const withActionSheet = <P extends object>(Component: React.ComponentType<P>) =>
+export const withActionSheet = (Component: any): any =>
 	forwardRef((props: any, ref: ForwardedRef<any>) => (
 		<Consumer>{(contexts: any) => <Component {...props} {...contexts} ref={ref} />}</Consumer>
 	));

app/containers/EmojiPicker/index.tsx

@@ -31,7 +31,7 @@ interface IEmojiPickerProps {
 	customEmojis?: any;
 	style: object;
 	theme?: string;
-	onEmojiSelected?: Function;
+	onEmojiSelected?: ((emoji: any) => void) | ((keyboardId: any, params?: any) => void);
 	tabEmojiStyle?: object;
 }
 
@@ -201,4 +201,5 @@ const mapStateToProps = (state: any) => ({
 	customEmojis: state.customEmojis
 });
 
-export default connect(mapStateToProps)(withTheme(EmojiPicker));
+// TODO - remove this as any, at the new PR to fix the HOC erros
+export default connect(mapStateToProps)(withTheme(EmojiPicker)) as any;

app/containers/LoginServices.tsx

@@ -423,4 +423,4 @@ const mapStateToProps = (state: any) => ({
 	services: state.login.services
 });
 
-export default connect(mapStateToProps)(withTheme(LoginServices));
+export default connect(mapStateToProps)(withTheme(LoginServices)) as any;

app/containers/MessageBox/EmojiKeyboard.tsx

@@ -13,7 +13,7 @@ interface IMessageBoxEmojiKeyboard {
 }
 
 export default class EmojiKeyboard extends React.PureComponent<IMessageBoxEmojiKeyboard, any> {
-	private readonly baseUrl: any;
+	private readonly baseUrl: string;
 
 	constructor(props: IMessageBoxEmojiKeyboard) {
 		super(props);

app/containers/MessageBox/index.tsx

@@ -1124,4 +1124,4 @@ const dispatchToProps = {
 	typing: (rid: any, status: any) => userTypingAction(rid, status)
 };
 // @ts-ignore
-export default connect(mapStateToProps, dispatchToProps, null, { forwardRef: true })(withActionSheet(MessageBox));
+export default connect(mapStateToProps, dispatchToProps, null, { forwardRef: true })(withActionSheet(MessageBox)) as any;

app/containers/SearchBox.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, Text, TextInputProps, View } from 'react-native';
 import Touchable from 'react-native-platform-touchable';
 
 import TextInput from '../presentation/TextInput';
@@ -45,7 +45,7 @@ const styles = StyleSheet.create({
 });
 
 interface ISearchBox {
-	onChangeText: () => void;
+	onChangeText: TextInputProps['onChangeText'];
 	onSubmitEditing: () => void;
 	hasCancel: boolean;
 	onCancelPress: Function;

app/definitions/IAttachment.ts

@@ -0,0 +1,10 @@
+export interface IAttachment {
+	title: string;
+	type: string;
+	description: string;
+	title_link?: string;
+	image_url?: string;
+	image_type?: string;
+	video_url?: string;
+	video_type?: string;
+}

app/definitions/IMessage.ts

@@ -0,0 +1,3 @@
+export interface IMessage {
+	msg: string;
+}

app/definitions/IRocketChatRecord.ts

@@ -0,0 +1,4 @@
+export interface IRocketChatRecord {
+	id: string;
+	updatedAt: Date;
+}

app/definitions/IRoom.ts

@@ -0,0 +1,27 @@
+import { IRocketChatRecord } from './IRocketChatRecord';
+
+export enum RoomType {
+	GROUP = 'p',
+	DIRECT = 'd',
+	CHANNEL = 'c',
+	OMNICHANNEL = 'l',
+	THREAD = 'thread'
+}
+
+export interface IRoom extends IRocketChatRecord {
+	rid: string;
+	t: RoomType;
+	name: string;
+	fname: string;
+	prid?: string;
+	tmid?: string;
+	topic?: string;
+	teamMain?: boolean;
+	teamId?: string;
+	encrypted?: boolean;
+	visitor?: boolean;
+	autoTranslateLanguage?: boolean;
+	autoTranslate?: boolean;
+	observe?: Function;
+	usedCannedResponse: string;
+}

app/definitions/IServer.ts

@@ -0,0 +1,16 @@
+export interface IServer {
+	name: string;
+	iconURL: string;
+	useRealName: boolean;
+	FileUpload_MediaTypeWhiteList: string;
+	FileUpload_MaxFileSize: number;
+	roomsUpdatedAt: Date;
+	version: string;
+	lastLocalAuthenticatedSession: Date;
+	autoLock: boolean;
+	autoLockTime: number | null;
+	biometry: boolean | null;
+	uniqueID: string;
+	enterpriseModules: string;
+	E2E_Enable: boolean;
+}

app/dimensions.tsx

@@ -22,7 +22,7 @@ export interface IDimensionsContextProps {
 
 export const DimensionsContext = React.createContext<Partial<IDimensionsContextProps>>(Dimensions.get('window'));
 
-export function withDimensions(Component: any) {
+export function withDimensions(Component: any): any {
 	const DimensionsComponent = (props: any) => (
 		<DimensionsContext.Consumer>{contexts => <Component {...props} {...contexts} />}</DimensionsContext.Consumer>
 	);

app/ee/omnichannel/views/QueueListView.js

@@ -161,4 +161,5 @@ const mapStateToProps = state => ({
 	showAvatar: state.sortPreferences.showAvatar,
 	displayMode: state.sortPreferences.displayMode
 });
+
 export default connect(mapStateToProps)(withDimensions(withTheme(QueueListView)));

app/lib/rocketchat.js

@@ -24,7 +24,7 @@ import { selectServerFailure } from '../actions/server';
 import { useSsl } from '../utils/url';
 import EventEmitter from '../utils/events';
 import { updatePermission } from '../actions/permissions';
-import { TEAM_TYPE } from '../definition/ITeam';
+import { TEAM_TYPE } from '../definitions/ITeam';
 import { updateSettings } from '../actions/settings';
 import { compareServerVersion, methods } from './utils';
 import reduxStore from './createStore';

app/navigationTypes.ts

@@ -0,0 +1,45 @@
+import { NavigatorScreenParams } from '@react-navigation/core';
+
+import { IRoom } from './definitions/IRoom';
+import { IServer } from './definitions/IServer';
+import { IAttachment } from './definitions/IAttachment';
+import { MasterDetailInsideStackParamList } from './stacks/MasterDetailStack/types';
+import { OutsideParamList, InsideStackParamList } from './stacks/types';
+
+export type SetUsernameStackParamList = {
+	SetUsernameView: {
+		title: string;
+	};
+};
+
+export type StackParamList = {
+	AuthLoading: undefined;
+	OutsideStack: NavigatorScreenParams<OutsideParamList>;
+	InsideStack: NavigatorScreenParams<InsideStackParamList>;
+	MasterDetailStack: NavigatorScreenParams<MasterDetailInsideStackParamList>;
+	SetUsernameStack: NavigatorScreenParams<SetUsernameStackParamList>;
+};
+
+export type ShareInsideStackParamList = {
+	ShareListView: undefined;
+	ShareView: {
+		attachments: IAttachment[];
+		isShareView?: boolean;
+		isShareExtension: boolean;
+		serverInfo: IServer;
+		text: string;
+		room: IRoom;
+		thread: any; // TODO: Change
+	};
+	SelectServerView: undefined;
+};
+
+export type ShareOutsideStackParamList = {
+	WithoutServersView: undefined;
+};
+
+export type ShareAppStackParamList = {
+	AuthLoading?: undefined;
+	OutsideStack?: NavigatorScreenParams<ShareOutsideStackParamList>;
+	InsideStack?: NavigatorScreenParams<ShareInsideStackParamList>;
+};

app/share.tsx

@@ -25,6 +25,7 @@ import { setCurrentScreen } from './utils/log';
 import AuthLoadingView from './views/AuthLoadingView';
 import { DimensionsContext } from './dimensions';
 import debounce from './utils/debounce';
+import { ShareInsideStackParamList, ShareOutsideStackParamList, ShareAppStackParamList } from './navigationTypes';
 
 interface IDimensions {
 	width: number;
@@ -46,7 +47,7 @@ interface IState {
 	fontScale: number;
 }
 
-const Inside = createStackNavigator();
+const Inside = createStackNavigator<ShareInsideStackParamList>();
 const InsideStack = () => {
 	const { theme } = useContext(ThemeContext);
 
@@ -65,24 +66,19 @@ const InsideStack = () => {
 	);
 };
 
-const Outside = createStackNavigator();
+const Outside = createStackNavigator<ShareOutsideStackParamList>();
 const OutsideStack = () => {
 	const { theme } = useContext(ThemeContext);
 
 	return (
 		<Outside.Navigator screenOptions={{ ...defaultHeader, ...themedHeader(theme) }}>
-			<Outside.Screen
-				name='WithoutServersView'
-				component={WithoutServersView}
-				/* @ts-ignore*/
-				options={WithoutServersView.navigationOptions}
-			/>
+			<Outside.Screen name='WithoutServersView' component={WithoutServersView} options={WithoutServersView.navigationOptions} />
 		</Outside.Navigator>
 	);
 };
 
 // App
-const Stack = createStackNavigator();
+const Stack = createStackNavigator<ShareAppStackParamList>();
 export const App = ({ root }: any) => (
 	<Stack.Navigator screenOptions={{ headerShown: false, animationEnabled: false }}>
 		<>
@@ -112,7 +108,7 @@ class Root extends React.Component<{}, IState> {
 		this.init();
 	}
 
-	componentWillUnmount() {
+	componentWillUnmount(): void {
 		RocketChat.closeShareExtension();
 		unsubscribeTheme();
 	}