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

Remove some @ts-ignores

react/features/toolbox/components/native/AudioOnlyButton.ts

@@ -1,7 +1,6 @@
-// @flow
-
 import { connect } from 'react-redux';
 
+import { IReduxState } from '../../../app/types';
 import { setAudioOnly, toggleAudioOnly } from '../../../base/audio-only/actions';
 import { AUDIO_ONLY_BUTTON_ENABLED } from '../../../base/flags/constants';
 import { getFeatureFlag } from '../../../base/flags/functions';
@@ -16,28 +15,23 @@ import { screen } from '../../../mobile/navigation/routes';
 /**
  * The type of the React {@code Component} props of {@link AudioOnlyButton}.
  */
-type Props = AbstractButtonProps & {
+interface IProps extends AbstractButtonProps {
 
     /**
      * Whether the current conference is in audio only mode or not.
      */
-    _audioOnly: boolean,
+    _audioOnly: boolean;
 
     /**
      * Indicates whether the car mode is enabled.
      */
-    _startCarMode: boolean,
-
-    /**
-     * The redux {@code dispatch} function.
-     */
-    dispatch: Function
-};
+    _startCarMode?: boolean;
+}
 
 /**
  * An implementation of a button for toggling the audio-only mode.
  */
-class AudioOnlyButton extends AbstractButton<Props, *> {
+class AudioOnlyButton extends AbstractButton<IProps> {
     accessibilityLabel = 'toolbar.accessibilityLabel.audioOnly';
     icon = IconAudioOnly;
     label = 'toolbar.audioOnlyOn';
@@ -86,7 +80,7 @@ class AudioOnlyButton extends AbstractButton<Props, *> {
  *     _audioOnly: boolean
  * }}
  */
-function _mapStateToProps(state, ownProps): Object {
+function _mapStateToProps(state: IReduxState, ownProps: any) {
     const { enabled: audioOnly } = state['features/base/audio-only'];
     const enabledInFeatureFlags = getFeatureFlag(state, AUDIO_ONLY_BUTTON_ENABLED, true);
     const { startCarMode } = state['features/base/settings'];

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

@@ -1,17 +1,14 @@
-/* eslint-disable lines-around-comment */
 import React, { useCallback } from 'react';
 import { View } from 'react-native';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { createBreakoutRoomsEvent, createToolbarEvent } from '../../../analytics/AnalyticsEvents';
 import { sendAnalytics } from '../../../analytics/functions';
-// @ts-ignore
 import { appNavigate } from '../../../app/actions';
 import { IReduxState } from '../../../app/types';
 import ColorSchemeRegistry from '../../../base/color-scheme/ColorSchemeRegistry';
 import { endConference } from '../../../base/conference/actions';
 import { hideSheet } from '../../../base/dialog/actions';
-// @ts-ignore
 import BottomSheet from '../../../base/dialog/components/native/BottomSheet';
 import { PARTICIPANT_ROLE } from '../../../base/participants/constants';
 import { getLocalParticipant } from '../../../base/participants/functions';

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

@@ -8,7 +8,6 @@ import { BUTTON_TYPES } from '../../../base/ui/constants.native';
 
 import HangupMenu from './HangupMenu';
 
-
 /**
  * Button for showing the hangup menu.
  *

react/features/toolbox/components/native/LinkToSalesforceButton.ts

@@ -1,9 +1,8 @@
-// @flow
-
 import { connect } from 'react-redux';
 
 import { createToolbarEvent } from '../../../analytics/AnalyticsEvents';
 import { sendAnalytics } from '../../../analytics/functions';
+import { IReduxState } from '../../../app/types';
 import { translate } from '../../../base/i18n/functions';
 import { IconCloudUpload } from '../../../base/icons/svg';
 import AbstractButton, { IProps as AbstractButtonProps } from '../../../base/toolbox/components/AbstractButton';
@@ -15,7 +14,7 @@ import { isSalesforceEnabled } from '../../../salesforce/functions';
 /**
  * Implementation of a button for opening the Salesforce link dialog.
  */
-class LinkToSalesforceButton extends AbstractButton<AbstractButtonProps, *> {
+class LinkToSalesforceButton extends AbstractButton<AbstractButtonProps> {
     accessibilityLabel = 'toolbar.accessibilityLabel.linkToSalesforce';
     icon = IconCloudUpload;
     label = 'toolbar.linkToSalesforce';
@@ -40,7 +39,7 @@ class LinkToSalesforceButton extends AbstractButton<AbstractButtonProps, *> {
  * @private
  * @returns {Props}
  */
-function mapStateToProps(state) {
+function mapStateToProps(state: IReduxState) {
     return {
         visible: isSalesforceEnabled(state)
     };

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

@@ -1,4 +1,3 @@
-/* eslint-disable lines-around-comment */
 import { connect } from 'react-redux';
 
 import { IReduxState } from '../../../app/types';
@@ -8,9 +7,7 @@ import { translate } from '../../../base/i18n/functions';
 import { IconCar } from '../../../base/icons/svg';
 import AbstractButton, { IProps as AbstractButtonProps } from '../../../base/toolbox/components/AbstractButton';
 import { navigate }
-// @ts-ignore
     from '../../../mobile/navigation/components/conference/ConferenceNavigationContainerRef';
-// @ts-ignore
 import { screen } from '../../../mobile/navigation/routes';
 /* eslint-enable lines-around-comment */
 
@@ -50,5 +47,4 @@ function _mapStateToProps(state: IReduxState, ownProps: AbstractButtonProps): Ob
     };
 }
 
-// @ts-ignore
 export default translate(connect(_mapStateToProps)(OpenCarmodeButton));

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

@@ -1,9 +1,9 @@
-// @flow
-
 import React, { PureComponent } from 'react';
+import { ViewStyle } from 'react-native';
 import { Divider } from 'react-native-paper';
 import { connect } from 'react-redux';
 
+import { IReduxState, IStore } from '../../../app/types';
 import { hideSheet } from '../../../base/dialog/actions';
 import BottomSheet from '../../../base/dialog/components/native/BottomSheet';
 import { bottomSheetStyles } from '../../../base/dialog/components/native/styles';
@@ -32,58 +32,58 @@ import ScreenSharingButton from './ScreenSharingButton';
 /**
  * The type of the React {@code Component} props of {@link OverflowMenu}.
  */
-type Props = {
+interface IProps {
 
     /**
      * True if the overflow menu is currently visible, false otherwise.
      */
-    _isOpen: boolean,
-
-    /**
-     * Whether the recoding button should be enabled or not.
-     */
-    _recordingEnabled: boolean,
-
-    /**
-     * The width of the screen.
-     */
-    _width: number,
-
-    /**
-     * Whether or not the reactions feature is enabled.
-     */
-    _reactionsEnabled: boolean,
-
-    /**
-     * Used for hiding the dialog when the selection was completed.
-     */
-    dispatch: Function,
+    _isOpen: boolean;
 
     /**
      * Whether or not speaker stats is disable.
      */
-    _isSpeakerStatsDisabled: boolean
-};
-
-type State = {
+    _isSpeakerStatsDisabled?: boolean;
 
     /**
-     * True if the bottom scheet is scrolled to the top.
+     * Whether or not the reactions feature is enabled.
      */
-    scrolledToTop: boolean
+    _reactionsEnabled: boolean;
+
+    /**
+     * Whether the recoding button should be enabled or not.
+     */
+    _recordingEnabled: boolean;
+
+    /**
+     * The width of the screen.
+     */
+    _width: number;
+
+    /**
+     * Used for hiding the dialog when the selection was completed.
+     */
+    dispatch: IStore['dispatch'];
+}
+
+interface IState {
+
+    /**
+     * True if the bottom sheet is scrolled to the top.
+     */
+    scrolledToTop: boolean;
 }
 
 /**
  * Implements a React {@code Component} with some extra actions in addition to
  * those in the toolbar.
  */
-class OverflowMenu extends PureComponent<Props, State> {
+class OverflowMenu extends PureComponent<IProps, IState> {
     /**
      * Initializes a new {@code OverflowMenu} instance.
      *
      * @inheritdoc
      */
-    constructor(props: Props) {
+    constructor(props: IProps) {
         super(props);
 
         this.state = {
@@ -105,7 +105,8 @@ class OverflowMenu extends PureComponent<Props, State> {
         const {
             _isSpeakerStatsDisabled,
             _reactionsEnabled,
-            _width
+            _width,
+            dispatch
         } = this.props;
         const toolbarButtons = getMovableButtons(_width);
 
@@ -117,6 +118,7 @@ class OverflowMenu extends PureComponent<Props, State> {
 
         const topButtonProps = {
             afterClick: this._onCancel,
+            dispatch,
             showLabel: true,
             styles: {
                 ...bottomSheetStyles.buttons,
@@ -132,21 +134,24 @@ class OverflowMenu extends PureComponent<Props, State> {
             <BottomSheet
                 renderFooter = { _reactionsEnabled && !toolbarButtons.has('raisehand')
                     ? this._renderReactionMenu
-                    : null }>
+                    : undefined }>
                 <OpenCarmodeButton { ...topButtonProps } />
                 <AudioOnlyButton { ...buttonProps } />
                 {!_reactionsEnabled && !toolbarButtons.has('raisehand') && <RaiseHandButton { ...buttonProps } />}
-                <Divider style = { styles.divider } />
+                {/* @ts-ignore */}
+                <Divider style = { styles.divider as ViewStyle } />
                 <SecurityDialogButton { ...buttonProps } />
                 <RecordButton { ...buttonProps } />
                 <LiveStreamButton { ...buttonProps } />
                 <LinkToSalesforceButton { ...buttonProps } />
-                <Divider style = { styles.divider } />
+                {/* @ts-ignore */}
+                <Divider style = { styles.divider as ViewStyle } />
                 <SharedVideoButton { ...buttonProps } />
                 {!toolbarButtons.has('screensharing') && <ScreenSharingButton { ...buttonProps } />}
                 {!_isSpeakerStatsDisabled && <SpeakerStatsButton { ...buttonProps } />}
                 {!toolbarButtons.has('tileview') && <TileViewButton { ...buttonProps } />}
-                <Divider style = { styles.divider } />
+                {/* @ts-ignore */}
+                <Divider style = { styles.divider as ViewStyle } />
                 <ClosedCaptionButton { ...buttonProps } />
                 <SharedDocumentButton { ...buttonProps } />
                 <SettingsButton { ...buttonProps } />
@@ -165,7 +170,7 @@ class OverflowMenu extends PureComponent<Props, State> {
     }
 
     /**
-     * Functoin to render the reaction menu as the footer of the bottom sheet.
+     * Function to render the reaction menu as the footer of the bottom sheet.
      *
      * @returns {React$Element}
      */
@@ -181,9 +186,9 @@ class OverflowMenu extends PureComponent<Props, State> {
  *
  * @param {Object} state - Redux state.
  * @private
- * @returns {Props}
+ * @returns {IProps}
  */
-function _mapStateToProps(state) {
+function _mapStateToProps(state: IReduxState) {
     return {
         _isSpeakerStatsDisabled: isSpeakerStatsDisabled(state),
         _reactionsEnabled: isReactionsEnabled(state),

react/features/toolbox/components/native/OverflowMenuButton.ts

@@ -1,5 +1,6 @@
 import { connect } from 'react-redux';
 
+import { IReduxState } from '../../../app/types';
 import { openSheet } from '../../../base/dialog/actions';
 import { OVERFLOW_MENU_ENABLED } from '../../../base/flags/constants';
 import { getFeatureFlag } from '../../../base/flags/functions';
@@ -9,21 +10,10 @@ import AbstractButton, { IProps as AbstractButtonProps } from '../../../base/too
 
 import OverflowMenu from './OverflowMenu';
 
-/**
- * The type of the React {@code Component} props of {@link OverflowMenuButton}.
- */
-type Props = AbstractButtonProps & {
-
-    /**
-     * The redux {@code dispatch} function.
-     */
-    dispatch: Function
-};
-
 /**
  * An implementation of a button for showing the {@code OverflowMenu}.
  */
-class OverflowMenuButton extends AbstractButton<Props, *> {
+class OverflowMenuButton extends AbstractButton<AbstractButtonProps> {
     accessibilityLabel = 'toolbar.accessibilityLabel.moreActions';
     icon = IconDotsHorizontal;
     label = 'toolbar.moreActions';
@@ -47,7 +37,7 @@ class OverflowMenuButton extends AbstractButton<Props, *> {
  * @private
  * @returns {Props}
  */
-function _mapStateToProps(state): Object {
+function _mapStateToProps(state: IReduxState) {
     const enabledFlag = getFeatureFlag(state, OVERFLOW_MENU_ENABLED, true);
 
     return {

react/features/toolbox/components/native/RaiseHandButton.ts

@@ -1,10 +1,8 @@
-// @flow
-
 import { connect } from 'react-redux';
-import { type Dispatch } from 'redux';
 
 import { createToolbarEvent } from '../../../analytics/AnalyticsEvents';
 import { sendAnalytics } from '../../../analytics/functions';
+import { IReduxState } from '../../../app/types';
 import { RAISE_HAND_ENABLED } from '../../../base/flags/constants';
 import { getFeatureFlag } from '../../../base/flags/functions';
 import { translate } from '../../../base/i18n/functions';
@@ -14,33 +12,29 @@ import {
     getLocalParticipant,
     hasRaisedHand
 } from '../../../base/participants/functions';
+import { ILocalParticipant } from '../../../base/participants/types';
 import AbstractButton, { IProps as AbstractButtonProps } from '../../../base/toolbox/components/AbstractButton';
 
 /**
  * The type of the React {@code Component} props of {@link RaiseHandButton}.
  */
-type Props = AbstractButtonProps & {
+interface IProps extends AbstractButtonProps {
 
     /**
      * The local participant.
      */
-    _localParticipant: Object,
+    _localParticipant?: ILocalParticipant;
 
     /**
-     * Whether the participant raused their hand or not.
+     * Whether the participant raised their hand or not.
      */
-    _raisedHand: boolean,
-
-    /**
-     * The redux {@code dispatch} function.
-     */
-    dispatch: Dispatch<any>
-};
+    _raisedHand: boolean;
+}
 
 /**
  * An implementation of a button to raise or lower hand.
  */
-class RaiseHandButton extends AbstractButton<Props, *> {
+class RaiseHandButton extends AbstractButton<IProps> {
     accessibilityLabel = 'toolbar.accessibilityLabel.raiseHand';
     icon = IconRaiseHand;
     label = 'toolbar.raiseYourHand';
@@ -88,9 +82,9 @@ class RaiseHandButton extends AbstractButton<Props, *> {
  * @param {Object} state - The Redux state.
  * @param {Object} ownProps - The properties explicitly passed to the component instance.
  * @private
- * @returns {Props}
+ * @returns {IProps}
  */
-function _mapStateToProps(state, ownProps): Object {
+function _mapStateToProps(state: IReduxState, ownProps: any) {
     const _localParticipant = getLocalParticipant(state);
     const enabled = getFeatureFlag(state, RAISE_HAND_ENABLED, true);
     const { visible = enabled } = ownProps;

react/features/toolbox/components/native/ToggleCameraButton.ts

@@ -1,7 +1,6 @@
-// @flow
-
 import { connect } from 'react-redux';
 
+import { IReduxState } from '../../../app/types';
 import { translate } from '../../../base/i18n/functions';
 import { IconCameraRefresh } from '../../../base/icons/svg';
 import { toggleCameraFacingMode } from '../../../base/media/actions';
@@ -12,28 +11,23 @@ import { isLocalTrackMuted } from '../../../base/tracks/functions.native';
 /**
  * The type of the React {@code Component} props of {@link ToggleCameraButton}.
  */
-type Props = AbstractButtonProps & {
+interface IProps extends AbstractButtonProps {
 
     /**
      * Whether the current conference is in audio only mode or not.
      */
-    _audioOnly: boolean,
+    _audioOnly: boolean;
 
     /**
      * Whether video is currently muted or not.
      */
-    _videoMuted: boolean,
-
-    /**
-     * The redux {@code dispatch} function.
-     */
-    dispatch: Function
-};
+    _videoMuted: boolean;
+}
 
 /**
  * An implementation of a button for toggling the camera facing mode.
  */
-class ToggleCameraButton extends AbstractButton<Props, *> {
+class ToggleCameraButton extends AbstractButton<IProps> {
     accessibilityLabel = 'toolbar.accessibilityLabel.toggleCamera';
     icon = IconCameraRefresh;
     label = 'toolbar.toggleCamera';
@@ -72,7 +66,7 @@ class ToggleCameraButton extends AbstractButton<Props, *> {
  *     _videoMuted: boolean
  * }}
  */
-function _mapStateToProps(state): Object {
+function _mapStateToProps(state: IReduxState) {
     const { enabled: audioOnly } = state['features/base/audio-only'];
     const tracks = state['features/base/tracks'];
 

react/features/toolbox/components/native/ToggleSelfViewButton.ts

@@ -1,7 +1,6 @@
-// @flow
-
 import { connect } from 'react-redux';
 
+import { IReduxState } from '../../../app/types';
 import { translate } from '../../../base/i18n/functions';
 import { IconAudioOnlyOff } from '../../../base/icons/svg';
 import { updateSettings } from '../../../base/settings/actions';
@@ -10,23 +9,18 @@ import AbstractButton, { IProps as AbstractButtonProps } from '../../../base/too
 /**
  * The type of the React {@code Component} props of {@link ToggleSelfViewButton}.
  */
-type Props = AbstractButtonProps & {
+interface IProps extends AbstractButtonProps {
 
     /**
      * Whether the self view is disabled or not.
      */
-    _disableSelfView: boolean,
-
-    /**
-     * The redux {@code dispatch} function.
-     */
-    dispatch: Function
-};
+    _disableSelfView: boolean;
+}
 
 /**
  * An implementation of a button for toggling the self view.
  */
-class ToggleSelfViewButton extends AbstractButton<Props, *> {
+class ToggleSelfViewButton extends AbstractButton<IProps> {
     accessibilityLabel = 'toolbar.accessibilityLabel.selfView';
     icon = IconAudioOnlyOff;
     label = 'videothumbnail.hideSelfView';
@@ -69,7 +63,7 @@ class ToggleSelfViewButton extends AbstractButton<Props, *> {
  *     _disableSelfView: boolean
  * }}
  */
-function _mapStateToProps(state): Object {
+function _mapStateToProps(state: IReduxState) {
     const { disableSelfView } = state['features/base/settings'];
 
     return {

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

@@ -1,13 +1,11 @@
-// @flow
-
 import React from 'react';
-import { View } from 'react-native';
+import { View, ViewStyle } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { connect } from 'react-redux';
 
+import { IReduxState } from '../../../app/types';
 import ColorSchemeRegistry from '../../../base/color-scheme/ColorSchemeRegistry';
 import Platform from '../../../base/react/Platform.native';
-import { StyleType } from '../../../base/styles/functions.native';
 import ChatButton from '../../../chat/components/native/ChatButton';
 import ReactionsMenuButton from '../../../reactions/components/native/ReactionsMenuButton';
 import { isReactionsEnabled } from '../../../reactions/functions.any';
@@ -27,38 +25,38 @@ import styles from './styles';
 /**
  * The type of {@link Toolbox}'s React {@code Component} props.
  */
-type Props = {
+interface IProps {
 
     /**
      * Whether the end conference feature is supported.
      */
-    _endConferenceSupported: boolean,
-
-    /**
-     * Whether or not the reactions feature is enabled.
-     */
-    _reactionsEnabled: boolean,
-
-    /**
-     * The color-schemed stylesheet of the feature.
-     */
-    _styles: StyleType,
-
-    /**
-     * The indicator which determines whether the toolbox is visible.
-     */
-    _visible: boolean,
+    _endConferenceSupported: boolean;
 
     /**
      * Whether we are in visitors mode.
      */
-    _iAmVisitor: boolean,
+    _iAmVisitor: boolean;
+
+    /**
+     * Whether or not the reactions feature is enabled.
+     */
+    _reactionsEnabled: boolean;
+
+    /**
+     * The color-schemed stylesheet of the feature.
+     */
+    _styles: any;
+
+    /**
+     * The indicator which determines whether the toolbox is visible.
+     */
+    _visible: boolean;
 
     /**
      * The width of the screen.
      */
-    _width: number
-};
+    _width: number;
+}
 
 /**
  * Implements the conference Toolbox on React Native.
@@ -66,7 +64,7 @@ type Props = {
  * @param {Object} props - The props of the component.
  * @returns {React$Element}.
  */
-function Toolbox(props: Props) {
+function Toolbox(props: IProps) {
     const { _endConferenceSupported, _reactionsEnabled, _styles, _visible, _iAmVisitor, _width } = props;
 
     if (!_visible) {
@@ -74,7 +72,7 @@ function Toolbox(props: Props) {
     }
 
     const bottomEdge = Platform.OS === 'ios' && _visible;
-    const { buttonStylesBorderless, hangupButtonStyles, hangupMenuButtonStyles, toggledButtonStyles } = _styles;
+    const { buttonStylesBorderless, hangupButtonStyles, toggledButtonStyles } = _styles;
     const additionalButtons = getMovableButtons(_width);
     const backgroundToggledStyle = {
         ...toggledButtonStyles,
@@ -93,12 +91,14 @@ function Toolbox(props: Props) {
 
     return (
         <View
-            style = { styles.toolboxContainer }>
+            style = { styles.toolboxContainer as ViewStyle }>
             <SafeAreaView
                 accessibilityRole = 'toolbar'
+
+                // @ts-ignore
                 edges = { [ bottomEdge && 'bottom' ].filter(Boolean) }
                 pointerEvents = 'box-none'
-                style = { style }>
+                style = { style as ViewStyle }>
                 {!_iAmVisitor && <AudioMuteButton
                     styles = { buttonStylesBorderless }
                     toggledStyles = { toggledButtonStyles } />
@@ -108,9 +108,9 @@ function Toolbox(props: Props) {
                     toggledStyles = { toggledButtonStyles } />
                 }
                 {additionalButtons.has('chat')
-                      && <ChatButton
-                          styles = { buttonStylesBorderless }
-                          toggledStyles = { backgroundToggledStyle } />
+                    && <ChatButton
+                        styles = { buttonStylesBorderless }
+                        toggledStyles = { backgroundToggledStyle } />
                 }
                 {!_iAmVisitor && additionalButtons.has('screensharing')
                     && <ScreenSharingButton styles = { buttonStylesBorderless } />}
@@ -127,9 +127,7 @@ function Toolbox(props: Props) {
                     toggledStyles = { toggledButtonStyles } />
                 }
                 { _endConferenceSupported
-                    ? <HangupMenuButton
-                        styles = { hangupMenuButtonStyles }
-                        toggledStyles = { toggledButtonStyles } />
+                    ? <HangupMenuButton />
                     : <HangupButton
                         styles = { hangupButtonStyles } />
                 }
@@ -145,9 +143,9 @@ function Toolbox(props: Props) {
  * @param {Object} state - The redux state of which parts are to be mapped to
  * {@code Toolbox} props.
  * @private
- * @returns {Props}
+ * @returns {IProps}
  */
-function _mapStateToProps(state: Object): Object {
+function _mapStateToProps(state: IReduxState) {
     const { conference } = state['features/base/conference'];
     const endConferenceSupported = conference?.isEndConferenceSupported();