ref(TS) Convert some base files to TS (#12226)

globals.d.ts

@@ -1,4 +1,5 @@
 import { IStore } from "./react/features/app/types";
+import { IConfig } from "./react/features/base/config/configType";
 
 export {};
 
@@ -10,4 +11,8 @@ declare global {
         conference: any;
     };
     const interfaceConfig: any;
+
+    interface Window {
+        config?: IConfig;
+    }
 }

react/features/base/config/configType.ts

@@ -301,6 +301,7 @@ export interface IConfig {
         disableTopPanel?: boolean;
         minParticipantCountForTopPanel?: number;
     };
+    firefox_fake_device?: string;
     flags?: {
         sendMultipleVideoStreams?: boolean;
         sourceNameSignaling?: boolean;

react/features/base/config/reducer.ts

@@ -75,7 +75,6 @@ export interface IConfigState extends IConfig {
         obfuscateRoomName?: boolean;
     };
     error?: Error;
-    firefox_fake_device?: string;
 }
 
 ReducerRegistry.register<IConfigState>('features/base/config', (state = _getInitialState(), action): IConfigState => {

react/features/base/jwt/functions.ts

@@ -1,9 +1,9 @@
-/* @flow */
-
+// @ts-ignore
 import jwtDecode from 'jwt-decode';
 
+import { IState } from '../../app/types';
 import { getLocalParticipant } from '../participants/functions';
-import { parseURLParams } from '../util';
+import { parseURLParams } from '../util/parseURLParams';
 
 import { MEET_FEATURES } from './constants';
 
@@ -16,17 +16,18 @@ import { MEET_FEATURES } from './constants';
  * @returns {string} The JSON Web Token (JWT), if any, defined by the specified
  * {@code url}; otherwise, {@code undefined}.
  */
-export function parseJWTFromURLParams(url: URL = window.location) {
+export function parseJWTFromURLParams(url: URL | Location = window.location) {
+    // @ts-ignore
     return parseURLParams(url, true, 'search').jwt;
 }
 
 /**
  * Returns the user name after decoding the jwt.
  *
- * @param {Object} state - The app state.
+ * @param {IState} state - The app state.
  * @returns {string}
  */
-export function getJwtName(state: Object) {
+export function getJwtName(state: IState) {
     const { user } = state['features/base/jwt'];
 
     return user?.name;
@@ -35,12 +36,12 @@ export function getJwtName(state: Object) {
 /**
  * Check if the given JWT feature is enabled.
  *
- * @param {Object} state - The app state.
+ * @param {IState} state - The app state.
  * @param {string} feature - The feature we want to check.
  * @param {boolean} ifNoToken - Default value if there is no token.
  * @returns {string}
  */
-export function isJwtFeatureEnabled(state: Object, feature: string, ifNoToken: boolean = false) {
+export function isJwtFeatureEnabled(state: IState, feature: string, ifNoToken = false) {
     const { jwt } = state['features/base/jwt'];
 
     if (!jwt) {
@@ -54,7 +55,7 @@ export function isJwtFeatureEnabled(state: Object, feature: string, ifNoToken: b
         return true;
     }
 
-    return String(features[feature]) === 'true';
+    return String(features[feature as keyof typeof features]) === 'true';
 }
 
 /**
@@ -64,7 +65,7 @@ export function isJwtFeatureEnabled(state: Object, feature: string, ifNoToken: b
  * @param {any} timestamp - A UNIX timestamp in seconds as stored in the jwt.
  * @returns {boolean} - Whether the timestamp is indeed a valid UNIX timestamp or not.
  */
-function isValidUnixTimestamp(timestamp: any) {
+function isValidUnixTimestamp(timestamp: number | string) {
     return typeof timestamp === 'number' && timestamp * 1000 === new Date(timestamp * 1000).getTime();
 }
 
@@ -75,7 +76,7 @@ function isValidUnixTimestamp(timestamp: any) {
  * @returns {Array<string>} - An array containing all jwt validation errors.
  */
 export function validateJwt(jwt: string) {
-    const errors = [];
+    const errors: string[] = [];
 
     if (!jwt) {
         return errors;
@@ -103,7 +104,7 @@ export function validateJwt(jwt: string) {
         } = payload;
 
         // JaaS only
-        if (sub && sub.startsWith('vpaas-magic-cookie')) {
+        if (sub?.startsWith('vpaas-magic-cookie')) {
             const { kid } = header;
 
             // if Key ID is missing, we return the error immediately without further validations.
@@ -165,7 +166,7 @@ export function validateJwt(jwt: string) {
                 }
             });
         }
-    } catch (e) {
+    } catch (e: any) {
         errors.push(e ? e.message : '- unspecified jwt error');
     }
 

react/features/base/jwt/logger.ts

@@ -1,5 +1,3 @@
-// @flow
-
 import { getLogger } from '../logging/functions';
 
 export default getLogger('features/base/jwt');

react/features/base/jwt/middleware.ts

@@ -1,22 +1,20 @@
-// @flow
-
+// @ts-ignore
 import jwtDecode from 'jwt-decode';
+import { AnyAction } from 'redux';
 
-import { SET_CONFIG } from '../config';
-import { SET_LOCATION_URL } from '../connection';
-import {
-    getLocalParticipant,
-    participantUpdated
-} from '../participants';
-import { MiddlewareRegistry } from '../redux';
+import { IStore } from '../../app/types';
+import { SET_CONFIG } from '../config/actionTypes';
+import { SET_LOCATION_URL } from '../connection/actionTypes';
+import { participantUpdated } from '../participants/actions';
+import { getLocalParticipant } from '../participants/functions';
+import { Participant } from '../participants/types';
+import MiddlewareRegistry from '../redux/MiddlewareRegistry';
 
 import { SET_JWT } from './actionTypes';
 import { setJWT } from './actions';
 import { parseJWTFromURLParams } from './functions';
 import logger from './logger';
 
-declare var APP: Object;
-
 /**
  * Middleware to parse token data upon setting a new room URL.
  *
@@ -51,13 +49,14 @@ MiddlewareRegistry.register(store => next => action => {
  * @returns {void}
  */
 function _overwriteLocalParticipant(
-        { dispatch, getState },
-        { avatarURL, email, id: jwtId, name, features }) {
+        { dispatch, getState }: IStore,
+        { avatarURL, email, id: jwtId, name, features }:
+        { avatarURL?: string; email?: string; features?: any; id?: string; name?: string; }) {
     let localParticipant;
 
     if ((avatarURL || email || name)
             && (localParticipant = getLocalParticipant(getState))) {
-        const newProperties: Object = {
+        const newProperties: Participant = {
             id: localParticipant.id,
             local: true
         };
@@ -97,7 +96,7 @@ function _overwriteLocalParticipant(
  * @returns {Object} The new state that is the result of the reduction of the
  * specified {@code action}.
  */
-function _setConfigOrLocationURL({ dispatch, getState }, next, action) {
+function _setConfigOrLocationURL({ dispatch, getState }: IStore, next: Function, action: AnyAction) {
     const result = next(action);
 
     const { locationURL } = getState()['features/base/connection'];
@@ -122,8 +121,8 @@ function _setConfigOrLocationURL({ dispatch, getState }, next, action) {
  * @returns {Object} The new state that is the result of the reduction of the
  * specified {@code action}.
  */
-function _setJWT(store, next, action) {
-    // eslint-disable-next-line no-unused-vars
+function _setJWT(store: IStore, next: Function, action: AnyAction) {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const { jwt, type, ...actionPayload } = action;
 
     if (!Object.keys(actionPayload).length) {
@@ -186,13 +185,13 @@ function _setJWT(store, next, action) {
  * @returns {void}
  */
 function _undoOverwriteLocalParticipant(
-        { dispatch, getState },
-        { avatarURL, name, email }) {
+        { dispatch, getState }: IStore,
+        { avatarURL, name, email }: { avatarURL?: string; email?: string; name?: string; }) {
     let localParticipant;
 
     if ((avatarURL || name || email)
             && (localParticipant = getLocalParticipant(getState))) {
-        const newProperties: Object = {
+        const newProperties: Participant = {
             id: localParticipant.id,
             local: true
         };
@@ -226,8 +225,10 @@ function _undoOverwriteLocalParticipant(
  *     hidden-from-recorder: ?boolean
  * }}
  */
-function _user2participant({ avatar, avatarUrl, email, id, name, 'hidden-from-recorder': hiddenFromRecorder }) {
-    const participant = {};
+function _user2participant({ avatar, avatarUrl, email, id, name, 'hidden-from-recorder': hiddenFromRecorder }:
+    { avatar: any; avatarUrl: string; email: string; 'hidden-from-recorder': string | boolean;
+    id: string; name: string; }) {
+    const participant: any = {};
 
     if (typeof avatarUrl === 'string') {
         participant.avatarURL = avatarUrl.trim();

react/features/base/jwt/reducer.ts

@@ -11,6 +11,9 @@ export interface IJwtState {
     jwt?: string;
     server?: string;
     tenant?: string;
+    user?: {
+        name: string;
+    };
 }
 
 /**

react/features/base/lib-jitsi-meet/actions.ts

@@ -1,10 +1,11 @@
-/* @flow */
-
+/* eslint-disable lines-around-comment */
+// @ts-ignore
 import { jitsiLocalStorage } from '@jitsi/js-utils';
-import type { Dispatch } from 'redux';
 
+import { IStore } from '../../app/types';
 import { isOnline } from '../net-info/selectors';
 
+// @ts-ignore
 import JitsiMeetJS from './_';
 import {
     LIB_DID_DISPOSE,
@@ -13,17 +14,16 @@ import {
     LIB_WILL_DISPOSE,
     LIB_WILL_INIT
 } from './actionTypes';
+// @ts-ignore
 import { isAnalyticsEnabled } from './functions';
 
-declare var APP: Object;
-
 /**
  * Disposes (of) lib-jitsi-meet.
  *
  * @returns {Function}
  */
 export function disposeLib() {
-    return (dispatch: Dispatch<any>) => {
+    return (dispatch: IStore['dispatch']) => {
         dispatch({ type: LIB_WILL_DISPOSE });
 
         // TODO Currently, lib-jitsi-meet doesn't have the functionality to
@@ -39,7 +39,7 @@ export function disposeLib() {
  * @returns {Function}
  */
 export function initLib() {
-    return (dispatch: Dispatch<any>, getState: Function): void => {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
         const state = getState();
         const config = state['features/base/config'];
 
@@ -59,7 +59,7 @@ export function initLib() {
                 isOnline: isOnline(state)
             });
             dispatch({ type: LIB_DID_INIT });
-        } catch (error) {
+        } catch (error: any) {
             dispatch(libInitError(error));
         }
     };

react/features/base/lib-jitsi-meet/functions.any.ts

@@ -1,7 +1,7 @@
-// @flow
-
-import { toState } from '../redux';
+import { IStateful } from '../app/types';
+import { toState } from '../redux/functions';
 
+// @ts-ignore
 import JitsiMeetJS from './_';
 
 const JitsiConferenceErrors = JitsiMeetJS.errors.conference;
@@ -18,7 +18,7 @@ const JitsiConnectionErrors = JitsiMeetJS.errors.connection;
  *
  * @returns {Promise<JitsiLocalTrack>}
  */
-export function createLocalTrack(type: string, deviceId: string, timeout: ?number, additionalOptions: ?Object) {
+export function createLocalTrack(type: string, deviceId: string, timeout?: number, additionalOptions?: Object) {
     return (
         JitsiMeetJS.createLocalTracks({
             cameraDeviceId: deviceId,
@@ -26,23 +26,23 @@ export function createLocalTrack(type: string, deviceId: string, timeout: ?numbe
 
             // eslint-disable-next-line camelcase
             firefox_fake_device:
-                window.config && window.config.firefox_fake_device,
+                window.config?.firefox_fake_device,
             micDeviceId: deviceId,
             timeout,
             ...additionalOptions
         })
-            .then(([ jitsiLocalTrack ]) => jitsiLocalTrack));
+            .then(([ jitsiLocalTrack ]: any[]) => jitsiLocalTrack));
 }
 
 /**
  * Determines whether analytics is enabled in a specific redux {@code store}.
  *
- * @param {Function|Object} stateful - The redux store, state, or
+ * @param {IStateful} stateful - The redux store, state, or
  * {@code getState} function.
  * @returns {boolean} If analytics is enabled, {@code true}; {@code false},
  * otherwise.
  */
-export function isAnalyticsEnabled(stateful: Function | Object) {
+export function isAnalyticsEnabled(stateful: IStateful) {
     const { disableThirdPartyRequests, analytics = {} } = toState(stateful)['features/base/config'];
 
     return !(disableThirdPartyRequests || analytics.disabled);
@@ -56,13 +56,13 @@ export function isAnalyticsEnabled(stateful: Function | Object) {
  * that category. I've currently named the category fatal because it appears to
  * be used in the cases of unrecoverable errors that necessitate a reload.
  *
- * @param {Object|string} error - The {@code JitsiConferenceErrors} instance to
+ * @param {Error|string} error - The {@code JitsiConferenceErrors} instance to
  * categorize/classify or an {@link Error}-like object.
  * @returns {boolean} If the specified {@code JitsiConferenceErrors} instance
  * indicates a fatal {@code JitsiConference} error, {@code true}; otherwise,
  * {@code false}.
  */
-export function isFatalJitsiConferenceError(error: Object | string) {
+export function isFatalJitsiConferenceError(error: Error | string) {
     if (typeof error !== 'string') {
         error = error.name; // eslint-disable-line no-param-reassign
     }
@@ -83,13 +83,13 @@ export function isFatalJitsiConferenceError(error: Object | string) {
  * that category. I've currently named the category fatal because it appears to
  * be used in the cases of unrecoverable errors that necessitate a reload.
  *
- * @param {Object|string} error - The {@code JitsiConnectionErrors} instance to
+ * @param {Error|string} error - The {@code JitsiConnectionErrors} instance to
  * categorize/classify or an {@link Error}-like object.
  * @returns {boolean} If the specified {@code JitsiConnectionErrors} instance
  * indicates a fatal {@code JitsiConnection} error, {@code true}; otherwise,
  * {@code false}.
  */
-export function isFatalJitsiConnectionError(error: Object | string) {
+export function isFatalJitsiConnectionError(error: Error | string) {
     if (typeof error !== 'string') {
         error = error.name; // eslint-disable-line no-param-reassign
     }

react/features/base/lib-jitsi-meet/functions.web.ts

@@ -1,5 +1,3 @@
-// @flow
-
 export * from './functions.any';
 
 /**
@@ -8,7 +6,7 @@ export * from './functions.any';
  * @param {string} url - The URL to load.
  * @returns {Promise<Object>}
  */
-export async function loadConfig(url: string): Promise<Object> { // eslint-disable-line no-unused-vars
+export async function loadConfig(url: string) { // eslint-disable-line @typescript-eslint/no-unused-vars
     // Return "the config.js file" from the global scope - that is how the
     // Web app on both the client and the server was implemented before the
     // React Native app was even conceived.

react/features/base/lib-jitsi-meet/logger.ts

@@ -1,5 +1,3 @@
-// @flow
-
 import { getLogger } from '../logging/functions';
 
 export default getLogger('features/base/lib-jitsi-meet');

react/features/base/lib-jitsi-meet/middleware.ts

@@ -1,14 +1,16 @@
-import { SET_CONFIG } from '../config';
-import { SET_NETWORK_INFO } from '../net-info';
-import { PARTICIPANT_LEFT } from '../participants';
-import { MiddlewareRegistry } from '../redux';
+import { AnyAction } from 'redux';
 
+import { IStore } from '../../app/types';
+import { SET_CONFIG } from '../config/actionTypes';
+import { SET_NETWORK_INFO } from '../net-info/actionTypes';
+import { PARTICIPANT_LEFT } from '../participants/actionTypes';
+import MiddlewareRegistry from '../redux/MiddlewareRegistry';
+
+// @ts-ignore
 import JitsiMeetJS from './_';
 import { LIB_WILL_INIT } from './actionTypes';
 import { disposeLib, initLib } from './actions';
 
-declare var APP: Object;
-
 /**
  * Middleware that captures PARTICIPANT_LEFT action for a local participant
  * (which signalizes that we finally left the app) and disposes lib-jitsi-meet.
@@ -60,7 +62,7 @@ MiddlewareRegistry.register(store => next => action => {
  * @returns {Object} The new state that is the result of the reduction of the
  * specified action.
  */
-function _setConfig({ dispatch, getState }, next, action) {
+function _setConfig({ dispatch, getState }: IStore, next: Function, action: AnyAction) {
     const { initialized } = getState()['features/base/lib-jitsi-meet'];
 
     // XXX Since the config is changing, the library lib-jitsi-meet must be
@@ -93,8 +95,8 @@ function _setErrorHandlers() {
 
         // eslint-disable-next-line max-params
         window.onerror = (message, source, lineno, colno, error) => {
-            const errMsg = message || (error && error.message);
-            const stack = error && error.stack;
+            const errMsg = message || error?.message;
+            const stack = error?.stack;
 
             JitsiMeetJS.getGlobalOnErrorHandler(errMsg, source, lineno, colno, stack);
 
@@ -107,7 +109,7 @@ function _setErrorHandlers() {
 
         window.onunhandledrejection = function(event) {
             let message = event.reason;
-            let stack = 'n/a';
+            let stack: string | undefined = 'n/a';
 
             if (event.reason instanceof Error) {
                 ({ message, stack } = event.reason);
@@ -116,6 +118,7 @@ function _setErrorHandlers() {
             JitsiMeetJS.getGlobalOnErrorHandler(message, null, null, null, stack);
 
             if (oldOnUnhandledRejection) {
+                // @ts-ignore
                 oldOnUnhandledRejection(event);
             }
         };

react/features/base/net-info/actions.ts

@@ -1,7 +1,5 @@
-// @flow
-
 import { SET_NETWORK_INFO, _STORE_NETWORK_INFO_CLEANUP } from './actionTypes';
-import type { NetworkInfo } from './types';
+import { NetworkInfo } from './types';
 
 /**
  * Up[dates the network info state.
@@ -14,7 +12,7 @@ import type { NetworkInfo } from './types';
  *     details: Object
  * }}
  */
-export function setNetworkInfo({ isOnline, networkType, details }: NetworkInfo): Object {
+export function setNetworkInfo({ isOnline, networkType, details }: NetworkInfo) {
     return {
         type: SET_NETWORK_INFO,
         isOnline,
@@ -33,7 +31,7 @@ export function setNetworkInfo({ isOnline, networkType, details }: NetworkInfo):
  * }}
  * @private
  */
-export function _storeNetworkInfoCleanup(cleanup: Function): Object {
+export function _storeNetworkInfoCleanup(cleanup?: Function) {
     return {
         type: _STORE_NETWORK_INFO_CLEANUP,
         cleanup

react/features/base/net-info/logger.ts

@@ -1,5 +1,3 @@
-// @flow
-
 import { getLogger } from '../logging/functions';
 
 export default getLogger('features/base/net-info');

react/features/base/net-info/middleware.ts

@@ -1,8 +1,7 @@
-// @flow
-
-import { APP_WILL_MOUNT, APP_WILL_UNMOUNT } from '../app';
-import { MiddlewareRegistry } from '../redux';
+import { APP_WILL_MOUNT, APP_WILL_UNMOUNT } from '../app/actionTypes';
+import MiddlewareRegistry from '../redux/MiddlewareRegistry';
 
+// @ts-ignore
 import NetworkInfoService from './NetworkInfoService';
 import { _storeNetworkInfoCleanup, setNetworkInfo } from './actions';
 import { STORE_NAME } from './constants';

react/features/base/net-info/selectors.ts

@@ -1,11 +1,13 @@
+import { IState } from '../../app/types';
+
 import { STORE_NAME } from './constants';
 
 /**
  * A selector for the internet online status.
  *
- * @param {Object} state - The redux state.
+ * @param {IState} state - The redux state.
  * @returns {boolean}
  */
-export function isOnline(state) {
+export function isOnline(state: IState) {
     return state[STORE_NAME].isOnline;
 }

react/features/base/net-info/types.ts

@@ -1,5 +1,3 @@
-// @flow
-
 import { NetInfoCellularGeneration, NetInfoStateType } from '@react-native-community/netinfo';
 
 /**
@@ -8,32 +6,32 @@ import { NetInfoCellularGeneration, NetInfoStateType } from '@react-native-commu
  */
 export type NetworkInfo = {
 
-    /**
-     * Tells whether or not the internet is reachable.
-     */
-    isOnline: boolean,
-
-    /**
-     * The network type. Currently reported only on Android/iOS. Can be one of the constants defined by
-     * the 'react-native-netinfo' library.
-     */
-    networkType: ?NetInfoStateType,
-
     /**
      * Any extra info provided by the OS. Should be JSON and is OS specific. Reported only by iOS and Android and
      * the format is whatever comes out of the 'react-native-netinfo' library which is network type dependent.
      */
-    details: ?{
+    details?: {
 
         /**
          * If {@link networkType} is {@link NetInfoStateType.cellular} then it may provide the info about the type of
          * cellular network.
          */
-        cellularGeneration: ?NetInfoCellularGeneration;
+        cellularGeneration?: NetInfoCellularGeneration;
 
         /**
          * Indicates whether or not the connection is expensive.
          */
-        isConnectionExpensive: ?boolean;
-    }
-}
+        isConnectionExpensive?: boolean;
+    };
+
+    /**
+     * Tells whether or not the internet is reachable.
+     */
+    isOnline: boolean;
+
+    /**
+     * The network type. Currently reported only on Android/iOS. Can be one of the constants defined by
+     * the 'react-native-netinfo' library.
+     */
+    networkType?: NetInfoStateType;
+};

react/features/base/participants/types.ts

@@ -19,6 +19,7 @@ export interface Participant {
     isReplaced?: boolean;
     isReplacing?: number;
     isVirtualScreenshareParticipant?: boolean;
+    jwtId?: string;
     loadableAvatarUrl?: string;
     loadableAvatarUrlUseCORS?: boolean;
     local?: boolean;

react/features/base/sounds/logger.ts

@@ -1,5 +1,3 @@
-// @flow
-
 import { getLogger } from '../logging/functions';
 
 export default getLogger('features/base/sounds');

react/features/base/sounds/middleware.ts

@@ -1,6 +1,5 @@
-// @flow
-
-import { MiddlewareRegistry } from '../redux';
+import { IStore } from '../../app/types';
+import MiddlewareRegistry from '../redux/MiddlewareRegistry';
 
 import { PLAY_SOUND, STOP_SOUND } from './actionTypes';
 import logger from './logger';
@@ -32,7 +31,7 @@ MiddlewareRegistry.register(store => next => action => {
  * @private
  * @returns {void}
  */
-function _playSound({ getState }, soundId) {
+function _playSound({ getState }: IStore, soundId: string) {
     const sounds = getState()['features/base/sounds'];
     const sound = sounds.get(soundId);
 
@@ -55,7 +54,7 @@ function _playSound({ getState }, soundId) {
  * @private
  * @returns {void}
  */
-function _stopSound({ getState }, soundId) {
+function _stopSound({ getState }: IStore, soundId: string) {
     const sounds = getState()['features/base/sounds'];
     const sound = sounds.get(soundId);