Merge pull request #390 from mewtaylor/issue/356-project-count

Fix GH-356: Use `formatNumber` to localize project count

src/components/intro/intro.jsx

@@ -13,9 +13,6 @@ Modal.setAppElement(document.getElementById('view'));
 
 var Intro = React.createClass({
     type: 'Intro',
-    propTypes: {
-        projectCount: React.PropTypes.number
-    },
     getDefaultProps: function () {
         return {
             messages: {
@@ -25,9 +22,10 @@ var Intro = React.createClass({
                 'intro.joinScratch': 'JOIN SCRATCH',
                 'intro.seeExamples': 'SEE EXAMPLES',
                 'intro.tagLine': 'Create stories, games, and animations<br /> Share with others around the world',
-                'intro.tryItOut': 'TRY IT OUT'
+                'intro.tryItOut': 'TRY IT OUT',
+                'intro.description': 'A creative learning community with <span class="project-count"> ' +
+                                     'over 13 million </span>projects shared'
             },
-            projectCount: 10569070,
             session: {}
         };
     },
@@ -113,11 +111,8 @@ var Intro = React.createClass({
                                       onRequestClose={this.closeRegistration}
                                       onRegistrationDone={this.completeRegistration} />
                     </div>
-                    <div className="description">
-                        A creative learning community with
-                        <span className="project-count"> {this.props.projectCount.toLocaleString()} </span>
-                        projects shared
-                    </div>
+                    <div className="description"
+                         dangerouslySetInnerHTML={{__html: this.props.messages['intro.description']}}></div>
                     <div className="links">
                         <a href="/about/">
                             {this.props.messages['intro.aboutScratch']}

src/views/splash/l10n.json

@@ -18,6 +18,8 @@
     "intro.seeExamples": "SEE EXAMPLES",
     "intro.tagLine": "Create stories, games, and animations<br /> Share with others around the world",
     "intro.tryItOut": "TRY IT OUT",
+    "intro.description": "A creative learning community with <span class=\"project-count\"> {value} </span>projects shared",
+    "intro.defaultDescription": "A creative learning community with <span class=\"project-count\"> over 13 million </span>projects shared",
 
     "news.scratchNews": "Scratch News",
 

src/views/splash/splash.jsx

@@ -29,7 +29,7 @@ var Splash = injectIntl(React.createClass({
     ],
     getInitialState: function () {
         return {
-            projectCount: 'over 13 million', // gets the shared project count
+            projectCount: 13000000, // gets the shared project count
             activity: [], // recent social actions taken by users someone is following
             news: [], // gets news posts from the scratch Tumblr
             featuredCustom: {}, // custom homepage rows, such as "Projects by Scratchers I'm Following"
@@ -326,8 +326,9 @@ var Splash = injectIntl(React.createClass({
         var emailConfirmationStyle = {width: 500, height: 330, padding: 1};
         var homepageCacheState = this.getHomepageRefreshStatus();
 
-        var formatMessage = this.props.intl.formatMessage;
         var formatHTMLMessage = this.props.intl.formatHTMLMessage;
+        var formatNumber = this.props.intl.formatNumber;
+        var formatMessage = this.props.intl.formatMessage;
         var messages = {
             'general.viewAll': formatMessage({id: 'general.viewAll'}),
             'news.scratchNews': formatMessage({id: 'news.scratchNews'}),
@@ -343,6 +344,12 @@ var Splash = injectIntl(React.createClass({
             'intro.tagLine': formatHTMLMessage({id: 'intro.tagLine'}),
             'intro.tryItOut': formatMessage({id: 'intro.tryItOut'})
         };
+        if (this.state.projectCount === this.getInitialState().projectCount) {
+            messages['intro.description'] = formatHTMLMessage({id: 'intro.defaultDescription'});
+        } else {
+            var count = formatNumber(this.state.projectCount);
+            messages['intro.description'] = formatHTMLMessage({id: 'intro.description'}, {value: count});
+        }
 
         return (
             <div className="splash">