ref(TS, rn) Fix some TS errors on tsconfig.native (#12432)

react/features/app/actions.native.ts

@@ -1,38 +1,41 @@
-// @flow
+/* eslint-disable lines-around-comment */
-
+import { setRoom } from '../base/conference/actions';
-import type { Dispatch } from 'redux';
-
-import { setRoom } from '../base/conference';
 import {
     configWillLoad,
-    createFakeConfig,
     loadConfigError,
-    restoreConfig,
     setConfig,
     storeConfig
-} from '../base/config';
+} from '../base/config/actions';
-import { connect, disconnect, setLocationURL } from '../base/connection';
+import {
+    createFakeConfig,
+    restoreConfig
+} from '../base/config/functions';
+import { connect, disconnect, setLocationURL } from '../base/connection/actions';
 import { loadConfig } from '../base/lib-jitsi-meet/functions.native';
-import { createDesiredLocalTracks } from '../base/tracks';
+import { createDesiredLocalTracks } from '../base/tracks/actions';
+import { parseURLParams } from '../base/util/parseURLParams';
 import {
     appendURLParam,
     getBackendSafeRoomName,
     parseURIString,
-    parseURLParams,
     toURLString
-} from '../base/util';
+} from '../base/util/uri';
+// @ts-ignore
 import { isPrejoinPageEnabled } from '../mobile/navigation/functions';
 import {
     goBackToRoot,
     navigateRoot
+    // @ts-ignore
 } from '../mobile/navigation/rootNavigationContainerRef';
+// @ts-ignore
 import { screen } from '../mobile/navigation/routes';
-import { clearNotifications } from '../notifications';
+import { clearNotifications } from '../notifications/actions';
+// @ts-ignore
 import { setFatalError } from '../overlay';
 
-import { getDefaultURL } from './functions';
+import { addTrackStateToURL, getDefaultURL } from './functions.native';
-import { addTrackStateToURL } from './functions.native';
 import logger from './logger';
+import { IStore } from './types';
 
 export * from './actions.any';
 
