From 1c70ffc614e3c12380a599a1f6317b5e102ba731 Mon Sep 17 00:00:00 2001 From: Gerzon Z Date: Tue, 29 Mar 2022 12:23:45 -0400 Subject: [PATCH] Chore: Evaluate `Avatar` - TypeScript (#3929) * update: `Avatar` component remove: non-null assertion from ThreadMessagesView Item * remove: `this.mounted` from `Avatar` component update: navParam on MessageAvatar component --- app/containers/Avatar/Avatar.tsx | 6 ++-- app/containers/Avatar/index.tsx | 22 +++--------- app/containers/Avatar/interfaces.ts | 3 +- app/containers/message/MessageAvatar.tsx | 46 ++++++++++++------------ app/containers/message/interfaces.ts | 1 - app/views/DiscussionsView/Item.tsx | 2 +- app/views/ThreadMessagesView/Item.tsx | 4 +-- 7 files changed, 35 insertions(+), 49 deletions(-) diff --git a/app/containers/Avatar/Avatar.tsx b/app/containers/Avatar/Avatar.tsx index 8abb87843..fc8bcecb1 100644 --- a/app/containers/Avatar/Avatar.tsx +++ b/app/containers/Avatar/Avatar.tsx @@ -8,6 +8,7 @@ import { avatarURL } from '../../utils/avatar'; import { SubscriptionType } from '../../definitions/ISubscription'; import Emoji from '../markdown/Emoji'; import { IAvatar } from './interfaces'; +import { useTheme } from '../../theme'; const Avatar = React.memo( ({ @@ -18,7 +19,6 @@ const Avatar = React.memo( user, onPress, emoji, - theme, getCustomEmoji, avatarETag, isStatic, @@ -34,6 +34,8 @@ const Avatar = React.memo( return null; } + const { theme } = useTheme(); + const avatarStyle = { width: size, height: size, @@ -44,7 +46,7 @@ const Avatar = React.memo( if (emoji) { image = ( { - private mounted: boolean; - private subscription?: Subscription; static defaultProps = { @@ -21,16 +19,11 @@ class AvatarContainer extends React.Component { constructor(props: IAvatar) { super(props); - this.mounted = false; this.state = { avatarETag: '' }; this.init(); } - componentDidMount() { - this.mounted = true; - } - - componentDidUpdate(prevProps: any) { + componentDidUpdate(prevProps: IAvatar) { const { text, type } = this.props; if (prevProps.text !== text || prevProps.type !== type) { this.init(); @@ -88,12 +81,7 @@ class AvatarContainer extends React.Component { const observable = record.observe() as Observable; this.subscription = observable.subscribe(r => { const { avatarETag } = r; - if (this.mounted) { - this.setState({ avatarETag }); - } else { - // @ts-ignore - this.state.avatarETag = avatarETag; - } + this.setState({ avatarETag }); }); } }; @@ -105,12 +93,12 @@ class AvatarContainer extends React.Component { } } -const mapStateToProps = (state: any) => ({ +const mapStateToProps = (state: IApplicationState) => ({ user: getUserSelector(state), server: state.share.server.server || state.server.server, serverVersion: state.share.server.version || state.server.version, blockUnauthenticatedAccess: - state.share.settings?.Accounts_AvatarBlockUnauthenticatedAccess ?? + (state.share.settings?.Accounts_AvatarBlockUnauthenticatedAccess as boolean) ?? state.settings.Accounts_AvatarBlockUnauthenticatedAccess ?? true }); diff --git a/app/containers/Avatar/interfaces.ts b/app/containers/Avatar/interfaces.ts index 3bc5dd85e..c455da0a5 100644 --- a/app/containers/Avatar/interfaces.ts +++ b/app/containers/Avatar/interfaces.ts @@ -16,12 +16,11 @@ export interface IAvatar { id?: string; token?: string; }; - theme?: string; onPress?: () => void; getCustomEmoji?: TGetCustomEmoji; avatarETag?: string; isStatic?: boolean | string; rid?: string; blockUnauthenticatedAccess?: boolean; - serverVersion: string; + serverVersion: string | null; } diff --git a/app/containers/message/MessageAvatar.tsx b/app/containers/message/MessageAvatar.tsx index 3f330d819..3852939f0 100644 --- a/app/containers/message/MessageAvatar.tsx +++ b/app/containers/message/MessageAvatar.tsx @@ -4,32 +4,30 @@ import Avatar from '../Avatar'; import styles from './styles'; import MessageContext from './Context'; import { IMessageAvatar } from './interfaces'; +import { SubscriptionType } from '../../definitions'; -const MessageAvatar = React.memo( - ({ isHeader, avatar, author, small, navToRoomInfo, emoji, getCustomEmoji, theme }: IMessageAvatar) => { - const { user } = useContext(MessageContext); - if (isHeader && author) { - const navParam = { - t: 'd', - rid: author._id - }; - return ( - navToRoomInfo(navParam)} - getCustomEmoji={getCustomEmoji} - avatar={avatar} - emoji={emoji} - theme={theme} - /> - ); - } - return null; +const MessageAvatar = React.memo(({ isHeader, avatar, author, small, navToRoomInfo, emoji, getCustomEmoji }: IMessageAvatar) => { + const { user } = useContext(MessageContext); + if (isHeader && author) { + const navParam = { + t: SubscriptionType.DIRECT, + rid: author._id + }; + return ( + navToRoomInfo(navParam)} + getCustomEmoji={getCustomEmoji} + avatar={avatar} + emoji={emoji} + /> + ); } -); + return null; +}); MessageAvatar.displayName = 'MessageAvatar'; diff --git a/app/containers/message/interfaces.ts b/app/containers/message/interfaces.ts index 8dae235ba..a54281760 100644 --- a/app/containers/message/interfaces.ts +++ b/app/containers/message/interfaces.ts @@ -31,7 +31,6 @@ export interface IMessageAvatar { small?: boolean; navToRoomInfo: Function; getCustomEmoji: TGetCustomEmoji; - theme: string; } export interface IMessageBlocks { diff --git a/app/views/DiscussionsView/Item.tsx b/app/views/DiscussionsView/Item.tsx index 2fa90d185..41c3174c1 100644 --- a/app/views/DiscussionsView/Item.tsx +++ b/app/views/DiscussionsView/Item.tsx @@ -73,7 +73,7 @@ const Item = ({ item, onPress }: IItem): JSX.Element => { testID={`discussions-view-${item.msg}`} style={{ backgroundColor: themes[theme].backgroundColor }}> - + diff --git a/app/views/ThreadMessagesView/Item.tsx b/app/views/ThreadMessagesView/Item.tsx index 82441c43e..d5b7a2b55 100644 --- a/app/views/ThreadMessagesView/Item.tsx +++ b/app/views/ThreadMessagesView/Item.tsx @@ -65,7 +65,7 @@ interface IItem { toggleFollowThread: (isFollowing: boolean, id: string) => void; } -const Item = ({ item, useRealName, user, badgeColor, onPress, toggleFollowThread }: IItem) => { +const Item = ({ item, useRealName, user, badgeColor, onPress, toggleFollowThread }: IItem): React.ReactElement => { const { theme } = useTheme(); const username = (useRealName && item?.u?.name) || item?.u?.username; let time; @@ -79,7 +79,7 @@ const Item = ({ item, useRealName, user, badgeColor, onPress, toggleFollowThread testID={`thread-messages-view-${item.msg}`} style={{ backgroundColor: themes[theme].backgroundColor }}> - +