Merge pull request #8813 from Expensify/marcaaron-renameMarkerBadgeTo…

…FloatingUnreadMessageCounter

[No QA] Update various names in `ReportActionsView`

src/languages/en.js

@@ -188,9 +188,7 @@ export default {
         beginningOfChatHistoryPolicyExpenseChatPartTwo: ' and ',
         beginningOfChatHistoryPolicyExpenseChatPartThree: ' starts here! 🎉 This is the place to chat, request money and settle up.',
     },
-    reportActionsViewMarkerBadge: {
-        newMsg: ({count}) => `${count} new message${count > 1 ? 's' : ''}`,
-    },
+    newMessageCount: ({count}) => `${count} new message${count > 1 ? 's' : ''}`,
     reportTypingIndicator: {
         isTyping: 'is typing...',
         areTyping: 'are typing...',

src/languages/es.js

@@ -188,9 +188,7 @@ export default {
         beginningOfChatHistoryPolicyExpenseChatPartTwo: ' y ',
         beginningOfChatHistoryPolicyExpenseChatPartThree: ' empieza aquí! :tada: Este es el lugar donde chatear, pedir dinero y pagar.',
     },
-    reportActionsViewMarkerBadge: {
-        newMsg: ({count}) => `${count} mensaje${count > 1 ? 's' : ''} nuevo${count > 1 ? 's' : ''}`,
-    },
+    newMessageCount: ({count}) => `${count} mensaje${count > 1 ? 's' : ''} nuevo${count > 1 ? 's' : ''}`,
     reportTypingIndicator: {
         isTyping: 'está escribiendo...',
         areTyping: 'están escribiendo...',

src/pages/home/report/FloatingMessageCounter/FloatingMessageCounterContainer/index.android.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import {View, Animated} from 'react-native';
+import styles from '../../../../../styles/styles';
+import floatingMessageCounterContainerPropTypes from './floatingMessageCounterContainerPropTypes';
+
+const FloatingMessageCounterContainer = props => (
+    <Animated.View style={[styles.floatingMessageCounterWrapperAndroid, ...props.containerStyles]}>
+        <View style={styles.floatingMessageCounterSubWrapperAndroid}>
+            {props.children}
+        </View>
+    </Animated.View>
+);
+
+FloatingMessageCounterContainer.propTypes = floatingMessageCounterContainerPropTypes;
+FloatingMessageCounterContainer.displayName = 'FloatingMessageCounterContainer';
+
+export default FloatingMessageCounterContainer;

src/pages/home/report/FloatingMessageCounter/FloatingMessageCounterContainer/index.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import {Animated} from 'react-native';
+import styles from '../../../../../styles/styles';
+import floatingMessageCounterContainerPropTypes from './floatingMessageCounterContainerPropTypes';
+
+const FloatingMessageCounterContainer = props => (
+    <Animated.View style={[styles.floatingMessageCounterWrapper, ...props.containerStyles]}>
+        {props.children}
+    </Animated.View>
+);
+
+FloatingMessageCounterContainer.propTypes = floatingMessageCounterContainerPropTypes;
+FloatingMessageCounterContainer.displayName = 'FloatingMessageCounterContainer';
+
+export default FloatingMessageCounterContainer;

src/pages/home/report/MarkerBadge/MarkerBadge.js → src/pages/home/report/FloatingMessageCounter/index.js

@@ -8,7 +8,7 @@ import Icon from '../../../../components/Icon';
 import * as Expensicons from '../../../../components/Icon/Expensicons';
 import themeColors from '../../../../styles/themes/default';
 import withLocalize, {withLocalizePropTypes} from '../../../../components/withLocalize';
-import MarkerBadgeContainer from './MarkerBadgeContainer';
+import FloatingMessageCounterContainer from './FloatingMessageCounterContainer';
 
 const propTypes = {
     /** Count of new messages to show in the badge */
@@ -36,7 +36,7 @@ const defaultProps = {
 const MARKER_INACTIVE_TRANSLATE_Y = -30;
 const MARKER_ACTIVE_TRANSLATE_Y = 10;
 
-class MarkerBadge extends PureComponent {
+class FloatingMessageCounter extends PureComponent {
     constructor(props) {
         super(props);
         this.translateY = new Animated.Value(MARKER_INACTIVE_TRANSLATE_Y);
@@ -70,8 +70,8 @@ class MarkerBadge extends PureComponent {
 
     render() {
         return (
-            <MarkerBadgeContainer containerStyles={[styles.reportMarkerBadgeTransformation(this.translateY)]}>
-                <View style={styles.reportMarkerBadge}>
+            <FloatingMessageCounterContainer containerStyles={[styles.floatingMessageCounterTransformation(this.translateY)]}>
+                <View style={styles.floatingMessageCounter}>
                     <View style={[
                         styles.flexRow,
                         styles.justifyContentBetween,
@@ -94,7 +94,7 @@ class MarkerBadge extends PureComponent {
                                         ]}
                                     >
                                         {this.props.translate(
-                                            'reportActionsViewMarkerBadge.newMsg',
+                                            'newMessageCount',
                                             {count: this.props.count},
                                         )}
                                     </Text>
@@ -114,12 +114,12 @@ class MarkerBadge extends PureComponent {
                         />
                     </View>
                 </View>
-            </MarkerBadgeContainer>
+            </FloatingMessageCounterContainer>
         );
     }
 }
 
-MarkerBadge.propTypes = propTypes;
-MarkerBadge.defaultProps = defaultProps;
+FloatingMessageCounter.propTypes = propTypes;
+FloatingMessageCounter.defaultProps = defaultProps;
 
-export default withLocalize(MarkerBadge);
+export default withLocalize(FloatingMessageCounter);

src/pages/home/report/ReportActionsView.js

@@ -31,14 +31,14 @@ import ReportActionComposeFocusManager from '../../../libs/ReportActionComposeFo
 import * as ReportActionContextMenu from './ContextMenu/ReportActionContextMenu';
 import PopoverReportActionContextMenu from './ContextMenu/PopoverReportActionContextMenu';
 import variables from '../../../styles/variables';
-import MarkerBadge from './MarkerBadge/MarkerBadge';
 import Performance from '../../../libs/Performance';
 import * as ReportUtils from '../../../libs/reportUtils';
 import ONYXKEYS from '../../../ONYXKEYS';
 import {withNetwork, withPersonalDetails} from '../../../components/OnyxProvider';
 import participantPropTypes from '../../../components/participantPropTypes';
 import EmojiPicker from '../../../components/EmojiPicker';
 import * as EmojiPickerAction from '../../../libs/actions/EmojiPickerAction';
+import FloatingMessageCounter from './FloatingMessageCounter';
 import networkPropTypes from '../../../components/networkPropTypes';
 
 const propTypes = {
@@ -117,20 +117,20 @@ class ReportActionsView extends React.Component {
         this.didLayout = false;
 
         this.state = {
-            isMarkerActive: false,
-            localUnreadActionCount: this.props.report.unreadActionCount,
+            isFloatingMessageCounterVisible: false,
+            messageCounterCount: this.props.report.unreadActionCount,
         };
 
         this.currentScrollOffset = 0;
         this.updateSortedReportActions(props.reportActions);
         this.updateMostRecentIOUReportActionNumber(props.reportActions);
         this.keyExtractor = this.keyExtractor.bind(this);
         this.trackScroll = this.trackScroll.bind(this);
-        this.showMarker = this.showMarker.bind(this);
-        this.hideMarker = this.hideMarker.bind(this);
-        this.toggleMarker = this.toggleMarker.bind(this);
-        this.updateUnreadIndicatorPosition = this.updateUnreadIndicatorPosition.bind(this);
-        this.updateLocalUnreadActionCount = this.updateLocalUnreadActionCount.bind(this);
+        this.showFloatingMessageCounter = this.showFloatingMessageCounter.bind(this);
+        this.hideFloatingMessageCounter = this.hideFloatingMessageCounter.bind(this);
+        this.toggleFloatingMessageCounter = this.toggleFloatingMessageCounter.bind(this);
+        this.updateNewMarkerPosition = this.updateNewMarkerPosition.bind(this);
+        this.updateMessageCounterCount = this.updateMessageCounterCount.bind(this);
         this.updateNewMarkerAndMarkReadOnce = _.once(this.updateNewMarkerAndMarkRead.bind(this));
     }
 
@@ -190,11 +190,11 @@ class ReportActionsView extends React.Component {
             return true;
         }
 
-        if (nextState.isMarkerActive !== this.state.isMarkerActive) {
+        if (nextState.isFloatingMessageCounterVisible !== this.state.isFloatingMessageCounterVisible) {
             return true;
         }
 
-        if (nextState.localUnreadActionCount !== this.state.localUnreadActionCount) {
+        if (nextState.messageCounterCount !== this.state.messageCounterCount) {
             return true;
         }
 
@@ -241,26 +241,26 @@ class ReportActionsView extends React.Component {
             }
 
             if (lodashGet(lastAction, 'actorEmail', '') !== lodashGet(this.props.session, 'email', '')) {
-                // Only update the unread count when MarkerBadge is visible
-                // Otherwise marker will be shown on scrolling up from the bottom even if user have read those messages
-                if (this.state.isMarkerActive) {
-                    this.updateLocalUnreadActionCount(!shouldRecordMaxAction);
+                // Only update the unread count when the floating message counter is visible
+                // Otherwise counter will be shown on scrolling up from the bottom even if user have read those messages
+                if (this.state.isFloatingMessageCounterVisible) {
+                    this.updateMessageCounterCount(!shouldRecordMaxAction);
                 }
 
-                // show new MarkerBadge when there is a new message
-                this.toggleMarker();
+                // show new floating message counter when there is a new message
+                this.toggleFloatingMessageCounter();
             }
 
             // When the last action changes, record the max action
-            // This will make the unread indicator go away if you receive comments in the same chat you're looking at
+            // This will make the NEW marker line go away if you receive comments in the same chat you're looking at
             if (shouldRecordMaxAction) {
                 Report.updateLastReadActionID(this.props.reportID);
             }
         } else if (shouldRecordMaxAction && (
             prevProps.isDrawerOpen !== this.props.isDrawerOpen
             || prevProps.isSmallScreenWidth !== this.props.isSmallScreenWidth
         )) {
-            this.updateUnreadIndicatorPosition(this.props.report.unreadActionCount);
+            this.updateNewMarkerPosition(this.props.report.unreadActionCount);
             Report.updateLastReadActionID(this.props.reportID);
         }
     }
@@ -430,7 +430,7 @@ class ReportActionsView extends React.Component {
      * Updates NEW marker position
      * @param {Number} unreadActionCount
      */
-    updateUnreadIndicatorPosition(unreadActionCount) {
+    updateNewMarkerPosition(unreadActionCount) {
         // Since we want the New marker to remain in place even if newer messages come in, we set it once on mount.
         // We determine the last read action by deducting the number of unread actions from the total number.
         // Then, we add 1 because we want the New marker displayed over the oldest unread sequence.
@@ -439,39 +439,39 @@ class ReportActionsView extends React.Component {
     }
 
     /**
-     * Show/hide the new MarkerBadge when user is scrolling back/forth in the history of messages.
+     * Show/hide the new floating message counter when user is scrolling back/forth in the history of messages.
      */
-    toggleMarker() {
-        // Update the unread message count before MarkerBadge is about to show
-        if (this.currentScrollOffset < -200 && !this.state.isMarkerActive) {
-            this.updateLocalUnreadActionCount();
-            this.showMarker();
+    toggleFloatingMessageCounter() {
+        // Update the message counter count before counter is about to show
+        if (this.currentScrollOffset < -200 && !this.state.isFloatingMessageCounterVisible) {
+            this.updateMessageCounterCount();
+            this.showFloatingMessageCounter();
         }
 
-        if (this.currentScrollOffset > -200 && this.state.isMarkerActive) {
-            this.hideMarker();
+        if (this.currentScrollOffset > -200 && this.state.isFloatingMessageCounterVisible) {
+            this.hideFloatingMessageCounter();
         }
     }
 
     /**
-     * Update the unread messages count to show in the MarkerBadge
+     * Update the message counter count to show in the floating message counter
      * @param {Boolean} [shouldResetLocalCount=false] Whether count should increment or reset
      */
-    updateLocalUnreadActionCount(shouldResetLocalCount = false) {
+    updateMessageCounterCount(shouldResetLocalCount = false) {
         this.setState((prevState) => {
-            const localUnreadActionCount = shouldResetLocalCount
+            const messageCounterCount = shouldResetLocalCount
                 ? this.props.report.unreadActionCount
-                : prevState.localUnreadActionCount + this.props.report.unreadActionCount;
-            this.updateUnreadIndicatorPosition(localUnreadActionCount);
-            return {localUnreadActionCount};
+                : prevState.messageCounterCount + this.props.report.unreadActionCount;
+            this.updateNewMarkerPosition(messageCounterCount);
+            return {messageCounterCount};
         });
     }
 
     /**
      * Update NEW marker and mark report as read
      */
     updateNewMarkerAndMarkRead() {
-        this.updateUnreadIndicatorPosition(this.props.report.unreadActionCount);
+        this.updateNewMarkerPosition(this.props.report.unreadActionCount);
 
         // Only mark as read if the report is open
         if (!this.props.isDrawerOpen) {
@@ -480,19 +480,19 @@ class ReportActionsView extends React.Component {
     }
 
     /**
-     * Show the new MarkerBadge
+     * Show the new floating message counter
      */
-    showMarker() {
-        this.setState({isMarkerActive: true});
+    showFloatingMessageCounter() {
+        this.setState({isFloatingMessageCounterVisible: true});
     }
 
     /**
-     * Hide the new MarkerBadge
+     * Hide the new floating message counter
      */
-    hideMarker() {
+    hideFloatingMessageCounter() {
         this.setState({
-            isMarkerActive: false,
-            localUnreadActionCount: 0,
+            isFloatingMessageCounterVisible: false,
+            messageCounterCount: 0,
         });
     }
 
@@ -503,7 +503,7 @@ class ReportActionsView extends React.Component {
      */
     trackScroll({nativeEvent}) {
         this.currentScrollOffset = -nativeEvent.contentOffset.y;
-        this.toggleMarker();
+        this.toggleFloatingMessageCounter();
     }
 
     /**
@@ -589,11 +589,11 @@ class ReportActionsView extends React.Component {
 
         return (
             <>
-                <MarkerBadge
-                    active={this.state.isMarkerActive}
-                    count={this.state.localUnreadActionCount}
+                <FloatingMessageCounter
+                    active={this.state.isFloatingMessageCounterVisible}
+                    count={this.state.messageCounterCount}
                     onClick={this.scrollToBottomAndUpdateLastRead}
-                    onClose={this.hideMarker}
+                    onClose={this.hideFloatingMessageCounter}
                 />
                 <InvertedFlatList
                     ref={ReportScrollManager.flatListRef}

src/styles/styles.js

@@ -2376,15 +2376,15 @@ const styles = {
         height: 20,
     },
 
-    reportMarkerBadgeWrapper: {
+    floatingMessageCounterWrapper: {
         position: 'absolute',
         left: '50%',
         top: 0,
         zIndex: 100,
         ...visibility('hidden'),
     },
 
-    reportMarkerBadgeWrapperAndroid: {
+    floatingMessageCounterWrapperAndroid: {
         left: 0,
         width: '100%',
         alignItems: 'center',
@@ -2394,17 +2394,17 @@ const styles = {
         ...visibility('hidden'),
     },
 
-    reportMarkerBadgeSubWrapperAndroid: {
+    floatingMessageCounterSubWrapperAndroid: {
         left: '50%',
         width: 'auto',
     },
 
-    reportMarkerBadge: {
+    floatingMessageCounter: {
         left: '-50%',
         ...visibility('visible'),
     },
 
-    reportMarkerBadgeTransformation: translateY => ({
+    floatingMessageCounterTransformation: translateY => ({
         transform: [
             {translateY},
         ],