Fixed incorrect formatting of numbers and plural words (#6696)

* Fixed incorrect formatting of numbers and plural words

* Removed unused i18n strings

* Fixed eslint errors

9 files changed, 44 insertions, 34 deletions

diff --git a/webapp/components/add_users_to_team/add_users_to_team.jsx b/webapp/components/add_users_to_team/add_users_to_team.jsx
index 691323568..34ad6eb0d 100644
--- a/webapp/components/add_users_to_team/add_users_to_team.jsx
+++ b/webapp/components/add_users_to_team/add_users_to_team.jsx
@@ -201,7 +201,7 @@ export default class AddUsersToTeam extends React.Component {
         const numRemainingText = (
             <FormattedMessage
                 id='multiselect.numPeopleRemaining'
-                defaultMessage='You can add {num, number} more {num, plural, =0 {people} one {person} other {people}}. '
+                defaultMessage='You can add {num, number} more {num, plural, one {person} other {people}}. '
                 values={{
                     num: MAX_SELECTABLE_VALUES - this.state.values.length
                 }}
diff --git a/webapp/components/admin_console/system_users/system_users_list.jsx b/webapp/components/admin_console/system_users/system_users_list.jsx
index c567fd43c..bca80428b 100644
--- a/webapp/components/admin_console/system_users/system_users_list.jsx
+++ b/webapp/components/admin_console/system_users/system_users_list.jsx
@@ -180,7 +180,7 @@ export default class SystemUsersList extends React.Component {
                 return (
                     <FormattedMessage
                         id='system_users_list.countSearch'
-                        defaultMessage='{count, number} {count, plural, one {user} other {users}} of {total} total'
+                        defaultMessage='{count, number} {count, plural, one {user} other {users}} of {total, number} total'
                         values={{
                             count,
                             total
@@ -191,7 +191,7 @@ export default class SystemUsersList extends React.Component {
                 return (
                     <FormattedMessage
                         id='system_users_list.countPage'
-                        defaultMessage='{startCount, number} - {endCount, number} {count, plural, one {user} other {users}} of {total} total'
+                        defaultMessage='{startCount, number} - {endCount, number} {count, plural, one {user} other {users}} of {total, number} total'
                         values={{
                             count,
                             startCount: startCount + 1,
diff --git a/webapp/components/delete_post_modal.jsx b/webapp/components/delete_post_modal.jsx
index a64c466cc..fc7e24f22 100644
--- a/webapp/components/delete_post_modal.jsx
+++ b/webapp/components/delete_post_modal.jsx
@@ -87,7 +87,7 @@ export default class DeletePostModal extends React.Component {
             commentWarning = (
                 <FormattedMessage
                     id='delete_post.warning'
-                    defaultMessage='This post has {count} comment(s) on it.'
+                    defaultMessage='This post has {count, number} {count, plural, one {comment} other {comments}} on it.'
                     values={{
                         count: this.state.commentCount
                     }}
diff --git a/webapp/components/file_upload.jsx b/webapp/components/file_upload.jsx
index 07aa43a99..6b36e83fb 100644
--- a/webapp/components/file_upload.jsx
+++ b/webapp/components/file_upload.jsx
@@ -17,7 +17,7 @@ import {uploadFile} from 'actions/file_actions.jsx';
 const holders = defineMessages({
     limited: {
         id: 'file_upload.limited',
-        defaultMessage: 'Uploads limited to {count} files maximum. Please use additional posts for more files.'
+        defaultMessage: 'Uploads limited to {count, number} files maximum. Please use additional posts for more files.'
     },
     filesAbove: {
         id: 'file_upload.filesAbove',
@@ -94,13 +94,13 @@ class FileUpload extends React.Component {
             const clientId = Utils.generateId();
 
             const request = uploadFile(
-                    files[i],
-                    files[i].name,
-                    channelId,
-                    clientId,
-                    this.fileUploadSuccess.bind(this, channelId),
-                    this.fileUploadFail.bind(this, clientId)
-                );
+                files[i],
+                files[i].name,
+                channelId,
+                clientId,
+                this.fileUploadSuccess.bind(this, channelId),
+                this.fileUploadFail.bind(this, clientId)
+            );
 
             const requests = this.state.requests;
             requests[clientId] = request;
diff --git a/webapp/components/filtered_user_list.jsx b/webapp/components/filtered_user_list.jsx
index cddbc762e..3a7190b2d 100644
--- a/webapp/components/filtered_user_list.jsx
+++ b/webapp/components/filtered_user_list.jsx
@@ -138,7 +138,7 @@ class FilteredUserList extends React.Component {
             count = (
                 <FormattedMessage
                     id='filtered_user_list.count'
-                    defaultMessage='{count} {count, plural, =0 {0 members} one {member} other {members}}'
+                    defaultMessage='{count, number} {count, plural, one {member} other {members}}'
                     values={{
                         count: users.length
                     }}
@@ -148,7 +148,7 @@ class FilteredUserList extends React.Component {
             count = (
                 <FormattedMessage
                     id='filtered_user_list.countTotal'
-                    defaultMessage='{count} {count, plural, =0 {0 members} one {member} other {members}} of {total} Total'
+                    defaultMessage='{count, number} {count, plural, one {member} other {members}} of {total, number} total'
                     values={{
                         count: users.length,
                         total: this.state.users.length
diff --git a/webapp/components/more_direct_channels/more_direct_channels.jsx b/webapp/components/more_direct_channels/more_direct_channels.jsx
index 8b5b6d65c..8b4a105b4 100644
--- a/webapp/components/more_direct_channels/more_direct_channels.jsx
+++ b/webapp/components/more_direct_channels/more_direct_channels.jsx
@@ -285,7 +285,7 @@ export default class MoreDirectChannels extends React.Component {
         const numRemainingText = (
             <FormattedMessage
                 id='multiselect.numPeopleRemaining'
-                defaultMessage='You can add {num, number} more {num, plural, =0 {people} one {person} other {people}}. '
+                defaultMessage='You can add {num, number} more {num, plural, one {person} other {people}}. '
                 values={{
                     num: MAX_SELECTABLE_VALUES - this.state.values.length
                 }}
diff --git a/webapp/components/post_view/commented_on_files_message/commented_on_files_message.jsx b/webapp/components/post_view/commented_on_files_message/commented_on_files_message.jsx
index a09b2b156..a8c6845c8 100644
--- a/webapp/components/post_view/commented_on_files_message/commented_on_files_message.jsx
+++ b/webapp/components/post_view/commented_on_files_message/commented_on_files_message.jsx
@@ -1,9 +1,9 @@
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
+import PropTypes from 'prop-types';
 import React from 'react';
-
-import * as Utils from 'utils/utils.jsx';
+import {FormattedMessage} from 'react-intl';
 
 export default class CommentedOnFilesMessage extends React.PureComponent {
     static propTypes = {
@@ -11,19 +11,19 @@ export default class CommentedOnFilesMessage extends React.PureComponent {
         /*
          * The id of the post that was commented on
          */
-        parentPostId: React.PropTypes.string.isRequired,
+        parentPostId: PropTypes.string.isRequired,
 
         /*
          * An array of file metadata for the parent post
          */
-        fileInfos: React.PropTypes.arrayOf(React.PropTypes.object),
+        fileInfos: PropTypes.arrayOf(PropTypes.object),
 
-        actions: React.PropTypes.shape({
+        actions: PropTypes.shape({
 
             /*
              * Function to get file metadata for a post
              */
-            getFilesForPost: React.PropTypes.func.isRequired
+            getFilesForPost: PropTypes.func.isRequired
         }).isRequired
     }
 
@@ -34,18 +34,28 @@ export default class CommentedOnFilesMessage extends React.PureComponent {
     }
 
     render() {
-        let message = ' ';
-
-        if (this.props.fileInfos && this.props.fileInfos.length > 0) {
-            message = this.props.fileInfos[0].name;
+        if (!this.props.fileInfos || this.props.fileInfos.length === 0) {
+            return null;
+        }
 
-            if (this.props.fileInfos.length === 2) {
-                message += Utils.localizeMessage('post_body.plusOne', ' plus 1 other file');
-            } else if (this.props.fileInfos.length > 2) {
-                message += Utils.localizeMessage('post_body.plusMore', ' plus {count} other files').replace('{count}', (this.props.fileInfos.length - 1).toString());
-            }
+        let plusMore = null;
+        if (this.props.fileInfos.length > 1) {
+            plusMore = (
+                <FormattedMessage
+                    id='post_body.plusMore'
+                    defaultMessage=' plus {count, number} other {count, plural, one {file} other {files}}'
+                    values={{
+                        count: this.props.fileInfos.length
+                    }}
+                />
+            );
         }
 
-        return <span>{message}</span>;
+        return (
+            <span>
+                {this.props.fileInfos[0].name}
+                {plusMore}
+            </span>
+        );
     }
 }
diff --git a/webapp/components/searchable_user_list/searchable_user_list.jsx b/webapp/components/searchable_user_list/searchable_user_list.jsx
index dae7835ac..e936ed25f 100644
--- a/webapp/components/searchable_user_list/searchable_user_list.jsx
+++ b/webapp/components/searchable_user_list/searchable_user_list.jsx
@@ -135,7 +135,7 @@ export default class SearchableUserList extends React.Component {
                 return (
                     <FormattedMessage
                         id='filtered_user_list.countTotal'
-                        defaultMessage='{count} {count, plural, =0 {0 members} one {member} other {members}} of {total} total'
+                        defaultMessage='{count, number} {count, plural, one {member} other {members}} of {total, number} total'
                         values={{
                             count,
                             total
@@ -147,7 +147,7 @@ export default class SearchableUserList extends React.Component {
             return (
                 <FormattedMessage
                     id='filtered_user_list.countTotalPage'
-                    defaultMessage='{startCount, number} - {endCount, number} {count, plural, =0 {0 members} one {member} other {members}} of {total} total'
+                    defaultMessage='{startCount, number} - {endCount, number} {count, plural, one {member} other {members}} of {total, number} total'
                     values={{
                         count,
                         startCount: startCount + 1,
diff --git a/webapp/components/view_image_popover_bar.jsx b/webapp/components/view_image_popover_bar.jsx
index f07eb19fb..88055b47b 100644
--- a/webapp/components/view_image_popover_bar.jsx
+++ b/webapp/components/view_image_popover_bar.jsx
@@ -42,7 +42,7 @@ export default class ViewImagePopoverBar extends React.Component {
                 <span className='pull-left text'>
                     <FormattedMessage
                         id='view_image_popover.file'
-                        defaultMessage='File {count} of {total}'
+                        defaultMessage='File {count, number} of {total, number}'
                         values={{
                             count: (this.props.fileId + 1),
                             total: this.props.totalFiles