@@ -48,7 +51,7 @@ export * from './actions.any';
 export function appNavigate(uri?: string) {
     logger.info(`appNavigate to ${uri}`);
 
-    return async (dispatch: Dispatch<any>, getState: Function) => {
+    return async (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
         let location = parseURIString(uri);
 
         // If the specified location (URI) does not identify a host, use the app's
@@ -93,7 +96,7 @@ export function appNavigate(uri?: string) {
         let url = `${baseURL}config.js`;
 
         // XXX In order to support multiple shards, tell the room to the deployment.
-        room && (url = appendURLParam(url, 'room', getBackendSafeRoomName(room)));
+        room && (url = appendURLParam(url, 'room', getBackendSafeRoomName(room) ?? ''));
 
         const { release } = parseURLParams(location, true, 'search');
 
@@ -110,7 +113,7 @@ export function appNavigate(uri?: string) {
             try {
                 config = await loadConfig(url);
                 dispatch(storeConfig(baseURL, config));
-            } catch (error) {
+            } catch (error: any) {
                 config = restoreConfig(baseURL);
 
                 if (!config) {
@@ -160,13 +163,14 @@ export function appNavigate(uri?: string) {
  * @returns {Function}
  */
 export function reloadNow() {
-    return (dispatch: Dispatch<Function>, getState: Function) => {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
         dispatch(setFatalError(undefined));
 
         const state = getState();
         const { locationURL } = state['features/base/connection'];
 
         // Preserve the local tracks muted state after the reload.
+        // @ts-ignore
         const newURL = addTrackStateToURL(locationURL, state);
 
         logger.info(`Reloading the conference using URL: ${locationURL}`);

react/features/app/functions.native.ts

@@ -1,9 +1,8 @@
-// @flow
-
 import { NativeModules } from 'react-native';
 
-import { toState } from '../base/redux';
+import { IStateful } from '../base/app/types';
-import { getServerURL } from '../base/settings';
+import { toState } from '../base/redux/functions';
+import { getServerURL } from '../base/settings/functions';
 
 export * from './functions.any';
 
@@ -15,7 +14,7 @@ export * from './functions.any';
  * function.
  * @returns {string} - Default URL for the app.
  */
-export function getDefaultURL(stateful: Function | Object) {
+export function getDefaultURL(stateful: IStateful) {
     const state = toState(stateful);
 
     return getServerURL(state);

react/features/base/connection/actions.native.ts

@@ -141,12 +141,16 @@ function _connectionWillConnect(connection: Object) {
     };
 }
 
+
+/* eslint-disable @typescript-eslint/no-unused-vars */
 /**
  * Closes connection.
  *
+ * @param {boolean} _ - Used in web.
  * @returns {Function}
  */
-export function disconnect() {
+export function disconnect(_?: boolean) {
+    /* eslint-enable @typescript-eslint/no-unused-vars */
     return (dispatch: IStore['dispatch'], getState: IStore['getState']): Promise<void> => {
         const state = getState();
 

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

@@ -1,9 +1,8 @@
-// @flow
+// @ts-ignore
-
 import Bourne from '@hapi/bourne';
 import { NativeModules } from 'react-native';
 
-import { loadScript } from '../util';
+import { loadScript } from '../util/loadScript.native';
 
 import logger from './logger';
 

react/features/base/logging/LogTransport.native.ts

@@ -1,4 +1,6 @@
 import { NativeModules } from 'react-native';
+// eslint-disable-next-line lines-around-comment
+// @ts-ignore
 import { format } from 'util';
 
 // Some code adapted from https://github.com/houserater/react-native-lumberjack

react/features/base/react/components/native/IconButton.tsx

@@ -4,13 +4,13 @@ import { TouchableRipple } from 'react-native-paper';
 import Icon from '../../../icons/components/Icon';
 import BaseTheme from '../../../ui/components/BaseTheme.native';
 import { BUTTON_TYPES } from '../../../ui/constants';
-import { IconButtonProps } from '../../types';
+import { IIconButtonProps } from '../../types';
 
 // @ts-ignore
 import styles from './styles';
 
 
-const IconButton: React.FC<IconButtonProps> = ({
+const IconButton: React.FC<IIconButtonProps> = ({
     accessibilityLabel,
     color: iconColor,
     disabled,
@@ -20,7 +20,7 @@ const IconButton: React.FC<IconButtonProps> = ({
     style,
     tapColor,
     type
-}: IconButtonProps) => {
+}: IIconButtonProps) => {
     const { PRIMARY, SECONDARY, TERTIARY } = BUTTON_TYPES;
 
     let color;

react/features/base/sounds/functions.ios.ts

@@ -1,4 +1,4 @@
-import { getSdkBundlePath } from '../../app/functions';
+import { getSdkBundlePath } from '../../app/functions.native';
 
 /**
  * Returns the location of the sounds. On iOS it's the location of the SDK

react/features/base/tracks/actions.native.ts

@@ -17,7 +17,7 @@ export * from './actions.any';
  * @param {boolean} enabled - The state to toggle screen sharing to.
  * @returns {Function}
  */
-export function toggleScreensharing(enabled: boolean): Function {
+export function toggleScreensharing(enabled: boolean) {
     return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
         const state = getState();
 

react/features/base/util/uri.ts

@@ -419,7 +419,7 @@ export function safeDecodeURIComponent(text: string) {
  * @returns {string} - A {@code String} representation of the specified
  * {@code obj} which is supposed to represent a URL.
  */
-export function toURLString(obj?: (Object | string)): string | undefined | null {
+export function toURLString(obj?: (Object | string)) {
     let str;
 
     switch (typeof obj) {

react/features/chat/middleware.ts

@@ -21,7 +21,7 @@ import StateListenerRegistry from '../base/redux/StateListenerRegistry';
 import { playSound, registerSound, unregisterSound } from '../base/sounds/actions';
 import { addGif } from '../gifs/actions';
 import { GIF_PREFIX } from '../gifs/constants';
-import { getGifDisplayMode, isGifMessage } from '../gifs/functions';
+import { getGifDisplayMode, isGifMessage } from '../gifs/function.any';
 import { showMessageNotification } from '../notifications/actions';
 import { NOTIFICATION_TIMEOUT_TYPE } from '../notifications/constants';
 import { resetNbUnreadPollsMessages } from '../polls/actions';

react/features/gifs/function.any.ts

@@ -1,5 +1,4 @@
 import { IReduxState } from '../app/types';
-import { showOverflowDrawer } from '../toolbox/functions.web';
 
 import { GIF_PREFIX } from './constants';
 import { IGif } from './reducer';
@@ -26,19 +25,6 @@ export function isGifMessage(message: string) {
         .startsWith(GIF_PREFIX);
 }
 
-/**
- * Returns the visibility state of the gifs menu.
- *
- * @param {IReduxState} state - The state of the application.
- * @returns {boolean}
- */
-export function isGifsMenuOpen(state: IReduxState) {
-    const overflowDrawer = showOverflowDrawer(state);
-    const { drawerVisible, menuOpen } = state['features/gifs'];
-
-    return overflowDrawer ? drawerVisible : menuOpen;
-}
-
 /**
  * Returns the url of the gif selected in the gifs menu.
  *

react/features/gifs/functions.native.ts

@@ -0,0 +1 @@
+export * from './function.any';

react/features/gifs/functions.web.ts

@@ -0,0 +1,17 @@
+import { IReduxState } from '../app/types';
+import { showOverflowDrawer } from '../toolbox/functions.web';
+
+export * from './function.any';
+
+/**
+ * Returns the visibility state of the gifs menu.
+ *
+ * @param {IReduxState} state - The state of the application.
+ * @returns {boolean}
+ */
+export function isGifsMenuOpen(state: IReduxState) {
+    const overflowDrawer = showOverflowDrawer(state);
+    const { drawerVisible, menuOpen } = state['features/gifs'];
+
+    return overflowDrawer ? drawerVisible : menuOpen;
+}

react/features/gifs/middleware.any.ts

@@ -4,7 +4,7 @@ import MiddlewareRegistry from '../base/redux/MiddlewareRegistry';
 import { ADD_GIF_FOR_PARTICIPANT, HIDE_GIF_FOR_PARTICIPANT, SHOW_GIF_FOR_PARTICIPANT } from './actionTypes';
 import { removeGif } from './actions';
 import { GIF_DEFAULT_TIMEOUT } from './constants';
-import { getGifForParticipant } from './functions';
+import { getGifForParticipant } from './function.any';
 
 /**
  * Middleware which intercepts Gifs actions to handle changes to the
@@ -57,5 +57,5 @@ MiddlewareRegistry.register(store => next => action => {
 function _clearGifTimeout(state: IReduxState, id: string) {
     const gif = getGifForParticipant(state, id);
 
-    clearTimeout(gif?.timeoutID);
+    clearTimeout(gif?.timeoutID ?? -1);
 }

react/features/gifs/subscriber.native.ts

@@ -2,7 +2,7 @@ import { GiphySDK } from '@giphy/react-native-sdk';
 
 import StateListenerRegistry from '../base/redux/StateListenerRegistry';
 
-import { isGifEnabled } from './functions';
+import { isGifEnabled } from './function.any';
 
 /**
  * Listens for changes in the number of participants to calculate the dimensions of the tile view grid and the tiles.

react/features/participants-pane/components/breakout-rooms/components/web/RoomList.js

@@ -5,7 +5,7 @@ import { useSelector } from 'react-redux';
 
 import { isLocalParticipantModerator } from '../../../../../base/participants';
 import { equals } from '../../../../../base/redux';
-import useContextMenu from '../../../../../base/ui/hooks/useContextMenu';
+import useContextMenu from '../../../../../base/ui/hooks/useContextMenu.web';
 import {
     getBreakoutRooms,
     getBreakoutRoomsConfig,

react/features/participants-pane/components/web/MeetingParticipants.tsx

@@ -15,7 +15,7 @@ import { getParticipantById, isScreenShareParticipant } from '../../../base/part
 import { connect } from '../../../base/redux/functions';
 import { withPixelLineHeight } from '../../../base/styles/functions.web';
 import Input from '../../../base/ui/components/web/Input';
-import useContextMenu from '../../../base/ui/hooks/useContextMenu';
+import useContextMenu from '../../../base/ui/hooks/useContextMenu.web';
 import { normalizeAccents } from '../../../base/util/strings.web';
 import { getBreakoutRooms, getCurrentRoomId, isInBreakoutRoom } from '../../../breakout-rooms/functions';
 import { showOverflowDrawer } from '../../../toolbox/functions.web';

react/features/prejoin/components/Prejoin.native.tsx

@@ -45,13 +45,13 @@ import AudioMuteButton from '../../toolbox/components/AudioMuteButton';
 // @ts-ignore
 import VideoMuteButton from '../../toolbox/components/VideoMuteButton';
 import { isDisplayNameRequired } from '../functions';
-import { PrejoinProps } from '../types';
+import { IPrejoinProps } from '../types';
 
 // @ts-ignore
 import styles from './styles';
 
 
-const Prejoin: React.FC<PrejoinProps> = ({ navigation }: PrejoinProps) => {
+const Prejoin: React.FC<IPrejoinProps> = ({ navigation }: IPrejoinProps) => {
     const dispatch = useDispatch();
     const isFocused = useIsFocused();
     const { t } = useTranslation();

react/features/recording/components/Recording/LocalRecordingManager.native.ts

@@ -1,7 +1,7 @@
 import { IStore } from '../../../app/types';
 
 interface ILocalRecordingManager {
-    addAudioTrackToLocalRecording: (track: MediaStreamTrack) => void;
+    addAudioTrackToLocalRecording: (track: any) => void;
     isRecordingLocally: () => boolean;
     startLocalRecording: (store: IStore) => void;
     stopLocalRecording: () => void;
@@ -11,7 +11,7 @@ const LocalRecordingManager: ILocalRecordingManager = {
     /**
      * Adds audio track to the recording stream.
      *
-     * @param {MediaStreamTrack} track - Track to be added,.
+     * @param {any} track - Track to be added,.
      * @returns {void}
      */
     addAudioTrackToLocalRecording() { }, // eslint-disable-line @typescript-eslint/no-empty-function

react/features/recording/components/Recording/native/StartRecordingDialogContent.tsx

@@ -14,7 +14,7 @@ import { RECORDING_TYPES } from '../../../constants';
 // @ts-ignore
 import { getRecordingDurationEstimation } from '../../../functions';
 import AbstractStartRecordingDialogContent, {
-    Props,
+    IProps,
     mapStateToProps
 } from '../AbstractStartRecordingDialogContent';
 import {
@@ -29,7 +29,7 @@ import {
 /**
  * The start recording dialog content for the mobile application.
  */
-class StartRecordingDialogContent extends AbstractStartRecordingDialogContent<Props> {
+class StartRecordingDialogContent extends AbstractStartRecordingDialogContent<IProps> {
     /**
      * Renders the component.
      *

react/features/subtitles/components/LanguageList.web.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
 
-import LanguageListItem from './LanguageListItem';
+import LanguageListItem from './LanguageListItem.web';
 
 interface ILanguageListProps {
     items: Array<ILanguageItem>;

react/features/subtitles/components/LanguageSelectorDialog.web.tsx

@@ -18,7 +18,7 @@ import { SETTINGS_TABS } from '../../settings/constants';
 // @ts-ignore
 import { setRequestingSubtitles, toggleLanguageSelectorDialog, updateTranslationLanguage } from '../actions';
 
-import LanguageList from './LanguageList';
+import LanguageList from './LanguageList.web';
 
 
 interface ILanguageSelectorDialogProps extends WithTranslation {

react/features/toolbox/components/native/ScreenSharingButton.tsx

@@ -2,6 +2,7 @@
 import React from 'react';
 import { Platform } from 'react-native';
 
+import { IReduxState } from '../../../app/types';
 import { connect } from '../../../base/redux/functions';
 // @ts-ignore
 import { isDesktopShareButtonDisabled } from '../../functions.native';
@@ -30,7 +31,7 @@ const ScreenSharingButton = (props: any) => (
  * @private
  * @returns {Object}
  */
-function _mapStateToProps(state: object): object {
+function _mapStateToProps(state: IReduxState) {
     return {
         _disabled: isDesktopShareButtonDisabled(state)
     };

react/features/toolbox/functions.native.ts

@@ -1,10 +1,11 @@
 import { IReduxState } from '../app/types';
 import { IStateful } from '../base/app/types';
-import { hasAvailableDevices } from '../base/devices';
+import { hasAvailableDevices } from '../base/devices/functions';
-import { TOOLBOX_ALWAYS_VISIBLE, TOOLBOX_ENABLED, getFeatureFlag } from '../base/flags';
+import { TOOLBOX_ALWAYS_VISIBLE, TOOLBOX_ENABLED } from '../base/flags/constants';
-import { getParticipantCountWithFake } from '../base/participants';
+import { getFeatureFlag } from '../base/flags/functions';
-import { toState } from '../base/redux';
+import { getParticipantCountWithFake } from '../base/participants/functions';
-import { isLocalVideoTrackDesktop } from '../base/tracks';
+import { toState } from '../base/redux/functions';
+import { isLocalVideoTrackDesktop } from '../base/tracks/functions';
 
 export * from './functions.any';
 

react/features/video-quality/components/VideoQualitySlider.web.tsx

@@ -19,7 +19,7 @@ import { setPreferredVideoQuality } from '../actions';
 import { DEFAULT_LAST_N, VIDEO_QUALITY_LEVELS } from '../constants';
 import logger from '../logger';
 
-import Slider from './Slider';
+import Slider from './Slider.web';
 
 const {
     ULTRA,

tsconfig.native.json

@@ -12,12 +12,13 @@
         "noImplicitAny": true,
         "strictPropertyInitialization": false,
         "resolveJsonModule": true,
-        "moduleSuffixes": [".native", ""]
+        "moduleSuffixes": [".native", ".ios", ".android", ""]
     },
     "exclude": [
         "node_modules",
         "react/features/base/components/participants-pane-list",
         "react/features/connection-stats",
+        "react/features/desktop-picker",
         "react/features/e2ee",
         "react/features/embed-meeting",
         "react/features/face-landmarks",
@@ -26,6 +27,7 @@
         "react/features/stream-effects/noise-suppression",
         "react/features/stream-effects/rnnoise",
         "react/features/virtual-background",
+        "react/features/whiteboard",
         "**/web/*",
         "**/*.web.ts",
         "**/*.web.tsx"

tsconfig.web.json

@@ -19,6 +19,8 @@
         "**/mobile/*",
         "**/native/*",
         "**/*.native.ts",
-        "**/*.native.tsx"
+        "**/*.native.tsx",
+        "**/*.ios.ts",
+        "**/*.android.ts"
     ]
 }