From b1db1463f6e858b535d291d3f442eaf8a05bc410 Mon Sep 17 00:00:00 2001
From: Nick Frazier <nrflaw@gmail.com>
Date: Thu, 17 Nov 2016 10:17:27 -0500
Subject: [PATCH] replaced localizeMessage calls with FormattedMessage
 components (#4570)

* replaced localizeMessage calls with FormattedMessage components

localized file updates

* updated localization files

* updated localization files
---
 .../create_team/components/display_name.jsx   | 18 +++++++-
 .../create_team/components/team_url.jsx       | 42 +++++++++++++++----
 webapp/i18n/en.json                           |  2 +-
 3 files changed, 51 insertions(+), 11 deletions(-)

diff --git a/webapp/components/create_team/components/display_name.jsx b/webapp/components/create_team/components/display_name.jsx
index 50e7b340b1..a557a48c59 100644
--- a/webapp/components/create_team/components/display_name.jsx
+++ b/webapp/components/create_team/components/display_name.jsx
@@ -27,10 +27,24 @@ export default class TeamSignupDisplayNamePage extends React.Component {
 
         var displayName = ReactDOM.findDOMNode(this.refs.name).value.trim();
         if (!displayName) {
-            this.setState({nameError: Utils.localizeMessage('create_team.display_name.required', 'This field is required')});
+            this.setState({nameError: (
+                <FormattedMessage
+                    id='create_team.display_name.required'
+                    defaultMessage='This field is required'
+                />)
+            });
             return;
         } else if (displayName.length < Constants.MIN_TEAMNAME_LENGTH || displayName.length > Constants.MAX_TEAMNAME_LENGTH) {
-            this.setState({nameError: Utils.localizeMessage('create_team.display_name.charLength', 'Name must be 2 or more characters up to a maximum of 15')});
+            this.setState({nameError: (
+                <FormattedMessage
+                    id='create_team.display_name.charLength'
+                    defaultMessage='Name must be {min} or more characters up to a maximum of {max}'
+                    values={{
+                        min: Constants.MIN_TEAMNAME_LENGTH,
+                        max: Constants.MAX_TEAMNAME_LENGTH
+                    }}
+                />)
+            });
             return;
         }
 
diff --git a/webapp/components/create_team/components/team_url.jsx b/webapp/components/create_team/components/team_url.jsx
index 4bea240dad..cff0002e08 100644
--- a/webapp/components/create_team/components/team_url.jsx
+++ b/webapp/components/create_team/components/team_url.jsx
@@ -42,26 +42,47 @@ export default class TeamUrl extends React.Component {
         const urlRegex = /^[a-z]+([a-z\-0-9]+|(__)?)[a-z0-9]+$/g;
 
         if (!name) {
-            this.setState({nameError: Utils.localizeMessage('create_team.team_url.required', 'This field is required')});
+            this.setState({nameError: (
+                <FormattedMessage
+                    id='create_team.team_url.required'
+                    defaultMessage='This field is required'
+                />)
+            });
             return;
         }
 
         if (cleanedName.length < Constants.MIN_TEAMNAME_LENGTH || cleanedName.length > Constants.MAX_TEAMNAME_LENGTH) {
-            this.setState({nameError: Utils.localizeMessage('create_team.team_url.charLength', 'Name must be 4 or more characters up to a maximum of 15')});
+            this.setState({nameError: (
+                <FormattedMessage
+                    id='create_team.team_url.charLength'
+                    defaultMessage='Name must be {min} or more characters up to a maximum of {max}'
+                    values={{
+                        min: Constants.MIN_TEAMNAME_LENGTH,
+                        max: Constants.MAX_TEAMNAME_LENGTH
+                    }}
+                />)
+            });
             return;
         }
 
         if (cleanedName !== name || !urlRegex.test(name)) {
-            this.setState({nameError: Utils.localizeMessage('create_team.team_url.regex', "Use only lower case letters, numbers and dashes. Must start with a letter and can't end in a dash.")});
-            return;
-        } else if (cleanedName.length < Constants.MIN_TEAMNAME_LENGTH || cleanedName.length > Constants.MAX_TEAMNAME_LENGTH) {
-            this.setState({nameError: Utils.localizeMessage('create_team.team_url.charLength', 'Name must be 2 or more characters up to a maximum of 15')});
+            this.setState({nameError: (
+                <FormattedMessage
+                    id='create_team.team_url.regex'
+                    defaultMessage="Use only lower case letters, numbers and dashes. Must start with a letter and can't end in a dash."
+                />)
+            });
             return;
         }
 
         for (let index = 0; index < Constants.RESERVED_TEAM_NAMES.length; index++) {
             if (cleanedName.indexOf(Constants.RESERVED_TEAM_NAMES[index]) === 0) {
-                this.setState({nameError: Utils.localizeMessage('create_team.team_url.taken', 'URL is taken or contains a reserved word')});
+                this.setState({nameError: (
+                    <FormattedMessage
+                        id='create_team.team_url.taken'
+                        defaultMessage='URL is taken or contains a reserved word'
+                    />)
+                });
                 return;
             }
         }
@@ -74,7 +95,12 @@ export default class TeamUrl extends React.Component {
         checkIfTeamExists(name,
             (foundTeam) => {
                 if (foundTeam) {
-                    this.setState({nameError: Utils.localizeMessage('create_team.team_url.unavailable', 'This URL is unavailable. Please try another.')});
+                    this.setState({nameError: (
+                        <FormattedMessage
+                            id='create_team.team_url.unavailable'
+                            defaultMessage='This URL is unavailable. Please try another.'
+                        />)
+                    });
                     this.setState({isLoading: false});
                     return;
                 }
diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json
index ba2afcce8e..723052576f 100644
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -1117,7 +1117,7 @@
   "create_team.display_name.required": "This field is required",
   "create_team.display_name.teamName": "Team Name",
   "create_team.team_url.back": "Back to previous step",
-  "create_team.team_url.charLength": "Name must be 2 or more characters up to a maximum of 15",
+  "create_team.team_url.charLength": "Name must be {min} or more characters up to a maximum of {max}",
   "create_team.team_url.creatingTeam": "Creating team...",
   "create_team.team_url.finish": "Finish",
   "create_team.team_url.hint": "<li>Short and memorable is best</li><li>Use lowercase letters, numbers and dashes</li><li>Must start with a letter and can't end in a dash</li>",