Chore: Migrate AuthenticationWebView to Typescript (#3441)

* Chore: Migrate AuthenticationWebView to Typescript

* minor tweak

* added @types/url-parser

app/views/AuthenticationWebView.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import { WebView, WebViewNavigation } from 'react-native-webview';
-import { WebView } from 'react-native-webview';
 import { connect } from 'react-redux';
 import parse from 'url-parse';
+import { StackNavigationProp } from '@react-navigation/stack';
+import { WebViewMessage } from 'react-native-webview/lib/WebViewTypes';
 
 import RocketChat from '../lib/rocketchat';
 import { isIOS } from '../utils/deviceInfo';
@@ -40,17 +41,44 @@ window.addEventListener('popstate', function() {
 });
 `;
 
-class AuthenticationWebView extends React.PureComponent {
+interface IRoute {
-	static propTypes = {
+	params: {
-		navigation: PropTypes.object,
+		authType: string;
-		route: PropTypes.object,
+		url: string;
-		server: PropTypes.string,
+		ssoToken?: string;
-		Accounts_Iframe_api_url: PropTypes.bool,
+	};
-		Accounts_Iframe_api_method: PropTypes.bool,
+}
-		theme: PropTypes.string
+
+interface INavigationOption {
+	navigation: StackNavigationProp<any, 'AuthenticationWebView'>;
+	route: IRoute;
+}
+
+interface IAuthenticationWebView extends INavigationOption {
+	server: string;
+	Accounts_Iframe_api_url: string;
+	Accounts_Iframe_api_method: string;
+	theme: string;
+}
+
+interface IState {
+	logging: boolean;
+	loading: boolean;
+}
+
+class AuthenticationWebView extends React.PureComponent<IAuthenticationWebView, IState> {
+	private oauthRedirectRegex: RegExp;
+	private iframeRedirectRegex: RegExp;
+
+	static navigationOptions = ({ route, navigation }: INavigationOption) => {
+		const { authType } = route.params;
+		return {
+			headerLeft: () => <HeaderButton.CloseModal navigation={navigation} />,
+			title: ['saml', 'cas', 'iframe'].includes(authType) ? 'SSO' : 'OAuth'
+		};
 	};
 
-	constructor(props) {
+	constructor(props: IAuthenticationWebView) {
 		super(props);
 		this.state = {
 			logging: false,
@@ -71,7 +99,7 @@ class AuthenticationWebView extends React.PureComponent {
 		navigation.pop();
 	};
 
-	login = params => {
+	login = (params: any) => {
 		const { logging } = this.state;
 		if (logging) {
 			return;
@@ -89,7 +117,7 @@ class AuthenticationWebView extends React.PureComponent {
 	};
 
 	// Force 3s delay so the server has time to evaluate the token
-	debouncedLogin = debounce(params => this.login(params), 3000);
+	debouncedLogin = debounce((params: any) => this.login(params), 3000);
 
 	tryLogin = debounce(
 		async () => {
@@ -104,7 +132,7 @@ class AuthenticationWebView extends React.PureComponent {
 		true
 	);
 
-	onNavigationStateChange = webViewState => {
+	onNavigationStateChange = (webViewState: WebViewNavigation | WebViewMessage) => {
 		const url = decodeURIComponent(webViewState.url);
 		const { route } = this.props;
 		const { authType } = route.params;
@@ -180,18 +208,10 @@ class AuthenticationWebView extends React.PureComponent {
 	}
 }
 
-const mapStateToProps = state => ({
+const mapStateToProps = (state: any) => ({
 	server: state.server.server,
 	Accounts_Iframe_api_url: state.settings.Accounts_Iframe_api_url,
 	Accounts_Iframe_api_method: state.settings.Accounts_Iframe_api_method
 });
 
-AuthenticationWebView.navigationOptions = ({ route, navigation }) => {
-	const { authType } = route.params;
-	return {
-		headerLeft: () => <HeaderButton.CloseModal navigation={navigation} />,
-		title: ['saml', 'cas', 'iframe'].includes(authType) ? 'SSO' : 'OAuth'
-	};
-};
-
 export default connect(mapStateToProps)(withTheme(AuthenticationWebView));

package.json

@@ -51,6 +51,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

@@ -4506,6 +4506,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"