fix(typescript) Make TS parse tsx files (#11866)

package.json

@@ -191,7 +191,7 @@
   },
   "license": "Apache-2.0",
   "scripts": {
-    "lint": "eslint --ext .js,.ts,.tsx --max-warnings 0 .",
+    "lint": "eslint --ext .js,.ts,.tsx --max-warnings 0 . && tsc --noEmit --skipLibCheck",
     "lang-sort": "./resources/lang-sort.sh",
     "lint-fix": "eslint --ext .js,.ts,.tsx --max-warnings 0 --fix .",
     "postinstall": "patch-package --error-on-fail && jetify",

react/features/base/dialog/components/native/BottomSheetContainer.tsx

@@ -2,9 +2,9 @@ import React, { Fragment } from 'react';
 import { useSelector } from 'react-redux';
 
 
-const BottomSheetContainer: () => JSX.Element = () => {
+const BottomSheetContainer: () => JSX.Element|null = (): JSX.Element|null => {
-    const { sheet, sheetProps } = useSelector(state => state['features/base/dialog']);
+    const { sheet, sheetProps } = useSelector((state: any) => state['features/base/dialog']);
-    const { reducedUI } = useSelector(state => state['features/base/responsive-ui']);
+    const { reducedUI } = useSelector((state: any) => state['features/base/responsive-ui']);
 
     if (!sheet || reducedUI) {
         return null;

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

@@ -1,3 +1,4 @@
+/* eslint-disable lines-around-comment */
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import {
@@ -6,10 +7,13 @@ import {
     TouchableRipple
 } from 'react-native-paper';
 
+// @ts-ignore
 import BaseTheme from '../../../ui/components/BaseTheme.native';
+// @ts-ignore
 import { BUTTON_MODES, BUTTON_TYPES } from '../../constants';
 import { ButtonProps } from '../../types';
 
+// @ts-ignore
 import styles from './styles';
 
 
@@ -62,6 +66,7 @@ const Button: React.FC<ButtonProps> = ({
             <TouchableRipple
                 accessibilityLabel = { accessibilityLabel }
                 disabled = { disabled }
+                // @ts-ignore
                 onPress = { onPress }
                 rippleColor = 'transparent'
                 style = { [
@@ -72,15 +77,16 @@ const Button: React.FC<ButtonProps> = ({
                     style = { [
                         buttonLabelStyles,
                         labelStyle
-                    ] }>{ t(label) }</Text>
+                    ] }>{ t(label ?? '') }</Text>
             </TouchableRipple>
         );
     }
 
     return (
+        // @ts-ignore
         <NativePaperButton
-            accessibilityLabel = { t(accessibilityLabel) }
+            accessibilityLabel = { t(accessibilityLabel ?? '') }
-            children = { t(label) }
+            children = { t(label ?? '') }
             color = { color }
             disabled = { disabled }
             icon = { icon }

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

@@ -1,11 +1,16 @@
+/* eslint-disable lines-around-comment */
 import React from 'react';
 import { TouchableRipple } from 'react-native-paper';
 
+// @ts-ignore
 import { Icon } from '../../../icons';
+// @ts-ignore
 import BaseTheme from '../../../ui/components/BaseTheme.native';
+// @ts-ignore
 import { BUTTON_TYPES } from '../../constants';
 import { IconButtonProps } from '../../types';
 
+// @ts-ignore
 import styles from './styles';
 
 
@@ -48,6 +53,7 @@ const IconButton: React.FC<IconButtonProps> = ({
         <TouchableRipple
             accessibilityLabel = { accessibilityLabel }
             disabled = { disabled }
+            // @ts-ignore
             onPress = { onPress }
             rippleColor = { rippleColor }
             style = { [

react/features/conference/components/native/carmode/AudioIcon.tsx

@@ -1,6 +1,9 @@
+/* eslint-disable lines-around-comment */
 import React from 'react';
 
+// @ts-ignore
 import { Icon, IconVolumeEmpty } from '../../../../base/icons';
+// @ts-ignore
 import BaseTheme from '../../../../base/ui/components/BaseTheme.native';
 
 /**

react/features/conference/components/native/carmode/CarMode.tsx

@@ -1,19 +1,28 @@
+/* eslint-disable lines-around-comment */
 import React, { useEffect } from 'react';
 import { View } from 'react-native';
 import { withSafeAreaInsets } from 'react-native-safe-area-context';
 import { useDispatch, useSelector } from 'react-redux';
 
+// @ts-ignore
 import JitsiScreen from '../../../../base/modal/components/JitsiScreen';
+// @ts-ignore
 import { LoadingIndicator, TintedView } from '../../../../base/react';
+// @ts-ignore
 import { isLocalVideoTrackDesktop } from '../../../../base/tracks';
+// @ts-ignore
 import { setPictureInPictureEnabled } from '../../../../mobile/picture-in-picture/functions';
+// @ts-ignore
 import { setIsCarmode } from '../../../../video-layout/actions';
+// @ts-ignore
 import ConferenceTimer from '../../ConferenceTimer';
+// @ts-ignore
 import { isConnecting } from '../../functions';
 
 import CarModeFooter from './CarModeFooter';
 import MicrophoneButton from './MicrophoneButton';
 import TitleBar from './TitleBar';
+// @ts-ignore
 import styles from './styles';
 
 /**
@@ -56,6 +65,7 @@ const CarMode = (): JSX.Element => {
                 style = { styles.titleBarSafeViewColor }>
                 <View
                     style = { styles.titleBar }>
+                    {/* @ts-ignore */}
                     <TitleBar />
                 </View>
                 <ConferenceTimer textStyle = { styles.roomTimer } />

react/features/conference/components/native/carmode/CarModeFooter.tsx

@@ -1,9 +1,11 @@
+/* eslint-disable lines-around-comment */
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Text, View } from 'react-native';
 
 import EndMeetingButton from './EndMeetingButton';
 import SoundDeviceButton from './SoundDeviceButton';
+// @ts-ignore
 import styles from './styles';
 
 /**

react/features/conference/components/native/carmode/EndMeetingButton.tsx

@@ -1,12 +1,17 @@
+/* eslint-disable lines-around-comment */
 import React, { useCallback } from 'react';
 import { useDispatch } from 'react-redux';
 
+// @ts-ignore
 import { createToolbarEvent, sendAnalytics } from '../../../../analytics';
+// @ts-ignore
 import { appNavigate } from '../../../../app/actions';
 import Button from '../../../../base/react/components/native/Button';
+// @ts-ignore
 import { BUTTON_TYPES } from '../../../../base/react/constants';
 
 import EndMeetingIcon from './EndMeetingIcon';
+// @ts-ignore
 import styles from './styles';
 
 /**
@@ -26,6 +31,7 @@ const EndMeetingButton = () : JSX.Element => {
     return (
         <Button
             accessibilityLabel = 'carmode.actions.leaveMeeting'
+            // @ts-ignore
             icon = { EndMeetingIcon }
             label = 'carmode.actions.leaveMeeting'
             onPress = { onSelect }

react/features/conference/components/native/carmode/EndMeetingIcon.tsx

@@ -1,6 +1,9 @@
+/* eslint-disable lines-around-comment */
 import React from 'react';
 
+// @ts-ignore
 import { Icon, IconHangup } from '../../../../base/icons';
+// @ts-ignore
 import BaseTheme from '../../../../base/ui/components/BaseTheme.native';
 
 /**

react/features/conference/components/native/carmode/MicrophoneButton.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable lines-around-comment */
 import React, { useCallback, useState } from 'react';
 import { View, TouchableOpacity } from 'react-native';
 import { useDispatch, useSelector } from 'react-redux';
@@ -7,14 +8,22 @@ import {
     sendAnalytics,
     ACTION_SHORTCUT_PRESSED as PRESSED,
     ACTION_SHORTCUT_RELEASED as RELEASED
+    // @ts-ignore
 } from '../../../../analytics';
+// @ts-ignore
 import { getFeatureFlag, AUDIO_MUTE_BUTTON_ENABLED } from '../../../../base/flags';
+// @ts-ignore
 import { Icon, IconMicrophone, IconMicrophoneEmptySlash } from '../../../../base/icons';
+// @ts-ignore
 import { MEDIA_TYPE } from '../../../../base/media';
+// @ts-ignore
 import { isLocalTrackMuted } from '../../../../base/tracks';
+// @ts-ignore
 import { isAudioMuteButtonDisabled } from '../../../../toolbox/functions.any';
+// @ts-ignore
 import { muteLocal } from '../../../../video-menu/actions';
 
+// @ts-ignore
 import styles from './styles';
 
 const LONG_PRESS = 'long.press';
@@ -24,9 +33,9 @@ const LONG_PRESS = 'long.press';
  *
  * @returns {JSX.Element} - The audio mute round button.
  */
-const MicrophoneButton = () : JSX.Element => {
+const MicrophoneButton = () : JSX.Element|null => {
     const dispatch = useDispatch();
-    const audioMuted = useSelector(state => isLocalTrackMuted(state['features/base/tracks'], MEDIA_TYPE.AUDIO));
+    const audioMuted = useSelector((state: any) => isLocalTrackMuted(state['features/base/tracks'], MEDIA_TYPE.AUDIO));
     const disabled = useSelector(isAudioMuteButtonDisabled);
     const enabledFlag = useSelector(state => getFeatureFlag(state, AUDIO_MUTE_BUTTON_ENABLED, true));
     const [ longPress, setLongPress ] = useState(false);

react/features/conference/components/native/carmode/SoundDeviceButton.tsx

@@ -1,12 +1,17 @@
+/* eslint-disable lines-around-comment */
 import React, { useCallback } from 'react';
 import { useDispatch } from 'react-redux';
 
+// @ts-ignore
 import { openSheet } from '../../../../base/dialog/actions';
 import Button from '../../../../base/react/components/native/Button';
+// @ts-ignore
 import { BUTTON_TYPES } from '../../../../base/react/constants';
+// @ts-ignore
 import AudioRoutePickerDialog from '../../../../mobile/audio-mode/components/AudioRoutePickerDialog';
 
 import AudioIcon from './AudioIcon';
+// @ts-ignore
 import styles from './styles';
 
 /**
@@ -24,6 +29,7 @@ const SelectSoundDevice = () : JSX.Element => {
     return (
         <Button
             accessibilityLabel = 'carmode.actions.selectSoundDevice'
+            // @ts-ignore
             icon = { AudioIcon }
             label = 'carmode.actions.selectSoundDevice'
             onPress = { onSelect }

react/features/conference/components/native/carmode/TitleBar.tsx

@@ -1,16 +1,25 @@
+/* eslint-disable lines-around-comment */
 import React from 'react';
 import { StyleProp, Text, View, ViewStyle } from 'react-native';
 import { useSelector } from 'react-redux';
 
+// @ts-ignore
 import { getConferenceName } from '../../../../base/conference/functions';
+// @ts-ignore
 import { getFeatureFlag, MEETING_NAME_ENABLED } from '../../../../base/flags';
+// @ts-ignore
 import { JitsiRecordingConstants } from '../../../../base/lib-jitsi-meet';
+// @ts-ignore
 import { getLocalParticipant } from '../../../../base/participants';
-import { connect } from '../../../../base/redux';
+import { connect } from '../../../../base/redux/functions';
+// @ts-ignore
 import ConnectionIndicator from '../../../../connection-indicator/components/native/ConnectionIndicator';
+// @ts-ignore
 import RecordingLabel from '../../../../recording/components/native/RecordingLabel';
+// @ts-ignore
 import { VideoQualityLabel } from '../../../../video-quality';
 
+// @ts-ignore
 import styles from './styles';
 
 
@@ -36,7 +45,7 @@ type Props = {
  * @returns {JSX.Element}
  */
 const TitleBar = (props: Props) : JSX.Element => {
-    const localParticipant = useSelector(getLocalParticipant);
+    const localParticipant: any = useSelector(getLocalParticipant);
     const localParticipantId = localParticipant?.id;
 
     return (<>
@@ -78,7 +87,7 @@ const TitleBar = (props: Props) : JSX.Element => {
  * @param {Object} state - The Redux state.
  * @returns {Props}
  */
-function _mapStateToProps(state: Object) {
+function _mapStateToProps(state: any) {
     const { hideConferenceSubject } = state['features/base/config'];
 
     return {

react/features/display-name/components/native/DisplayNameLabel.tsx

@@ -4,9 +4,12 @@ import { Text, View } from 'react-native';
 import {
     getParticipantById,
     getParticipantDisplayName
+
+    // @ts-ignore
 } from '../../../base/participants/functions';
 import { connect } from '../../../base/redux/functions';
 
+// @ts-ignore
 import styles from './styles';
 
 type Props = {
@@ -65,7 +68,7 @@ class DisplayNameLabel extends React.Component<Props> {
  * @param {Props} ownProps - The own props of the component.
  * @returns {Props}
  */
-function _mapStateToProps(state: any, ownProps) {
+function _mapStateToProps(state: any, ownProps: any) {
     const participant = getParticipantById(state, ownProps.participantId);
 
     return {

react/features/gifs/components/native/GifsMenuFooter.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Image, Text, View } from 'react-native';
 
+// @ts-ignore
 import styles from './styles';
 
 

react/features/mobile/navigation/components/conference/components/ConferenceNavigationContainer.tsx

@@ -1,27 +1,41 @@
+/* eslint-disable lines-around-comment */
 import { NavigationContainer } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
+// @ts-ignore
 import { Chat, ChatAndPolls } from '../../../../../chat';
+// @ts-ignore
 import Conference from '../../../../../conference/components/native/Conference';
 import CarMode from '../../../../../conference/components/native/carmode/CarMode';
+// @ts-ignore
 import { getDisablePolls } from '../../../../../conference/functions';
+// @ts-ignore
 import { SharedDocument } from '../../../../../etherpad';
+// @ts-ignore
 import { GifsMenu } from '../../../../../gifs/components';
 import AddPeopleDialog
+// @ts-ignore
     from '../../../../../invite/components/add-people-dialog/native/AddPeopleDialog';
+// @ts-ignore
 import { ParticipantsPane } from '../../../../../participants-pane/components/native';
+// @ts-ignore
 import { StartLiveStreamDialog } from '../../../../../recording';
 import { StartRecordingDialog }
+// @ts-ignore
     from '../../../../../recording/components/Recording/native';
 import SalesforceLinkDialog
+// @ts-ignore
     from '../../../../../salesforce/components/native/SalesforceLinkDialog';
 import SecurityDialog
+// @ts-ignore
     from '../../../../../security/components/security-dialog/native/SecurityDialog';
 import SpeakerStats
+// @ts-ignore
     from '../../../../../speaker-stats/components/native/SpeakerStats';
+// @ts-ignore
 import { screen } from '../../../routes';
 import {
     carmodeScreenOptions,
@@ -38,11 +52,14 @@ import {
     securityScreenOptions,
     sharedDocumentScreenOptions,
     speakerStatsScreenOptions
+    // @ts-ignore
 } from '../../../screenOptions';
 import LobbyNavigationContainer
+// @ts-ignore
     from '../../lobby/components/LobbyNavigationContainer';
 import {
     conferenceNavigationRef
+    // @ts-ignore
 } from '../ConferenceNavigationContainerRef';
 
 const ConferenceStack = createStackNavigator();

react/features/participants-pane/components/native/ParticipantsPaneFooter.tsx

@@ -1,17 +1,25 @@
+/* eslint-disable lines-around-comment */
 import React, { useCallback } from 'react';
 import { View } from 'react-native';
 import { useDispatch, useSelector } from 'react-redux';
 
+// @ts-ignore
 import { openDialog, openSheet } from '../../../base/dialog';
+// @ts-ignore
 import { IconHorizontalPoints } from '../../../base/icons';
 import Button from '../../../base/react/components/native/Button';
 import IconButton from '../../../base/react/components/native/IconButton';
+// @ts-ignore
 import { BUTTON_TYPES } from '../../../base/react/constants';
 import MuteEveryoneDialog
+// @ts-ignore
     from '../../../video-menu/components/native/MuteEveryoneDialog';
+// @ts-ignore
 import { isMoreActionsVisible, isMuteAllVisible } from '../../functions';
 
+// @ts-ignore
 import { ContextMenuMore } from './ContextMenuMore';
+// @ts-ignore
 import styles from './styles';
 
 

react/features/participants-pane/components/native/RoomParticipantMenu.tsx

@@ -1,17 +1,21 @@
-/* eslint-disable import/order */
+/* eslint-disable lines-around-comment */
 import React, { PureComponent } from 'react';
 import { Text, View } from 'react-native';
 
 // @ts-ignore
 import { Avatar } from '../../../base/avatar';
-
 // @ts-ignore
 import { BottomSheet, hideSheet } from '../../../base/dialog';
+// @ts-ignore
 import { bottomSheetStyles } from '../../../base/dialog/components/native/styles';
+// @ts-ignore
 import { translate } from '../../../base/i18n';
-import { connect } from '../../../base/redux';
+import { connect } from '../../../base/redux/functions';
+// @ts-ignore
 import { getBreakoutRooms } from '../../../breakout-rooms/functions';
+// @ts-ignore
 import SendToBreakoutRoom from '../../../video-menu/components/native/SendToBreakoutRoom';
+// @ts-ignore
 import styles from '../../../video-menu/components/native/styles';
 
 /**
@@ -140,7 +144,7 @@ class RoomParticipantMenu extends PureComponent<Props> {
  * @private
  * @returns {Props}
  */
-function _mapStateToProps(state) {
+function _mapStateToProps(state: any) {
     return {
         _rooms: Object.values(getBreakoutRooms(state))
     };

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

@@ -1,3 +1,4 @@
+/* eslint-disable lines-around-comment */
 import React, { useCallback, useEffect, useLayoutEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
@@ -11,28 +12,47 @@ import {
 } from 'react-native';
 import { useDispatch, useSelector } from 'react-redux';
 
+// @ts-ignore
 import { appNavigate } from '../../app/actions.native';
+// @ts-ignore
 import { setAudioOnly } from '../../base/audio-only/actions';
+// @ts-ignore
 import { connect } from '../../base/connection/actions.native';
+// @ts-ignore
 import { IconClose } from '../../base/icons';
+// @ts-ignore
 import JitsiScreen from '../../base/modal/components/JitsiScreen';
+// @ts-ignore
 import { getLocalParticipant } from '../../base/participants';
+// @ts-ignore
 import { getFieldValue } from '../../base/react';
 import Button from '../../base/react/components/native/Button';
+// @ts-ignore
 import { BUTTON_TYPES } from '../../base/react/constants';
+// @ts-ignore
 import { ASPECT_RATIO_NARROW } from '../../base/responsive-ui';
+// @ts-ignore
 import { updateSettings } from '../../base/settings';
+// @ts-ignore
 import BaseTheme from '../../base/ui/components/BaseTheme.native';
 import { BrandingImageBackground } from '../../dynamic-branding';
+// @ts-ignore
 import { LargeVideo } from '../../large-video/components';
+// @ts-ignore
 import HeaderNavigationButton from '../../mobile/navigation/components/HeaderNavigationButton';
+// @ts-ignore
 import { navigateRoot } from '../../mobile/navigation/rootNavigationContainerRef';
+// @ts-ignore
 import { screen } from '../../mobile/navigation/routes';
+// @ts-ignore
 import AudioMuteButton from '../../toolbox/components/AudioMuteButton';
+// @ts-ignore
 import VideoMuteButton from '../../toolbox/components/VideoMuteButton';
+// @ts-ignore
 import { isDisplayNameRequired } from '../functions';
 import { PrejoinProps } from '../types';
 
+// @ts-ignore
 import styles from './styles';
 
 

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

@@ -1,10 +1,17 @@
+/* eslint-disable lines-around-comment */
+// @ts-ignore
 import { CAR_MODE_ENABLED, getFeatureFlag } from '../../../base/flags';
+// @ts-ignore
 import { translate } from '../../../base/i18n';
+// @ts-ignore
 import { IconCar } from '../../../base/icons';
-import { connect } from '../../../base/redux';
+import { connect } from '../../../base/redux/functions';
+// @ts-ignore
 import { AbstractButton, type AbstractButtonProps } from '../../../base/toolbox/components';
 import { navigate }
+// @ts-ignore
     from '../../../mobile/navigation/components/conference/ConferenceNavigationContainerRef';
+// @ts-ignore
 import { screen } from '../../../mobile/navigation/routes';
 
 /**
@@ -42,5 +49,5 @@ function _mapStateToProps(state: Object, ownProps: AbstractButtonProps): Object
         visible
     };
 }
-
+// @ts-ignore
 export default translate(connect(_mapStateToProps)(OpenCarmodeButton));

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

@@ -1,13 +1,17 @@
+/* eslint-disable lines-around-comment */
 import React from 'react';
 import { Platform } from 'react-native';
 
-import { connect } from '../../../base/redux';
+import { connect } from '../../../base/redux/functions';
+// @ts-ignore
 import { isDesktopShareButtonDisabled } from '../../functions.native';
 
+// @ts-ignore
 import ScreenSharingAndroidButton from './ScreenSharingAndroidButton.js';
+// @ts-ignore
 import ScreenSharingIosButton from './ScreenSharingIosButton.js';
 
-const ScreenSharingButton = props => (
+const ScreenSharingButton = (props: any) => (
     <>
         {Platform.OS === 'android'
             && <ScreenSharingAndroidButton { ...props } />

tsconfig.json

@@ -1,5 +1,5 @@
 {
-    "include": ["react/features/**/*.ts"],
+    "include": ["react/features/**/*.ts", "react/features/**/*.tsx"],
     "compilerOptions": {
         "allowSyntheticDefaultImports": true,
         "module": "es6",