From a18b13c06b1e0ac7de01e309312605a4ff321659 Mon Sep 17 00:00:00 2001 From: AlexAlexandre Date: Thu, 15 Jul 2021 20:15:59 -0300 Subject: [PATCH] [IMPROVE] migrate Avatar component --- .../Avatar/{Avatar.js => Avatar.tsx} | 63 +++++++++---------- app/containers/Avatar/{index.js => index.tsx} | 29 +++------ .../{CustomEmoji.js => CustomEmoji.tsx} | 19 +++--- .../markdown/{Emoji.js => Emoji.tsx} | 27 ++++---- 4 files changed, 64 insertions(+), 74 deletions(-) rename app/containers/Avatar/{Avatar.js => Avatar.tsx} (68%) rename app/containers/Avatar/{index.js => index.tsx} (78%) rename app/containers/EmojiPicker/{CustomEmoji.js => CustomEmoji.tsx} (71%) rename app/containers/markdown/{Emoji.js => Emoji.tsx} (67%) diff --git a/app/containers/Avatar/Avatar.js b/app/containers/Avatar/Avatar.tsx similarity index 68% rename from app/containers/Avatar/Avatar.js rename to app/containers/Avatar/Avatar.tsx index 0b898a3c8..c5f33d936 100644 --- a/app/containers/Avatar/Avatar.js +++ b/app/containers/Avatar/Avatar.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import PropTypes from 'prop-types'; import { View } from 'react-native'; import FastImage from '@rocket.chat/react-native-fast-image'; import Touchable from 'react-native-platform-touchable'; @@ -8,6 +7,30 @@ import { settings as RocketChatSettings } from '@rocket.chat/sdk'; import { avatarURL } from '../../utils/avatar'; import Emoji from '../markdown/Emoji'; +export interface IAvatar { + server?: string; + style?: any, + text?: string; + avatar?: string; + emoji?: string; + size?: number; + borderRadius?: number; + type?: string; + children?: JSX.Element; + user?: { + id: string; + token: string; + }; + theme: string; + onPress?(): void; + getCustomEmoji(): any; + avatarETag?: string; + isStatic?: boolean; + rid?: string; + blockUnauthenticatedAccess?: boolean; + serverVersion?: string; +} + const Avatar = React.memo(({ text, size, @@ -27,7 +50,7 @@ const Avatar = React.memo(({ rid, blockUnauthenticatedAccess, serverVersion -}) => { +}: Partial) => { if ((!text && !avatar && !emoji && !rid) || !server) { return null; } @@ -96,35 +119,11 @@ const Avatar = React.memo(({ ); }); -Avatar.propTypes = { - server: PropTypes.string, - style: PropTypes.any, - text: PropTypes.string, - avatar: PropTypes.string, - emoji: PropTypes.string, - size: PropTypes.number, - borderRadius: PropTypes.number, - type: PropTypes.string, - children: PropTypes.object, - user: PropTypes.shape({ - id: PropTypes.string, - token: PropTypes.string - }), - theme: PropTypes.string, - onPress: PropTypes.func, - getCustomEmoji: PropTypes.func, - avatarETag: PropTypes.string, - isStatic: PropTypes.bool, - rid: PropTypes.string, - blockUnauthenticatedAccess: PropTypes.bool, - serverVersion: PropTypes.string -}; - -Avatar.defaultProps = { - text: '', - size: 25, - type: 'd', - borderRadius: 4 -}; +// Avatar.defaultProps = { +// text: '', +// size: 25, +// type: 'd', +// borderRadius: 4 +// }; export default Avatar; diff --git a/app/containers/Avatar/index.js b/app/containers/Avatar/index.tsx similarity index 78% rename from app/containers/Avatar/index.js rename to app/containers/Avatar/index.tsx index 4d7c6d7a5..3fb84d216 100644 --- a/app/containers/Avatar/index.js +++ b/app/containers/Avatar/index.tsx @@ -1,27 +1,16 @@ import React from 'react'; -import PropTypes from 'prop-types'; import { connect } from 'react-redux'; import { Q } from '@nozbe/watermelondb'; import database from '../../lib/database'; import { getUserSelector } from '../../selectors/login'; -import Avatar from './Avatar'; +import Avatar, {IAvatar} from './Avatar'; -class AvatarContainer extends React.Component { - static propTypes = { - rid: PropTypes.string, - text: PropTypes.string, - type: PropTypes.string, - blockUnauthenticatedAccess: PropTypes.bool, - serverVersion: PropTypes.string - }; +class AvatarContainer extends React.Component, any> { + private mounted: boolean; + private subscription!: any; - static defaultProps = { - text: '', - type: 'd' - }; - - constructor(props) { + constructor(props: Partial) { super(props); this.mounted = false; this.state = { avatarETag: '' }; @@ -32,7 +21,7 @@ class AvatarContainer extends React.Component { this.mounted = true; } - componentDidUpdate(prevProps) { + componentDidUpdate(prevProps: any) { const { text, type } = this.props; if (prevProps.text !== text || prevProps.type !== type) { this.init(); @@ -59,7 +48,7 @@ class AvatarContainer extends React.Component { try { if (this.isDirect) { const { text } = this.props; - const [user] = await usersCollection.query(Q.where('username', text)).fetch(); + const [user] = await usersCollection.query(Q.where('username', text!)).fetch(); record = user; } else { const { rid } = this.props; @@ -71,7 +60,7 @@ class AvatarContainer extends React.Component { if (record) { const observable = record.observe(); - this.subscription = observable.subscribe((r) => { + this.subscription = observable.subscribe((r: any) => { const { avatarETag } = r; if (this.mounted) { this.setState({ avatarETag }); @@ -95,7 +84,7 @@ class AvatarContainer extends React.Component { } } -const mapStateToProps = state => ({ +const mapStateToProps = (state: any) => ({ user: getUserSelector(state), server: state.share.server.server || state.server.server, serverVersion: state.share.server.version || state.server.version, diff --git a/app/containers/EmojiPicker/CustomEmoji.js b/app/containers/EmojiPicker/CustomEmoji.tsx similarity index 71% rename from app/containers/EmojiPicker/CustomEmoji.js rename to app/containers/EmojiPicker/CustomEmoji.tsx index 934155fec..cb9a9b0dd 100644 --- a/app/containers/EmojiPicker/CustomEmoji.js +++ b/app/containers/EmojiPicker/CustomEmoji.tsx @@ -1,8 +1,17 @@ import React from 'react'; import FastImage from '@rocket.chat/react-native-fast-image'; -import PropTypes from 'prop-types'; -const CustomEmoji = React.memo(({ baseUrl, emoji, style }) => ( +interface ICustomEmoji { + baseUrl: string, + emoji: { + content: any; + name: string; + extension: any; + }, + style: any +} + +const CustomEmoji = React.memo(({ baseUrl, emoji, style }: ICustomEmoji) => ( ( return prevEmoji === nextEmoji; }); -CustomEmoji.propTypes = { - baseUrl: PropTypes.string.isRequired, - emoji: PropTypes.object.isRequired, - style: PropTypes.any -}; - export default CustomEmoji; diff --git a/app/containers/markdown/Emoji.js b/app/containers/markdown/Emoji.tsx similarity index 67% rename from app/containers/markdown/Emoji.js rename to app/containers/markdown/Emoji.tsx index 800db1735..e4ac13bff 100644 --- a/app/containers/markdown/Emoji.js +++ b/app/containers/markdown/Emoji.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import PropTypes from 'prop-types'; import { Text } from 'react-native'; import shortnameToUnicode from '../../utils/shortnameToUnicode'; @@ -8,11 +7,21 @@ import { themes } from '../../constants/colors'; import styles from './styles'; +interface IEmoji { + literal: string; + isMessageContainsOnlyEmoji: boolean; + getCustomEmoji?({}: any): string; + baseUrl: string; + customEmojis?: boolean; + style: object; + theme?: string; +} + const Emoji = React.memo(({ literal, isMessageContainsOnlyEmoji, getCustomEmoji, baseUrl, customEmojis = true, style = {}, theme -}) => { +}: IEmoji) => { const emojiUnicode = shortnameToUnicode(literal); - const emoji = getCustomEmoji && getCustomEmoji(literal.replace(/:/g, '')); + const emoji: any = getCustomEmoji && getCustomEmoji(literal.replace(/:/g, '')); if (emoji && customEmojis) { return (