ref(avatar) Convert to TS (#13092)

Fix imports
Remove unnecessary @ts-ignore

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

@@ -1,109 +1,111 @@
-// @flow
-
 import React, { PureComponent } from 'react';
 import { connect } from 'react-redux';
 
-import { getParticipantById } from '../../participants';
+import { IReduxState } from '../../../app/types';
+import { getParticipantById } from '../../participants/functions';
+import { IParticipant } from '../../participants/types';
 import { getAvatarColor, getInitials, isCORSAvatarURL } from '../functions';
 
+import { IProps as AbstractProps } from './AbstractStatelessAvatar';
+
 import { StatelessAvatar } from './';
 
-export type Props = {
+export interface IProps {
 
     /**
      * The URL patterns for URLs that needs to be handled with CORS.
      */
-    _corsAvatarURLs: Array<string>,
+    _corsAvatarURLs?: Array<string>;
 
     /**
      * Custom avatar backgrounds from branding.
      */
-    _customAvatarBackgrounds: Array<string>,
+    _customAvatarBackgrounds?: Array<string>;
 
     /**
      * The string we base the initials on (this is generated from a list of precedences).
      */
-    _initialsBase: ?string,
+    _initialsBase?: string;
 
     /**
      * An URL that we validated that it can be loaded.
      */
-    _loadableAvatarUrl: ?string,
+    _loadableAvatarUrl?: string;
 
     /**
      * Indicates whether _loadableAvatarUrl should use CORS or not.
      */
-    _loadableAvatarUrlUseCORS: ?boolean,
+    _loadableAvatarUrlUseCORS?: boolean;
 
     /**
      * A prop to maintain compatibility with web.
      */
-    className?: string,
+    className?: string;
 
     /**
      * A string to override the initials to generate a color of. This is handy if you don't want to make
      * the background color match the string that the initials are generated from.
      */
-    colorBase?: string,
+    colorBase?: string;
 
     /**
      * Display name of the entity to render an avatar for (if any). This is handy when we need
-     * an avatar for a non-participasnt entity (e.g. A recent list item).
+     * an avatar for a non-participant entity (e.g. A recent list item).
      */
-    displayName?: string,
+    displayName?: string;
 
     /**
      * Whether or not to update the background color of the avatar.
      */
-    dynamicColor?: Boolean,
+    dynamicColor?: boolean;
 
     /**
      * ID of the element, if any.
      */
-    id?: string,
+    id?: string;
 
     /**
      * The ID of the participant to render an avatar for (if it's a participant avatar).
      */
-    participantId?: string,
+    participantId?: string;
 
     /**
      * The size of the avatar.
      */
-    size: number,
+    size: number;
 
     /**
      * One of the expected status strings (e.g. 'available') to render a badge on the avatar, if necessary.
      */
-    status?: ?string,
+    status?: string;
 
     /**
      * TestId of the element, if any.
      */
-    testId?: string,
+    testId?: string;
 
     /**
      * URL of the avatar, if any.
      */
-    url: ?string,
+    url?: string;
 
     /**
      * Indicates whether to load the avatar using CORS or not.
      */
-    useCORS?: ?boolean
+    useCORS?: boolean;
 }
 
 type State = {
-    avatarFailed: boolean,
-    isUsingCORS: boolean
-}
+    avatarFailed: boolean;
+    isUsingCORS: boolean;
+};
 
 export const DEFAULT_SIZE = 65;
 
 /**
  * Implements a class to render avatars in the app.
  */
-class Avatar<P: Props> extends PureComponent<P, State> {
+class Avatar<P extends IProps> extends PureComponent<P, State> {
     /**
      * Default values for {@code Avatar} component's properties.
      *
@@ -179,7 +181,13 @@ class Avatar<P: Props> extends PureComponent<P, State> {
         } = this.props;
         const { avatarFailed, isUsingCORS } = this.state;
 
-        const avatarProps = {
+        const avatarProps: AbstractProps & {
+            className?: string;
+            id?: string;
+            status?: string;
+            testId?: string;
+            useCORS?: boolean;
+        } = {
             className,
             color: undefined,
             id,
@@ -212,7 +220,7 @@ class Avatar<P: Props> extends PureComponent<P, State> {
 
         if (initials) {
             if (dynamicColor) {
-                avatarProps.color = getAvatarColor(colorBase || _initialsBase, _customAvatarBackgrounds);
+                avatarProps.color = getAvatarColor(colorBase || _initialsBase, _customAvatarBackgrounds ?? []);
             }
 
             avatarProps.initials = initials;
@@ -224,8 +232,6 @@ class Avatar<P: Props> extends PureComponent<P, State> {
         );
     }
 
-    _onAvatarLoadError: () => void;
-
     /**
      * Callback to handle the error while loading of the avatar URI.
      *
@@ -233,7 +239,7 @@ class Avatar<P: Props> extends PureComponent<P, State> {
      * @param {boolean} params.dontRetry - If false we will retry to load the Avatar with different CORS mode.
      * @returns {void}
      */
-    _onAvatarLoadError(params = {}) {
+    _onAvatarLoadError(params: any = {}) {
         const { dontRetry = false } = params;
 
         if (Boolean(this.props.useCORS) === this.state.isUsingCORS && !dontRetry) {
@@ -254,12 +260,12 @@ class Avatar<P: Props> extends PureComponent<P, State> {
  * Maps part of the Redux state to the props of this component.
  *
  * @param {Object} state - The Redux state.
- * @param {Props} ownProps - The own props of the component.
- * @returns {Props}
+ * @param {IProps} ownProps - The own props of the component.
+ * @returns {IProps}
  */
-export function _mapStateToProps(state: Object, ownProps: Props) {
+export function _mapStateToProps(state: IReduxState, ownProps: IProps) {
     const { colorBase, displayName, participantId } = ownProps;
-    const _participant: ?Object = participantId && getParticipantById(state, participantId);
+    const _participant: IParticipant | undefined = participantId ? getParticipantById(state, participantId) : undefined;
     const _initialsBase = _participant?.name ?? displayName;
     const { corsAvatarURLs } = state['features/base/config'];
 

react/features/base/avatar/components/index.native.js

@@ -1,4 +0,0 @@
-// @flow
-
-export * from './native';
-export { default as Avatar } from './Avatar';

react/features/base/avatar/components/index.native.ts

@@ -0,0 +1,3 @@
+// @ts-ignore
+export { default as StatelessAvatar } from './native/StatelessAvatar';
+export { default as Avatar } from './Avatar';

react/features/base/avatar/components/index.web.js

@@ -1,4 +0,0 @@
-// @flow
-
-export * from './web';
-export { default as Avatar } from './Avatar';

react/features/base/avatar/components/index.web.ts

@@ -0,0 +1,2 @@
+export { default as StatelessAvatar } from './web/StatelessAvatar';
+export { default as Avatar } from './Avatar';

react/features/base/avatar/components/native/index.js

@@ -1,3 +0,0 @@
-// @flow
-
-export { default as StatelessAvatar } from './StatelessAvatar';

react/features/base/avatar/components/web/index.js

@@ -1,3 +0,0 @@
-// @flow
-
-export { default as StatelessAvatar } from './StatelessAvatar';

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

@@ -2,8 +2,6 @@ import clsx from 'clsx';
 import React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
-// eslint-disable-next-line lines-around-comment
-// @ts-ignore
 import Avatar from '../../../base/avatar/components/Avatar';
 import { IMessage } from '../../reducer';
 

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

@@ -10,8 +10,7 @@ import { connect } from 'react-redux';
 import { createScreenSharingIssueEvent } from '../../../analytics/AnalyticsEvents';
 import { sendAnalytics } from '../../../analytics/functions';
 import { IReduxState } from '../../../app/types';
-// @ts-ignore
-import { Avatar } from '../../../base/avatar';
+import Avatar from '../../../base/avatar/components/Avatar';
 import { isMobileBrowser } from '../../../base/environment/utils';
 import { translate } from '../../../base/i18n/functions';
 import { JitsiTrackEvents } from '../../../base/lib-jitsi-meet';

react/features/participants-pane/components/breakout-rooms/components/web/RoomParticipantContextMenu.tsx

@@ -3,8 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import { makeStyles } from 'tss-react/mui';
 
-// @ts-ignore
-import { Avatar } from '../../../../../base/avatar';
+import Avatar from '../../../../../base/avatar/components/Avatar';
 import { isLocalParticipantModerator } from '../../../../../base/participants/functions';
 import ContextMenu from '../../../../../base/ui/components/web/ContextMenu';
 import ContextMenuItemGroup from '../../../../../base/ui/components/web/ContextMenuItemGroup';

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

@@ -5,8 +5,7 @@ import { Text, View } from 'react-native';
 import { connect } from 'react-redux';
 
 import { IReduxState } from '../../../app/types';
-// @ts-ignore
-import { Avatar } from '../../../base/avatar';
+import Avatar from '../../../base/avatar/components/Avatar';
 // @ts-ignore
 import { BottomSheet, hideSheet } from '../../../base/dialog';
 // @ts-ignore

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

@@ -3,8 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import { makeStyles } from 'tss-react/mui';
 
-// @ts-ignore
-import { Avatar } from '../../../base/avatar';
+import Avatar from '../../../base/avatar/components/Avatar';
 import Icon from '../../../base/icons/components/Icon';
 import { IconCheck, IconCloseLarge } from '../../../base/icons/svg';
 import { withPixelLineHeight } from '../../../base/styles/functions.web';

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

@@ -2,8 +2,7 @@ import React, { ReactElement, useCallback } from 'react';
 import { WithTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
 
-// @ts-ignore
-import { Avatar } from '../../../base/avatar';
+import Avatar from '../../../base/avatar/components/Avatar';
 import ListItem from '../../../base/components/participants-pane-list/ListItem';
 import { translate } from '../../../base/i18n/functions';
 import { withPixelLineHeight } from '../../../base/styles/functions.web';

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

@@ -4,9 +4,7 @@ import { WithTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 
 import { IReduxState } from '../../../app/types';
-// eslint-disable-next-line lines-around-comment
-// @ts-ignore
-import { Avatar } from '../../../base/avatar';
+import Avatar from '../../../base/avatar/components/Avatar';
 import { isNameReadOnly } from '../../../base/config/functions.web';
 import { translate } from '../../../base/i18n/functions';
 import { IconArrowDown, IconArrowUp, IconPhoneRinging, IconVolumeOff } from '../../../base/icons/svg';

react/features/prejoin/components/web/dialogs/CallingDialog.tsx

@@ -2,8 +2,7 @@ import React from 'react';
 import { WithTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
 
-// @ts-ignore
-import { Avatar } from '../../../../base/avatar';
+import Avatar from '../../../../base/avatar/components/Avatar';
 import { translate } from '../../../../base/i18n/functions';
 import Icon from '../../../../base/icons/components/Icon';
 import { IconCloseLarge } from '../../../../base/icons/svg';

react/features/settings/components/native/SettingsView.tsx

@@ -18,8 +18,7 @@ import { connect } from 'react-redux';
 
 import { getDefaultURL } from '../../../app/functions.native';
 import { IReduxState } from '../../../app/types';
-// @ts-ignore
-import { Avatar } from '../../../base/avatar';
+import Avatar from '../../../base/avatar/components/Avatar';
 import { getLegalUrls } from '../../../base/config/functions.native';
 import { translate } from '../../../base/i18n/functions';
 // @ts-ignore

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

@@ -7,8 +7,6 @@ import { WithTranslation } from 'react-i18next';
 import UIEvents from '../../../../../service/UI/UIEvents';
 import { createProfilePanelButtonEvent } from '../../../analytics/AnalyticsEvents';
 import { sendAnalytics } from '../../../analytics/functions';
-// eslint-disable-next-line lines-around-comment
-// @ts-ignore
 import Avatar from '../../../base/avatar/components/Avatar';
 import AbstractDialogTab, {
     IProps as AbstractDialogTabProps } from '../../../base/dialog/components/web/AbstractDialogTab';

react/features/speaker-stats/components/web/SpeakerStatsItem.tsx

@@ -1,7 +1,6 @@
 // eslint-disable-next-line lines-around-comment
 import React from 'react';
 
-// @ts-ignore
 import Avatar from '../../../base/avatar/components/Avatar';
 import StatelessAvatar from '../../../base/avatar/components/web/StatelessAvatar';
 import { getInitials } from '../../../base/avatar/functions';

react/features/video-menu/components/native/ConnectionStatusComponent.tsx

@@ -7,7 +7,6 @@ import { withTheme } from 'react-native-paper';
 import { connect } from 'react-redux';
 
 import { IReduxState } from '../../../app/types';
-// @ts-ignore
 import Avatar from '../../../base/avatar/components/Avatar';
 import { hideSheet } from '../../../base/dialog/actions';
 // @ts-ignore

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

@@ -4,9 +4,7 @@ import { useDispatch, useSelector } from 'react-redux';
 
 // @ts-ignore
 import TogglePinToStageButton from '../../../../features/video-menu/components/web/TogglePinToStageButton';
-// eslint-disable-next-line lines-around-comment
-// @ts-ignore
-import { Avatar } from '../../../base/avatar';
+import Avatar from '../../../base/avatar/components/Avatar';
 import { IconPlay } from '../../../base/icons/svg';
 import { isWhiteboardParticipant } from '../../../base/participants/functions';
 import { IParticipant } from '../../../base/participants/types';

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

@@ -7,8 +7,7 @@ import { makeStyles } from 'tss-react/mui';
 
 import { IReduxState } from '../../../app/types';
 import { isSupported as isAvModerationSupported } from '../../../av-moderation/functions';
-// @ts-ignore
-import { Avatar } from '../../../base/avatar';
+import Avatar from '../../../base/avatar/components/Avatar';
 import { isIosMobileBrowser, isMobileBrowser } from '../../../base/environment/utils';
 import { MEDIA_TYPE } from '../../../base/media/constants';
 import { PARTICIPANT_ROLE } from '../../../base/participants/constants';