From aeb8eb98358078947a111f422649eb698185c2d5 Mon Sep 17 00:00:00 2001 From: sig5 Date: Thu, 27 Jan 2022 18:46:01 +0530 Subject: [PATCH 01/13] Renamed EmptyStateAvatar --- src/components/{EmptyStateAvatars.js => RoomHeaderAvatars} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/components/{EmptyStateAvatars.js => RoomHeaderAvatars} (100%) diff --git a/src/components/EmptyStateAvatars.js b/src/components/RoomHeaderAvatars similarity index 100% rename from src/components/EmptyStateAvatars.js rename to src/components/RoomHeaderAvatars From da5f3170f669ada5c6d9aab2eb30bc1efdd8c62a Mon Sep 17 00:00:00 2001 From: sig5 Date: Thu, 27 Jan 2022 18:48:59 +0530 Subject: [PATCH 02/13] modified styles --- .../{RoomHeaderAvatars => RoomHeaderAvatars.js} | 14 +++++++------- src/styles/styles.js | 2 +- 2 files changed, 8 insertions(+), 8 deletions(-) rename src/components/{RoomHeaderAvatars => RoomHeaderAvatars.js} (87%) diff --git a/src/components/RoomHeaderAvatars b/src/components/RoomHeaderAvatars.js similarity index 87% rename from src/components/RoomHeaderAvatars rename to src/components/RoomHeaderAvatars.js index 0174ad0eacf4..1428eb299de1 100644 --- a/src/components/RoomHeaderAvatars +++ b/src/components/RoomHeaderAvatars.js @@ -20,7 +20,7 @@ const defaultProps = { isChatRoom: false, }; -const EmptyStateAvatars = (props) => { +const RoomHeaderAvatars = (props) => { if (!props.avatarImageURLs.length) { return null; } @@ -43,13 +43,13 @@ const EmptyStateAvatars = (props) => { {_.map(avatarImageURLsToDisplay, (val, index) => ( - + {index === CONST.REPORT.MAX_PREVIEW_AVATARS - 1 && props.avatarImageURLs.length - CONST.REPORT.MAX_PREVIEW_AVATARS !== 0 && ( <> @@ -65,8 +65,8 @@ const EmptyStateAvatars = (props) => { ); }; -EmptyStateAvatars.defaultProps = defaultProps; -EmptyStateAvatars.propTypes = propTypes; -EmptyStateAvatars.displayName = 'EmptyStateAvatars'; +RoomHeaderAvatars.defaultProps = defaultProps; +RoomHeaderAvatars.propTypes = propTypes; +RoomHeaderAvatars.displayName = 'RoomHeaderAvatars'; -export default memo(EmptyStateAvatars); +export default memo(RoomHeaderAvatars); \ No newline at end of file diff --git a/src/styles/styles.js b/src/styles/styles.js index 96aae51b1cd7..bfd69f98e882 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -1786,7 +1786,7 @@ const styles = { height: 80, }, - emptyStateAvatar: { + roomHeaderAvatar: { height: variables.componentSizeLarge, width: variables.componentSizeLarge, borderRadius: 100, From 4fbd6a94ba9d6fb14447442b555f8f7ab51eff7f Mon Sep 17 00:00:00 2001 From: sig5 Date: Thu, 27 Jan 2022 18:51:16 +0530 Subject: [PATCH 03/13] Added created action type --- src/CONST.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/CONST.js b/src/CONST.js index b449636dfd57..81e2a9b0c239 100755 --- a/src/CONST.js +++ b/src/CONST.js @@ -213,6 +213,7 @@ const CONST = { TYPE: { IOU: 'IOU', ADDCOMMENT: 'ADDCOMMENT', + CREATED: 'CREATED', RENAMED: 'RENAMED', }, }, From 24dc27290dbd1e370efaea5c98179d024d323068 Mon Sep 17 00:00:00 2001 From: sig5 Date: Thu, 27 Jan 2022 18:52:33 +0530 Subject: [PATCH 04/13] Removed old component --- src/pages/home/report/ReportActionsView.js | 19 ++----------------- 1 file changed, 2 insertions(+), 17 deletions(-) diff --git a/src/pages/home/report/ReportActionsView.js b/src/pages/home/report/ReportActionsView.js index 8302b6425fcf..e7d7f2cbfd75 100755 --- a/src/pages/home/report/ReportActionsView.js +++ b/src/pages/home/report/ReportActionsView.js @@ -340,7 +340,8 @@ class ReportActionsView extends React.Component { .sortBy('sequenceNumber') .filter(action => action.actionName === CONST.REPORT.ACTIONS.TYPE.IOU || action.actionName === CONST.REPORT.ACTIONS.TYPE.ADDCOMMENT - || action.actionName === CONST.REPORT.ACTIONS.TYPE.RENAMED) + || action.actionName === CONST.REPORT.ACTIONS.TYPE.RENAMED + || action.actionName === CONST.REPORT.ACTIONS.TYPE.CREATED)) .map((item, index) => ({action: item, index})) .value() .reverse(); @@ -549,22 +550,6 @@ class ReportActionsView extends React.Component { return null; } - // If we only have the created action then no one has left a comment - if (_.size(this.props.reportActions) === 1) { - return ( - - - - - - - ); - } - // Native mobile does not render updates flatlist the changes even though component did update called. // To notify there something changes we can use extraData prop to flatlist const extraData = (!this.props.isDrawerOpen && this.props.isSmallScreenWidth) ? this.props.report.newMarkerSequenceNumber : undefined; From 2cc350844c639d25d9bde945304ad0c831b26c21 Mon Sep 17 00:00:00 2001 From: sig5 Date: Thu, 27 Jan 2022 19:00:08 +0530 Subject: [PATCH 05/13] Added new Header component --- src/pages/home/report/ReportActionItem.js | 3 ++ .../home/report/ReportActionItemCreated.js | 43 +++++++++++++++++++ src/pages/home/report/ReportActionsView.js | 1 - src/styles/styles.js | 2 +- 4 files changed, 47 insertions(+), 2 deletions(-) create mode 100644 src/pages/home/report/ReportActionItemCreated.js diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js index 836627b0a18e..040097db6c51 100644 --- a/src/pages/home/report/ReportActionItem.js +++ b/src/pages/home/report/ReportActionItem.js @@ -118,6 +118,9 @@ class ReportActionItem extends Component { } render() { + if (this.props.action.actionName === CONST.REPORT.ACTIONS.TYPE.CREATED) { + return ; + } if (this.props.action.actionName === CONST.REPORT.ACTIONS.TYPE.RENAMED) { return ; } diff --git a/src/pages/home/report/ReportActionItemCreated.js b/src/pages/home/report/ReportActionItemCreated.js new file mode 100644 index 000000000000..2a049bbb5ae3 --- /dev/null +++ b/src/pages/home/report/ReportActionItemCreated.js @@ -0,0 +1,43 @@ +import React from 'react'; +import {View} from 'react-native'; +import {withOnyx} from 'react-native-onyx'; +import PropTypes from 'prop-types'; +import ONYXKEYS from '../../../ONYXKEYS'; +import RoomHeaderAvatars from '../../../components/RoomHeaderAvatars'; +import ReportWelcomeText from '../../../components/ReportWelcomeText'; +import * as ReportUtils from '../../../libs/reportUtils'; +import styles from '../../../styles/styles'; + +const propTypes = { + report: PropTypes.oneOfType([PropTypes.object]), +}; +const defaultProps = { + report: {}, +}; + +const ReportActionItemCreated = (props) => { + const isChatRoom = ReportUtils.isChatRoom(props.report); + + return ( + + + + + + + ); +}; + +ReportActionItemCreated.defaultProps = defaultProps; +ReportActionItemCreated.propTypes = propTypes; + + +export default withOnyx({ + report: { + key: ({reportID}) => `${ONYXKEYS.COLLECTION.REPORT}${reportID}`, + }, +})(ReportActionItemCreated); \ No newline at end of file diff --git a/src/pages/home/report/ReportActionsView.js b/src/pages/home/report/ReportActionsView.js index e7d7f2cbfd75..ad607c5a2b7b 100755 --- a/src/pages/home/report/ReportActionsView.js +++ b/src/pages/home/report/ReportActionsView.js @@ -543,7 +543,6 @@ class ReportActionsView extends React.Component { } render() { - const isChatRoom = ReportUtils.isChatRoom(this.props.report); // Comments have not loaded at all yet do nothing if (!_.size(this.props.reportActions)) { diff --git a/src/styles/styles.js b/src/styles/styles.js index bfd69f98e882..84cba37ed759 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -1207,7 +1207,7 @@ const styles = { paddingVertical: 16, }, - chatContentEmpty: { + chatContentCreated: { paddingTop: 16, paddingBottom: 16, paddingLeft: 20, From 1d10942b60b5e8e6d8db3ac63b38fe8f914acc39 Mon Sep 17 00:00:00 2001 From: sig5 Date: Thu, 27 Jan 2022 19:04:47 +0530 Subject: [PATCH 06/13] fix errors --- src/components/RoomHeaderAvatars.js | 2 +- src/pages/home/report/ReportActionItem.js | 1 + src/pages/home/report/ReportActionItemCreated.js | 2 +- src/pages/home/report/ReportActionsView.js | 5 +---- 4 files changed, 4 insertions(+), 6 deletions(-) diff --git a/src/components/RoomHeaderAvatars.js b/src/components/RoomHeaderAvatars.js index 1428eb299de1..eb50814854b4 100644 --- a/src/components/RoomHeaderAvatars.js +++ b/src/components/RoomHeaderAvatars.js @@ -69,4 +69,4 @@ RoomHeaderAvatars.defaultProps = defaultProps; RoomHeaderAvatars.propTypes = propTypes; RoomHeaderAvatars.displayName = 'RoomHeaderAvatars'; -export default memo(RoomHeaderAvatars); \ No newline at end of file +export default memo(RoomHeaderAvatars); diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js index 040097db6c51..1140e1266a22 100644 --- a/src/pages/home/report/ReportActionItem.js +++ b/src/pages/home/report/ReportActionItem.js @@ -15,6 +15,7 @@ import IOUAction from '../../../components/ReportActionItem/IOUAction'; import ReportActionItemMessage from './ReportActionItemMessage'; import UnreadActionIndicator from '../../../components/UnreadActionIndicator'; import ReportActionItemMessageEdit from './ReportActionItemMessageEdit'; +import ReportActionItemCreated from './ReportActionItemCreated'; import compose from '../../../libs/compose'; import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions'; import ControlSelection from '../../../libs/ControlSelection'; diff --git a/src/pages/home/report/ReportActionItemCreated.js b/src/pages/home/report/ReportActionItemCreated.js index 2a049bbb5ae3..0bff9dd9754b 100644 --- a/src/pages/home/report/ReportActionItemCreated.js +++ b/src/pages/home/report/ReportActionItemCreated.js @@ -40,4 +40,4 @@ export default withOnyx({ report: { key: ({reportID}) => `${ONYXKEYS.COLLECTION.REPORT}${reportID}`, }, -})(ReportActionItemCreated); \ No newline at end of file +})(ReportActionItemCreated); diff --git a/src/pages/home/report/ReportActionsView.js b/src/pages/home/report/ReportActionsView.js index ad607c5a2b7b..56ba12341b28 100755 --- a/src/pages/home/report/ReportActionsView.js +++ b/src/pages/home/report/ReportActionsView.js @@ -33,9 +33,7 @@ import PopoverReportActionContextMenu from './ContextMenu/PopoverReportActionCon import variables from '../../../styles/variables'; import MarkerBadge from './MarkerBadge'; import Performance from '../../../libs/Performance'; -import EmptyStateAvatars from '../../../components/EmptyStateAvatars'; import * as ReportUtils from '../../../libs/reportUtils'; -import ReportWelcomeText from '../../../components/ReportWelcomeText'; import ONYXKEYS from '../../../ONYXKEYS'; import {withPersonalDetails} from '../../../components/OnyxProvider'; import currentUserPersonalDetailsPropsTypes from '../../settings/Profile/currentUserPersonalDetailsPropsTypes'; @@ -341,7 +339,7 @@ class ReportActionsView extends React.Component { .filter(action => action.actionName === CONST.REPORT.ACTIONS.TYPE.IOU || action.actionName === CONST.REPORT.ACTIONS.TYPE.ADDCOMMENT || action.actionName === CONST.REPORT.ACTIONS.TYPE.RENAMED - || action.actionName === CONST.REPORT.ACTIONS.TYPE.CREATED)) + || action.actionName === CONST.REPORT.ACTIONS.TYPE.CREATED) .map((item, index) => ({action: item, index})) .value() .reverse(); @@ -543,7 +541,6 @@ class ReportActionsView extends React.Component { } render() { - // Comments have not loaded at all yet do nothing if (!_.size(this.props.reportActions)) { return null; From 15a86ce606fd2c46746ccccad4644502e5d8550d Mon Sep 17 00:00:00 2001 From: sig5 Date: Fri, 28 Jan 2022 16:04:59 +0530 Subject: [PATCH 07/13] Added displayname,comments and modified styling --- src/components/ReportWelcomeText.js | 2 +- src/pages/home/report/ReportActionItemCreated.js | 3 ++- src/styles/styles.js | 4 ++-- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/components/ReportWelcomeText.js b/src/components/ReportWelcomeText.js index 9a73acdfce26..0d30b2f1ed6a 100644 --- a/src/components/ReportWelcomeText.js +++ b/src/components/ReportWelcomeText.js @@ -70,7 +70,7 @@ const ReportWelcomeText = (props) => { const isResctrictedRoom = lodashGet(props, 'report.visibility', '') === CONST.REPORT.VISIBILITY.RESTRICTED; return ( - + {!props.shouldIncludeParticipants ? ( <> diff --git a/src/pages/home/report/ReportActionItemCreated.js b/src/pages/home/report/ReportActionItemCreated.js index 0bff9dd9754b..6fcda1df7741 100644 --- a/src/pages/home/report/ReportActionItemCreated.js +++ b/src/pages/home/report/ReportActionItemCreated.js @@ -12,6 +12,7 @@ const propTypes = { report: PropTypes.oneOfType([PropTypes.object]), }; const defaultProps = { + /** The report currently being looked at */ report: {}, }; @@ -34,7 +35,7 @@ const ReportActionItemCreated = (props) => { ReportActionItemCreated.defaultProps = defaultProps; ReportActionItemCreated.propTypes = propTypes; - +ReportActionItemCreated.displayName = 'ReportActionItemCreated'; export default withOnyx({ report: { diff --git a/src/styles/styles.js b/src/styles/styles.js index 84cba37ed759..43336649db42 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -1208,8 +1208,8 @@ const styles = { }, chatContentCreated: { - paddingTop: 16, - paddingBottom: 16, + paddingTop: 20, + paddingBottom: 32, paddingLeft: 20, paddingRight: 20, }, From 773f932d8324b35e4baea32014b8caa05a229724 Mon Sep 17 00:00:00 2001 From: sig5 Date: Fri, 28 Jan 2022 16:39:58 +0530 Subject: [PATCH 08/13] Cleaned up conditionals --- src/pages/home/report/ReportActionsView.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/pages/home/report/ReportActionsView.js b/src/pages/home/report/ReportActionsView.js index 56ba12341b28..ac438bb1694a 100755 --- a/src/pages/home/report/ReportActionsView.js +++ b/src/pages/home/report/ReportActionsView.js @@ -336,10 +336,7 @@ class ReportActionsView extends React.Component { updateSortedReportActions(reportActions) { this.sortedReportActions = _.chain(reportActions) .sortBy('sequenceNumber') - .filter(action => action.actionName === CONST.REPORT.ACTIONS.TYPE.IOU - || action.actionName === CONST.REPORT.ACTIONS.TYPE.ADDCOMMENT - || action.actionName === CONST.REPORT.ACTIONS.TYPE.RENAMED - || action.actionName === CONST.REPORT.ACTIONS.TYPE.CREATED) + .filter(action => _.contains(_.values(CONST.REPORT.ACTIONS.TYPE), action.actionName)) .map((item, index) => ({action: item, index})) .value() .reverse(); From 8c43994e6347fd39ccd098e16ef3963873314a3c Mon Sep 17 00:00:00 2001 From: sig5 Date: Fri, 28 Jan 2022 16:42:00 +0530 Subject: [PATCH 09/13] Updated proptype comments --- src/pages/home/report/ReportActionItemCreated.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportActionItemCreated.js b/src/pages/home/report/ReportActionItemCreated.js index 6fcda1df7741..621a52dff636 100644 --- a/src/pages/home/report/ReportActionItemCreated.js +++ b/src/pages/home/report/ReportActionItemCreated.js @@ -9,10 +9,10 @@ import * as ReportUtils from '../../../libs/reportUtils'; import styles from '../../../styles/styles'; const propTypes = { + /** The report currently being looked at */ report: PropTypes.oneOfType([PropTypes.object]), }; const defaultProps = { - /** The report currently being looked at */ report: {}, }; From 0e203a0800cca7cc3e6a87c1c412aa4c79445732 Mon Sep 17 00:00:00 2001 From: sig5 Date: Sat, 29 Jan 2022 02:26:51 +0530 Subject: [PATCH 10/13] Addressed issues --- src/pages/home/report/ReportActionItemCreated.js | 12 ++++++++++-- src/styles/styles.js | 7 ------- src/styles/utilities/spacing.js | 8 ++++++++ 3 files changed, 18 insertions(+), 9 deletions(-) diff --git a/src/pages/home/report/ReportActionItemCreated.js b/src/pages/home/report/ReportActionItemCreated.js index 621a52dff636..131770c35063 100644 --- a/src/pages/home/report/ReportActionItemCreated.js +++ b/src/pages/home/report/ReportActionItemCreated.js @@ -10,7 +10,10 @@ import styles from '../../../styles/styles'; const propTypes = { /** The report currently being looked at */ - report: PropTypes.oneOfType([PropTypes.object]), + report: PropTypes.shape({ + /** Avatars corresponding to a chat */ + icons: PropTypes.arrayOf(PropTypes.string), + }), }; const defaultProps = { report: {}, @@ -20,7 +23,12 @@ const ReportActionItemCreated = (props) => { const isChatRoom = ReportUtils.isChatRoom(props.report); return ( - + Date: Sat, 29 Jan 2022 05:34:13 +0530 Subject: [PATCH 11/13] Improved css --- src/pages/home/report/ReportActionItemCreated.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/pages/home/report/ReportActionItemCreated.js b/src/pages/home/report/ReportActionItemCreated.js index 131770c35063..aa3a1f51a2ad 100644 --- a/src/pages/home/report/ReportActionItemCreated.js +++ b/src/pages/home/report/ReportActionItemCreated.js @@ -25,8 +25,7 @@ const ReportActionItemCreated = (props) => { return ( From ce055a578be36ef5e4a28badb5187a17b2b63484 Mon Sep 17 00:00:00 2001 From: sig5 Date: Sat, 29 Jan 2022 05:58:49 +0530 Subject: [PATCH 12/13] Removed p5 from styles --- src/pages/home/report/ReportActionItemCreated.js | 3 ++- src/styles/utilities/spacing.js | 4 ---- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/src/pages/home/report/ReportActionItemCreated.js b/src/pages/home/report/ReportActionItemCreated.js index aa3a1f51a2ad..68ef9035ca08 100644 --- a/src/pages/home/report/ReportActionItemCreated.js +++ b/src/pages/home/report/ReportActionItemCreated.js @@ -23,7 +23,8 @@ const ReportActionItemCreated = (props) => { const isChatRoom = ReportUtils.isChatRoom(props.report); return ( - Date: Tue, 1 Feb 2022 00:27:32 +0530 Subject: [PATCH 13/13] Reverted filter Types change for future code quality. --- src/pages/home/report/ReportActionsView.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportActionsView.js b/src/pages/home/report/ReportActionsView.js index ac438bb1694a..946f40e76c0b 100755 --- a/src/pages/home/report/ReportActionsView.js +++ b/src/pages/home/report/ReportActionsView.js @@ -336,7 +336,10 @@ class ReportActionsView extends React.Component { updateSortedReportActions(reportActions) { this.sortedReportActions = _.chain(reportActions) .sortBy('sequenceNumber') - .filter(action => _.contains(_.values(CONST.REPORT.ACTIONS.TYPE), action.actionName)) + .filter(action => action.actionName === CONST.REPORT.ACTIONS.TYPE.IOU + || action.actionName === CONST.REPORT.ACTIONS.TYPE.ADDCOMMENT + || action.actionName === CONST.REPORT.ACTIONS.TYPE.RENAMED + || action.actionName === CONST.REPORT.ACTIONS.TYPE.CREATED) .map((item, index) => ({action: item, index})) .value() .reverse();