Merge pull request #7445 from sig5/fix-#7077

Added persistent Created Room Header to the Chat
Expensify · Feb 2, 2022 · 9d6e07a · 9d6e07a
2 parents 6406656 + 96c6441
commit 9d6e07a
Show file tree

Hide file tree

Showing 8 changed files with 73 additions and 38 deletions.
diff --git a/src/CONST.js b/src/CONST.js
@@ -214,6 +214,7 @@ const CONST = {
             TYPE: {
                 IOU: 'IOU',
                 ADDCOMMENT: 'ADDCOMMENT',
+                CREATED: 'CREATED',
                 RENAMED: 'RENAMED',
             },
         },

diff --git 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 (
-        <Text style={[styles.mt3, styles.w70, styles.textAlignCenter]}>
+        <Text style={[styles.mt3, styles.textAlignCenter]}>
             {!props.shouldIncludeParticipants
                 ? (
                     <>

diff --git a/src/components/EmptyStateAvatars.js → src/components/RoomHeaderAvatars.js b/src/components/EmptyStateAvatars.js → 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) => {
             <View style={[styles.flexRow, styles.wAuto, styles.ml3]}>
                 {_.map(avatarImageURLsToDisplay, (val, index) => (
                     <View key={val} style={[styles.justifyContentCenter, styles.alignItemsCenter]}>
-                        <Image source={{uri: val}} style={[styles.emptyStateAvatar]} />
+                        <Image source={{uri: val}} style={[styles.roomHeaderAvatar]} />
 
                         {index === CONST.REPORT.MAX_PREVIEW_AVATARS - 1 && props.avatarImageURLs.length - CONST.REPORT.MAX_PREVIEW_AVATARS !== 0 && (
                             <>
                                 <View
                                     style={[
-                                        styles.emptyStateAvatar,
+                                        styles.roomHeaderAvatar,
                                         styles.screenBlur,
                                     ]}
                                 />
@@ -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);
diff --git 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';
@@ -118,6 +119,9 @@ class ReportActionItem extends Component {
     }
 
     render() {
+        if (this.props.action.actionName === CONST.REPORT.ACTIONS.TYPE.CREATED) {
+            return <ReportActionItemCreated reportID={this.props.reportID} />;
+        }
         if (this.props.action.actionName === CONST.REPORT.ACTIONS.TYPE.RENAMED) {
             return <RenameAction action={this.props.action} />;
         }

diff --git a/src/pages/home/report/ReportActionItemCreated.js b/src/pages/home/report/ReportActionItemCreated.js
@@ -0,0 +1,52 @@
+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 = {
+    /** The report currently being looked at */
+    report: PropTypes.shape({
+        /**  Avatars corresponding to a chat */
+        icons: PropTypes.arrayOf(PropTypes.string),
+    }),
+};
+const defaultProps = {
+    report: {},
+};
+
+const ReportActionItemCreated = (props) => {
+    const isChatRoom = ReportUtils.isChatRoom(props.report);
+
+    return (
+        <View style={[
+            styles.chatContent,
+            styles.pb8,
+            styles.p5,
+        ]}
+        >
+            <View style={[styles.justifyContentCenter, styles.alignItemsCenter, styles.flex1]}>
+                <RoomHeaderAvatars
+                    avatarImageURLs={props.report.icons}
+                    secondAvatarStyle={[styles.secondAvatarHovered]}
+                    isChatRoom={isChatRoom}
+                />
+                <ReportWelcomeText report={props.report} shouldIncludeParticipants={!isChatRoom} />
+            </View>
+        </View>
+    );
+};
+
+ReportActionItemCreated.defaultProps = defaultProps;
+ReportActionItemCreated.propTypes = propTypes;
+ReportActionItemCreated.displayName = 'ReportActionItemCreated';
+
+export default withOnyx({
+    report: {
+        key: ({reportID}) => `${ONYXKEYS.COLLECTION.REPORT}${reportID}`,
+    },
+})(ReportActionItemCreated);
diff --git 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';
@@ -339,8 +337,9 @@ class ReportActionsView extends React.Component {
         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.ADDCOMMENT
+                || action.actionName === CONST.REPORT.ACTIONS.TYPE.RENAMED
+                || action.actionName === CONST.REPORT.ACTIONS.TYPE.CREATED)
             .map((item, index) => ({action: item, index}))
             .value()
             .reverse();
@@ -542,29 +541,11 @@ 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)) {
             return null;
         }
 
-        // If we only have the created action then no one has left a comment
-        if (_.size(this.props.reportActions) === 1) {
-            return (
-                <View style={[styles.chatContent, styles.chatContentEmpty]}>
-                    <View style={[styles.justifyContentCenter, styles.alignItemsCenter, styles.flex1]}>
-                        <EmptyStateAvatars
-                            avatarImageURLs={this.props.report.icons}
-                            secondAvatarStyle={[styles.secondAvatarHovered]}
-                            isChatRoom={isChatRoom}
-                        />
-                        <ReportWelcomeText report={this.props.report} shouldIncludeParticipants={!isChatRoom} />
-                    </View>
-                </View>
-            );
-        }
-
         // 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;

diff --git a/src/styles/styles.js b/src/styles/styles.js
@@ -1207,13 +1207,6 @@ const styles = {
         paddingVertical: 16,
     },
 
-    chatContentEmpty: {
-        paddingTop: 16,
-        paddingBottom: 16,
-        paddingLeft: 20,
-        paddingRight: 20,
-    },
-
     // Chat Item
     chatItem: {
         display: 'flex',
@@ -1786,7 +1779,7 @@ const styles = {
         height: 80,
     },
 
-    emptyStateAvatar: {
+    roomHeaderAvatar: {
         height: variables.componentSizeLarge,
         width: variables.componentSizeLarge,
         borderRadius: 100,

diff --git a/src/styles/utilities/spacing.js b/src/styles/utilities/spacing.js
@@ -324,6 +324,10 @@ export default {
         paddingBottom: 20,
     },
 
+    pb8: {
+        paddingBottom: 32,
+    },
+
     pb10Percentage: {
         paddingBottom: '10%',
     },