ref(redux) Remove connect wrapper (#13083)

react/features/authentication/components/native/WaitForOwnerDialog.js

@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
+import { connect } from 'react-redux';
 import type { Dispatch } from 'redux';
 
 import { ConfirmDialog } from '../../../base/dialog';
 import { translate } from '../../../base/i18n';
-import { connect } from '../../../base/redux';
 import { cancelWaitForOwner, openLoginDialog } from '../../actions.native';
 
 /**

react/features/authentication/components/web/LoginDialog.tsx

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import { WithTranslation } from 'react-i18next';
+import { connect as reduxConnect } from 'react-redux';
 
 // @ts-expect-error
 import { connect } from '../../../../../connection';
@@ -9,7 +10,6 @@ import { IConfig } from '../../../base/config/configType';
 import { toJid } from '../../../base/connection/functions';
 import { translate, translateToHTML } from '../../../base/i18n/functions';
 import { JitsiConnectionErrors } from '../../../base/lib-jitsi-meet';
-import { connect as reduxConnect } from '../../../base/redux/functions';
 import Dialog from '../../../base/ui/components/web/Dialog';
 import Input from '../../../base/ui/components/web/Input';
 import {
@@ -26,7 +26,7 @@ interface IProps extends WithTranslation {
      * {@link JitsiConference} That needs authentication - will hold a valid
      * value in XMPP login + guest access mode.
      */
-    _conference: IJitsiConference;
+    _conference?: IJitsiConference;
 
     /**
      * The server hosts specified in the global config.
@@ -47,7 +47,7 @@ interface IProps extends WithTranslation {
      * The progress in the floating range between 0 and 1 of the authenticating
      * and upgrading the role of the local participant/user.
      */
-    _progress: number;
+    _progress?: number;
 
     /**
      * Redux store dispatch method.

react/features/authentication/components/web/WaitForOwnerDialog.tsx

@@ -1,9 +1,9 @@
 import React, { PureComponent } from 'react';
 import { WithTranslation } from 'react-i18next';
+import { connect } from 'react-redux';
 
 import { IStore } from '../../../app/types';
 import { translate } from '../../../base/i18n/functions';
-import { connect } from '../../../base/redux/functions';
 import Dialog from '../../../base/ui/components/web/Dialog';
 import { cancelWaitForOwner } from '../../actions.web';
 

react/features/base/avatar/components/Avatar.js

@@ -1,9 +1,9 @@
 // @flow
 
 import React, { PureComponent } from 'react';
+import { connect } from 'react-redux';
 
 import { getParticipantById } from '../../participants';
-import { connect } from '../../redux';
 import { getAvatarColor, getInitials, isCORSAvatarURL } from '../functions';
 
 import { StatelessAvatar } from './';

react/features/base/conference/reducer.ts

@@ -99,9 +99,7 @@ export interface IJitsiConference {
 export interface IConferenceState {
     authEnabled?: boolean;
     authLogin?: string;
-    authRequired?: {
-        join: Function;
-    };
+    authRequired?: IJitsiConference;
     conference?: IJitsiConference;
     conferenceTimestamp?: number;
     e2eeSupported?: boolean;

react/features/base/dialog/actions.ts

@@ -74,7 +74,7 @@ export function openDialog(component: ComponentType<any>, componentProps?: Objec
  *     componentProps: (Object | undefined)
  * }}
  */
-export function openSheet(component: ComponentType, componentProps?: Object) {
+export function openSheet(component: ComponentType<any>, componentProps?: Object) {
     return {
         type: OPEN_SHEET,
         component,

react/features/base/dialog/components/native/AlertDialog.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import Dialog from 'react-native-dialog';
+import { connect } from 'react-redux';
 
 import { translate } from '../../../i18n';
-import { connect } from '../../../redux';
 import { _abstractMapStateToProps } from '../../functions';
 import AbstractDialog, { type Props as AbstractProps } from '../AbstractDialog';
 import { renderHTML } from '../functions.native';

react/features/base/dialog/components/native/BottomSheet.js

@@ -1,8 +1,8 @@
 import React, { type Node, PureComponent } from 'react';
 import { SafeAreaView, ScrollView, View } from 'react-native';
+import { connect } from 'react-redux';
 
 import { SlidingView } from '../../../react';
-import { connect } from '../../../redux';
 import { hideSheet } from '../../actions';
 
 import { bottomSheetStyles as styles } from './styles';

react/features/base/dialog/components/native/ConfirmDialog.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import Dialog from 'react-native-dialog';
+import { connect } from 'react-redux';
 
 import { translate } from '../../../i18n';
-import { connect } from '../../../redux';
 import AbstractDialog from '../AbstractDialog';
 import { renderHTML } from '../functions.native';
 

react/features/base/dialog/components/native/DialogContainer.js

@@ -1,8 +1,8 @@
 import React, { Fragment } from 'react';
+import { connect } from 'react-redux';
 
 import { ReactionEmoji } from '../../../../reactions/components';
 import { getReactionsQueue } from '../../../../reactions/functions.any';
-import { connect } from '../../../redux';
 import AbstractDialogContainer, {
     abstractMapStateToProps
 } from '../AbstractDialogContainer';

react/features/base/dialog/components/native/InputDialog.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import Dialog from 'react-native-dialog';
+import { connect } from 'react-redux';
 
 import { translate } from '../../../i18n';
-import { connect } from '../../../redux';
 import { _abstractMapStateToProps } from '../../functions';
 import AbstractDialog, {
     type Props as AbstractProps,

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

@@ -4,13 +4,12 @@
 import { randomInt } from '@jitsi/js-utils/random';
 import React, { Component } from 'react';
 import { WithTranslation } from 'react-i18next';
-import type { Dispatch } from 'redux';
+import { connect } from 'react-redux';
 
 import { appNavigate, reloadNow } from '../../../../app/actions.native';
-import { IReduxState } from '../../../../app/types';
+import { IReduxState, IStore } from '../../../../app/types';
 import { translate } from '../../../i18n/functions';
 import { isFatalJitsiConnectionError } from '../../../lib-jitsi-meet/functions.native';
-import { connect } from '../../../redux/functions';
 import { hideDialog } from '../../actions';
 // @ts-ignore
 import logger from '../../logger';
@@ -24,9 +23,9 @@ import ConfirmDialog from './ConfirmDialog';
  * {@link PageReloadDialog}.
  */
 interface IPageReloadDialogProps extends WithTranslation {
-    dispatch: Dispatch<any>;
+    dispatch: IStore['dispatch'];
     isNetworkFailure: boolean;
-    reason: string;
+    reason?: string;
 }
 
 /**
@@ -208,7 +207,7 @@ function mapStateToProps(state: IReduxState) {
         = connectionError && isFatalJitsiConnectionError(connectionError);
     const fatalConfigError = fatalError === configError;
 
-    const isNetworkFailure = fatalConfigError || fatalConnectionError;
+    const isNetworkFailure = Boolean(fatalConfigError || fatalConnectionError);
 
     let reason;
 

react/features/base/media/components/native/VideoTrack.js

@@ -2,8 +2,8 @@
 
 import React from 'react';
 import { View } from 'react-native';
+import { connect } from 'react-redux';
 
-import { connect } from '../../../redux';
 import AbstractVideoTrack from '../AbstractVideoTrack';
 import type { Props } from '../AbstractVideoTrack';
 

react/features/base/media/components/native/VideoTransform.tsx

@@ -1,10 +1,9 @@
 import React, { Component } from 'react';
 import { PanResponder, PixelRatio, View } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
-import { type Dispatch } from 'redux';
+import { connect } from 'react-redux';
 
-import { IReduxState } from '../../../../app/types';
-import { connect } from '../../../redux/functions';
+import { IReduxState, IStore } from '../../../../app/types';
 import { ASPECT_RATIO_WIDE } from '../../../responsive-ui/constants';
 import { storeVideoTransform } from '../../actions';
 
@@ -692,7 +691,7 @@ class VideoTransform extends Component<Props, State> {
  *     _onUnmount: Function
  * }}
  */
-function _mapDispatchToProps(dispatch: Dispatch<any>) {
+function _mapDispatchToProps(dispatch: IStore['dispatch']) {
     return {
         /**
          * Dispatches actions to store the last applied transform to a video.

react/features/base/media/components/web/AudioTrack.js

@@ -1,9 +1,9 @@
 // @flow
 
 import React, { Component } from 'react';
+import { connect } from 'react-redux';
 
 import { createAudioPlayErrorEvent, createAudioPlaySuccessEvent, sendAnalytics } from '../../../../analytics';
-import { connect } from '../../../redux';
 import logger from '../../logger';
 
 /**

react/features/base/media/components/web/VideoTrack.js

@@ -1,8 +1,8 @@
 /* @flow */
 
 import React from 'react';
+import { connect } from 'react-redux';
 
-import { connect } from '../../../redux';
 import AbstractVideoTrack from '../AbstractVideoTrack';
 import type { Props as AbstractVideoTrackProps } from '../AbstractVideoTrack';
 

react/features/base/participants/components/ParticipantView.native.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import { Text, View } from 'react-native';
+import { connect } from 'react-redux';
 
 import {
     isTrackStreamingStatusActive,
@@ -11,7 +12,7 @@ import { translate } from '../../i18n/functions';
 import VideoTrack from '../../media/components/native/VideoTrack';
 import { shouldRenderVideoTrack } from '../../media/functions';
 import { Container } from '../../react';
-import { connect, toState } from '../../redux/functions';
+import { toState } from '../../redux/functions';
 import { TestHint } from '../../testing/components';
 import { getVideoTrackByParticipant } from '../../tracks/functions';
 import { getParticipantById, getParticipantDisplayName, isSharedVideoParticipant } from '../functions';

react/features/base/popover/components/Popover.web.tsx

@@ -1,11 +1,11 @@
 import React, { Component, ReactNode } from 'react';
 import ReactFocusLock from 'react-focus-lock';
+import { connect } from 'react-redux';
 
 import { IReduxState } from '../../../app/types';
 import DialogPortal from '../../../toolbox/components/web/DialogPortal';
 import Drawer from '../../../toolbox/components/web/Drawer';
 import JitsiPortal from '../../../toolbox/components/web/JitsiPortal';
-import { connect } from '../../redux/functions';
 import { getContextMenuStyle } from '../functions.web';
 
 /**

react/features/base/premeeting/components/web/ConnectionStatus.tsx

@@ -1,12 +1,12 @@
 import React, { useCallback, useState } from 'react';
 import { WithTranslation } from 'react-i18next';
+import { connect } from 'react-redux';
 import { makeStyles } from 'tss-react/mui';
 
 import { IReduxState } from '../../../../app/types';
 import { translate } from '../../../i18n/functions';
 import Icon from '../../../icons/components/Icon';
 import { IconArrowDown, IconWifi1Bar, IconWifi2Bars, IconWifi3Bars } from '../../../icons/svg';
-import { connect } from '../../../redux/functions';
 import { withPixelLineHeight } from '../../../styles/functions.web';
 import { PREJOIN_DEFAULT_CONTENT_WIDTH } from '../../../ui/components/variables';
 import { CONNECTION_TYPE } from '../../constants';
@@ -217,7 +217,7 @@ function ConnectionStatus({ connectionDetails, t, connectionType }: IProps) {
  * @param {Object} state - The redux state.
  * @returns {Object}
  */
-function mapStateToProps(state: IReduxState): Object {
+function mapStateToProps(state: IReduxState) {
     const { connectionDetails, connectionType } = getConnectionData(state);
 
     return {

react/features/base/premeeting/components/web/Preview.js

@@ -1,12 +1,12 @@
 // @flow
 
 import React, { useEffect } from 'react';
+import { connect } from 'react-redux';
 
 import { getDisplayName } from '../../../../base/settings';
 import { Avatar } from '../../../avatar';
 import { Video } from '../../../media';
 import { getLocalParticipant } from '../../../participants';
-import { connect } from '../../../redux';
 import { getLocalVideoTrack } from '../../../tracks';
 
 declare var APP: Object;
@@ -26,7 +26,7 @@ export type Props = {
     /**
      * The name of the user that is about to join.
      */
-     name: string,
+    name: string,
 
     /**
      * Flag signaling the visibility of camera preview.

react/features/base/react/components/web/Watermarks.js

@@ -1,10 +1,10 @@
 /* @flow */
 
 import React, { Component } from 'react';
+import { connect } from 'react-redux';
 
 import { isVpaasMeeting } from '../../../../jaas/functions';
 import { translate } from '../../../i18n';
-import { connect } from '../../../redux';
 
 
 declare var interfaceConfig: Object;

react/features/base/redux/functions.ts

@@ -1,5 +1,4 @@
 import _ from 'lodash';
-import { connect as reduxConnect } from 'react-redux';
 
 import { IReduxState } from '../../app/types';
 import { IStateful } from '../app/types';
@@ -27,19 +26,6 @@ export function assign<T extends Object>(target: T, source: Partial<T>): T {
     return t;
 }
 
-/**
- * Wrapper function for the react-redux connect function to avoid having to
- * declare function types for flow, but still let flow warn for other errors.
- *
- * @param {any} mapStateToProps - Redux mapStateToProps function.
- * @param {Function?} mapDispatchToProps - Redux mapDispatchToProps function.
- * @returns {Connector}
- */
-export function connect(
-        mapStateToProps?: any, mapDispatchToProps?: Function | Object) {
-    return reduxConnect(mapStateToProps, mapDispatchToProps);
-}
-
 /**
  * Determines whether {@code a} equals {@code b} according to deep comparison
  * (which makes sense for Redux and its state definition).

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

@@ -1,5 +1,7 @@
 /* eslint-disable lines-around-comment */
 
+import { connect } from 'react-redux';
+
 import { IReduxState } from '../../../../app/types';
 import { translate } from '../../../../base/i18n/functions';
 import { IconGear } from '../../../../base/icons/svg';
@@ -12,7 +14,6 @@ import { navigate }
 import { screen } from '../../../../mobile/navigation/routes';
 import { SETTINGS_ENABLED } from '../../../flags/constants';
 import { getFeatureFlag } from '../../../flags/functions';
-import { connect } from '../../../redux/functions';
 
 /**
  * Implements an {@link AbstractButton} to open the carmode.

react/features/base/sounds/components/SoundCollection.js

@@ -1,10 +1,10 @@
 // @flow
 
 import React, { Component } from 'react';
+import { connect } from 'react-redux';
 
 import { Audio } from '../../media';
 import type { AudioElement } from '../../media';
-import { connect } from '../../redux';
 import { _addAudioElement, _removeAudioElement } from '../actions';
 import type { Sound } from '../reducer';
 

react/features/base/testing/components/TestConnectionInfo.js

@@ -1,10 +1,10 @@
 // @flow
 
 import React, { Component, Fragment } from 'react';
+import { connect } from 'react-redux';
 
 import statsEmitter from '../../../connection-indicator/statsEmitter';
 import { getLocalParticipant } from '../../participants';
-import { connect } from '../../redux';
 import { isTestModeEnabled } from '../functions';
 
 import { TestHint } from './index';

react/features/base/testing/components/TestHint.android.js

@@ -2,8 +2,7 @@
 
 import React, { Component } from 'react';
 import { Text } from 'react-native';
-
-import { connect } from '../../redux';
+import { connect } from 'react-redux';
 
 import type { TestHintProps } from './AbstractTestHint';
 import { _mapStateToProps } from './AbstractTestHint';

react/features/base/testing/components/TestHint.ios.js

@@ -2,8 +2,7 @@
 
 import React, { Component } from 'react';
 import { Text } from 'react-native';
-
-import { connect } from '../../redux';
+import { connect } from 'react-redux';
 
 import type { TestHintProps } from './AbstractTestHint';
 import { _mapStateToProps } from './AbstractTestHint';

react/features/base/ui/components/web/DialogContainer.tsx

@@ -1,10 +1,10 @@
 import React, { Component, ComponentType } from 'react';
+import { connect } from 'react-redux';
 
 import { IReduxState } from '../../../../app/types';
 import { IReactionEmojiProps } from '../../../../reactions/constants';
 import JitsiPortal from '../../../../toolbox/components/web/JitsiPortal';
 import { showOverflowDrawer } from '../../../../toolbox/functions.web';
-import { connect } from '../../../redux/functions';
 
 import DialogTransition from './DialogTransition';
 
@@ -13,12 +13,12 @@ interface IProps {
     /**
      * The component to render.
      */
-    _component: ComponentType;
+    _component?: ComponentType;
 
     /**
      * The props to pass to the component that will be rendered.
      */
-    _componentProps: Object;
+    _componentProps?: Object;
 
     /**
      * Whether the overflow drawer should be used.

react/features/calendar-sync/components/AddMeetingUrlButton.web.js

@@ -1,6 +1,7 @@
 // @flow
 
 import React, { Component } from 'react';
+import { connect } from 'react-redux';
 import type { Dispatch } from 'redux';
 
 import {
@@ -9,7 +10,6 @@ import {
 } from '../../analytics';
 import { translate } from '../../base/i18n';
 import { Icon, IconPlus } from '../../base/icons';
-import { connect } from '../../base/redux';
 import Tooltip from '../../base/tooltip/components/Tooltip';
 import { updateCalendarEvent } from '../actions';
 

react/features/calendar-sync/components/CalendarList.native.js

@@ -6,10 +6,10 @@ import {
     TouchableOpacity,
     View
 } from 'react-native';
+import { connect } from 'react-redux';
 
 import { translate } from '../../base/i18n';
 import { AbstractPage } from '../../base/react';
-import { connect } from '../../base/redux';
 import { openSettings } from '../../mobile/permissions';
 import { refreshCalendar } from '../actions';
 

react/features/calendar-sync/components/CalendarList.web.js

@@ -1,6 +1,7 @@
 // @flow
 
 import React from 'react';
+import { connect } from 'react-redux';
 
 import {
     createCalendarClickedEvent,
@@ -9,7 +10,6 @@ import {
 import { translate } from '../../base/i18n';
 import { Icon, IconCalendar } from '../../base/icons';
 import { AbstractPage } from '../../base/react';
-import { connect } from '../../base/redux';
 import Spinner from '../../base/ui/components/web/Spinner';
 import { SETTINGS_TABS, openSettingsDialog } from '../../settings';
 import { refreshCalendar } from '../actions';

react/features/calendar-sync/components/CalendarListContent.native.js

@@ -1,6 +1,7 @@
 // @flow
 
 import React, { Component } from 'react';
+import { connect } from 'react-redux';
 
 import {
     createCalendarClickedEvent,
@@ -10,7 +11,6 @@ import {
 import { appNavigate } from '../../app/actions';
 import { getLocalizedDateFormatter, translate } from '../../base/i18n';
 import { NavigateSectionList } from '../../base/react';
-import { connect } from '../../base/redux';
 import { openUpdateCalendarEventDialog, refreshCalendar } from '../actions';
 
 

react/features/calendar-sync/components/CalendarListContent.web.js

@@ -1,6 +1,7 @@
 // @flow
 
 import React, { Component } from 'react';
+import { connect } from 'react-redux';
 
 import {
     createCalendarClickedEvent,
@@ -9,7 +10,6 @@ import {
 } from '../../analytics';
 import { appNavigate } from '../../app/actions';
 import { MeetingsList } from '../../base/react';
-import { connect } from '../../base/redux';
 
 import AddMeetingUrlButton from './AddMeetingUrlButton';
 import JoinButton from './JoinButton';

react/features/calendar-sync/components/UpdateCalendarEventDialog.native.js

@@ -1,10 +1,10 @@
 // @flow
 
 import React, { Component } from 'react';
+import { connect } from 'react-redux';
 
 import { ConfirmDialog } from '../../base/dialog';
 import { translate } from '../../base/i18n';
-import { connect } from '../../base/redux';
 import { updateCalendarEvent } from '../actions';
 
 type Props = {

react/features/chat/components/AbstractChatPrivacyDialog.tsx

@@ -19,9 +19,9 @@ interface IProps extends WithTranslation {
     _onSetMessageRecipient: Function;
 
     /**
-     * The participant retrieved from Redux by the participanrID prop.
+     * The participant retrieved from Redux by the participantID prop.
      */
-    _participant: Object;
+    _participant?: IParticipant;
 
     /**
      * The message that is about to be sent.

react/features/chat/components/native/Chat.js

@@ -2,10 +2,10 @@
 
 import { useIsFocused } from '@react-navigation/native';
 import React, { useEffect } from 'react';
+import { connect } from 'react-redux';
 
 import { translate } from '../../../base/i18n';
 import JitsiScreen from '../../../base/modal/components/JitsiScreen';
-import { connect } from '../../../base/redux';
 import { TabBarLabelCounter } from '../../../mobile/navigation/components/TabBarLabelCounter';
 import { closeChat } from '../../actions.native';
 import AbstractChat, {

react/features/chat/components/native/ChatButton.js

@@ -1,7 +1,8 @@
+import { connect } from 'react-redux';
+
 import { CHAT_ENABLED, getFeatureFlag } from '../../../base/flags';
 import { translate } from '../../../base/i18n';
 import { IconChatUnread, IconMessage } from '../../../base/icons';
-import { connect } from '../../../base/redux';
 import {
     AbstractButton,
     type AbstractButtonProps

react/features/chat/components/native/ChatMessage.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { Text, View } from 'react-native';
+import { connect } from 'react-redux';
 
 import { Avatar } from '../../../base/avatar';
 import { translate } from '../../../base/i18n';
 import { Linkify } from '../../../base/react';
-import { connect } from '../../../base/redux';
 import { isGifMessage } from '../../../gifs/functions';
 import { MESSAGE_TYPE_ERROR, MESSAGE_TYPE_LOCAL } from '../../constants';
 import { replaceNonUnicodeEmojis } from '../../functions';

react/features/chat/components/native/ChatPrivacyDialog.js

@@ -1,8 +1,8 @@
 import React from 'react';
+import { connect } from 'react-redux';
 
 import { ConfirmDialog } from '../../../base/dialog';
 import { translate } from '../../../base/i18n';
-import { connect } from '../../../base/redux';
 import { AbstractChatPrivacyDialog, _mapDispatchToProps, _mapStateToProps } from '../AbstractChatPrivacyDialog';
 
 /**

react/features/chat/components/native/MessageContainer.js

@@ -1,8 +1,8 @@
 import React, { ReactElement } from 'react';
 import { FlatList, Text, View } from 'react-native';
+import { connect } from 'react-redux';
 
 import { translate } from '../../../base/i18n';
-import { connect } from '../../../base/redux';
 import AbstractMessageContainer, { type Props as AbstractProps }
     from '../AbstractMessageContainer';
 

react/features/chat/components/native/MessageRecipient.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import { Text, TouchableHighlight, View } from 'react-native';
+import { connect } from 'react-redux';
 
 import { translate } from '../../../base/i18n';
 import { Icon, IconCloseLarge } from '../../../base/icons';
-import { connect } from '../../../base/redux';
 import {
     setParams
 } from '../../../mobile/navigation/components/conference/ConferenceNavigationContainerRef';

react/features/chat/components/native/PrivateMessageButton.js

@@ -1,8 +1,9 @@
+import { connect } from 'react-redux';
+
 import { CHAT_ENABLED, getFeatureFlag } from '../../../base/flags';
 import { translate } from '../../../base/i18n';
 import { IconMessage, IconReply } from '../../../base/icons';
 import { getParticipantById } from '../../../base/participants';
-import { connect } from '../../../base/redux';
 import { AbstractButton, type AbstractButtonProps } from '../../../base/toolbox/components';
 import { handleLobbyChatInitialized, openChat } from '../../../chat/actions.native';
 import { navigate } from '../../../mobile/navigation/components/conference/ConferenceNavigationContainerRef';

react/features/chat/components/web/Chat.js

@@ -1,8 +1,8 @@
 import clsx from 'clsx';
 import React from 'react';
+import { connect } from 'react-redux';
 
 import { translate } from '../../../base/i18n';
-import { connect } from '../../../base/redux';
 import Tabs from '../../../base/ui/components/web/Tabs';
 import { PollsPane } from '../../../polls/components';
 import { toggleChat } from '../../actions.web';

react/features/chat/components/web/ChatButton.js

@@ -1,10 +1,10 @@
 // @flow
 
 import React from 'react';
+import { connect } from 'react-redux';
 
 import { translate } from '../../../base/i18n';
 import { IconMessage } from '../../../base/icons';
-import { connect } from '../../../base/redux';
 import { AbstractButton, type AbstractButtonProps } from '../../../base/toolbox/components';
 
 import ChatCounter from './ChatCounter';

react/features/chat/components/web/ChatCounter.js

@@ -1,8 +1,8 @@
 // @flow
 
 import React, { Component } from 'react';
+import { connect } from 'react-redux';
 
-import { connect } from '../../../base/redux';
 import { getUnreadPollCount } from '../../../polls/functions';
 import { getUnreadCount } from '../../functions';
 

react/features/chat/components/web/ChatHeader.js

@@ -1,10 +1,10 @@
 // @flow
 
 import React, { useCallback } from 'react';
+import { connect } from 'react-redux';
 
 import { translate } from '../../../base/i18n';
 import { Icon, IconCloseLarge } from '../../../base/icons';
-import { connect } from '../../../base/redux';
 import { toggleChat } from '../../actions.web';
 
 type Props = {

react/features/chat/components/web/ChatInput.tsx

@@ -1,11 +1,11 @@
 import React, { Component, RefObject } from 'react';
 import { WithTranslation } from 'react-i18next';
+import { connect } from 'react-redux';
 
 import { IReduxState, IStore } from '../../../app/types';
 import { isMobileBrowser } from '../../../base/environment/utils';
 import { translate } from '../../../base/i18n/functions';
 import { IconFaceSmile, IconSend } from '../../../base/icons/svg';
-import { connect } from '../../../base/redux/functions';
 import Button from '../../../base/ui/components/web/Button';
 import Input from '../../../base/ui/components/web/Input';
 import { areSmileysDisabled } from '../../functions';

react/features/chat/components/web/ChatPrivacyDialog.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
+import { connect } from 'react-redux';
 
 import { translate } from '../../../base/i18n/functions';
-import { connect } from '../../../base/redux/functions';
 import Dialog from '../../../base/ui/components/web/Dialog';
 import { AbstractChatPrivacyDialog, _mapDispatchToProps, _mapStateToProps } from '../AbstractChatPrivacyDialog';
 

react/features/chat/components/web/DisplayNameForm.tsx

@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 import { WithTranslation } from 'react-i18next';
+import { connect } from 'react-redux';
 
 import { IStore } from '../../../app/types';
 import { translate } from '../../../base/i18n/functions';
-import { connect } from '../../../base/redux/functions';
 import { updateSettings } from '../../../base/settings/actions';
 import Button from '../../../base/ui/components/web/Button';
 import Input from '../../../base/ui/components/web/Input';

react/features/chat/components/web/MessageRecipient.tsx

@@ -1,10 +1,10 @@
 import { Theme } from '@mui/material';
 import { withStyles } from '@mui/styles';
 import React from 'react';
+import { connect } from 'react-redux';
 
 import { translate } from '../../../base/i18n/functions';
 import { IconCloseLarge } from '../../../base/icons/svg';
-import { connect } from '../../../base/redux/functions';
 import { withPixelLineHeight } from '../../../base/styles/functions.web';
 import Button from '../../../base/ui/components/web/Button';
 import { BUTTON_TYPES } from '../../../base/ui/constants.any';

react/features/chrome-extension-banner/components/ChromeExtensionBanner.web.js

@@ -2,6 +2,7 @@
 
 import { jitsiLocalStorage } from '@jitsi/js-utils';
 import React, { PureComponent } from 'react';
+import { connect } from 'react-redux';
 
 import {
     createChromeExtensionBannerEvent,
@@ -15,7 +16,6 @@ import {
 import { translate } from '../../base/i18n';
 import { Icon, IconCloseLarge } from '../../base/icons';
 import { browser } from '../../base/lib-jitsi-meet';
-import { connect } from '../../base/redux';
 import { isVpaasMeeting } from '../../jaas/functions';
 import logger from '../logger';
 

react/features/conference/components/native/Conference.js

@@ -4,12 +4,12 @@ import { useIsFocused } from '@react-navigation/native';
 import React, { useEffect } from 'react';
 import { BackHandler, NativeModules, SafeAreaView, View } from 'react-native';
 import { withSafeAreaInsets } from 'react-native-safe-area-context';
+import { connect } from 'react-redux';
 
 import { appNavigate } from '../../../app/actions';
 import { FULLSCREEN_ENABLED, PIP_ENABLED, getFeatureFlag } from '../../../base/flags';
 import { getParticipantCount } from '../../../base/participants';
 import { Container, LoadingIndicator, TintedView } from '../../../base/react';
-import { connect } from '../../../base/redux';
 import { ASPECT_RATIO_NARROW } from '../../../base/responsive-ui/constants';
 import { TestConnectionInfo } from '../../../base/testing';
 import { isCalendarEnabled } from '../../../calendar-sync/functions.native';

react/features/conference/components/native/InsecureRoomNameLabel.js

@@ -1,10 +1,10 @@
 // @flow
 
 import React from 'react';
+import { connect } from 'react-redux';
 
 import { IconWarning } from '../../../base/icons';
 import { Label } from '../../../base/label';
-import { connect } from '../../../base/redux';
 import AbstractInsecureRoomNameLabel, { _mapStateToProps } from '../AbstractInsecureRoomNameLabel';
 
 import styles from './styles';

react/features/conference/components/native/LonelyMeetingExperience.tsx

@@ -3,6 +3,7 @@
 import React, { PureComponent } from 'react';
 import { WithTranslation } from 'react-i18next';
 import { Text, View } from 'react-native';
+import { connect } from 'react-redux';
 
 import { IReduxState } from '../../../app/types';
 // @ts-ignore
@@ -11,7 +12,6 @@ import { translate } from '../../../base/i18n/functions';
 // @ts-ignore
 import { Icon, IconAddUser } from '../../../base/icons';
 import { getParticipantCountWithFake } from '../../../base/participants/functions';
-import { connect } from '../../../base/redux/functions';
 import Button from '../../../base/ui/components/native/Button';
 import { BUTTON_TYPES } from '../../../base/ui/constants.native';
 import { isInBreakoutRoom } from '../../../breakout-rooms/functions';
@@ -145,8 +145,8 @@ function _mapStateToProps(state: IReduxState) {
     return {
         _inviteOthersControl,
         _isInBreakoutRoom,
-        _isInviteFunctionsDisabled: !flag || disableInviteFunctions,
-        _isLonelyMeeting: conference && getParticipantCountWithFake(state) === 1
+        _isInviteFunctionsDisabled: Boolean(!flag || disableInviteFunctions),
+        _isLonelyMeeting: Boolean(conference && getParticipantCountWithFake(state) === 1)
     };
 }
 

react/features/conference/components/native/TitleBar.js

@@ -2,10 +2,10 @@
 
 import React from 'react';
 import { Text, View } from 'react-native';
+import { connect } from 'react-redux';
 
 import { getConferenceName, getConferenceTimestamp } from '../../../base/conference/functions';
 import { CONFERENCE_TIMER_ENABLED, MEETING_NAME_ENABLED, getFeatureFlag } from '../../../base/flags';
-import { connect } from '../../../base/redux';
 import AudioDeviceToggleButton from '../../../mobile/audio-mode/components/AudioDeviceToggleButton';
 import { PictureInPictureButton } from '../../../mobile/picture-in-picture';
 import { ParticipantsPaneButton } from '../../../participants-pane/components/native';

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

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { StyleProp, Text, View, ViewStyle } from 'react-native';
-import { useSelector } from 'react-redux';
+import { connect, useSelector } from 'react-redux';
 
 import { IReduxState } from '../../../../app/types';
 import { getConferenceName } from '../../../../base/conference/functions';
@@ -10,7 +10,6 @@ import { MEETING_NAME_ENABLED } from '../../../../base/flags/constants';
 import { getFeatureFlag } from '../../../../base/flags/functions';
 import { JitsiRecordingConstants } from '../../../../base/lib-jitsi-meet';
 import { getLocalParticipant } from '../../../../base/participants/functions';
-import { connect } from '../../../../base/redux/functions';
 // @ts-ignore
 import ConnectionIndicator from '../../../../connection-indicator/components/native/ConnectionIndicator';
 // @ts-ignore

react/features/conference/components/web/Conference.js

@@ -2,13 +2,13 @@
 
 import _ from 'lodash';
 import React from 'react';
+import { connect as reactReduxConnect } from 'react-redux';
 
 import VideoLayout from '../../../../../modules/UI/videolayout/VideoLayout';
 import { getConferenceNameForTitle } from '../../../base/conference';
 import { connect, disconnect } from '../../../base/connection';
 import { isMobileBrowser } from '../../../base/environment/utils';
 import { translate } from '../../../base/i18n';
-import { connect as reactReduxConnect } from '../../../base/redux';
 import { setColorAlpha } from '../../../base/util';
 import { Chat } from '../../../chat';
 import { MainFilmstrip, ScreenshareFilmstrip, StageFilmstrip } from '../../../filmstrip';

react/features/conference/components/web/ConferenceInfo.js

@@ -3,9 +3,9 @@
 /* eslint-disable react/no-multi-comp */
 
 import React, { Component } from 'react';
+import { connect } from 'react-redux';
 
 import { JitsiRecordingConstants } from '../../../base/lib-jitsi-meet';
-import { connect } from '../../../base/redux';
 import E2EELabel from '../../../e2ee/components/E2EELabel';
 import HighlightButton from '../../../recording/components/Recording/web/HighlightButton';
 import RecordingLabel from '../../../recording/components/web/RecordingLabel';

react/features/conference/components/web/Notice.js

@@ -1,9 +1,9 @@
 /* @flow */
 
 import React, { Component } from 'react';
+import { connect } from 'react-redux';
 
 import { translate } from '../../../base/i18n';
-import { connect } from '../../../base/redux';
 
 declare var config: Object;
 

react/features/connection-indicator/components/native/ConnectionIndicator.tsx

@@ -2,6 +2,7 @@
 
 import React from 'react';
 import { StyleProp, View, ViewStyle } from 'react-native';
+import { connect } from 'react-redux';
 
 import { IReduxState } from '../../../app/types';
 import { IconConnection } from '../../../base/icons/svg';
@@ -13,7 +14,6 @@ import {
 } from '../../../base/participants/functions';
 // @ts-ignore
 import BaseIndicator from '../../../base/react/components/native/BaseIndicator';
-import { connect } from '../../../base/redux/functions';
 import {
     getTrackByMediaTypeAndParticipant
 } from '../../../base/tracks/functions.native';

react/features/connection-indicator/components/web/ConnectionIndicatorContent.js

@@ -1,12 +1,12 @@
 // @flow
 
 import React from 'react';
+import { connect } from 'react-redux';
 import type { Dispatch } from 'redux';
 
 import { translate } from '../../../base/i18n';
 import { MEDIA_TYPE } from '../../../base/media';
 import { getLocalParticipant, getParticipantById, isScreenShareParticipant } from '../../../base/participants';
-import { connect } from '../../../base/redux';
 import {
     getTrackByMediaTypeAndParticipant,
     getVirtualScreenshareParticipantTrack

react/features/deep-linking/components/NoMobileApp.web.js

@@ -1,10 +1,10 @@
 /* @flow */
 
 import React, { Component } from 'react';
+import { connect } from 'react-redux';
 
 import { createDeepLinkingPageEvent, sendAnalytics } from '../../analytics';
 import { IDeeplinkingConfig } from '../../base/config/configType';
-import { connect } from '../../base/redux';
 
 
 /**

react/features/desktop-picker/components/DesktopPicker.tsx

@@ -1,10 +1,10 @@
 import React, { PureComponent } from 'react';
 import { WithTranslation } from 'react-i18next';
+import { connect } from 'react-redux';
 
 import { IStore } from '../../app/types';
 import { hideDialog } from '../../base/dialog/actions';
 import { translate } from '../../base/i18n/functions';
-import { connect } from '../../base/redux/functions';
 import Dialog from '../../base/ui/components/web/Dialog';
 import Tabs from '../../base/ui/components/web/Tabs';
 // eslint-disable-next-line lines-around-comment

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Text, View } from 'react-native';
+import { connect } from 'react-redux';
 
 import { IReduxState } from '../../../app/types';
 import {
@@ -7,7 +8,6 @@ import {
     getParticipantDisplayName,
     isScreenShareParticipant
 } from '../../../base/participants/functions';
-import { connect } from '../../../base/redux/functions';
 
 // @ts-ignore
 import styles from './styles';
@@ -73,8 +73,8 @@ function _mapStateToProps(state: IReduxState, ownProps: Partial<IProps>) {
 
     return {
         _participantName: getParticipantDisplayName(state, ownProps.participantId ?? ''),
-        _render: participant && (!participant?.local || ownProps.contained)
-            && (!participant?.fakeParticipant || isScreenShareParticipant(participant))
+        _render: Boolean(participant && (!participant?.local || ownProps.contained)
+            && (!participant?.fakeParticipant || isScreenShareParticipant(participant)))
     };
 }
 

react/features/display-name/components/native/DisplayNamePrompt.js

@@ -1,9 +1,9 @@
 // @flow
 
 import React from 'react';
+import { connect } from 'react-redux';
 
 import { InputDialog } from '../../../base/dialog';
-import { connect } from '../../../base/redux';
 import AbstractDisplayNamePrompt from '../AbstractDisplayNamePrompt';
 
 /**

react/features/display-name/components/web/DisplayNamePrompt.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
+import { connect } from 'react-redux';
 
 import { translate } from '../../../base/i18n/functions';
-import { connect } from '../../../base/redux/functions';
 import Dialog from '../../../base/ui/components/web/Dialog';
 import Input from '../../../base/ui/components/web/Input';
 import AbstractDisplayNamePrompt, { IProps } from '../AbstractDisplayNamePrompt';

react/features/dynamic-branding/components/native/BrandingImageBackground.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { Image, ImageStyle, StyleProp, ViewStyle } from 'react-native';
 import { SvgUri } from 'react-native-svg';
+import { connect } from 'react-redux';
 
 import { IReduxState } from '../../../app/types';
-import { connect } from '../../../base/redux/functions';
 
 import styles from './styles';
 

react/features/e2ee/components/E2EESection.tsx

@@ -1,11 +1,11 @@
 import React, { Component } from 'react';
 import { WithTranslation } from 'react-i18next';
+import { connect } from 'react-redux';
 
 import { createE2EEEvent } from '../../analytics/AnalyticsEvents';
 import { sendAnalytics } from '../../analytics/functions';
 import { IReduxState, IStore } from '../../app/types';
 import { translate } from '../../base/i18n/functions';
-import { connect } from '../../base/redux/functions';
 import Switch from '../../base/ui/components/web/Switch';
 import { toggleE2EE } from '../actions';
 import { MAX_MODE } from '../constants';
@@ -16,7 +16,7 @@ interface IProps extends WithTranslation {
     /**
      * The resource for the description, computed based on the maxMode and whether the switch is toggled or not.
      */
-    _descriptionResource: string;
+    _descriptionResource?: string;
 
     /**
      * Custom e2ee labels.
@@ -100,7 +100,7 @@ class E2EESection extends Component<IProps, IState> {
     render() {
         const { _descriptionResource, _enabled, _e2eeLabels, _everyoneSupportE2EE, t } = this.props;
         const { toggled } = this.state;
-        const description = _e2eeLabels?.description || t(_descriptionResource);
+        const description = _e2eeLabels?.description || t(_descriptionResource ?? '');
         const label = _e2eeLabels?.label || t('dialog.e2eeLabel');
         const warning = _e2eeLabels?.warning || t('dialog.e2eeWarning');
 
@@ -176,7 +176,7 @@ function mapStateToProps(state: IReduxState) {
         _e2eeLabels: e2eeLabels,
         _enabled: maxMode === MAX_MODE.DISABLED || e2eeEnabled,
         _toggled: e2eeEnabled,
-        _everyoneSupportE2EE: doesEveryoneSupportE2EE(state)
+        _everyoneSupportE2EE: Boolean(doesEveryoneSupportE2EE(state))
     };
 }
 

react/features/e2ee/components/ParticipantVerificationDialog.tsx

@@ -1,11 +1,11 @@
 import { withStyles } from '@mui/styles';
 import React, { Component } from 'react';
 import { WithTranslation } from 'react-i18next';
+import { connect } from 'react-redux';
 
 import { IReduxState, IStore } from '../../app/types';
 import { translate } from '../../base/i18n/functions';
 import { getParticipantById } from '../../base/participants/functions';
-import { connect } from '../../base/redux/functions';
 import Dialog from '../../base/ui/components/web/Dialog';
 import { participantVerified } from '../actions';
 import { ISas } from '../reducer';
@@ -16,7 +16,7 @@ interface IProps extends WithTranslation {
     dispatch: IStore['dispatch'];
     emoji: string;
     pId: string;
-    participantName: string;
+    participantName?: string;
     sas: ISas;
 }
 
@@ -31,7 +31,7 @@ const styles = () => {
     return {
         container: {
             display: 'flex',
-            flexDirection: 'column',
+            flexDirection: 'column' as const,
             margin: '16px'
         },
         row: {
@@ -39,7 +39,7 @@ const styles = () => {
             display: 'flex'
         },
         item: {
-            textAlign: 'center',
+            textAlign: 'center' as const,
             margin: '16px'
         },
         emoji: {
@@ -161,6 +161,4 @@ export function _mapStateToProps(state: IReduxState, ownProps: IProps) {
 }
 
 export default translate(connect(_mapStateToProps)(
-
-    // @ts-ignore
     withStyles(styles)(ParticipantVerificationDialog)));

react/features/embed-meeting/components/EmbedMeetingButton.js

@@ -1,10 +1,11 @@
 // @flow
 
+import { connect } from 'react-redux';
+
 import { createToolbarEvent, sendAnalytics } from '../../analytics';
 import { openDialog } from '../../base/dialog';
 import { translate } from '../../base/i18n';
 import { IconCode } from '../../base/icons';
-import { connect } from '../../base/redux';
 import { AbstractButton, type AbstractButtonProps } from '../../base/toolbox/components';
 
 import EmbedMeetingDialog from './EmbedMeetingDialog';

react/features/etherpad/components/SharedDocumentButton.native.js

@@ -1,9 +1,10 @@
 // @flow
 
+import { connect } from 'react-redux';
+
 import { createToolbarEvent, sendAnalytics } from '../../analytics';
 import { translate } from '../../base/i18n';
 import { IconShareDoc } from '../../base/icons';
-import { connect } from '../../base/redux';
 import { AbstractButton, type AbstractButtonProps } from '../../base/toolbox/components';
 import { navigate } from '../../mobile/navigation/components/conference/ConferenceNavigationContainerRef';
 import { screen } from '../../mobile/navigation/routes';

react/features/etherpad/components/SharedDocumentButton.web.js

@@ -1,11 +1,11 @@
 // @flow
 
+import { connect } from 'react-redux';
 import type { Dispatch } from 'redux';
 
 import { createToolbarEvent, sendAnalytics } from '../../analytics';
 import { translate } from '../../base/i18n';
 import { IconShareDoc } from '../../base/icons';
-import { connect } from '../../base/redux';
 import { AbstractButton, type AbstractButtonProps } from '../../base/toolbox/components';
 import { toggleDocument } from '../../etherpad/actions';
 import { setOverflowMenuVisible } from '../../toolbox/actions.web';

react/features/etherpad/components/native/SharedDocument.js

@@ -1,11 +1,11 @@
 import React, { PureComponent } from 'react';
 import { View } from 'react-native';
 import { WebView } from 'react-native-webview';
+import { connect } from 'react-redux';
 
 import { translate } from '../../../base/i18n';
 import JitsiScreen from '../../../base/modal/components/JitsiScreen';
 import { LoadingIndicator } from '../../../base/react';
-import { connect } from '../../../base/redux';
 import { getSharedDocumentUrl } from '../../functions';
 
 import styles, { INDICATOR_COLOR } from './styles';

react/features/feedback/components/FeedbackButton.web.js

@@ -1,10 +1,11 @@
 
 // @flow
 
+import { connect } from 'react-redux';
+
 import { createToolbarEvent, sendAnalytics } from '../../analytics';
 import { translate } from '../../base/i18n';
 import { IconFeedback } from '../../base/icons';
-import { connect } from '../../base/redux';
 import { AbstractButton, type AbstractButtonProps } from '../../base/toolbox/components';
 import { openFeedbackDialog } from '../actions';
 
@@ -16,7 +17,7 @@ type Props = AbstractButtonProps & {
     /**
      * The {@code JitsiConference} for the current conference.
      */
-     _conference: Object,
+    _conference: Object,
 
     /**
      * The redux {@code dispatch} function.

react/features/filmstrip/components/native/Filmstrip.js

@@ -3,10 +3,10 @@
 import React, { PureComponent } from 'react';
 import { FlatList } from 'react-native';
 import { SafeAreaView, withSafeAreaInsets } from 'react-native-safe-area-context';
+import { connect } from 'react-redux';
 
 import { getLocalParticipant } from '../../../base/participants';
 import { Platform } from '../../../base/react';
-import { connect } from '../../../base/redux';
 import { ASPECT_RATIO_NARROW } from '../../../base/responsive-ui/constants';
 import { getHideSelfView } from '../../../base/settings/functions.any';
 import { isToolboxVisible } from '../../../toolbox/functions';

react/features/filmstrip/components/native/RaisedHandIndicator.js

@@ -2,10 +2,10 @@
 
 import React from 'react';
 import { View } from 'react-native';
+import { connect } from 'react-redux';
 
 import { IconRaiseHand } from '../../../base/icons';
 import { BaseIndicator } from '../../../base/react';
-import { connect } from '../../../base/redux';
 import AbstractRaisedHandIndicator, {
     type Props as AbstractProps,
     _mapStateToProps

react/features/filmstrip/components/native/Thumbnail.js

@@ -1,5 +1,6 @@
 import React, { PureComponent } from 'react';
 import { Image, View } from 'react-native';
+import { connect } from 'react-redux';
 import type { Dispatch } from 'redux';
 
 import { JitsiTrackEvents } from '../../../base/lib-jitsi-meet';
@@ -17,7 +18,6 @@ import {
 import ParticipantView from '../../../base/participants/components/ParticipantView.native';
 import { FakeParticipant } from '../../../base/participants/types';
 import { Container } from '../../../base/react';
-import { connect } from '../../../base/redux';
 import {
     getTrackByMediaTypeAndParticipant,
     getVideoTrackByParticipant,

react/features/filmstrip/components/native/TileView.js

@@ -7,10 +7,10 @@ import {
     TouchableWithoutFeedback
 } from 'react-native';
 import { withSafeAreaInsets } from 'react-native-safe-area-context';
+import { connect } from 'react-redux';
 import type { Dispatch } from 'redux';
 
 import { getLocalParticipant, getParticipantCountWithFake } from '../../../base/participants';
-import { connect } from '../../../base/redux';
 import { getHideSelfView } from '../../../base/settings/functions.any';
 import { setVisibleRemoteParticipants } from '../../actions.web';
 

react/features/filmstrip/components/web/AudioTracksContainer.js

@@ -1,8 +1,8 @@
 /* @flow */
 import React from 'react';
+import { connect } from 'react-redux';
 
 import { AudioTrack, MEDIA_TYPE } from '../../../base/media';
-import { connect } from '../../../base/redux';
 
 /**
  * The type of the React {@code Component} props of {@link AudioTracksContainer}.

react/features/filmstrip/components/web/Filmstrip.tsx

@@ -3,6 +3,7 @@ import clsx from 'clsx';
 import _ from 'lodash';
 import React, { PureComponent } from 'react';
 import { WithTranslation } from 'react-i18next';
+import { connect } from 'react-redux';
 import { FixedSizeGrid, FixedSizeList } from 'react-window';
 
 import { ACTION_SHORTCUT_TRIGGERED, createShortcutEvent, createToolbarEvent } from '../../../analytics/AnalyticsEvents';
@@ -13,7 +14,6 @@ import { isMobileBrowser } from '../../../base/environment/utils';
 import { translate } from '../../../base/i18n/functions';
 import Icon from '../../../base/icons/components/Icon';
 import { IconArrowDown, IconArrowUp } from '../../../base/icons/svg';
-import { connect } from '../../../base/redux/functions';
 import { getHideSelfView } from '../../../base/settings/functions.any';
 import { showToolbox } from '../../../toolbox/actions.web';
 import { isButtonEnabled, isToolboxVisible } from '../../../toolbox/functions.web';
@@ -67,7 +67,7 @@ interface IProps extends WithTranslation {
     /**
      * The current layout of the filmstrip.
      */
-    _currentLayout: string;
+    _currentLayout?: string;
 
     /**
      * Whether or not to hide the self view.
@@ -167,7 +167,7 @@ interface IProps extends WithTranslation {
     /**
      * The height of the top panel (user resized).
      */
-    _topPanelHeight?: number;
+    _topPanelHeight?: number | null;
 
     /**
      * The max height of the top panel.
@@ -182,7 +182,7 @@ interface IProps extends WithTranslation {
     /**
      * The width of the vertical filmstrip (user resized).
      */
-    _verticalFilmstripWidth?: number;
+    _verticalFilmstripWidth?: number | null;
 
     /**
      * Whether or not the vertical filmstrip should have a background color.
@@ -922,7 +922,7 @@ function _mapStateToProps(state: IReduxState, ownProps: Partial<IProps>) {
         _mainFilmstripVisible: visible,
         _maxFilmstripWidth: clientWidth - MIN_STAGE_VIEW_WIDTH,
         _maxTopPanelHeight: clientHeight - MIN_STAGE_VIEW_HEIGHT,
-        _remoteParticipantsLength: _remoteParticipants?.length,
+        _remoteParticipantsLength: _remoteParticipants?.length ?? 0,
         _topPanelHeight: topPanelHeight.current,
         _topPanelMaxHeight: topPanelHeight.current || TOP_FILMSTRIP_HEIGHT,
         _topPanelVisible,

react/features/filmstrip/components/web/MainFilmstrip.js

@@ -1,9 +1,9 @@
 // @flow
 import React from 'react';
+import { connect } from 'react-redux';
 
 import { getToolbarButtons } from '../../../base/config';
 import { isMobileBrowser } from '../../../base/environment/utils';
-import { connect } from '../../../base/redux';
 import { LAYOUTS, getCurrentLayout } from '../../../video-layout';
 import {
     ASPECT_RATIO_BREAKPOINT,

react/features/filmstrip/components/web/ScreenshareFilmstrip.js

@@ -1,7 +1,7 @@
 // @flow
 import React from 'react';
+import { connect } from 'react-redux';
 
-import { connect } from '../../../base/redux';
 import { LAYOUTS, LAYOUT_CLASSNAMES, getCurrentLayout } from '../../../video-layout';
 import {
     FILMSTRIP_TYPE

react/features/filmstrip/components/web/StageFilmstrip.js

@@ -1,9 +1,9 @@
 // @flow
 import React from 'react';
+import { connect } from 'react-redux';
 
 import { getToolbarButtons } from '../../../base/config';
 import { isMobileBrowser } from '../../../base/environment/utils';
-import { connect } from '../../../base/redux';
 import { LAYOUTS, LAYOUT_CLASSNAMES, getCurrentLayout } from '../../../video-layout';
 import {
     ASPECT_RATIO_BREAKPOINT,

react/features/filmstrip/components/web/StatusIndicators.js

@@ -1,6 +1,7 @@
 /* @flow */
 
 import React, { Component } from 'react';
+import { connect } from 'react-redux';
 
 import { MEDIA_TYPE } from '../../../base/media';
 import {
@@ -8,7 +9,6 @@ import {
     getParticipantByIdOrUndefined,
     isScreenShareParticipantById
 } from '../../../base/participants';
-import { connect } from '../../../base/redux';
 import {
     getVideoTrackByParticipant,
     isLocalTrackMuted,

react/features/invite/components/add-people-dialog/native/AddPeopleDialog.js

@@ -6,6 +6,7 @@ import {
     TouchableOpacity,
     View
 } from 'react-native';
+import { connect } from 'react-redux';
 
 import { AlertDialog, openDialog } from '../../../../base/dialog';
 import { translate } from '../../../../base/i18n';
@@ -19,7 +20,6 @@ import {
 } from '../../../../base/icons';
 import JitsiScreen from '../../../../base/modal/components/JitsiScreen';
 import { AvatarListItem, type Item } from '../../../../base/react';
-import { connect } from '../../../../base/redux';
 import BaseTheme from '../../../../base/ui/components/BaseTheme.native';
 import Input from '../../../../base/ui/components/native/Input';
 import HeaderNavigationButton

react/features/invite/components/add-people-dialog/web/AddPeopleDialog.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable lines-around-comment */
 import React, { useEffect } from 'react';
 import { WithTranslation } from 'react-i18next';
+import { connect } from 'react-redux';
 
 import { createInviteDialogEvent } from '../../../../analytics/AnalyticsEvents';
 import { sendAnalytics } from '../../../../analytics/functions';
@@ -8,7 +9,6 @@ import { IReduxState } from '../../../../app/types';
 import { getInviteURL } from '../../../../base/connection/functions';
 import { translate } from '../../../../base/i18n/functions';
 import { JitsiRecordingConstants } from '../../../../base/lib-jitsi-meet';
-import { connect } from '../../../../base/redux/functions';
 import Dialog from '../../../../base/ui/components/web/Dialog';
 import { StatusCode } from '../../../../base/util/uri';
 import { isDynamicBrandingDataLoaded } from '../../../../dynamic-branding/functions.any';
@@ -68,7 +68,7 @@ interface IProps extends WithTranslation {
     /**
      * An alternate app name to be displayed in the email subject.
      */
-    _inviteAppName?: string;
+    _inviteAppName?: string | null;
 
     /**
      * Whether or not invite contacts should be visible.
@@ -88,12 +88,12 @@ interface IProps extends WithTranslation {
     /**
      * The current known URL for a live stream in progress.
      */
-    _liveStreamViewURL: string;
+    _liveStreamViewURL?: string;
 
     /**
      * The default phone number.
      */
-    _phoneNumber?: string;
+    _phoneNumber?: string | null;
 
     /**
      * Whether or not url sharing button should be visible.

react/features/invite/components/add-people-dialog/web/InviteButton.js

@@ -1,9 +1,10 @@
 // @flow
 
+import { connect } from 'react-redux';
+
 import { createToolbarEvent, sendAnalytics } from '../../../../analytics';
 import { translate } from '../../../../base/i18n';
 import { IconAddUser } from '../../../../base/icons';
-import { connect } from '../../../../base/redux';
 import { AbstractButton, type AbstractButtonProps } from '../../../../base/toolbox/components';
 import { beginAddPeople } from '../../../actions.any';
 

react/features/invite/components/add-people-dialog/web/InviteContactsForm.js

@@ -2,13 +2,13 @@
 
 import InlineMessage from '@atlaskit/inline-message';
 import React from 'react';
+import { connect } from 'react-redux';
 import type { Dispatch } from 'redux';
 
 import { Avatar } from '../../../../base/avatar';
 import { translate } from '../../../../base/i18n';
 import { Icon, IconPhoneRinging } from '../../../../base/icons';
 import { MultiSelectAutocomplete } from '../../../../base/react';
-import { connect } from '../../../../base/redux';
 import { isVpaasMeeting } from '../../../../jaas/functions';
 import { hideAddPeopleDialog } from '../../../actions';
 import { INVITE_TYPES } from '../../../constants';

react/features/invite/components/callee-info/CalleeInfo.js

@@ -1,6 +1,7 @@
 // @flow
 
 import React, { Component } from 'react';
+import { connect } from 'react-redux';
 
 import { Avatar } from '../../../base/avatar';
 import { MEDIA_TYPE } from '../../../base/media';
@@ -10,7 +11,6 @@ import {
     getRemoteParticipants
 } from '../../../base/participants';
 import { Container, Text } from '../../../base/react';
-import { connect } from '../../../base/redux';
 import { isLocalTrackMuted } from '../../../base/tracks';
 import { CALLING, PresenceLabel } from '../../../presence-status';
 

react/features/invite/components/callee-info/CalleeInfoContainer.js

@@ -1,8 +1,7 @@
 // @flow
 
 import React, { Component } from 'react';
-
-import { connect } from '../../../base/redux';
+import { connect } from 'react-redux';
 
 import CalleeInfo from './CalleeInfo';
 
@@ -49,7 +48,7 @@ class CalleeInfoContainer extends Component<Props> {
  *     _calleeInfoVisible: boolean
  * }}
  */
-function _mapStateToProps(state: Object): Object {
+function _mapStateToProps(state: Object) {
     return {
         /**
          * The indicator which determines whether {@code CalleeInfo} is to be

react/features/invite/components/dial-in-summary/native/DialInSummary.js

@@ -3,13 +3,13 @@
 import React, { PureComponent } from 'react';
 import { Linking, View } from 'react-native';
 import { WebView } from 'react-native-webview';
+import { connect } from 'react-redux';
 import { type Dispatch } from 'redux';
 
 import { openDialog } from '../../../../base/dialog';
 import { translate } from '../../../../base/i18n';
 import JitsiScreen from '../../../../base/modal/components/JitsiScreen';
 import { LoadingIndicator } from '../../../../base/react';
-import { connect } from '../../../../base/redux';
 import { getDialInfoPageURLForURIString } from '../../../functions';
 
 import DialInSummaryErrorDialog from './DialInSummaryErrorDialog';

react/features/invite/components/dial-in-summary/native/DialInSummaryErrorDialog.js

@@ -1,10 +1,10 @@
 // @flow
 
 import React, { Component } from 'react';
+import { connect } from 'react-redux';
 
 import { AlertDialog } from '../../../../base/dialog';
 import { translate } from '../../../../base/i18n';
-import { connect } from '../../../../base/redux';
 
 /**
  * Dialog to inform the user that we couldn't fetch the dial-in info page.

react/features/keyboard-shortcuts/components/web/KeyboardShortcutsButton.js

@@ -1,9 +1,10 @@
 // @flow
 
+import { connect } from 'react-redux';
+
 import { createToolbarEvent, sendAnalytics } from '../../../analytics';
 import { translate } from '../../../base/i18n';
 import { IconShortcuts } from '../../../base/icons';
-import { connect } from '../../../base/redux';
 import { AbstractButton, type AbstractButtonProps } from '../../../base/toolbox/components';
 import { openSettingsDialog } from '../../../settings/actions';
 import { SETTINGS_TABS } from '../../../settings/constants';

react/features/large-video/components/LargeVideo.native.js

@@ -1,12 +1,12 @@
 // @flow
 
 import React, { PureComponent } from 'react';
+import { connect } from 'react-redux';
 import type { Dispatch } from 'redux';
 
 import { JitsiTrackEvents } from '../../base/lib-jitsi-meet';
 import ParticipantView from '../../base/participants/components/ParticipantView.native';
 import { getParticipantById, isLocalScreenshareParticipant } from '../../base/participants/functions';
-import { connect } from '../../base/redux';
 import {
     getVideoTrackByParticipant,
     isLocalVideoTrackDesktop,

react/features/large-video/components/LargeVideo.web.js

@@ -1,12 +1,12 @@
 // @flow
 
 import React, { Component } from 'react';
+import { connect } from 'react-redux';
 
 import VideoLayout from '../../../../modules/UI/videolayout/VideoLayout';
 import { VIDEO_TYPE } from '../../base/media';
 import { getLocalParticipant } from '../../base/participants';
 import { Watermarks } from '../../base/react';
-import { connect } from '../../base/redux';
 import { getHideSelfView } from '../../base/settings/functions.any';
 import { getVideoTrackByParticipant } from '../../base/tracks';
 import { setColorAlpha } from '../../base/util';

react/features/large-video/components/LargeVideoBackground.web.js

@@ -1,8 +1,8 @@
 // @flow
 
 import React, { Component } from 'react';
+import { connect } from 'react-redux';
 
-import { connect } from '../../base/redux';
 import { shouldDisplayTileView } from '../../video-layout';
 
 /**
@@ -24,7 +24,7 @@ export const ORIENTATION = {
  */
 type Props = {
 
-   /**
+    /**
      * Whether or not the layout should change to support tile view mode.
      *
      * @protected
@@ -230,17 +230,17 @@ export class LargeVideoBackground extends Component<Props> {
             height: canvasHeight,
             width: canvasWidth
         } = this._canvasEl;
-        const cavnasContext = this._canvasEl.getContext('2d');
+        const canvasContext = this._canvasEl.getContext('2d');
 
         if (this.props.orientationFit === ORIENTATION.LANDSCAPE) {
             const heightScaledToFit = (canvasWidth / videoWidth) * videoHeight;
 
-            cavnasContext.drawImage(
+            canvasContext.drawImage(
                 videoElement, 0, 0, canvasWidth, heightScaledToFit);
         } else {
             const widthScaledToFit = (canvasHeight / videoHeight) * videoWidth;
 
-            cavnasContext.drawImage(
+            canvasContext.drawImage(
                 videoElement, 0, 0, widthScaledToFit, canvasHeight);
         }
     }

react/features/lobby/components/AbstractLobbyScreen.js

@@ -437,7 +437,7 @@ export default class AbstractLobbyScreen<P: Props = Props> extends PureComponent
  * @param {Object} state - The Redux state.
  * @returns {Props}
  */
-export function _mapStateToProps(state: Object): $Shape<Props> {
+export function _mapStateToProps(state: Object) {
     const localParticipant = getLocalParticipant(state);
     const participantId = localParticipant?.id;
     const inviteEnabledFlag = getFeatureFlag(state, INVITE_ENABLED, true);

react/features/lobby/components/native/LobbyChatScreen.js

@@ -1,8 +1,8 @@
 import React from 'react';
+import { connect } from 'react-redux';
 
 import { translate } from '../../../base/i18n';
 import JitsiScreen from '../../../base/modal/components/JitsiScreen';
-import { connect } from '../../../base/redux';
 import ChatInputBar from '../../../chat/components/native/ChatInputBar';
 import MessageContainer from '../../../chat/components/native/MessageContainer';
 import AbstractLobbyScreen, {

react/features/lobby/components/native/LobbyScreen.js

@@ -1,11 +1,11 @@
 import React, { ReactElement } from 'react';
 import { Text, View } from 'react-native';
+import { connect } from 'react-redux';
 
 import { getConferenceName } from '../../../base/conference/functions';
 import { translate } from '../../../base/i18n';
 import JitsiScreen from '../../../base/modal/components/JitsiScreen';
 import { LoadingIndicator } from '../../../base/react';
-import { connect } from '../../../base/redux';
 import { ASPECT_RATIO_NARROW } from '../../../base/responsive-ui';
 import BaseTheme from '../../../base/ui/components/BaseTheme.native';
 import Button from '../../../base/ui/components/native/Button';

react/features/lobby/components/web/LobbyScreen.js

@@ -1,12 +1,12 @@
 // @flow
 
 import React from 'react';
+import { connect } from 'react-redux';
 
 import { translate } from '../../../base/i18n';
 import { Icon, IconCloseLarge } from '../../../base/icons';
 import { PreMeetingScreen } from '../../../base/premeeting';
 import { LoadingIndicator } from '../../../base/react';
-import { connect } from '../../../base/redux';
 import Button from '../../../base/ui/components/web/Button';
 import Input from '../../../base/ui/components/web/Input';
 import ChatInput from '../../../chat/components/web/ChatInput';