From 19ea9355f87864b88d0111f20443fa61960383b9 Mon Sep 17 00:00:00 2001 From: Ishpaul Singh Date: Thu, 4 Jan 2024 20:33:36 +0530 Subject: [PATCH 01/18] migration v1 --- src/components/Avatar.tsx | 1 + .../CellRendererComponent.tsx | 4 +- ...agment.js => ReportActionItemFragment.tsx} | 138 ++++++++---------- .../home/report/ReportActionItemMessage.tsx | 10 +- .../home/report/ReportActionItemSingle.tsx | 2 +- ...gment.js => AttachmentCommentFragment.tsx} | 19 +-- .../home/report/comment/RenderCommentHTML.js | 23 --- .../home/report/comment/RenderCommentHTML.tsx | 18 +++ ...entFragment.js => TextCommentFragment.tsx} | 62 ++++---- src/types/onyx/OriginalMessage.ts | 1 + 10 files changed, 121 insertions(+), 157 deletions(-) rename src/pages/home/report/{ReportActionItemFragment.js => ReportActionItemFragment.tsx} (50%) rename src/pages/home/report/comment/{AttachmentCommentFragment.js => AttachmentCommentFragment.tsx} (55%) delete mode 100644 src/pages/home/report/comment/RenderCommentHTML.js create mode 100644 src/pages/home/report/comment/RenderCommentHTML.tsx rename src/pages/home/report/comment/{TextCommentFragment.js => TextCommentFragment.tsx} (67%) diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx index 65b0b6c36061..6b0590d57e83 100644 --- a/src/components/Avatar.tsx +++ b/src/components/Avatar.tsx @@ -123,3 +123,4 @@ function Avatar({ Avatar.displayName = 'Avatar'; export default Avatar; +export {type AvatarProps}; diff --git a/src/components/InvertedFlatList/CellRendererComponent.tsx b/src/components/InvertedFlatList/CellRendererComponent.tsx index 252d47989064..60f54ead13c5 100644 --- a/src/components/InvertedFlatList/CellRendererComponent.tsx +++ b/src/components/InvertedFlatList/CellRendererComponent.tsx @@ -1,9 +1,9 @@ import React from 'react'; -import {StyleProp, View, ViewProps} from 'react-native'; +import {StyleProp, View, ViewProps, ViewStyle} from 'react-native'; type CellRendererComponentProps = ViewProps & { index: number; - style?: StyleProp; + style?: StyleProp; }; function CellRendererComponent(props: CellRendererComponentProps) { diff --git a/src/pages/home/report/ReportActionItemFragment.js b/src/pages/home/report/ReportActionItemFragment.tsx similarity index 50% rename from src/pages/home/report/ReportActionItemFragment.js rename to src/pages/home/report/ReportActionItemFragment.tsx index f05b3decc6d7..a72d91ddcbbb 100644 --- a/src/pages/home/report/ReportActionItemFragment.js +++ b/src/pages/home/report/ReportActionItemFragment.tsx @@ -1,101 +1,83 @@ -import PropTypes from 'prop-types'; import React, {memo} from 'react'; -import avatarPropTypes from '@components/avatarPropTypes'; -import {withNetwork} from '@components/OnyxProvider'; +import {StyleProp, TextStyle} from 'react-native'; +import type {AvatarProps} from '@components/Avatar'; import RenderHTML from '@components/RenderHTML'; import Text from '@components/Text'; import UserDetailsTooltip from '@components/UserDetailsTooltip'; -import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; -import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions'; +import useLocalize from '@hooks/useLocalize'; +import useNetwork from '@hooks/useNetwork'; import useThemeStyles from '@hooks/useThemeStyles'; -import compose from '@libs/compose'; import convertToLTR from '@libs/convertToLTR'; import * as ReportUtils from '@libs/ReportUtils'; import CONST from '@src/CONST'; +import * as OnyxCommon from '@src/types/onyx/OnyxCommon'; +import type {OriginalMessageSource} from '@src/types/onyx/OriginalMessage'; +import type {Message} from '@src/types/onyx/ReportAction'; +import {EmptyObject} from '@src/types/utils/EmptyObject'; import AttachmentCommentFragment from './comment/AttachmentCommentFragment'; import TextCommentFragment from './comment/TextCommentFragment'; -import reportActionFragmentPropTypes from './reportActionFragmentPropTypes'; -const propTypes = { +type ReportActionItemFragmentProps = { /** Users accountID */ - accountID: PropTypes.number.isRequired, + accountID: number; /** The message fragment needing to be displayed */ - fragment: reportActionFragmentPropTypes.isRequired, + fragment: Message; /** If this fragment is attachment than has info? */ - attachmentInfo: PropTypes.shape({ - /** The file name of attachment */ - name: PropTypes.string, - - /** The file size of the attachment in bytes. */ - size: PropTypes.number, - - /** The MIME type of the attachment. */ - type: PropTypes.string, - - /** Attachment's URL represents the specified File object or Blob object */ - source: PropTypes.string, - }), + attachmentInfo?: EmptyObject | File; /** Message(text) of an IOU report action */ - iouMessage: PropTypes.string, + iouMessage?: string; /** The reportAction's source */ - source: PropTypes.oneOf(['Chronos', 'email', 'ios', 'android', 'web', 'email', '']), + source: OriginalMessageSource; /** Should this fragment be contained in a single line? */ - isSingleLine: PropTypes.bool, + isSingleLine?: boolean; - // Additional styles to add after local styles - style: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]), + /** Additional styles to add after local styles */ + style?: StyleProp; /** The accountID of the copilot who took this action on behalf of the user */ - delegateAccountID: PropTypes.number, + delegateAccountID?: string; /** icon */ - actorIcon: avatarPropTypes, + actorIcon?: AvatarProps; /** Whether the comment is a thread parent message/the first message in a thread */ - isThreadParentMessage: PropTypes.bool, + isThreadParentMessage?: boolean; /** Should the comment have the appearance of being grouped with the previous comment? */ - displayAsGroup: PropTypes.bool, + displayAsGroup?: boolean; /** Whether the report action type is 'APPROVED' or 'SUBMITTED'. Used to style system messages from Old Dot */ - isApprovedOrSubmittedReportAction: PropTypes.bool, + isApprovedOrSubmittedReportAction?: boolean; /** Used to format RTL display names in Old Dot system messages e.g. Arabic */ - isFragmentContainingDisplayName: PropTypes.bool, - - ...windowDimensionsPropTypes, - - /** localization props */ - ...withLocalizePropTypes, -}; + isFragmentContainingDisplayName?: boolean; -const defaultProps = { - attachmentInfo: { - name: '', - size: 0, - type: '', - source: '', - }, - iouMessage: '', - isSingleLine: false, - source: '', - style: [], - delegateAccountID: 0, - actorIcon: {}, - isThreadParentMessage: false, - isApprovedOrSubmittedReportAction: false, - isFragmentContainingDisplayName: false, - displayAsGroup: false, + /** The pending action for the report action */ + pendingAction?: OnyxCommon.PendingAction; }; -function ReportActionItemFragment(props) { +function ReportActionItemFragment({ + iouMessage = '', + isSingleLine = false, + source = '', + style = [], + delegateAccountID = '', + actorIcon = {}, + isThreadParentMessage = false, + isApprovedOrSubmittedReportAction = false, + isFragmentContainingDisplayName = false, + displayAsGroup = false, + ...props +}: ReportActionItemFragmentProps) { const styles = useThemeStyles(); - const fragment = props.fragment; + const {fragment} = props; + const {isOffline} = useNetwork(); + const {translate} = useLocalize(); switch (fragment.type) { case 'COMMENT': { @@ -105,48 +87,48 @@ function ReportActionItemFragment(props) { // While offline we display the previous message with a strikethrough style. Once online we want to // immediately display "[Deleted message]" while the delete action is pending. - if ((!props.network.isOffline && props.isThreadParentMessage && isPendingDelete) || props.fragment.isDeletedParentAction) { - return ${props.translate('parentReportAction.deletedMessage')}`} />; + if ((!isOffline && isThreadParentMessage && isPendingDelete) || props.fragment.isDeletedParentAction) { + return ${translate('parentReportAction.deletedMessage')}`} />; } if (ReportUtils.isReportMessageAttachment(fragment)) { return ( ); } return ( ); } case 'TEXT': { - return props.isApprovedOrSubmittedReportAction ? ( + return isApprovedOrSubmittedReportAction ? ( - {props.isFragmentContainingDisplayName ? convertToLTR(props.fragment.text) : props.fragment.text} + {isFragmentContainingDisplayName ? convertToLTR(props.fragment.text) : props.fragment.text} ) : ( {fragment.text} @@ -172,8 +154,6 @@ function ReportActionItemFragment(props) { } } -ReportActionItemFragment.propTypes = propTypes; -ReportActionItemFragment.defaultProps = defaultProps; ReportActionItemFragment.displayName = 'ReportActionItemFragment'; -export default compose(withWindowDimensions, withLocalize, withNetwork())(memo(ReportActionItemFragment)); +export default memo(ReportActionItemFragment); diff --git a/src/pages/home/report/ReportActionItemMessage.tsx b/src/pages/home/report/ReportActionItemMessage.tsx index 89d0aaa1523b..80639fcb1123 100644 --- a/src/pages/home/report/ReportActionItemMessage.tsx +++ b/src/pages/home/report/ReportActionItemMessage.tsx @@ -1,12 +1,12 @@ import React, {ReactElement} from 'react'; -import {StyleProp, Text, View, ViewStyle} from 'react-native'; +import {StyleProp, Text, TextStyle, View, ViewStyle} from 'react-native'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import * as ReportActionsUtils from '@libs/ReportActionsUtils'; import * as ReportUtils from '@libs/ReportUtils'; import CONST from '@src/CONST'; import type {ReportAction} from '@src/types/onyx'; -import type {OriginalMessageAddComment} from '@src/types/onyx/OriginalMessage'; +import type {OriginalMessageSource} from '@src/types/onyx/OriginalMessage'; import TextCommentFragment from './comment/TextCommentFragment'; import ReportActionItemFragment from './ReportActionItemFragment'; @@ -18,7 +18,7 @@ type ReportActionItemMessageProps = { displayAsGroup: boolean; /** Additional styles to add after local styles. */ - style?: StyleProp; + style?: StyleProp | StyleProp; /** Whether or not the message is hidden by moderation */ isHidden?: boolean; @@ -74,8 +74,8 @@ function ReportActionItemMessage({action, displayAsGroup, reportID, style, isHid isThreadParentMessage={ReportActionsUtils.isThreadParentMessage(action, reportID)} attachmentInfo={action.attachmentInfo} pendingAction={action.pendingAction} - source={(action.originalMessage as OriginalMessageAddComment['originalMessage'])?.source} - accountID={action.actorAccountID} + source={action.originalMessage as OriginalMessageSource} + accountID={action.actorAccountID ?? 0} style={style} displayAsGroup={displayAsGroup} isApprovedOrSubmittedReportAction={isApprovedOrSubmittedReportAction} diff --git a/src/pages/home/report/ReportActionItemSingle.tsx b/src/pages/home/report/ReportActionItemSingle.tsx index 69bbd924caef..340767441e97 100644 --- a/src/pages/home/report/ReportActionItemSingle.tsx +++ b/src/pages/home/report/ReportActionItemSingle.tsx @@ -256,7 +256,7 @@ function ReportActionItemSingle({ @@ -28,7 +22,6 @@ function AttachmentCommentFragment({addExtraMargin, html, source}) { ); } -AttachmentCommentFragment.propTypes = propTypes; AttachmentCommentFragment.displayName = 'AttachmentCommentFragment'; export default AttachmentCommentFragment; diff --git a/src/pages/home/report/comment/RenderCommentHTML.js b/src/pages/home/report/comment/RenderCommentHTML.js deleted file mode 100644 index 14039af21189..000000000000 --- a/src/pages/home/report/comment/RenderCommentHTML.js +++ /dev/null @@ -1,23 +0,0 @@ -import PropTypes from 'prop-types'; -import React from 'react'; -import RenderHTML from '@components/RenderHTML'; -import reportActionSourcePropType from '@pages/home/report/reportActionSourcePropType'; - -const propTypes = { - /** The reportAction's source */ - source: reportActionSourcePropType.isRequired, - - /** The comment's HTML */ - html: PropTypes.string.isRequired, -}; - -function RenderCommentHTML({html, source}) { - const commentHtml = source === 'email' ? `${html}` : `${html}`; - - return ; -} - -RenderCommentHTML.propTypes = propTypes; -RenderCommentHTML.displayName = 'RenderCommentHTML'; - -export default RenderCommentHTML; diff --git a/src/pages/home/report/comment/RenderCommentHTML.tsx b/src/pages/home/report/comment/RenderCommentHTML.tsx new file mode 100644 index 000000000000..e730ae061519 --- /dev/null +++ b/src/pages/home/report/comment/RenderCommentHTML.tsx @@ -0,0 +1,18 @@ +import React from 'react'; +import RenderHTML from '@components/RenderHTML'; +import type {OriginalMessageSource} from '@src/types/onyx/OriginalMessage'; + +type RenderCommentHTMLProps = { + source: OriginalMessageSource; + html: string; +}; + +function RenderCommentHTML({html, source}: RenderCommentHTMLProps) { + const commentHtml = source === 'email' ? `${html}` : `${html}`; + + return ; +} + +RenderCommentHTML.displayName = 'RenderCommentHTML'; + +export default RenderCommentHTML; diff --git a/src/pages/home/report/comment/TextCommentFragment.js b/src/pages/home/report/comment/TextCommentFragment.tsx similarity index 67% rename from src/pages/home/report/comment/TextCommentFragment.js rename to src/pages/home/report/comment/TextCommentFragment.tsx index 3d6482344450..3b92c0f6a118 100644 --- a/src/pages/home/report/comment/TextCommentFragment.js +++ b/src/pages/home/report/comment/TextCommentFragment.tsx @@ -1,56 +1,49 @@ import Str from 'expensify-common/lib/str'; -import PropTypes from 'prop-types'; +import {isEmpty} from 'lodash'; import React, {memo} from 'react'; +import {type StyleProp, type TextStyle} from 'react-native'; import Text from '@components/Text'; -import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; -import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions'; import ZeroWidthView from '@components/ZeroWidthView'; +import useLocalize from '@hooks/useLocalize'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; -import compose from '@libs/compose'; +import useWindowDimensions from '@hooks/useWindowDimensions'; import convertToLTR from '@libs/convertToLTR'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; import * as EmojiUtils from '@libs/EmojiUtils'; -import reportActionFragmentPropTypes from '@pages/home/report/reportActionFragmentPropTypes'; -import reportActionSourcePropType from '@pages/home/report/reportActionSourcePropType'; import variables from '@styles/variables'; import CONST from '@src/CONST'; +import type {OriginalMessageSource} from '@src/types/onyx/OriginalMessage'; +import type {Message} from '@src/types/onyx/ReportAction'; import RenderCommentHTML from './RenderCommentHTML'; -const propTypes = { +type TextCommentFragmentProps = { /** The reportAction's source */ - source: reportActionSourcePropType.isRequired, + source: OriginalMessageSource; /** The message fragment needing to be displayed */ - fragment: reportActionFragmentPropTypes.isRequired, + fragment: Message; /** Should this message fragment be styled as deleted? */ - styleAsDeleted: PropTypes.bool.isRequired, - - /** Text of an IOU report action */ - iouMessage: PropTypes.string, + styleAsDeleted: boolean; /** Should the comment have the appearance of being grouped with the previous comment? */ - displayAsGroup: PropTypes.bool.isRequired, + displayAsGroup: boolean; /** Additional styles to add after local styles. */ - style: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]).isRequired, + style: StyleProp; - ...windowDimensionsPropTypes, - - /** localization props */ - ...withLocalizePropTypes, -}; - -const defaultProps = { - iouMessage: undefined, + /** Text of an IOU report action */ + iouMessage?: string; }; -function TextCommentFragment(props) { +function TextCommentFragment({iouMessage = '', ...props}: TextCommentFragmentProps) { const theme = useTheme(); const styles = useThemeStyles(); const {fragment, styleAsDeleted} = props; - const {html, text} = fragment; + const {html = '', text} = fragment; + const {translate} = useLocalize(); + const {isSmallScreenWidth} = useWindowDimensions(); // If the only difference between fragment.text and fragment.html is
tags // we render it as text, not as html. @@ -72,10 +65,13 @@ function TextCommentFragment(props) { ); } + const propsStyle = Array.isArray(props.style) ? props.style : [props.style]; + const containsOnlyEmojis = EmojiUtils.containsOnlyEmojis(text); + const message = isEmpty(iouMessage) ? text : iouMessage; return ( - + - {convertToLTR(props.iouMessage || text)} + {convertToLTR(message)} {Boolean(fragment.isEdited) && ( <> @@ -102,9 +98,9 @@ function TextCommentFragment(props) { - {props.translate('reportActionCompose.edited')} + {translate('reportActionCompose.edited')} )} @@ -112,8 +108,6 @@ function TextCommentFragment(props) { ); } -TextCommentFragment.propTypes = propTypes; -TextCommentFragment.defaultProps = defaultProps; TextCommentFragment.displayName = 'TextCommentFragment'; -export default compose(withWindowDimensions, withLocalize)(memo(TextCommentFragment)); +export default memo(TextCommentFragment); diff --git a/src/types/onyx/OriginalMessage.ts b/src/types/onyx/OriginalMessage.ts index 767f724dd571..f301dc619fb7 100644 --- a/src/types/onyx/OriginalMessage.ts +++ b/src/types/onyx/OriginalMessage.ts @@ -266,4 +266,5 @@ export type { OriginalMessageIOU, OriginalMessageCreated, OriginalMessageAddComment, + OriginalMessageSource, }; From 3e83b4437baaa5b88bc5e0acba6c23c71dc5178f Mon Sep 17 00:00:00 2001 From: Ishpaul Singh Date: Thu, 4 Jan 2024 20:36:25 +0530 Subject: [PATCH 02/18] clean up --- src/pages/home/report/ReportActionItemMessage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportActionItemMessage.tsx b/src/pages/home/report/ReportActionItemMessage.tsx index 80639fcb1123..41b18cbba15c 100644 --- a/src/pages/home/report/ReportActionItemMessage.tsx +++ b/src/pages/home/report/ReportActionItemMessage.tsx @@ -18,7 +18,7 @@ type ReportActionItemMessageProps = { displayAsGroup: boolean; /** Additional styles to add after local styles. */ - style?: StyleProp | StyleProp; + style?: StyleProp; /** Whether or not the message is hidden by moderation */ isHidden?: boolean; From 073187e317a069e5c656a0ceb7f013be4b2a14df Mon Sep 17 00:00:00 2001 From: Ishpaul Singh Date: Thu, 4 Jan 2024 21:00:14 +0530 Subject: [PATCH 03/18] lint fix --- src/components/InvertedFlatList/CellRendererComponent.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/InvertedFlatList/CellRendererComponent.tsx b/src/components/InvertedFlatList/CellRendererComponent.tsx index 4beaa1d59129..16cb5bdfeba6 100644 --- a/src/components/InvertedFlatList/CellRendererComponent.tsx +++ b/src/components/InvertedFlatList/CellRendererComponent.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import type {StyleProp, ViewStyle} from 'react-native'; +import type {StyleProp, ViewStyle, ViewProps} from 'react-native'; import {View} from 'react-native'; From 3d74ec8c2325f469a46785948bd595cac19192bd Mon Sep 17 00:00:00 2001 From: Ishpaul Singh Date: Thu, 4 Jan 2024 21:02:48 +0530 Subject: [PATCH 04/18] lint fix --- src/components/InvertedFlatList/CellRendererComponent.tsx | 3 +-- src/pages/home/report/ReportActionItemFragment.tsx | 6 +++--- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/src/components/InvertedFlatList/CellRendererComponent.tsx b/src/components/InvertedFlatList/CellRendererComponent.tsx index 16cb5bdfeba6..1199fb2a594c 100644 --- a/src/components/InvertedFlatList/CellRendererComponent.tsx +++ b/src/components/InvertedFlatList/CellRendererComponent.tsx @@ -1,8 +1,7 @@ import React from 'react'; -import type {StyleProp, ViewStyle, ViewProps} from 'react-native'; +import type {StyleProp, ViewProps, ViewStyle} from 'react-native'; import {View} from 'react-native'; - type CellRendererComponentProps = ViewProps & { index: number; style?: StyleProp; diff --git a/src/pages/home/report/ReportActionItemFragment.tsx b/src/pages/home/report/ReportActionItemFragment.tsx index a72d91ddcbbb..a5cd8f4577e5 100644 --- a/src/pages/home/report/ReportActionItemFragment.tsx +++ b/src/pages/home/report/ReportActionItemFragment.tsx @@ -1,5 +1,5 @@ import React, {memo} from 'react'; -import {StyleProp, TextStyle} from 'react-native'; +import type {StyleProp, TextStyle} from 'react-native'; import type {AvatarProps} from '@components/Avatar'; import RenderHTML from '@components/RenderHTML'; import Text from '@components/Text'; @@ -10,10 +10,10 @@ import useThemeStyles from '@hooks/useThemeStyles'; import convertToLTR from '@libs/convertToLTR'; import * as ReportUtils from '@libs/ReportUtils'; import CONST from '@src/CONST'; -import * as OnyxCommon from '@src/types/onyx/OnyxCommon'; +import type * as OnyxCommon from '@src/types/onyx/OnyxCommon'; import type {OriginalMessageSource} from '@src/types/onyx/OriginalMessage'; import type {Message} from '@src/types/onyx/ReportAction'; -import {EmptyObject} from '@src/types/utils/EmptyObject'; +import type {EmptyObject} from '@src/types/utils/EmptyObject'; import AttachmentCommentFragment from './comment/AttachmentCommentFragment'; import TextCommentFragment from './comment/TextCommentFragment'; From ad6fe37fc7cee5eb2008f45995a4e09ac0de9bd2 Mon Sep 17 00:00:00 2001 From: Ishpaul Singh Date: Thu, 4 Jan 2024 21:08:56 +0530 Subject: [PATCH 05/18] type fix --- src/pages/home/report/ReportActionItemFragment.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/home/report/ReportActionItemFragment.tsx b/src/pages/home/report/ReportActionItemFragment.tsx index a5cd8f4577e5..6e9c6a581066 100644 --- a/src/pages/home/report/ReportActionItemFragment.tsx +++ b/src/pages/home/report/ReportActionItemFragment.tsx @@ -40,7 +40,7 @@ type ReportActionItemFragmentProps = { style?: StyleProp; /** The accountID of the copilot who took this action on behalf of the user */ - delegateAccountID?: string; + delegateAccountID?: number; /** icon */ actorIcon?: AvatarProps; @@ -66,7 +66,7 @@ function ReportActionItemFragment({ isSingleLine = false, source = '', style = [], - delegateAccountID = '', + delegateAccountID = 0, actorIcon = {}, isThreadParentMessage = false, isApprovedOrSubmittedReportAction = false, From 1f979ee695dd528d99ce4d7e3c774f66abc02c8a Mon Sep 17 00:00:00 2001 From: Ishpaul Singh Date: Thu, 4 Jan 2024 21:21:13 +0530 Subject: [PATCH 06/18] fix lint --- src/pages/home/report/comment/TextCommentFragment.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/report/comment/TextCommentFragment.tsx b/src/pages/home/report/comment/TextCommentFragment.tsx index 3b92c0f6a118..790b98f574b5 100644 --- a/src/pages/home/report/comment/TextCommentFragment.tsx +++ b/src/pages/home/report/comment/TextCommentFragment.tsx @@ -1,7 +1,7 @@ import Str from 'expensify-common/lib/str'; import {isEmpty} from 'lodash'; import React, {memo} from 'react'; -import {type StyleProp, type TextStyle} from 'react-native'; +import type {StyleProp, TextStyle} from 'react-native'; import Text from '@components/Text'; import ZeroWidthView from '@components/ZeroWidthView'; import useLocalize from '@hooks/useLocalize'; From 2fd6c4e9d275377598c346ec5cce526da98e2c84 Mon Sep 17 00:00:00 2001 From: Ishpaul Singh Date: Sat, 6 Jan 2024 08:48:09 +0530 Subject: [PATCH 07/18] adding requested chnages --- .../home/report/ReportActionItemFragment.tsx | 21 ++++++++----------- .../home/report/ReportActionItemMessage.tsx | 5 ++--- .../home/report/ReportActionItemSingle.tsx | 2 ++ .../report/comment/TextCommentFragment.tsx | 12 +++++------ src/types/onyx/ReportAction.ts | 6 +++--- 5 files changed, 21 insertions(+), 25 deletions(-) diff --git a/src/pages/home/report/ReportActionItemFragment.tsx b/src/pages/home/report/ReportActionItemFragment.tsx index 6e9c6a581066..2b8eeccd7a0a 100644 --- a/src/pages/home/report/ReportActionItemFragment.tsx +++ b/src/pages/home/report/ReportActionItemFragment.tsx @@ -13,7 +13,6 @@ import CONST from '@src/CONST'; import type * as OnyxCommon from '@src/types/onyx/OnyxCommon'; import type {OriginalMessageSource} from '@src/types/onyx/OriginalMessage'; import type {Message} from '@src/types/onyx/ReportAction'; -import type {EmptyObject} from '@src/types/utils/EmptyObject'; import AttachmentCommentFragment from './comment/AttachmentCommentFragment'; import TextCommentFragment from './comment/TextCommentFragment'; @@ -24,9 +23,6 @@ type ReportActionItemFragmentProps = { /** The message fragment needing to be displayed */ fragment: Message; - /** If this fragment is attachment than has info? */ - attachmentInfo?: EmptyObject | File; - /** Message(text) of an IOU report action */ iouMessage?: string; @@ -62,6 +58,9 @@ type ReportActionItemFragmentProps = { }; function ReportActionItemFragment({ + pendingAction, + fragment, + accountID, iouMessage = '', isSingleLine = false, source = '', @@ -72,22 +71,20 @@ function ReportActionItemFragment({ isApprovedOrSubmittedReportAction = false, isFragmentContainingDisplayName = false, displayAsGroup = false, - ...props }: ReportActionItemFragmentProps) { const styles = useThemeStyles(); - const {fragment} = props; const {isOffline} = useNetwork(); const {translate} = useLocalize(); switch (fragment.type) { case 'COMMENT': { - const isPendingDelete = props.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE; + const isPendingDelete = pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE; // Threaded messages display "[Deleted message]" instead of being hidden altogether. // While offline we display the previous message with a strikethrough style. Once online we want to // immediately display "[Deleted message]" while the delete action is pending. - if ((!isOffline && isThreadParentMessage && isPendingDelete) || props.fragment.isDeletedParentAction) { + if ((!isOffline && isThreadParentMessage && isPendingDelete) || fragment.isDeletedParentAction) { return ${translate('parentReportAction.deletedMessage')}`} />; } @@ -105,7 +102,7 @@ function ReportActionItemFragment({ - {isFragmentContainingDisplayName ? convertToLTR(props.fragment.text) : props.fragment.text} + {isFragmentContainingDisplayName ? convertToLTR(fragment.text) : fragment.text} ) : ( @@ -150,7 +147,7 @@ function ReportActionItemFragment({ case 'OLD_MESSAGE': return OLD_MESSAGE; default: - return props.fragment.text; + return fragment.text; } } diff --git a/src/pages/home/report/ReportActionItemMessage.tsx b/src/pages/home/report/ReportActionItemMessage.tsx index 0e7a63874bf5..0a0963f3d167 100644 --- a/src/pages/home/report/ReportActionItemMessage.tsx +++ b/src/pages/home/report/ReportActionItemMessage.tsx @@ -1,6 +1,6 @@ import type {ReactElement} from 'react'; import React from 'react'; -import type {StyleProp, ViewStyle} from 'react-native'; +import type {StyleProp, ViewStyle, TextStyle} from 'react-native'; import {Text, View} from 'react-native'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -20,7 +20,7 @@ type ReportActionItemMessageProps = { displayAsGroup: boolean; /** Additional styles to add after local styles. */ - style?: StyleProp; + style?: StyleProp; /** Whether or not the message is hidden by moderation */ isHidden?: boolean; @@ -74,7 +74,6 @@ function ReportActionItemMessage({action, displayAsGroup, reportID, style, isHid fragment={fragment} iouMessage={iouMessage} isThreadParentMessage={ReportActionsUtils.isThreadParentMessage(action, reportID)} - attachmentInfo={action.attachmentInfo} pendingAction={action.pendingAction} source={action.originalMessage as OriginalMessageSource} accountID={action.actorAccountID ?? 0} diff --git a/src/pages/home/report/ReportActionItemSingle.tsx b/src/pages/home/report/ReportActionItemSingle.tsx index c8083a3316bf..a35d50082d8d 100644 --- a/src/pages/home/report/ReportActionItemSingle.tsx +++ b/src/pages/home/report/ReportActionItemSingle.tsx @@ -266,3 +266,5 @@ function ReportActionItemSingle({ ReportActionItemSingle.displayName = 'ReportActionItemSingle'; export default ReportActionItemSingle; + + diff --git a/src/pages/home/report/comment/TextCommentFragment.tsx b/src/pages/home/report/comment/TextCommentFragment.tsx index 790b98f574b5..1725c5a1cef7 100644 --- a/src/pages/home/report/comment/TextCommentFragment.tsx +++ b/src/pages/home/report/comment/TextCommentFragment.tsx @@ -65,13 +65,11 @@ function TextCommentFragment({iouMessage = '', ...props}: TextCommentFragmentPro ); } - const propsStyle = Array.isArray(props.style) ? props.style : [props.style]; - const containsOnlyEmojis = EmojiUtils.containsOnlyEmojis(text); const message = isEmpty(iouMessage) ? text : iouMessage; return ( - + {convertToLTR(message)} - {Boolean(fragment.isEdited) && ( + {!!fragment.isEdited && ( <> {' '} @@ -98,7 +96,7 @@ function TextCommentFragment({iouMessage = '', ...props}: TextCommentFragmentPro {translate('reportActionCompose.edited')} diff --git a/src/types/onyx/ReportAction.ts b/src/types/onyx/ReportAction.ts index b727bc40ce93..3144333f04ca 100644 --- a/src/types/onyx/ReportAction.ts +++ b/src/types/onyx/ReportAction.ts @@ -90,9 +90,9 @@ type LinkMetadata = { }; type Person = { - type?: string; + type: string; style?: string; - text?: string; + text: string; }; type ReportActionBase = { @@ -201,4 +201,4 @@ type ReportAction = ReportActionBase & OriginalMessage; type ReportActions = Record; export default ReportAction; -export type {ReportActions, ReportActionBase, Message, LinkMetadata}; +export type {ReportActions, ReportActionBase, Message, LinkMetadata, Person}; From 4f6b75ba4c49e12f704e8f9d3e584d9c12f196d3 Mon Sep 17 00:00:00 2001 From: Ishpaul Singh Date: Sat, 6 Jan 2024 08:48:19 +0530 Subject: [PATCH 08/18] lint fix --- src/pages/home/report/ReportActionItemMessage.tsx | 2 +- src/pages/home/report/ReportActionItemSingle.tsx | 2 -- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/src/pages/home/report/ReportActionItemMessage.tsx b/src/pages/home/report/ReportActionItemMessage.tsx index 0a0963f3d167..3b5f53d69186 100644 --- a/src/pages/home/report/ReportActionItemMessage.tsx +++ b/src/pages/home/report/ReportActionItemMessage.tsx @@ -1,6 +1,6 @@ import type {ReactElement} from 'react'; import React from 'react'; -import type {StyleProp, ViewStyle, TextStyle} from 'react-native'; +import type {StyleProp, TextStyle, ViewStyle} from 'react-native'; import {Text, View} from 'react-native'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; diff --git a/src/pages/home/report/ReportActionItemSingle.tsx b/src/pages/home/report/ReportActionItemSingle.tsx index a35d50082d8d..c8083a3316bf 100644 --- a/src/pages/home/report/ReportActionItemSingle.tsx +++ b/src/pages/home/report/ReportActionItemSingle.tsx @@ -266,5 +266,3 @@ function ReportActionItemSingle({ ReportActionItemSingle.displayName = 'ReportActionItemSingle'; export default ReportActionItemSingle; - - From c41ebb3e182f7b1ad85ca23bbe9cbf11a22bef05 Mon Sep 17 00:00:00 2001 From: Ishpaul Singh Date: Sat, 6 Jan 2024 09:04:37 +0530 Subject: [PATCH 09/18] clean up --- .../home/report/comment/TextCommentFragment.tsx | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/src/pages/home/report/comment/TextCommentFragment.tsx b/src/pages/home/report/comment/TextCommentFragment.tsx index 1725c5a1cef7..7450dc14e6bf 100644 --- a/src/pages/home/report/comment/TextCommentFragment.tsx +++ b/src/pages/home/report/comment/TextCommentFragment.tsx @@ -37,10 +37,9 @@ type TextCommentFragmentProps = { iouMessage?: string; }; -function TextCommentFragment({iouMessage = '', ...props}: TextCommentFragmentProps) { +function TextCommentFragment({fragment, styleAsDeleted, source, style, displayAsGroup, iouMessage = ''}: TextCommentFragmentProps) { const theme = useTheme(); const styles = useThemeStyles(); - const {fragment, styleAsDeleted} = props; const {html = '', text} = fragment; const {translate} = useLocalize(); const {isSmallScreenWidth} = useWindowDimensions(); @@ -59,7 +58,7 @@ function TextCommentFragment({iouMessage = '', ...props}: TextCommentFragmentPro return ( ); @@ -69,16 +68,16 @@ function TextCommentFragment({iouMessage = '', ...props}: TextCommentFragmentPro const message = isEmpty(iouMessage) ? text : iouMessage; return ( - + {translate('reportActionCompose.edited')} From 9aeaff0c3add72399487fee8e72b834bb9de2170 Mon Sep 17 00:00:00 2001 From: Ishpaul Singh Date: Sat, 6 Jan 2024 09:29:31 +0530 Subject: [PATCH 10/18] fix unrelated type errors --- src/pages/home/report/ReportActionItemFragment.tsx | 2 +- src/pages/home/report/ReportActionItemSingle.tsx | 2 +- src/types/onyx/ReportAction.ts | 6 +++--- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/pages/home/report/ReportActionItemFragment.tsx b/src/pages/home/report/ReportActionItemFragment.tsx index 2b8eeccd7a0a..7f8664fa2c25 100644 --- a/src/pages/home/report/ReportActionItemFragment.tsx +++ b/src/pages/home/report/ReportActionItemFragment.tsx @@ -21,7 +21,7 @@ type ReportActionItemFragmentProps = { accountID: number; /** The message fragment needing to be displayed */ - fragment: Message; + fragment: Message, /** Message(text) of an IOU report action */ iouMessage?: string; diff --git a/src/pages/home/report/ReportActionItemSingle.tsx b/src/pages/home/report/ReportActionItemSingle.tsx index c8083a3316bf..924eccb3eaf4 100644 --- a/src/pages/home/report/ReportActionItemSingle.tsx +++ b/src/pages/home/report/ReportActionItemSingle.tsx @@ -239,7 +239,7 @@ function ReportActionItemSingle({ // eslint-disable-next-line react/no-array-index-key key={`person-${action.reportActionID}-${index}`} accountID={actorAccountID ?? 0} - fragment={fragment} + fragment={{...fragment, type: fragment.type ?? '', text: fragment.text ?? ''}} delegateAccountID={action.delegateAccountID} isSingleLine actorIcon={icon} diff --git a/src/types/onyx/ReportAction.ts b/src/types/onyx/ReportAction.ts index 3144333f04ca..b727bc40ce93 100644 --- a/src/types/onyx/ReportAction.ts +++ b/src/types/onyx/ReportAction.ts @@ -90,9 +90,9 @@ type LinkMetadata = { }; type Person = { - type: string; + type?: string; style?: string; - text: string; + text?: string; }; type ReportActionBase = { @@ -201,4 +201,4 @@ type ReportAction = ReportActionBase & OriginalMessage; type ReportActions = Record; export default ReportAction; -export type {ReportActions, ReportActionBase, Message, LinkMetadata, Person}; +export type {ReportActions, ReportActionBase, Message, LinkMetadata}; From 0bc89aa7e76d567d24558c20bbc775028b6566c1 Mon Sep 17 00:00:00 2001 From: Ishpaul Singh Date: Sat, 6 Jan 2024 09:30:22 +0530 Subject: [PATCH 11/18] fix lint --- src/pages/home/report/ReportActionItemFragment.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportActionItemFragment.tsx b/src/pages/home/report/ReportActionItemFragment.tsx index 7f8664fa2c25..2b8eeccd7a0a 100644 --- a/src/pages/home/report/ReportActionItemFragment.tsx +++ b/src/pages/home/report/ReportActionItemFragment.tsx @@ -21,7 +21,7 @@ type ReportActionItemFragmentProps = { accountID: number; /** The message fragment needing to be displayed */ - fragment: Message, + fragment: Message; /** Message(text) of an IOU report action */ iouMessage?: string; From e1a546f1d68f4258753f09351532da81787278ee Mon Sep 17 00:00:00 2001 From: Ishpaul Singh Date: Mon, 8 Jan 2024 15:53:38 +0530 Subject: [PATCH 12/18] fix type errors --- src/pages/home/report/ReportActionItemFragment.tsx | 2 +- src/pages/home/report/ReportActionItemSingle.tsx | 2 +- src/types/onyx/ReportAction.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/home/report/ReportActionItemFragment.tsx b/src/pages/home/report/ReportActionItemFragment.tsx index 2b8eeccd7a0a..01918b377c62 100644 --- a/src/pages/home/report/ReportActionItemFragment.tsx +++ b/src/pages/home/report/ReportActionItemFragment.tsx @@ -27,7 +27,7 @@ type ReportActionItemFragmentProps = { iouMessage?: string; /** The reportAction's source */ - source: OriginalMessageSource; + source?: OriginalMessageSource; /** Should this fragment be contained in a single line? */ isSingleLine?: boolean; diff --git a/src/pages/home/report/ReportActionItemSingle.tsx b/src/pages/home/report/ReportActionItemSingle.tsx index 924eccb3eaf4..3da16bda8331 100644 --- a/src/pages/home/report/ReportActionItemSingle.tsx +++ b/src/pages/home/report/ReportActionItemSingle.tsx @@ -155,7 +155,7 @@ function ReportActionItemSingle({ Navigation.navigate(ROUTES.REPORT_PARTICIPANTS.getRoute(iouReportID)); return; } - showUserDetails(action.delegateAccountID ? action.delegateAccountID : String(actorAccountID)); + showUserDetails(action.delegateAccountID ? String(action.delegateAccountID) : String(actorAccountID)); } }, [isWorkspaceActor, reportID, actorAccountID, action.delegateAccountID, iouReportID, displayAllActors]); diff --git a/src/types/onyx/ReportAction.ts b/src/types/onyx/ReportAction.ts index b727bc40ce93..39c6136ecea2 100644 --- a/src/types/onyx/ReportAction.ts +++ b/src/types/onyx/ReportAction.ts @@ -172,7 +172,7 @@ type ReportActionBase = { /** Is this action pending? */ pendingAction?: OnyxCommon.PendingAction; - delegateAccountID?: string; + delegateAccountID?: number; /** Server side errors keyed by microtime */ errors?: OnyxCommon.Errors; From 2e692714fd903ee985006d3476e8112d23e10ec6 Mon Sep 17 00:00:00 2001 From: Ishpaul Singh Date: Mon, 8 Jan 2024 15:56:54 +0530 Subject: [PATCH 13/18] fix broken test case --- tests/utils/collections/reportActions.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/utils/collections/reportActions.ts b/tests/utils/collections/reportActions.ts index 747cbe5b6a1a..cc258e89c041 100644 --- a/tests/utils/collections/reportActions.ts +++ b/tests/utils/collections/reportActions.ts @@ -65,7 +65,7 @@ export default function createRandomReportAction(index: number): ReportAction { shouldShow: randBoolean(), lastModified: randPastDate().toISOString(), pendingAction: rand(Object.values(CONST.RED_BRICK_ROAD_PENDING_ACTION)), - delegateAccountID: index.toString(), + delegateAccountID: index, errors: {}, isAttachment: randBoolean(), }; From 15e2ecd4c705479166e7ebb74ffdc50a3bd85adb Mon Sep 17 00:00:00 2001 From: Ishpaul Singh Date: Mon, 8 Jan 2024 16:07:32 +0530 Subject: [PATCH 14/18] fix prettier diffs --- src/pages/home/report/ReportActionItemSingle.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportActionItemSingle.tsx b/src/pages/home/report/ReportActionItemSingle.tsx index 3da16bda8331..ae5c3d75cfff 100644 --- a/src/pages/home/report/ReportActionItemSingle.tsx +++ b/src/pages/home/report/ReportActionItemSingle.tsx @@ -155,7 +155,7 @@ function ReportActionItemSingle({ Navigation.navigate(ROUTES.REPORT_PARTICIPANTS.getRoute(iouReportID)); return; } - showUserDetails(action.delegateAccountID ? String(action.delegateAccountID) : String(actorAccountID)); + showUserDetails(action.delegateAccountID ? String(action.delegateAccountID) : String(actorAccountID)); } }, [isWorkspaceActor, reportID, actorAccountID, action.delegateAccountID, iouReportID, displayAllActors]); From c5d8c4138094a39eb0ba600fdf88cfea0ff7da49 Mon Sep 17 00:00:00 2001 From: Ishpaul Singh <104348397+ishpaul777@users.noreply.github.com> Date: Tue, 9 Jan 2024 21:05:41 +0530 Subject: [PATCH 15/18] remove default prop iouMessage MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Błażej Kustra <46095609+blazejkustra@users.noreply.github.com> --- src/pages/home/report/comment/TextCommentFragment.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/report/comment/TextCommentFragment.tsx b/src/pages/home/report/comment/TextCommentFragment.tsx index 7450dc14e6bf..763f8d2c143c 100644 --- a/src/pages/home/report/comment/TextCommentFragment.tsx +++ b/src/pages/home/report/comment/TextCommentFragment.tsx @@ -37,7 +37,7 @@ type TextCommentFragmentProps = { iouMessage?: string; }; -function TextCommentFragment({fragment, styleAsDeleted, source, style, displayAsGroup, iouMessage = ''}: TextCommentFragmentProps) { +function TextCommentFragment({fragment, styleAsDeleted, source, style, displayAsGroup, iouMessage}: TextCommentFragmentProps) { const theme = useTheme(); const styles = useThemeStyles(); const {html = '', text} = fragment; From b20b0785dac4ee7f0d65b72b07a0ea69daf57f6c Mon Sep 17 00:00:00 2001 From: Ishpaul Singh Date: Wed, 10 Jan 2024 16:01:23 +0530 Subject: [PATCH 16/18] fix type error --- src/pages/home/report/comment/TextCommentFragment.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/report/comment/TextCommentFragment.tsx b/src/pages/home/report/comment/TextCommentFragment.tsx index 763f8d2c143c..8140c00f8c3f 100644 --- a/src/pages/home/report/comment/TextCommentFragment.tsx +++ b/src/pages/home/report/comment/TextCommentFragment.tsx @@ -37,7 +37,7 @@ type TextCommentFragmentProps = { iouMessage?: string; }; -function TextCommentFragment({fragment, styleAsDeleted, source, style, displayAsGroup, iouMessage}: TextCommentFragmentProps) { +function TextCommentFragment({fragment, styleAsDeleted, source, style, displayAsGroup, iouMessage=''}: TextCommentFragmentProps) { const theme = useTheme(); const styles = useThemeStyles(); const {html = '', text} = fragment; From 4edfd165b7c158a47f81a905dd19ca663ba2eefa Mon Sep 17 00:00:00 2001 From: Ishpaul Singh Date: Wed, 10 Jan 2024 23:41:56 +0530 Subject: [PATCH 17/18] prettier diffs --- src/pages/home/report/comment/TextCommentFragment.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/report/comment/TextCommentFragment.tsx b/src/pages/home/report/comment/TextCommentFragment.tsx index 8140c00f8c3f..7450dc14e6bf 100644 --- a/src/pages/home/report/comment/TextCommentFragment.tsx +++ b/src/pages/home/report/comment/TextCommentFragment.tsx @@ -37,7 +37,7 @@ type TextCommentFragmentProps = { iouMessage?: string; }; -function TextCommentFragment({fragment, styleAsDeleted, source, style, displayAsGroup, iouMessage=''}: TextCommentFragmentProps) { +function TextCommentFragment({fragment, styleAsDeleted, source, style, displayAsGroup, iouMessage = ''}: TextCommentFragmentProps) { const theme = useTheme(); const styles = useThemeStyles(); const {html = '', text} = fragment; From a58be47ce4632b4e59850cb07547f35f4e586285 Mon Sep 17 00:00:00 2001 From: Ishpaul Singh Date: Fri, 19 Jan 2024 21:25:13 +0530 Subject: [PATCH 18/18] added requested changes --- src/pages/home/report/comment/TextCommentFragment.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/report/comment/TextCommentFragment.tsx b/src/pages/home/report/comment/TextCommentFragment.tsx index 7450dc14e6bf..998ed9f6616f 100644 --- a/src/pages/home/report/comment/TextCommentFragment.tsx +++ b/src/pages/home/report/comment/TextCommentFragment.tsx @@ -84,7 +84,7 @@ function TextCommentFragment({fragment, styleAsDeleted, source, style, displayAs > {convertToLTR(message)} - {!!fragment.isEdited && ( + {fragment.isEdited && ( <>