ref(TS) Remove ts-ignores (#11979)

react/features/base/participants/functions.ts

@@ -2,7 +2,7 @@
 // @ts-ignore
 import { getGravatarURL } from '@jitsi/js-utils/avatar';
 
-import { IStore } from '../../app/types';
+import { IState, IStore } from '../../app/types';
 // @ts-ignore
 import { isStageFilmstripAvailable } from '../../filmstrip/functions';
 import { GRAVATAR_BASE_URL } from '../avatar/constants';
@@ -508,7 +508,7 @@ export function isIconUrl(icon?: string | Object) {
  * to the Redux state.
  * @returns {boolean}
  */
-export function isLocalParticipantModerator(stateful: IStore | Function) {
+export function isLocalParticipantModerator(stateful: IStore | Function | IState) {
     const state = toState(stateful)['features/base/participants'];
 
     const { local } = state;

react/features/base/redux/functions.ts

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import { connect as reduxConnect } from 'react-redux';
 
-import { IStore } from '../../app/types';
+import { IState, IStore } from '../../app/types';
 
 /**
  * Sets specific properties of a specific state to specific values and prevents
@@ -135,12 +135,13 @@ function _set<T extends Object>(
  * returned.
  * @returns {Object} The redux state.
  */
-export function toState(stateful: Function | IStore) {
+export function toState(stateful: Function | IStore | IState) {
     if (stateful) {
         if (typeof stateful === 'function') {
             return stateful();
         }
 
+        // @ts-ignore
         const { getState } = stateful;
 
         if (typeof getState === 'function') {

react/features/base/settings/components/native/SettingsButton.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable lines-around-comment */
-// @ts-ignore
+import { translate } from '../../../../base/i18n/functions';
-import { translate } from '../../../../base/i18n';
 // @ts-ignore
 import { IconSettings } from '../../../../base/icons';
 // @ts-ignore
@@ -31,4 +30,5 @@ class SettingsButton extends AbstractButton<AbstractButtonProps, any, any> {
     }
 }
 
+// @ts-ignore
 export default translate(SettingsButton);

react/features/e2ee/components/E2EESection.tsx

@@ -1,11 +1,11 @@
 /* eslint-disable lines-around-comment */
 import React, { Component } from 'react';
+import { WithTranslation } from 'react-i18next';
 import type { Dispatch } from 'redux';
 
 // @ts-ignore
 import { createE2EEEvent, sendAnalytics } from '../../analytics';
-// @ts-ignore
+import { translate } from '../../base/i18n/functions';
-import { translate } from '../../base/i18n';
 import { connect } from '../../base/redux/functions';
 import Switch from '../../base/ui/components/web/Switch';
 // @ts-ignore
@@ -15,7 +15,7 @@ import { MAX_MODE } from '../constants';
 // @ts-ignore
 import { doesEveryoneSupportE2EE } from '../functions';
 
-type Props = {
+interface Props extends WithTranslation {
 
     /**
      * The resource for the description, computed based on the maxMode and whether the switch is toggled or not.
@@ -45,13 +45,8 @@ type Props = {
     /**
      * The redux {@code dispatch} function.
      */
-    dispatch: Dispatch<any>,
+    dispatch: Dispatch<any>
-
+}
-    /**
-     * Invoked to obtain translated strings.
-     */
-    t: Function
-};
 
 type State = {
 

react/features/lobby/components/web/LobbySection.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable lines-around-comment */
 import React, { PureComponent } from 'react';
+import { WithTranslation } from 'react-i18next';
 
-// @ts-ignore
+import { translate } from '../../../base/i18n/functions';
-import { translate } from '../../../base/i18n';
 import { isLocalParticipantModerator } from '../../../base/participants/functions';
 import { connect } from '../../../base/redux/functions';
 import Switch from '../../../base/ui/components/web/Switch';
@@ -11,7 +11,7 @@ import { isInBreakoutRoom } from '../../../breakout-rooms/functions';
 // @ts-ignore
 import { toggleLobbyMode } from '../../actions';
 
-type Props = {
+interface Props extends WithTranslation {
 
     /**
      * True if lobby is currently enabled in the conference.
@@ -26,13 +26,8 @@ type Props = {
     /**
      * The Redux Dispatch function.
      */
-    dispatch: Function,
+    dispatch: Function
-
+}
-    /**
-     * Function to be used to translate i18n labels.
-     */
-    t: Function
-};
 
 type State = {
 

react/features/noise-suppression/components/NoiseSuppressionButton.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable lines-around-comment */
 import { IState } from '../../app/types';
-// @ts-ignore
+import { translate } from '../../base/i18n/functions';
-import { translate } from '../../base/i18n';
 import {
     IconNoiseSuppressionOn,
     IconNoiseSuppressionOff

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

@@ -1,5 +1,6 @@
 /* eslint-disable lines-around-comment */
 import React, { PureComponent } from 'react';
+import { WithTranslation } from 'react-i18next';
 import { Text, View } from 'react-native';
 
 // @ts-ignore
@@ -8,8 +9,7 @@ import { Avatar } from '../../../base/avatar';
 import { BottomSheet, hideSheet } from '../../../base/dialog';
 // @ts-ignore
 import { bottomSheetStyles } from '../../../base/dialog/components/native/styles';
-// @ts-ignore
+import { translate } from '../../../base/i18n/functions';
-import { translate } from '../../../base/i18n';
 import { connect } from '../../../base/redux/functions';
 // @ts-ignore
 import { getBreakoutRooms } from '../../../breakout-rooms/functions';
@@ -23,7 +23,7 @@ import styles from '../../../video-menu/components/native/styles';
  */
 const AVATAR_SIZE = 24;
 
-type Props = {
+interface Props extends WithTranslation {
 
     /**
      * The list of all breakout rooms.
@@ -48,12 +48,7 @@ type Props = {
     /**
      * The room the participant is in.
      */
-    room: any,
+    room: any
-
-    /**
-     * Translation function.
-     */
-    t: Function
 }
 
 /**

react/features/reactions/components/web/ReactionsMenu.tsx

@@ -2,6 +2,7 @@
 import { withStyles } from '@material-ui/styles';
 import clsx from 'clsx';
 import React, { Component } from 'react';
+import { WithTranslation } from 'react-i18next';
 import { bindActionCreators } from 'redux';
 
 import {
@@ -14,11 +15,9 @@ import {
 import { IStore } from '../../../app/types';
 
 import { isMobileBrowser } from '../../../base/environment/utils';
-
-// @ts-ignore
-import { translate } from '../../../base/i18n';
 import { getLocalParticipant, hasRaisedHand } from '../../../base/participants/functions';
 import { raiseHand } from '../../../base/participants/actions';
+import { translate } from '../../../base/i18n/functions';
 
 import { connect } from '../../../base/redux/functions';
 import { Theme } from '../../../base/ui/types';
@@ -42,7 +41,7 @@ interface Classes {
     overflow: string
 }
 
-type Props = {
+interface Props extends WithTranslation {
 
     /**
      * Docks the toolbox.
@@ -87,13 +86,8 @@ type Props = {
     /**
      * Whether or not it's displayed in the overflow menu.
      */
-    overflowMenu: boolean,
+    overflowMenu: boolean
-
+}
-    /**
-     * Used for translation.
-     */
-    t: Function
-};
 
 const styles = (theme: Theme) => {
     return {

react/features/reactions/components/web/ReactionsMenuButton.tsx

@@ -1,11 +1,10 @@
 /* eslint-disable import/order */
 import React, { useCallback } from 'react';
+import { WithTranslation } from 'react-i18next';
 
 import { useSelector } from 'react-redux';
 import { isMobileBrowser } from '../../../base/environment/utils';
-
+import { translate } from '../../../base/i18n/functions';
-// @ts-ignore
-import { translate } from '../../../base/i18n';
 import { IconArrowUp } from '../../../base/icons/svg/index';
 import { connect } from '../../../base/redux/functions';
 
@@ -21,7 +20,7 @@ import RaiseHandButton from './RaiseHandButton';
 import ReactionEmoji from './ReactionEmoji';
 import ReactionsMenu from './ReactionsMenu';
 
-type Props = {
+interface Props extends WithTranslation {
 
     /**
      * Whether or not reactions are enabled.
@@ -62,13 +61,8 @@ type Props = {
     /**
      * The array of reactions to be displayed.
      */
-    reactionsQueue: Array<ReactionEmojiProps>,
+    reactionsQueue: Array<ReactionEmojiProps>
-
+}
-    /**
-     * Used for translation.
-     */
-    t: Function
-};
 
 /**
  * Button used for the reactions menu.

react/features/settings/components/web/ModeratorTab.tsx

@@ -1,18 +1,18 @@
 /* eslint-disable lines-around-comment */
 import React from 'react';
+import { WithTranslation } from 'react-i18next';
 
 // @ts-ignore
 import { AbstractDialogTab } from '../../../base/dialog';
 // @ts-ignore
 import type { Props as AbstractDialogTabProps } from '../../../base/dialog';
-// @ts-ignore
+import { translate } from '../../../base/i18n/functions';
-import { translate } from '../../../base/i18n';
 import Checkbox from '../../../base/ui/components/web/Checkbox';
 
 /**
  * The type of the React {@code Component} props of {@link MoreTab}.
  */
-export type Props = AbstractDialogTabProps & {
+export type Props = AbstractDialogTabProps & WithTranslation & {
 
     /**
      * If set hides the reactions moderation setting.
@@ -187,4 +187,5 @@ class ModeratorTab extends AbstractDialogTab<Props> {
     }
 }
 
+// @ts-ignore
 export default translate(ModeratorTab);

react/features/settings/components/web/MoreTab.tsx

@@ -4,6 +4,7 @@ import DropdownMenu, {
     DropdownItemGroup
 } from '@atlaskit/dropdown-menu';
 import React from 'react';
+import { WithTranslation } from 'react-i18next';
 
 // @ts-ignore
 import keyboardShortcut from '../../../../../modules/keyboardshortcut/keyboardshortcut';
@@ -11,8 +12,7 @@ import keyboardShortcut from '../../../../../modules/keyboardshortcut/keyboardsh
 import { AbstractDialogTab } from '../../../base/dialog';
 // @ts-ignore
 import type { Props as AbstractDialogTabProps } from '../../../base/dialog';
-// @ts-ignore
+import { translate } from '../../../base/i18n/functions';
-import { translate } from '../../../base/i18n';
 import Checkbox from '../../../base/ui/components/web/Checkbox';
 // @ts-ignore
 import TouchmoveHack from '../../../chat/components/web/TouchmoveHack';
@@ -24,7 +24,7 @@ import { SS_DEFAULT_FRAME_RATE } from '../../constants';
 /**
  * The type of the React {@code Component} props of {@link MoreTab}.
  */
-export type Props = AbstractDialogTabProps & {
+export type Props = AbstractDialogTabProps & WithTranslation & {
 
     /**
      * The currently selected desktop share frame rate in the frame rate select dropdown.
@@ -617,4 +617,5 @@ class MoreTab extends AbstractDialogTab<Props, State> {
     }
 }
 
+// @ts-ignore
 export default translate(MoreTab);

react/features/settings/components/web/ProfileTab.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable lines-around-comment */
 import React from 'react';
+import { WithTranslation } from 'react-i18next';
 
 // @ts-ignore
 import UIEvents from '../../../../../service/UI/UIEvents';
@@ -12,8 +13,7 @@ import {
 import { AbstractDialogTab } from '../../../base/dialog';
 // @ts-ignore
 import type { Props as AbstractDialogTabProps } from '../../../base/dialog';
-// @ts-ignore
+import { translate } from '../../../base/i18n/functions';
-import { translate } from '../../../base/i18n';
 import { Button } from '../../../base/ui/components/web';
 import Input from '../../../base/ui/components/web/Input';
 // @ts-ignore
@@ -25,7 +25,7 @@ declare var APP: any;
 /**
  * The type of the React {@code Component} props of {@link ProfileTab}.
  */
-export type Props = AbstractDialogTabProps & {
+export type Props = AbstractDialogTabProps & WithTranslation & {
 
     /**
      * Whether or not server-side authentication is available.
@@ -211,4 +211,5 @@ class ProfileTab extends AbstractDialogTab<Props> {
     }
 }
 
+// @ts-ignore
 export default translate(ProfileTab);

react/features/settings/components/web/SoundsTab.tsx

@@ -1,18 +1,18 @@
 /* eslint-disable lines-around-comment */
 import React from 'react';
+import { WithTranslation } from 'react-i18next';
 
 // @ts-ignore
 import { AbstractDialogTab } from '../../../base/dialog';
 // @ts-ignore
 import type { Props as AbstractDialogTabProps } from '../../../base/dialog';
-// @ts-ignore
+import { translate } from '../../../base/i18n/functions';
-import { translate } from '../../../base/i18n';
 import Checkbox from '../../../base/ui/components/web/Checkbox';
 
 /**
  * The type of the React {@code Component} props of {@link SoundsTab}.
  */
-export type Props = AbstractDialogTabProps & {
+export type Props = AbstractDialogTabProps & WithTranslation & {
 
     /**
      * Whether or not the reactions feature is enabled.
@@ -159,4 +159,5 @@ class SoundsTab extends AbstractDialogTab<Props> {
     }
 }
 
+// @ts-ignore
 export default translate(SoundsTab);

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

@@ -1,8 +1,7 @@
 /* eslint-disable lines-around-comment */
 // @ts-ignore
 import { CAR_MODE_ENABLED, getFeatureFlag } from '../../../base/flags';
-// @ts-ignore
+import { translate } from '../../../base/i18n/functions';
-import { translate } from '../../../base/i18n';
 import { IconCar } from '../../../base/icons/svg/index';
 import { connect } from '../../../base/redux/functions';
 // @ts-ignore

react/features/video-menu/components/web/LocalVideoMenuTriggerButton.tsx

@@ -1,13 +1,13 @@
 /* eslint-disable lines-around-comment */
 import { withStyles } from '@material-ui/styles';
 import React, { Component } from 'react';
+import { WithTranslation } from 'react-i18next';
 import { batch, connect } from 'react-redux';
 
 // @ts-ignore
 import ContextMenu from '../../../base/components/context-menu/ContextMenu';
 // @ts-ignore
 import ContextMenuItemGroup from '../../../base/components/context-menu/ContextMenuItemGroup';
-// @ts-ignore
 import { isMobileBrowser } from '../../../base/environment/utils';
 // @ts-ignore
 import { translate } from '../../../base/i18n';
@@ -44,7 +44,7 @@ import TogglePinToStageButton from './TogglePinToStageButton';
  * The type of the React {@code Component} props of
  * {@link LocalVideoMenuTriggerButton}.
  */
-type Props = {
+interface Props extends WithTranslation {
 
     /**
      * The id of the local participant.
@@ -111,18 +111,13 @@ type Props = {
     /**
      * Shows popover.
      */
-    showPopover: Function,
+    showPopover: Function
-
-    /**
-     * Invoked to obtain translated strings.
-     */
-    t: Function,
 
     /**
      * The type of the thumbnail.
      */
     thumbnailType: string
-};
+}
 
 const styles = () => {
     return {

react/features/video-menu/components/web/RemoteVideoMenuTriggerButton.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable lines-around-comment */
 import { withStyles } from '@material-ui/styles';
 import React, { Component } from 'react';
+import { WithTranslation } from 'react-i18next';
 import { batch, connect } from 'react-redux';
 
 import { isMobileBrowser } from '../../../base/environment/utils';
@@ -34,7 +35,7 @@ declare var $: Object;
  * The type of the React {@code Component} props of
  * {@link RemoteVideoMenuTriggerButton}.
  */
-type Props = {
+interface Props extends WithTranslation {
 
     /**
      * Whether the remote video context menu is disabled.
@@ -108,16 +109,11 @@ type Props = {
      */
     showPopover: Function,
 
-    /**
-     * Invoked to obtain translated strings.
-     */
-    t: Function,
-
     /**
      * The type of the thumbnail.
      */
     thumbnailType: string
-};
+}
 
 const styles = () => {
     return {