code refactor to readability

Expensify · Aug 12, 2021 · dd79836 · dd79836
1 parent b7b6794
commit dd79836
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 5 deletions.
diff --git a/src/languages/en.js b/src/languages/en.js
@@ -135,6 +135,9 @@ export default {
     reportActionsView: {
         beFirstPersonToComment: 'Be the first person to comment',
     },
+    reportActionsViewMarkerBadge: {
+        newMsg: ({count}) => `${count} new messages`,
+    },
     reportTypingIndicator: {
         isTyping: 'is typing...',
         areTyping: 'are typing...',

diff --git a/src/languages/es.js b/src/languages/es.js
@@ -135,6 +135,9 @@ export default {
     reportActionsView: {
         beFirstPersonToComment: 'Sé el primero en comentar',
     },
+    reportActionsViewMarkerBadge: {
+        newMsg: ({count}) => `${count} nuevos mensajes`,
+    },
     reportTypingIndicator: {
         isTyping: 'está escribiendo...',
         areTyping: 'están escribiendo...',

diff --git a/src/pages/home/report/MarkerBadge.js b/src/pages/home/report/MarkerBadge.js
@@ -6,14 +6,24 @@ import Button from '../../../components/Button';
 import Icon from '../../../components/Icon';
 import {Close, DownArrow} from '../../../components/Icon/Expensicons';
 import themeColors from '../../../styles/themes/default';
+import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
 
 const MARKER_NOT_ACTIVE_TRANSLATE_Y = -30;
 const MARKER_ACTIVE_TRANSLATE_Y = 10;
 const propTypes = {
+    /** Count of messages to show in the badge */
     count: PropTypes.number,
+
+    /** whether the marker is active */
     active: PropTypes.bool,
+
+    /** Callback to be called when user click the badge */
     onClose: PropTypes.func,
+
+    /** Callback to be called when user close the marker */
     onClick: PropTypes.func,
+
+    ...withLocalizePropTypes,
 };
 const defaultProps = {
     count: 0,
@@ -79,9 +89,10 @@ class Markerbadge extends PureComponent {
                                         styles.textWhite,
                                     ]}
                                 >
-                                    {this.props.count}
-                                    {' '}
-                                    new messages
+                                    {this.props.translate(
+                                        'reportActionsViewMarkerBadge.newMsg',
+                                        {count: this.props.count},
+                                    )}
                                 </Text>
                             </View>
                         )}
@@ -108,4 +119,4 @@ Markerbadge.propTypes = propTypes;
 Markerbadge.defaultProps = defaultProps;
 Markerbadge.displayName = 'Markerbadge';
 
-export default Markerbadge;
+export default withLocalize(Markerbadge);
diff --git a/src/pages/home/report/ReportActionsView.js b/src/pages/home/report/ReportActionsView.js
@@ -200,7 +200,7 @@ class ReportActionsView extends React.Component {
                 updateLastReadActionID(this.props.reportID);
             }
 
-            // showMarker
+            // show new Marker badge when there is a new Message
             this.showMarker();
         }
 
@@ -359,6 +359,11 @@ class ReportActionsView extends React.Component {
         updateLastReadActionID(this.props.reportID);
     }
 
+    /**
+     * Show the new Markerbadge when user is looking at the History of messages
+     *
+     * @memberof ReportActionsView
+     */
     showMarker() {
         if (this.currentScrollOffset < -200 && !this.state.isMarkerActive) {
             this.setState({isMarkerActive: true});
@@ -369,10 +374,21 @@ class ReportActionsView extends React.Component {
         }
     }
 
+    /**
+     * Hide the new MarkerBadge
+     *
+     * @memberof ReportActionsView
+     */
     hideMarker() {
         this.setState({isMarkerActive: false});
     }
 
+    /**
+     * keeps track of the Scroll offset of the main messages list
+     *
+     * @param {*} {nativeEvent}
+     * @memberof ReportActionsView
+     */
     trackScroll({nativeEvent}) {
         this.currentScrollOffset = -nativeEvent.contentOffset.y;
         this.showMarker();