Chore: Migrate JitsiMeetView to Typescript (#3498)

Co-authored-by: Diego Mello <diegolmello@gmail.com>

app/externalModules.d.ts

@@ -12,3 +12,4 @@ declare module 'react-native-keycommands';
 declare module 'react-native-mime-types';
 declare module 'react-native-restart';
 declare module 'react-native-prompt-android';
+declare module 'react-native-jitsi-meet';

app/views/JitsiMeetView.js → app/views/JitsiMeetView.tsx

 import React from 'react';
 import { StyleSheet } from 'react-native';
-import PropTypes from 'prop-types';
+import { StackNavigationProp } from '@react-navigation/stack';
+import { RouteProp } from '@react-navigation/native';
 import JitsiMeet, { JitsiMeetView as RNJitsiMeetView } from 'react-native-jitsi-meet';
 import BackgroundTimer from 'react-native-background-timer';
 import { connect } from 'react-redux';
@@ -12,23 +13,36 @@ import { events, logEvent } from '../utils/log';
 import { isAndroid, isIOS } from '../utils/deviceInfo';
 import { withTheme } from '../theme';
 
-const formatUrl = (url, baseUrl, uriSize, avatarAuthURLFragment) =>
+const formatUrl = (url: string, baseUrl: string, uriSize: number, avatarAuthURLFragment: string) =>
 	`${baseUrl}/avatar/${url}?format=png&width=${uriSize}&height=${uriSize}${avatarAuthURLFragment}`;
-class JitsiMeetView extends React.Component {
-	static propTypes = {
-		navigation: PropTypes.object,
-		route: PropTypes.object,
-		baseUrl: PropTypes.string,
-		theme: PropTypes.string,
-		user: PropTypes.shape({
-			id: PropTypes.string,
-			username: PropTypes.string,
-			name: PropTypes.string,
-			token: PropTypes.string
-		})
+
+interface IJitsiMeetViewState {
+	userInfo: {
+		displayName: string;
+		avatar: string;
+	};
+	loading: boolean;
+}
+
+interface IJitsiMeetViewProps {
+	navigation: StackNavigationProp<any, 'JitsiMeetView'>;
+	route: RouteProp<{ JitsiMeetView: { rid: string; url: string; onlyAudio?: boolean } }, 'JitsiMeetView'>;
+	baseUrl: string;
+	theme: string;
+	user: {
+		id: string;
+		username: string;
+		name: string;
+		token: string;
 	};
+}
+
+class JitsiMeetView extends React.Component<IJitsiMeetViewProps, IJitsiMeetViewState> {
+	private rid: string;
+	private url: string;
+	private jitsiTimeout: number | null;
 
-	constructor(props) {
+	constructor(props: IJitsiMeetViewProps) {
 		super(props);
 		this.rid = props.route.params?.rid;
 		this.url = props.route.params?.url;
@@ -82,14 +96,14 @@ class JitsiMeetView extends React.Component {
 	onConferenceJoined = () => {
 		logEvent(events.JM_CONFERENCE_JOIN);
 		if (this.rid) {
-			RocketChat.updateJitsiTimeout(this.rid).catch(e => console.log(e));
+			RocketChat.updateJitsiTimeout(this.rid).catch((e: unknown) => console.log(e));
 			if (this.jitsiTimeout) {
 				BackgroundTimer.clearInterval(this.jitsiTimeout);
 				BackgroundTimer.stopBackgroundTimer();
 				this.jitsiTimeout = null;
 			}
 			this.jitsiTimeout = BackgroundTimer.setInterval(() => {
-				RocketChat.updateJitsiTimeout(this.rid).catch(e => console.log(e));
+				RocketChat.updateJitsiTimeout(this.rid).catch((e: unknown) => console.log(e));
 			}, 10000);
 		}
 	};
@@ -120,7 +134,7 @@ class JitsiMeetView extends React.Component {
 	}
 }
 
-const mapStateToProps = state => ({
+const mapStateToProps = (state: any) => ({
 	user: getUserSelector(state),
 	baseUrl: state.server.server
 });

package.json

@@ -148,6 +148,7 @@
 		"@types/lodash": "^4.14.171",
 		"@types/react": "^17.0.14",
 		"@types/react-native": "^0.62.7",
+		"@types/react-native-background-timer": "^2.0.0",
 		"@types/react-native-config-reader": "^4.1.0",
 		"@types/react-native-platform-touchable": "^1.1.2",
 		"@types/react-native-scrollable-tab-view": "^0.10.2",

yarn.lock

@@ -4372,6 +4372,11 @@
     "@types/history" "*"
     "@types/react" "*"
+"@types/react-native-background-timer@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@types/react-native-background-timer/-/react-native-background-timer-2.0.0.tgz#c44c57f8fbca9d9d5521fdd72a8f55232b79381e"
+  integrity sha512-y5VW82dL/ESOLg+5QQHyBdsFVA4ZklENxmOyxv8o06T+3HBG2JOSuz/CIPz1vKdB7dmWDGPZNuPosdtnp+xv2A==
+
 "@types/react-native-config-reader@^4.1.0":
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/@types/react-native-config-reader/-/react-native-config-reader-4.1.0.tgz#33066cd0452b86b605b41bed47b38470dd85d428"