From 6db54e992062887ed77c0b0fd43c800421dc00aa Mon Sep 17 00:00:00 2001 From: AlexAlexandre Date: Thu, 22 Jul 2021 17:09:06 -0300 Subject: [PATCH] [IMPROVE] - migrating the message container (in progress) --- .../{Attachments.js => Attachments.tsx} | 20 +++---- .../message/{Blocks.js => Blocks.ts} | 20 +++---- .../message/{CallButton.js => CallButton.tsx} | 14 ++--- app/containers/message/Image.tsx | 2 +- .../{MessageAvatar.js => MessageAvatar.tsx} | 27 +++++---- .../{MessageError.js => MessageError.tsx} | 12 ++-- .../{ReadReceipt.js => ReadReceipt.tsx} | 15 +++-- .../{RepliedThread.js => RepliedThread.tsx} | 23 ++++---- .../message/{Thread.js => Thread.tsx} | 22 ++++--- app/containers/message/{Urls.js => Urls.tsx} | 58 +++++++++---------- app/containers/message/{User.js => User.tsx} | 37 ++++++------ .../message/{Video.js => Video.tsx} | 26 +++++---- 12 files changed, 139 insertions(+), 137 deletions(-) rename app/containers/message/{Attachments.js => Attachments.tsx} (81%) rename app/containers/message/{Blocks.js => Blocks.ts} (62%) rename app/containers/message/{CallButton.js => CallButton.tsx} (83%) rename app/containers/message/{MessageAvatar.js => MessageAvatar.tsx} (74%) rename app/containers/message/{MessageError.js => MessageError.tsx} (81%) rename app/containers/message/{ReadReceipt.js => ReadReceipt.tsx} (74%) rename app/containers/message/{RepliedThread.js => RepliedThread.tsx} (83%) rename app/containers/message/{Thread.js => Thread.tsx} (80%) rename app/containers/message/{Urls.js => Urls.tsx} (82%) rename app/containers/message/{User.js => User.tsx} (84%) rename app/containers/message/{Video.js => Video.tsx} (81%) diff --git a/app/containers/message/Attachments.js b/app/containers/message/Attachments.tsx similarity index 81% rename from app/containers/message/Attachments.js rename to app/containers/message/Attachments.tsx index 0d068e9fd..74be12552 100644 --- a/app/containers/message/Attachments.js +++ b/app/containers/message/Attachments.tsx @@ -1,20 +1,27 @@ import React from 'react'; import { dequal } from 'dequal'; -import PropTypes from 'prop-types'; import Image from './Image'; import Audio from './Audio'; import Video from './Video'; import Reply from './Reply'; +interface IMessageAttachments { + attachments: any; + timeFormat: string; + showAttachment: Function; + getCustomEmoji: Function; + theme: string; +} + const Attachments = React.memo(({ attachments, timeFormat, showAttachment, getCustomEmoji, theme -}) => { +}: IMessageAttachments) => { if (!attachments || attachments.length === 0) { return null; } - return attachments.map((file, index) => { + return attachments.map((file: any, index: number) => { if (file.image_url) { return ; } @@ -30,13 +37,6 @@ const Attachments = React.memo(({ }); }, (prevProps, nextProps) => dequal(prevProps.attachments, nextProps.attachments) && prevProps.theme === nextProps.theme); -Attachments.propTypes = { - attachments: PropTypes.array, - timeFormat: PropTypes.string, - showAttachment: PropTypes.func, - getCustomEmoji: PropTypes.func, - theme: PropTypes.string -}; Attachments.displayName = 'MessageAttachments'; export default Attachments; diff --git a/app/containers/message/Blocks.js b/app/containers/message/Blocks.ts similarity index 62% rename from app/containers/message/Blocks.js rename to app/containers/message/Blocks.ts index ba74ebe20..62b1f2d22 100644 --- a/app/containers/message/Blocks.js +++ b/app/containers/message/Blocks.ts @@ -1,15 +1,19 @@ import React from 'react'; -import PropTypes from 'prop-types'; import { messageBlockWithContext } from '../UIKit/MessageBlock'; -const Blocks = React.memo(({ - blocks, id: mid, rid, blockAction -}) => { +interface IMessageBlocks { + blocks: any; + id: string; + rid: string; + blockAction: Function; +} + +const Blocks = React.memo(({ blocks, id: mid, rid, blockAction }: IMessageBlocks) => { if (blocks && blocks.length > 0) { const appId = blocks[0]?.appId || ''; return React.createElement( messageBlockWithContext({ - action: async({ actionId, value, blockId }) => { + action: async({ actionId, value, blockId }: any) => { await blockAction({ actionId, appId, @@ -27,12 +31,6 @@ const Blocks = React.memo(({ return null; }); -Blocks.propTypes = { - blocks: PropTypes.array, - id: PropTypes.string, - rid: PropTypes.string, - blockAction: PropTypes.func -}; Blocks.displayName = 'MessageBlocks'; export default Blocks; diff --git a/app/containers/message/CallButton.js b/app/containers/message/CallButton.tsx similarity index 83% rename from app/containers/message/CallButton.js rename to app/containers/message/CallButton.tsx index 4c701a6c8..a0ba95d32 100644 --- a/app/containers/message/CallButton.js +++ b/app/containers/message/CallButton.tsx @@ -1,6 +1,5 @@ import React from 'react'; import { View, Text } from 'react-native'; -import PropTypes from 'prop-types'; import Touchable from './Touchable'; import { BUTTON_HIT_SLOP } from './utils'; @@ -9,9 +8,12 @@ import I18n from '../../i18n'; import { CustomIcon } from '../../lib/Icons'; import { themes } from '../../constants/colors'; -const CallButton = React.memo(({ - theme, callJitsi -}) => ( +interface IMessageCallButton { + theme: string; + callJitsi: Function; +} + +const CallButton = React.memo(({ theme, callJitsi }: IMessageCallButton) => ( )); -CallButton.propTypes = { - theme: PropTypes.string, - callJitsi: PropTypes.func -}; CallButton.displayName = 'CallButton'; export default CallButton; diff --git a/app/containers/message/Image.tsx b/app/containers/message/Image.tsx index c5dbaedc3..36b9d0f4a 100644 --- a/app/containers/message/Image.tsx +++ b/app/containers/message/Image.tsx @@ -25,7 +25,7 @@ type TMessageImage = { interface IMessageImage { file: { image_url: string; description: string; }; - imageUrl: string; + imageUrl?: string; showAttachment: Function; theme: string; getCustomEmoji: Function; diff --git a/app/containers/message/MessageAvatar.js b/app/containers/message/MessageAvatar.tsx similarity index 74% rename from app/containers/message/MessageAvatar.js rename to app/containers/message/MessageAvatar.tsx index 7fcdffb55..26a296993 100644 --- a/app/containers/message/MessageAvatar.js +++ b/app/containers/message/MessageAvatar.tsx @@ -1,13 +1,26 @@ import React, { useContext } from 'react'; -import PropTypes from 'prop-types'; import Avatar from '../Avatar'; import styles from './styles'; import MessageContext from './Context'; +interface IMessageAvatar { + isHeader: boolean; + avatar: string; + emoji: string; + author: { + username: string + _id: string; + }; + small: boolean; + navToRoomInfo: Function; + getCustomEmoji(): void; + theme: string; +} + const MessageAvatar = React.memo(({ isHeader, avatar, author, small, navToRoomInfo, emoji, getCustomEmoji, theme -}) => { +}: IMessageAvatar) => { const { user } = useContext(MessageContext); if (isHeader && author) { const navParam = { @@ -31,16 +44,6 @@ const MessageAvatar = React.memo(({ return null; }); -MessageAvatar.propTypes = { - isHeader: PropTypes.bool, - avatar: PropTypes.string, - emoji: PropTypes.string, - author: PropTypes.obj, - small: PropTypes.bool, - navToRoomInfo: PropTypes.func, - getCustomEmoji: PropTypes.func, - theme: PropTypes.string -}; MessageAvatar.displayName = 'MessageAvatar'; export default MessageAvatar; diff --git a/app/containers/message/MessageError.js b/app/containers/message/MessageError.tsx similarity index 81% rename from app/containers/message/MessageError.js rename to app/containers/message/MessageError.tsx index b3e3969a1..ed525fd78 100644 --- a/app/containers/message/MessageError.js +++ b/app/containers/message/MessageError.tsx @@ -1,5 +1,4 @@ import React, { useContext } from 'react'; -import PropTypes from 'prop-types'; import Touchable from './Touchable'; import { CustomIcon } from '../../lib/Icons'; @@ -8,7 +7,12 @@ import { BUTTON_HIT_SLOP } from './utils'; import { themes } from '../../constants/colors'; import MessageContext from './Context'; -const MessageError = React.memo(({ hasError, theme }) => { +interface IMessageError { + hasError: boolean; + theme: string; +} + +const MessageError = React.memo(({ hasError, theme }: IMessageError) => { if (!hasError) { return null; } @@ -20,10 +24,6 @@ const MessageError = React.memo(({ hasError, theme }) => { ); }, (prevProps, nextProps) => prevProps.hasError === nextProps.hasError && prevProps.theme === nextProps.theme); -MessageError.propTypes = { - hasError: PropTypes.bool, - theme: PropTypes.string -}; MessageError.displayName = 'MessageError'; export default MessageError; diff --git a/app/containers/message/ReadReceipt.js b/app/containers/message/ReadReceipt.tsx similarity index 74% rename from app/containers/message/ReadReceipt.js rename to app/containers/message/ReadReceipt.tsx index 5ca392f6d..8a5298eea 100644 --- a/app/containers/message/ReadReceipt.js +++ b/app/containers/message/ReadReceipt.tsx @@ -1,11 +1,16 @@ import React from 'react'; -import PropTypes from 'prop-types'; import { themes } from '../../constants/colors'; import { CustomIcon } from '../../lib/Icons'; import styles from './styles'; -const ReadReceipt = React.memo(({ isReadReceiptEnabled, unread, theme }) => { +interface IMessageReadReceipt { + isReadReceiptEnabled: boolean; + unread: boolean; + theme: string; +} + +const ReadReceipt = React.memo(({ isReadReceiptEnabled, unread, theme }: IMessageReadReceipt) => { if (isReadReceiptEnabled && !unread && unread !== null) { return ; } @@ -13,10 +18,4 @@ const ReadReceipt = React.memo(({ isReadReceiptEnabled, unread, theme }) => { }); ReadReceipt.displayName = 'MessageReadReceipt'; -ReadReceipt.propTypes = { - isReadReceiptEnabled: PropTypes.bool, - unread: PropTypes.bool, - theme: PropTypes.bool -}; - export default ReadReceipt; diff --git a/app/containers/message/RepliedThread.js b/app/containers/message/RepliedThread.tsx similarity index 83% rename from app/containers/message/RepliedThread.js rename to app/containers/message/RepliedThread.tsx index 46be5b1f6..d91c3f008 100644 --- a/app/containers/message/RepliedThread.js +++ b/app/containers/message/RepliedThread.tsx @@ -1,6 +1,5 @@ import React, { memo, useEffect, useState } from 'react'; import { View } from 'react-native'; -import PropTypes from 'prop-types'; import { CustomIcon } from '../../lib/Icons'; import styles from './styles'; @@ -8,9 +7,19 @@ import { themes } from '../../constants/colors'; import I18n from '../../i18n'; import Markdown from '../markdown'; +interface IMessageRepliedThread { + tmid: string; + tmsg: string; + id: string; + isHeader: boolean; + theme: string; + fetchThreadName: Function; + isEncrypted: boolean; +} + const RepliedThread = memo(({ tmid, tmsg, isHeader, fetchThreadName, id, isEncrypted, theme -}) => { +}: IMessageRepliedThread) => { if (!tmid || !isHeader) { return null; } @@ -34,6 +43,7 @@ const RepliedThread = memo(({ return ( + {/*@ts-ignore*/} { +interface IMessageThread { + msg: string; + tcount: number; + theme: string; + tlm: string; + isThreadRoom: boolean; + id: string; +} + +const Thread = React.memo(({ msg, tcount, tlm, isThreadRoom, theme, id }: IMessageThread) => { if (!tlm || isThreadRoom || tcount === 0) { return null; } @@ -50,14 +56,6 @@ const Thread = React.memo(({ return true; }); -Thread.propTypes = { - msg: PropTypes.string, - tcount: PropTypes.string, - theme: PropTypes.string, - tlm: PropTypes.string, - isThreadRoom: PropTypes.bool, - id: PropTypes.string -}; Thread.displayName = 'MessageThread'; export default Thread; diff --git a/app/containers/message/Urls.js b/app/containers/message/Urls.tsx similarity index 82% rename from app/containers/message/Urls.js rename to app/containers/message/Urls.tsx index b82d029af..0e9ab765b 100644 --- a/app/containers/message/Urls.js +++ b/app/containers/message/Urls.tsx @@ -1,8 +1,5 @@ import React, { useContext } from 'react'; -import { - View, Text, StyleSheet, Clipboard -} from 'react-native'; -import PropTypes from 'prop-types'; +import { View, Text, StyleSheet, Clipboard } from 'react-native'; import FastImage from '@rocket.chat/react-native-fast-image'; import { dequal } from 'dequal'; @@ -52,7 +49,30 @@ const styles = StyleSheet.create({ } }); -const UrlImage = React.memo(({ image }) => { +type TMessageUrlContent = { + title: string; + description: string; + theme: string; +}; + +type TMessageUrl = { + url: { + ignoreParse: boolean; + url: string; + image: string; + title: string; + description: string; + }; + index: number; + theme: string; +}; + +interface IMessageUrls { + urls: any; + theme: string; +} + +const UrlImage = React.memo(({ image }: {image: string}) => { if (!image) { return null; } @@ -61,7 +81,7 @@ const UrlImage = React.memo(({ image }) => { return ; }, (prevProps, nextProps) => prevProps.image === nextProps.image); -const UrlContent = React.memo(({ title, description, theme }) => ( +const UrlContent = React.memo(({ title, description, theme }: TMessageUrlContent) => ( {title ? {title} : null} {description ? {description} : null} @@ -79,7 +99,7 @@ const UrlContent = React.memo(({ title, description, theme }) => ( return true; }); -const Url = React.memo(({ url, index, theme }) => { +const Url = React.memo(({ url, index, theme }: TMessageUrl) => { if (!url || url?.ignoreParse) { return null; } @@ -114,39 +134,19 @@ const Url = React.memo(({ url, index, theme }) => { ); }, (oldProps, newProps) => dequal(oldProps.url, newProps.url) && oldProps.theme === newProps.theme); -const Urls = React.memo(({ urls, theme }) => { +const Urls = React.memo(({ urls, theme }: IMessageUrls) => { if (!urls || urls.length === 0) { return null; } - return urls.map((url, index) => ( + return urls.map((url: any, index: number) => ( )); }, (oldProps, newProps) => dequal(oldProps.urls, newProps.urls) && oldProps.theme === newProps.theme); -UrlImage.propTypes = { - image: PropTypes.string -}; UrlImage.displayName = 'MessageUrlImage'; - -UrlContent.propTypes = { - title: PropTypes.string, - description: PropTypes.string, - theme: PropTypes.string -}; UrlContent.displayName = 'MessageUrlContent'; - -Url.propTypes = { - url: PropTypes.object.isRequired, - index: PropTypes.number, - theme: PropTypes.string -}; Url.displayName = 'MessageUrl'; - -Urls.propTypes = { - urls: PropTypes.array, - theme: PropTypes.string -}; Urls.displayName = 'MessageUrls'; export default withTheme(Urls); diff --git a/app/containers/message/User.js b/app/containers/message/User.tsx similarity index 84% rename from app/containers/message/User.js rename to app/containers/message/User.tsx index 98b449849..14c86a414 100644 --- a/app/containers/message/User.js +++ b/app/containers/message/User.tsx @@ -1,8 +1,5 @@ import React, { useContext } from 'react'; -import PropTypes from 'prop-types'; -import { - View, Text, StyleSheet, TouchableOpacity -} from 'react-native'; +import { View, Text, StyleSheet, TouchableOpacity } from 'react-native'; import moment from 'moment'; import { themes } from '../../constants/colors'; @@ -41,9 +38,26 @@ const styles = StyleSheet.create({ } }); +interface IMessageUser { + isHeader: boolean; + hasError: boolean; + useRealName: boolean; + author: { + _id: string; + name: string; + username: string; + }; + alias: string; + ts: Date; + timeFormat: string; + theme: string; + navToRoomInfo: Function; + type: string; +} + const User = React.memo(({ isHeader, useRealName, author, alias, ts, timeFormat, hasError, theme, navToRoomInfo, type, ...props -}) => { +}: IMessageUser) => { if (isHeader || hasError) { const navParam = { t: 'd', @@ -68,6 +82,7 @@ const User = React.memo(({ {textContent} @@ -94,18 +109,6 @@ const User = React.memo(({ return null; }); -User.propTypes = { - isHeader: PropTypes.bool, - hasError: PropTypes.bool, - useRealName: PropTypes.bool, - author: PropTypes.object, - alias: PropTypes.string, - ts: PropTypes.instanceOf(Date), - timeFormat: PropTypes.string, - theme: PropTypes.string, - navToRoomInfo: PropTypes.func, - type: PropTypes.string -}; User.displayName = 'MessageUser'; export default withTheme(User); diff --git a/app/containers/message/Video.js b/app/containers/message/Video.tsx similarity index 81% rename from app/containers/message/Video.js rename to app/containers/message/Video.tsx index fed0c67f2..93a534278 100644 --- a/app/containers/message/Video.js +++ b/app/containers/message/Video.tsx @@ -1,5 +1,4 @@ import React, { useContext } from 'react'; -import PropTypes from 'prop-types'; import { StyleSheet } from 'react-native'; import { dequal } from 'dequal'; @@ -13,7 +12,7 @@ import { themes } from '../../constants/colors'; import MessageContext from './Context'; const SUPPORTED_TYPES = ['video/quicktime', 'video/mp4', ...(isIOS ? [] : ['video/3gp', 'video/mkv'])]; -const isTypeSupported = type => SUPPORTED_TYPES.indexOf(type) !== -1; +const isTypeSupported = (type: any) => SUPPORTED_TYPES.indexOf(type) !== -1; const styles = StyleSheet.create({ button: { @@ -26,9 +25,18 @@ const styles = StyleSheet.create({ } }); -const Video = React.memo(({ - file, showAttachment, getCustomEmoji, theme -}) => { +interface IMessageVideo { + file: { + video_type: string; + video_url: string; + description: string; + }; + showAttachment: Function; + getCustomEmoji: Function; + theme: string; +} + +const Video = React.memo(({ file, showAttachment, getCustomEmoji, theme }: IMessageVideo) => { const { baseUrl, user } = useContext(MessageContext); if (!baseUrl) { return null; @@ -54,16 +62,10 @@ const Video = React.memo(({ color={themes[theme].buttonText} /> + {/*@ts-ignore*/} ); }, (prevProps, nextProps) => dequal(prevProps.file, nextProps.file) && prevProps.theme === nextProps.theme); -Video.propTypes = { - file: PropTypes.object, - showAttachment: PropTypes.func, - getCustomEmoji: PropTypes.func, - theme: PropTypes.string -}; - export default Video;