ref(TS) Convert some components to TS (#13198)

react/features/invite/components/callee-info/CalleeInfo.tsx

@@ -1,8 +1,7 @@
-// @flow
-
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
+import { IReduxState } from '../../../app/types';
 import Avatar from '../../../base/avatar/components/Avatar';
 import { MEDIA_TYPE } from '../../../base/media/constants';
 import {
@@ -10,25 +9,29 @@ import {
     getParticipantPresenceStatus,
     getRemoteParticipants
 } from '../../../base/participants/functions';
-import { Container, Text } from '../../../base/react/components/index';
+import { Container, Text } from '../../../base/react/components/index.web';
 import { isLocalTrackMuted } from '../../../base/tracks/functions.any';
 import PresenceLabel from '../../../presence-status/components/PresenceLabel';
 import { CALLING } from '../../../presence-status/constants';
 
-import styles from './styles';
+import styles from './styles.web';
 
 /**
  * The type of the React {@code Component} props of {@link CalleeInfo}.
  */
-type Props = {
+interface IProps {
 
     /**
      * The callee's information such as display name.
      */
-    _callee: Object,
+    _callee?: {
+        id: string;
+        name: string;
+        status?: string;
+    };
 
-    _isVideoMuted: boolean
-};
+    _isVideoMuted: boolean;
+}
 
 
 /**
@@ -37,7 +40,7 @@ type Props = {
  *
  * @augments Component
  */
-class CalleeInfo extends Component<Props> {
+class CalleeInfo extends Component<IProps> {
     /**
      * Implements React's {@link Component#render()}.
      *
@@ -49,8 +52,8 @@ class CalleeInfo extends Component<Props> {
             id,
             name,
             status = CALLING
-        } = this.props._callee;
-        const className = this.props._isVideoMuted ? 'solidBG' : undefined;
+        } = this.props._callee ?? {};
+        const className = this.props._isVideoMuted ? 'solidBG' : '';
 
         return (
             <Container
@@ -88,9 +91,9 @@ class CalleeInfo extends Component<Props> {
      *     style: Object
      * }}
      */
-    _style(...classNames: Array<?string>) {
+    _style(...classNames: Array<string | undefined>) {
         let className = '';
-        let style;
+        let style: Object = {};
 
         for (const aClassName of classNames) {
             if (aClassName) {
@@ -99,7 +102,7 @@ class CalleeInfo extends Component<Props> {
                     // React Native will accept an Array as the value of the
                     // style prop. However, I do not know about React.
                     style = {
-                        ...style,
+                        ...style, // @ts-ignore
                         ...styles[aClassName]
                     };
                 } else {
@@ -111,7 +114,10 @@ class CalleeInfo extends Component<Props> {
 
         // Choose which of the className and/or style props has a value and,
         // consequently, must be returned.
-        const props = {};
+        const props = {
+            className: '',
+            style: {}
+        };
 
         if (className) {
             props.className = className.trim();
@@ -133,7 +139,7 @@ class CalleeInfo extends Component<Props> {
  *     _callee: Object
  * }}
  */
-function _mapStateToProps(state) {
+function _mapStateToProps(state: IReduxState) {
     const _isVideoMuted
         = isLocalTrackMuted(state['features/base/tracks'], MEDIA_TYPE.VIDEO);
 

react/features/invite/components/callee-info/CalleeInfoContainer.tsx

@@ -1,14 +1,14 @@
-// @flow
-
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
+import { IReduxState } from '../../../app/types';
+
 import CalleeInfo from './CalleeInfo';
 
 /**
  * The type of the React {@code Component} props of {@code CalleeInfoContainer}.
  */
-type Props = {
+interface IProps {
 
     /**
      * The indicator which determines whether {@code CalleeInfo} is to be
@@ -16,8 +16,8 @@ type Props = {
      *
      * @private
      */
-    _calleeInfoVisible: boolean
-};
+    _calleeInfoVisible: boolean;
+}
 
 /**
  * Implements a React {@link Component} which depicts the establishment of a
@@ -25,7 +25,7 @@ type Props = {
  *
  * @augments Component
  */
-class CalleeInfoContainer extends Component<Props> {
+class CalleeInfoContainer extends Component<IProps> {
     /**
      * Implements React's {@link Component#render()}.
      *
@@ -48,7 +48,7 @@ class CalleeInfoContainer extends Component<Props> {
  *     _calleeInfoVisible: boolean
  * }}
  */
-function _mapStateToProps(state: Object) {
+function _mapStateToProps(state: IReduxState) {
     return {
         /**
          * The indicator which determines whether {@code CalleeInfo} is to be
@@ -57,7 +57,7 @@ function _mapStateToProps(state: Object) {
          * @private
          * @type {boolean}
          */
-        _calleeInfoVisible: state['features/invite'].calleeInfoVisible
+        _calleeInfoVisible: Boolean(state['features/invite'].calleeInfoVisible)
     };
 }
 

react/features/invite/components/callee-info/styles.web.ts

@@ -0,0 +1 @@
+export default {};

react/features/invite/components/dial-in-info-page/DialInInfoApp.web.tsx

@@ -6,11 +6,12 @@ import { isMobileBrowser } from '../../../base/environment/utils';
 import i18next from '../../../base/i18n/i18next';
 import { parseURLParams } from '../../../base/util/parseURLParams';
 import { DIAL_IN_INFO_PAGE_PATH_NAME } from '../../constants';
-import { DialInSummary } from '../dial-in-summary';
+import DialInSummary from '../dial-in-summary/web/DialInSummary';
 
-import NoRoomError from './NoRoomError';
+import NoRoomError from './NoRoomError.web';
 
 document.addEventListener('DOMContentLoaded', () => {
+    // @ts-ignore
     const { room } = parseURLParams(window.location, true, 'search');
     const { href } = window.location;
     const ix = href.indexOf(DIAL_IN_INFO_PAGE_PATH_NAME);
@@ -30,6 +31,6 @@ document.addEventListener('DOMContentLoaded', () => {
     );
 });
 
-window.addEventListener('beforeunload', () => {
+window.addEventListener('beforeunload', () => { // @ts-ignore
     ReactDOM.unmountComponentAtNode(document.getElementById('react'));
 });

react/features/invite/components/dial-in-info-page/NoRoomError.web.js

@@ -1,48 +0,0 @@
-/* @flow */
-
-import React, { Component } from 'react';
-
-import { translate } from '../../../base/i18n/functions';
-
-/**
- * The type of the React {@code Component} props of {@link NoRoomError}.
- */
-type Props = {
-
-    /**
-     * Additional CSS classnames to append to the root of the component.
-     */
-    className: string,
-
-    /**
-     * Invoked to obtain translated strings.
-     */
-    t: Function
-};
-
-/**
- * Displays an error message stating no room name was specified to fetch dial-in
- * numbers for.
- *
- * @augments Component
- */
-class NoRoomError extends Component<Props> {
-    /**
-     * Implements React's {@link Component#render()}.
-     *
-     * @inheritdoc
-     * @returns {ReactElement}
-     */
-    render() {
-        const { t } = this.props;
-
-        return (
-            <div className = { this.props.className } >
-                <div>{ t('info.noNumbers') }</div>
-                <div>{ t('info.noRoom') }</div>
-            </div>
-        );
-    }
-}
-
-export default translate(NoRoomError);

react/features/invite/components/dial-in-info-page/NoRoomError.web.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+/**
+ * The type of the React {@code Component} props of {@link NoRoomError}.
+ */
+interface IProps {
+
+    /**
+     * Additional CSS classnames to append to the root of the component.
+     */
+    className: string;
+}
+
+const NoRoomError = ({ className }: IProps) => {
+    const { t } = useTranslation();
+
+    return (
+        <div className = { className } >
+            <div>{t('info.noNumbers')}</div>
+            <div>{t('info.noRoom')}</div>
+        </div>
+    );
+};
+
+export default NoRoomError;

react/features/invite/components/dial-in-summary/web/DialInSummaryApp.tsx

@@ -1,7 +1,5 @@
-// @flow
-
 import { AtlasKitThemeProvider } from '@atlaskit/theme';
-import React from 'react';
+import React, { ComponentType } from 'react';
 
 import BaseApp from '../../../../base/app/components/BaseApp';
 import { isMobileBrowser } from '../../../../base/environment/utils';
@@ -18,12 +16,7 @@ import DialInSummary from './DialInSummary';
  *
  * @augments BaseApp
  */
-export default class DialInSummaryApp extends BaseApp {
-    /**
-     * The deferred for the initialisation {{promise, resolve, reject}}.
-     */
-    _init: Object;
-
+export default class DialInSummaryApp extends BaseApp<any> {
     /**
      * Navigates to {@link Prejoin} upon mount.
      *
@@ -32,6 +25,7 @@ export default class DialInSummaryApp extends BaseApp {
     async componentDidMount() {
         await super.componentDidMount();
 
+        // @ts-ignore
         const { room } = parseURLParams(window.location, true, 'search');
         const { href } = window.location;
         const ix = href.indexOf(DIAL_IN_INFO_PAGE_PATH_NAME);
@@ -58,7 +52,7 @@ export default class DialInSummaryApp extends BaseApp {
      *
      * @override
      */
-    _createMainElement(component, props) {
+    _createMainElement(component: ComponentType<any>, props: Object) {
         return (
             <JitsiThemeProvider>
                 <AtlasKitThemeProvider mode = 'dark'>