ref(TS) Convert some native components to TS (#13307)

react/features/base/testing/components/TestConnectionInfo.tsx

@@ -1,6 +1,7 @@
 import React, { Component, Fragment } from 'react';
 import { connect } from 'react-redux';
 
+import { IReduxState } from '../../../app/types';
 import statsEmitter from '../../../connection-indicator/statsEmitter';
 import { getLocalParticipant } from '../../participants/functions';
 import { isTestModeEnabled } from '../functions';
@@ -10,7 +11,7 @@ import TestHint from './TestHint';
 /**
  * Defines the TestConnectionInfo's properties.
  */
-type Props = {
+interface IProps {
 
     /**
      * The JitsiConference's connection state. It's the lib-jitsi-meet's event
@@ -20,30 +21,30 @@ type Props = {
      * 'conference.connectionInterrupted'
      * 'conference.connectionRestored'.
      */
-    _conferenceConnectionState: string,
+    _conferenceConnectionState: string;
 
     /**
      * This will be a boolean converted to a string. The value will be 'true'
      * once the conference is joined (the XMPP MUC room to be specific).
      */
-    _conferenceJoinedState: string,
+    _conferenceJoinedState: string;
 
     /**
      * The local participant's ID. Required to be able to observe the local RTP
      * stats.
      */
-    _localUserId: string,
+    _localUserId: string;
 
     /**
      * The local participant's role.
      */
-    _localUserRole: string,
+    _localUserRole: string;
 
     /**
      * Indicates whether or not the test mode is currently on. Otherwise the
      * TestConnectionInfo component will not render.
      */
-    _testMode: boolean
+    _testMode: boolean;
 }
 
 /**
@@ -64,15 +65,15 @@ type State = {
             /**
              * The local download RTP bitrate.
              */
-            download: number,
+            download: number;
 
             /**
              * The local upload RTP bitrate.
              */
-            upload: number
-        }
-    }
-}
+            upload: number;
+        };
+    };
+};
 
 /**
  * The component will expose some of the app state to the jitsi-meet-torture
@@ -81,8 +82,7 @@ type State = {
  * this information, but there's no such option on React Native(maybe that's
  * a good thing).
  */
-class TestConnectionInfo extends Component<Props, State> {
-    _onStatsUpdated: Object => void;
+class TestConnectionInfo extends Component<IProps, State> {
 
     /**
      * Initializes new <tt>TestConnectionInfo</tt> instance.
@@ -90,7 +90,7 @@ class TestConnectionInfo extends Component<Props, State> {
      * @param {Object} props - The read-only properties with which the new
      * instance is to be initialized.
      */
-    constructor(props: Props) {
+    constructor(props: IProps) {
         super(props);
 
         this._onStatsUpdated = this._onStatsUpdated.bind(this);
@@ -114,7 +114,8 @@ class TestConnectionInfo extends Component<Props, State> {
      * @returns {void}
      * @private
      */
-    _onStatsUpdated(stats = {}) {
+    _onStatsUpdated(stats = { bitrate: { download: undefined,
+        upload: undefined } }) {
         this.setState({
             stats: {
                 bitrate: {
@@ -143,7 +144,7 @@ class TestConnectionInfo extends Component<Props, State> {
      * @inheritdoc
      * returns {void}
      */
-    componentDidUpdate(prevProps: Props) {
+    componentDidUpdate(prevProps: IProps) {
         if (prevProps._localUserId !== this.props._localUserId) {
             statsEmitter.unsubscribeToClientStats(
                 prevProps._localUserId, this._onStatsUpdated);
@@ -175,7 +176,7 @@ class TestConnectionInfo extends Component<Props, State> {
         }
 
         return (
-            <Fragment accessible = { false } >
+            <Fragment>
                 <TestHint
                     id = 'org.jitsi.meet.conference.connectionState'
                     value = { this.props._conferenceConnectionState } />
@@ -184,7 +185,7 @@ class TestConnectionInfo extends Component<Props, State> {
                     value = { this.props._conferenceJoinedState } />
                 <TestHint
                     id = 'org.jitsi.meet.conference.grantModeratorAvailable'
-                    value = { true } />
+                    value = { 'true' } />
                 <TestHint
                     id = 'org.jitsi.meet.conference.localParticipantRole'
                     value = { this.props._localUserRole } />
@@ -202,9 +203,9 @@ class TestConnectionInfo extends Component<Props, State> {
  *
  * @param {Object} state - The Redux state.
  * @private
- * @returns {Props}
+ * @returns {IProps}
  */
-function _mapStateToProps(state) {
+function _mapStateToProps(state: IReduxState) {
     const conferenceJoined
         = Boolean(state['features/base/conference'].conference);
     const localParticipant = getLocalParticipant(state);
@@ -212,8 +213,8 @@ function _mapStateToProps(state) {
     return {
         _conferenceConnectionState: state['features/testing'].connectionState,
         _conferenceJoinedState: conferenceJoined.toString(),
-        _localUserId: localParticipant?.id,
-        _localUserRole: localParticipant?.role,
+        _localUserId: localParticipant?.id ?? '',
+        _localUserRole: localParticipant?.role ?? '',
         _testMode: isTestModeEnabled(state)
     };
 }

react/features/base/testing/components/TestHint.web.ts

@@ -0,0 +1,3 @@
+import { Component } from 'react';
+
+export default Component;