Chore: Migrate NewServerView to Typescript

app/actions/server.js

@@ -24,7 +24,7 @@ export function selectServerFailure() {
 	};
 }
 
-export function serverRequest(server, username = null, fromServerHistory = false) {
+export function serverRequest(server, username, fromServerHistory = false) {
 	return {
 		type: SERVER.REQUEST,
 		server,

app/containers/FormContainer.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ScrollView, StyleSheet, View } from 'react-native';
+import { ScrollView, ScrollViewProps, StyleSheet, View } from 'react-native';
 
 import { themes } from '../constants/colors';
 import sharedStyles from '../views/Styles';
@@ -10,10 +10,10 @@ import AppVersion from './AppVersion';
 import { isTablet } from '../utils/deviceInfo';
 import SafeAreaView from './SafeAreaView';
 
-interface IFormContainer {
+interface IFormContainer extends ScrollViewProps {
 	theme: string;
 	testID: string;
-	children: JSX.Element;
+	children: React.ReactNode;
 }
 
 const styles = StyleSheet.create({

app/views/NewServerView/index.js → app/views/NewServerView/index.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Text, Keyboard, StyleSheet, View, BackHandler, Image } from 'react-native';
 import { connect } from 'react-redux';
 import { Base64 } from 'js-base64';
 import parse from 'url-parse';
 import { Q } from '@nozbe/watermelondb';
 import { TouchableOpacity } from 'react-native-gesture-handler';
 import Orientation from 'react-native-orientation-locker';
+import { StackNavigationProp } from '@react-navigation/stack';
+import { Dispatch } from 'redux';
 
 import UserPreferences from '../../lib/userPreferences';
 import EventEmitter from '../../utils/events';
@@ -66,19 +67,21 @@ const styles = StyleSheet.create({
 	}
 });
 
-class NewServerView extends React.Component {
-	static propTypes = {
-		navigation: PropTypes.object,
-		theme: PropTypes.string,
-		connecting: PropTypes.bool.isRequired,
-		connectServer: PropTypes.func.isRequired,
-		selectServer: PropTypes.func.isRequired,
-		previousServer: PropTypes.string,
-		inviteLinksClear: PropTypes.func,
-		serverFinishAdd: PropTypes.func
-	};
+interface INewServerView {
+	navigation: StackNavigationProp<any, 'NewServerView'>;
+	theme: string;
+	connecting: boolean;
+	connectServer(server: string, username?: string, fromServerHistory?: boolean): void;
+	selectServer(server: string): void;
+	previousServer: string;
+	inviteLinksClear(): void;
+	serverFinishAdd(): void;
+	width: number;
+	height: number;
+}
 
-	constructor(props) {
+class NewServerView extends React.Component<INewServerView, any> {
+	constructor(props: INewServerView) {
 		super(props);
 		if (!isTablet) {
 			Orientation.lockToPortrait();
@@ -131,12 +134,12 @@ class NewServerView extends React.Component {
 		return false;
 	};
 
-	onChangeText = text => {
+	onChangeText = (text: string) => {
 		this.setState({ text });
 		this.queryServerHistory(text);
 	};
 
-	queryServerHistory = async text => {
+	queryServerHistory = async (text?: string) => {
 		const db = database.servers;
 		try {
 			const serversHistoryCollection = db.get('servers_history');
@@ -158,7 +161,7 @@ class NewServerView extends React.Component {
 		selectServer(previousServer);
 	};
 
-	handleNewServerEvent = event => {
+	handleNewServerEvent = (event: { server: string }) => {
 		let { server } = event;
 		if (!server) {
 			return;
@@ -169,13 +172,11 @@ class NewServerView extends React.Component {
 		connectServer(server);
 	};
 
-	onPressServerHistory = serverHistory => {
-		this.setState({ text: serverHistory?.url }, () =>
-			this.submit({ fromServerHistory: true, username: serverHistory?.username })
-		);
+	onPressServerHistory = (serverHistory: { url?: string; username?: string }) => {
+		this.setState({ text: serverHistory?.url }, () => this.submit(true, serverHistory?.username));
 	};
 
-	submit = async ({ fromServerHistory = false, username }) => {
+	submit = async (fromServerHistory?: boolean, username?: string) => {
 		logEvent(events.NS_CONNECT_TO_WORKSPACE);
 		const { text, certificate } = this.state;
 		const { connectServer } = this.props;
@@ -207,7 +208,7 @@ class NewServerView extends React.Component {
 		connectServer('https://open.rocket.chat');
 	};
 
-	basicAuth = async (server, text) => {
+	basicAuth = async (server: string, text: string) => {
 		try {
 			const parsedUrl = parse(text, true);
 			if (parsedUrl.auth.length) {
@@ -222,14 +223,14 @@ class NewServerView extends React.Component {
 
 	chooseCertificate = async () => {
 		try {
-			const certificate = await SSLPinning.pickCertificate();
+			const certificate = await SSLPinning?.pickCertificate();
 			this.setState({ certificate });
 		} catch {
 			// Do nothing
 		}
 	};
 
-	completeUrl = url => {
+	completeUrl = (url: string) => {
 		const parsedUrl = parse(url, true);
 		if (parsedUrl.auth.length) {
 			url = parsedUrl.origin;
@@ -252,29 +253,33 @@ class NewServerView extends React.Component {
 		return url.replace(/\/+$/, '').replace(/\\/g, '/');
 	};
 
-	uriToPath = uri => uri.replace('file://', '');
+	uriToPath = (uri: string) => uri.replace('file://', '');
 
-	saveCertificate = certificate => {
+	// TODO: Check if we need this function
+	saveCertificate = (certificate: any) => {
 		animateNextTransition();
 		this.setState({ certificate });
 	};
 
 	handleRemove = () => {
+		// TODO: Remove ts-ignore when migrate the showConfirmationAlert
+		// @ts-ignore
 		showConfirmationAlert({
 			message: I18n.t('You_will_unset_a_certificate_for_this_server'),
 			confirmationText: I18n.t('Remove'),
 			onPress: this.setState({ certificate: null }) // We not need delete file from DocumentPicker because it is a temp file
 		});
 	};
 
-	deleteServerHistory = async item => {
+	// TODO: Refactor when migrate the WatermelonDB
+	deleteServerHistory = async (item: any) => {
 		const { serversHistory } = this.state;
-		const db = database.servers;
+		const db: any = database.servers;
 		try {
 			await db.action(async () => {
 				await item.destroyPermanently();
 			});
-			this.setState({ serversHistory: serversHistory.filter(server => server.id !== item.id) });
+			this.setState({ serversHistory: serversHistory.filter((server: any) => server.id !== item.id) });
 		} catch {
 			// Nothing
 		}
@@ -294,14 +299,15 @@ class NewServerView extends React.Component {
 				<Text
 					style={[
 						styles.chooseCertificateTitle,
-						{ color: themes[theme].auxiliaryText, fontSize: moderateScale(13, null, width) }
+						{ color: themes[theme].auxiliaryText, fontSize: moderateScale(13, undefined, width) }
 					]}>
 					{certificate ? I18n.t('Your_certificate') : I18n.t('Do_you_have_a_certificate')}
 				</Text>
 				<TouchableOpacity
 					onPress={certificate ? this.handleRemove : this.chooseCertificate}
 					testID='new-server-choose-certificate'>
-					<Text style={[styles.chooseCertificate, { color: themes[theme].tintColor, fontSize: moderateScale(13, null, width) }]}>
+					<Text
+						style={[styles.chooseCertificate, { color: themes[theme].tintColor, fontSize: moderateScale(13, undefined, width) }]}>
 						{certificate ?? I18n.t('Apply_Your_Certificate')}
 					</Text>
 				</TouchableOpacity>
@@ -335,7 +341,7 @@ class NewServerView extends React.Component {
 							styles.title,
 							{
 								color: themes[theme].titleText,
-								fontSize: moderateScale(22, null, width),
+								fontSize: moderateScale(22, undefined, width),
 								marginBottom: verticalScale(8, height)
 							}
 						]}>
@@ -346,7 +352,7 @@ class NewServerView extends React.Component {
 							styles.subtitle,
 							{
 								color: themes[theme].controlText,
-								fontSize: moderateScale(16, null, width),
+								fontSize: moderateScale(16, undefined, width),
 								marginBottom: verticalScale(30, height)
 							}
 						]}>
@@ -377,7 +383,7 @@ class NewServerView extends React.Component {
 							styles.description,
 							{
 								color: themes[theme].auxiliaryText,
-								fontSize: moderateScale(14, null, width),
+								fontSize: moderateScale(14, undefined, width),
 								marginBottom: verticalScale(16, height)
 							}
 						]}>
@@ -400,14 +406,15 @@ class NewServerView extends React.Component {
 	}
 }
 
-const mapStateToProps = state => ({
+const mapStateToProps = (state: any) => ({
 	connecting: state.server.connecting,
 	previousServer: state.server.previousServer
 });
 
-const mapDispatchToProps = dispatch => ({
-	connectServer: (...params) => dispatch(serverRequest(...params)),
-	selectServer: server => dispatch(selectServerRequest(server)),
+const mapDispatchToProps = (dispatch: Dispatch) => ({
+	connectServer: (server: string, username?: string, fromServerHistory?: boolean) =>
+		dispatch(serverRequest(server, username, fromServerHistory)),
+	selectServer: (server: string) => dispatch(selectServerRequest(server)),
 	inviteLinksClear: () => dispatch(inviteLinksClearAction()),
 	serverFinishAdd: () => dispatch(serverFinishAddAction())
 });

package.json

@@ -50,6 +50,7 @@
 		"@rocket.chat/react-native-fast-image": "^8.2.0",
 		"@rocket.chat/sdk": "RocketChat/Rocket.Chat.js.SDK#mobile",
 		"@rocket.chat/ui-kit": "0.13.0",
+		"@types/url-parse": "^1.4.4",
 		"bytebuffer": "^5.0.1",
 		"color2k": "1.2.4",
 		"commonmark": "git+https://github.com/RocketChat/commonmark.js.git",

yarn.lock

@@ -3984,6 +3984,11 @@
   dependencies:
     source-map "^0.6.1"
 
+"@types/url-parse@^1.4.4":
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/@types/url-parse/-/url-parse-1.4.4.tgz#ebeb0ec8b581318739cf73e9f9b186f610764255"
+  integrity sha512-KtQLad12+4T/NfSxpoDhmr22+fig3T7/08QCgmutYA6QSznSRmEtuL95GrhVV40/0otTEdFc+etRcCTqhh1q5Q==
+
 "@types/webpack-env@^1.15.0":
   version "1.15.2"
   resolved "https://registry.yarnpkg.com/@types/webpack-env/-/webpack-env-1.15.2.tgz#927997342bb9f4a5185a86e6579a0a18afc33b0a"