From c1de837595eaa2bf23551ea4608f48bbd3a048e3 Mon Sep 17 00:00:00 2001
From: Matthew Taylor <mewtaylor@gmail.com>
Date: Fri, 16 Oct 2015 11:04:01 -0400
Subject: [PATCH] Add formatted messages

only to components and things that will be going out in the first deploy
---
 src/components/activity/activity.jsx     |  15 +-
 src/components/footer/footer.jsx         | 178 +++++++++++++++++++----
 src/components/intro/intro.jsx           |  47 +++++-
 src/components/login/login.jsx           |  26 +++-
 src/components/navigation/navigation.jsx |  97 ++++++++++--
 src/components/news/news.jsx             |  20 ++-
 6 files changed, 322 insertions(+), 61 deletions(-)

diff --git a/src/components/activity/activity.jsx b/src/components/activity/activity.jsx
index 4e55441a9..c3732b1ce 100644
--- a/src/components/activity/activity.jsx
+++ b/src/components/activity/activity.jsx
@@ -1,10 +1,20 @@
 var React = require('react');
+var ReactIntl = require('react-intl');
+var defineMessages = ReactIntl.defineMessages;
+var injectIntl = ReactIntl.injectIntl;
 
 var Box = require('../box/box.jsx');
 var Format = require('../../lib/format.js');
 
 require('./activity.scss');
 
+var defaultMessages = defineMessages({
+    whatsHappening: {
+        id: 'general.whatsHappening',
+        defaultMessage: 'What\s Happening?'
+    }
+});
+
 var Activity = React.createClass({
     type: 'Activity',
     propTypes: {
@@ -16,10 +26,11 @@ var Activity = React.createClass({
         };
     },
     render: function () {
+        var formatMessage = this.props.intl;
         return (
             <Box
                 className="activity"
-                title="What's Happening?">
+                title={formatMessage(defaultMessages.whatsHappening)}>
 
                 <ul>
                     {this.props.items.map(function (item) {
@@ -39,4 +50,4 @@ var Activity = React.createClass({
     }
 });
 
-module.exports = Activity;
+module.exports = injectIntl(Activity);
diff --git a/src/components/footer/footer.jsx b/src/components/footer/footer.jsx
index 396aa7ebd..e934e2018 100644
--- a/src/components/footer/footer.jsx
+++ b/src/components/footer/footer.jsx
@@ -1,4 +1,5 @@
 var React = require('react');
+var FormattedMessage = require('react-intl').FormattedMessage;
 
 var LanguageChooser = require('../languagechooser/languagechooser.jsx');
 
@@ -11,53 +12,172 @@ var Footer = React.createClass({
             <div className="inner">
                 <div className="lists">
                     <dl>
-                        <dt>About</dt>
-                        <dd><a href="/about/">About Scratch</a></dd>
-                        <dd><a href="/parents/">For Parents</a></dd>
-                        <dd><a href="/educators/">For Educators</a></dd>
-                        <dd><a href="/info/credits/">Credits</a></dd>
-                        <dd><a href="/jobs/">Jobs</a></dd>
-                        <dd><a href="http://wiki.scratch.mit.edu/wiki/Scratch_Press">Press</a></dd>
+                        <dt>
+                            <FormattedMessage
+                                id='general.about'
+                                defaultMessage={'About'} />
+                        </dt>
+                        <dd><a href="/about/">
+                            <FormattedMessage
+                                id='footer.about'
+                                defaultMessage={'About Scratch'} />
+                        </a></dd>
+                        <dd><a href="/parents/">
+                            <FormattedMessage
+                                id='general.forParents'
+                                defaultMessage={'For Parents'} />
+                        </a></dd>
+                        <dd><a href="/educators/">
+                            <FormattedMessage
+                                id='general.forEducators'
+                                defaultMessage={'For Educators'} />
+                        </a></dd>
+                        <dd><a href="/info/credits/">
+                            <FormattedMessage
+                                id='general.credits'
+                                defaultMessage={'Credits'} />
+                        </a></dd>
+                        <dd><a href="/jobs/">
+                            <FormattedMessage
+                                id='general.jobs'
+                                defaultMessage={'Jobs'} />
+                        </a></dd>
+                        <dd><a href="http://wiki.scratch.mit.edu/wiki/Scratch_Press">
+                            <FormattedMessage
+                                id='general.press'
+                                defaultMessage={'Press'} />
+                        </a></dd>
                     </dl>
 
                     <dl>
-                        <dt>Community</dt>
-                        <dd><a href="/community_guidelines/">Community Guidelines</a></dd>
-                        <dd><a href="/discuss/">Discussion Forums</a></dd>
-                        <dd><a href="https://wiki.scratch.mit.edu/">Scratch Wiki</a></dd>
-                        <dd><a href="/statistics/">Statistics</a></dd>
+                        <dt>
+                            <FormattedMessage
+                                id='general.communityHeader'
+                                defaultMessage={'Community'} />
+                        </dt>
+                        <dd><a href="/community_guidelines/">
+                            <FormattedMessage
+                                id='general.guidelines'
+                                defaultMessage={'Community Guidelines'} />
+                        </a></dd>
+                        <dd><a href="/discuss/">
+                            <FormattedMessage
+                                id='footer.discuss'
+                                defaultMessage={'Discussion Forums'} />
+                        </a></dd>
+                        <dd><a href="https://wiki.scratch.mit.edu/">
+                            <FormattedMessage
+                                id='general.wiki'
+                                defaultMessage={'Scratch Wiki'} />
+                        </a></dd>
+                        <dd><a href="/statistics/">
+                            <FormattedMessage
+                                id='general.statistics'
+                                defaultMessage={'Statistics'} />
+                        </a></dd>
                     </dl>
 
                     <dl>
-                        <dt>Support</dt>
-                        <dd><a href="/help/">Help Page</a></dd>
-                        <dd><a href="/info/faq/">FAQ</a></dd>
-                        <dd><a href="/scratch2download/">Offline Editor</a></dd>
-                        <dd><a href="/contact-us/">Contact Us</a></dd>
-                        <dd><a href="https://secure.donationpay.org/codetolearn/">Donate</a></dd>
+                        <dt>
+                            <FormattedMessage
+                                id='general.support'
+                                defaultMessage={'Support'} />
+                        </dt>
+                        <dd><a href="/help/">
+                            <FormattedMessage
+                                id='footer.help'
+                                defaultMessage={'Help Page'} />
+                        </a></dd>
+                        <dd><a href="/info/faq/">
+                            <FormattedMessage
+                                id='general.faq'
+                                defaultMessage={'FAQ'} />
+                        </a></dd>
+                        <dd><a href="/scratch2download/">
+                            <FormattedMessage
+                                id='general.offlineEditor'
+                                defaultMessage={'Offline Editor'} />
+                        </a></dd>
+                        <dd><a href="/contact-us/">
+                            <FormattedMessage
+                                id='general.contactUs'
+                                defaultMessage={'Contact Us'} />
+                        </a></dd>
+                        <dd><a href="https://secure.donationpay.org/codetolearn/">
+                            <FormattedMessage
+                                id='general.donate'
+                                defaultMessage={'Donate'} />
+                        </a></dd>
                     </dl>
 
                     <dl>
-                        <dt>Legal</dt>
-                        <dd><a href="/terms_of_use/">Terms of Use</a></dd>
-                        <dd><a href="/privacy_policy/">Privacy Policy</a></dd>
-                        <dd><a href="/DMCA/">DMCA</a></dd>
+                        <dt>
+                            <FormattedMessage
+                                id='general.legal'
+                                defaultMessage={'Legal'} />
+                        </dt>
+                        <dd><a href="/terms_of_use/">
+                            <FormattedMessage
+                                id='general.termsOfUse'
+                                defaultMessage={'Terms of Use'} />
+                            Terms of Use
+                        </a></dd>
+                        <dd><a href="/privacy_policy/">
+                            <FormattedMessage
+                                id='privacyPolicy'
+                                defaultMessage={'Privacy Policy'} />
+                        </a></dd>
+                        <dd><a href="/DMCA/">
+                            <FormattedMessage
+                                id='general.dmca'
+                                defaultMessage={'DMCA'} />
+                        </a></dd>
                     </dl>
 
                     <dl>
-                        <dt>Scratch Family</dt>
-                        <dd><a href="http://scratched.gse.harvard.edu/">ScratchEd</a></dd>
-                        <dd><a href="http://www.scratchjr.org/">ScratchJr</a></dd>
-                        <dd><a href="http://day.scratch.mit.edu/">Scratch Day</a></dd>
-                        <dd><a href="/conference/">Scratch Conference</a></dd>
-                        <dd><a href="http://www.scratchfoundation.org/">Scratch Foundation</a></dd>
+                        <dt>
+                            <FormattedMessage
+                                id='footer.scratchFamily'
+                                defaultMessage={'Scratch Family'} />
+                        </dt>
+                        <dd><a href="http://scratched.gse.harvard.edu/">
+                            <FormattedMessage
+                                id='general.scratchEd'
+                                defaultMessage={'ScratchEd'} />
+                        </a></dd>
+                        <dd><a href="http://www.scratchjr.org/">
+                            <FormattedMessage
+                                id='general.scratchJr'
+                                defaultMessage={'ScratchJr'} />
+                        </a></dd>
+                        <dd><a href="http://day.scratch.mit.edu/">
+                            <FormattedMessage
+                                id='general.scratchday'
+                                defaultMessage={'Scratch Day'} />
+                        </a></dd>
+                        <dd><a href="/conference/">
+                            <FormattedMessage
+                                id='general.scratchConference'
+                                defaultMessage={'Scratch Conference'} />
+                        </a></dd>
+                        <dd><a href="http://www.scratchfoundation.org/">
+                            <FormattedMessage
+                                id='general.scratchFoundation'
+                                defaultMessage={'Scratch Foundation'} />
+                        </a></dd>
                     </dl>
                 </div>
 
                 <LanguageChooser />
 
                 <div className="copyright">
-                    <p>Scratch is a project of the Lifelong Kindergarten Group at the MIT Media Lab</p>
+                    <p>
+                        <FormattedMessage
+                            id='general.copyright'
+                            defaultMessage={
+                                'Scratch is a project of the Lifelong Kindergarten Group at the MIT Media Lab'
+                            } />
+                    </p>
                 </div>
             </div>
         );
diff --git a/src/components/intro/intro.jsx b/src/components/intro/intro.jsx
index 98ac2c250..cb2640415 100644
--- a/src/components/intro/intro.jsx
+++ b/src/components/intro/intro.jsx
@@ -1,4 +1,7 @@
 var React = require('react');
+var ReactIntl = require('react-intl');
+var FormattedMessage = ReactIntl.FormattedMessage;
+var FormattedHTMLMessage = ReactIntl.FormattedHTMLMessage;
 var Modal = require('../modal/modal.jsx');
 
 require('./intro.scss');
@@ -31,8 +34,12 @@ var Intro = React.createClass({
             <div className="intro">
                 <div className="content">
                     <h1>
-                        Create stories, games, and animations<br />
-                        Share with others around the world
+                        <FormattedHTMLMessage
+                            id='intro.tagLine'
+                            defaultMessage={
+                                'Create stories, games, and animations<br /> ' +
+                                'Share with others around the world'
+                            } />
                     </h1>
                     <div className="sprites">
                         <a className="sprite sprite-1" href="/projects/editor/?tip_bar=getStarted">
@@ -43,7 +50,11 @@ var Intro = React.createClass({
                                 className="costume costume-2"
                                 src="//cdn.scratch.mit.edu/scratchr2/static/images/cat-b.png" />
                             <div className="circle"></div>
-                            <div className="text">TRY IT OUT</div>
+                            <div className="text">
+                                <FormattedMessage
+                                    id='intro.tryItOut'
+                                    defaultMessage='TRY IT OUT' />
+                            </div>
                         </a>
                         <a className="sprite sprite-2" href="/starter_projects/">
                             <img
@@ -53,7 +64,11 @@ var Intro = React.createClass({
                                 className="costume costume-2"
                                 src="//cdn.scratch.mit.edu/scratchr2/static/images/tera-b.png" />
                             <div className="circle"></div>
-                            <div className="text">SEE EXAMPLES</div>
+                            <div className="text">
+                                <FormattedMessage
+                                    id='intro.seeExamples'
+                                    defaultMessage='SEE EXAMPLES' />
+                            </div>
                         </a>
                         <a className="sprite sprite-3" href="#">
                             <img
@@ -63,7 +78,11 @@ var Intro = React.createClass({
                                 className="costume costume-2"
                                 src="//cdn.scratch.mit.edu/scratchr2/static/images/gobo-b.png" />
                             <div className="circle"></div>
-                            <div className="text">JOIN SCRATCH</div>
+                            <div className="text">
+                                <FormattedMessage
+                                    id='intro.joinScratch'
+                                    defaultMessage='JOIN SCRATCH' />
+                            </div>
                             <div className="text subtext">( it&rsquo;s free )</div>
                         </a>
                     </div>
@@ -73,9 +92,21 @@ var Intro = React.createClass({
                         projects shared
                     </div>
                     <div className="links">
-                        <a href="/about/">ABOUT SCRATCH</a>
-                        <a href="/educators/">FOR EDUCATORS</a>
-                        <a className="last" href="/parents/">FOR PARENTS</a>
+                        <a href="/about/">
+                            <FormattedMessage
+                                id='intro.aboutScratch'
+                                defaultMessage='ABOUT SCRATCH' />
+                        </a>
+                        <a href="/educators/">
+                            <FormattedMessage
+                                id='intro.forEducators'
+                                defaultMessage='FOR EDUCATORS' />
+                        </a>
+                        <a className="last" href="/parents/">
+                            <FormattedMessage
+                                id='intro.forParents'
+                                defaultMessage='FOR PARENTS' />
+                        </a>
                     </div>
                 </div>
                 <div className="video">
diff --git a/src/components/login/login.jsx b/src/components/login/login.jsx
index b08d6126f..9df04b554 100644
--- a/src/components/login/login.jsx
+++ b/src/components/login/login.jsx
@@ -1,4 +1,6 @@
 var React = require('react');
+var FormattedMessage = require('react-intl').FormattedMessage;
+
 var Input = require('../forms/input.jsx');
 var Button = require('../forms/button.jsx');
 
@@ -25,12 +27,28 @@ var Login = React.createClass({
         return (
             <div className="login">
                 <form onSubmit={this.handleSubmit}>
-                    <label htmlFor="username">Username</label>
+                    <label htmlFor="username">
+                        <FormattedMessage
+                            id='general.username'
+                            defaultMessage={'Username'} />
+                    </label>
                     <Input type="text" ref="username" name="username" maxLength="30" />
-                    <label htmlFor="password">Password</label>
+                    <label htmlFor="password">
+                        <FormattedMessage
+                            id='general.password'
+                            defaultMessage={'Password'} />
+                    </label>
                     <Input type="password" ref="password" name="password" />
-                    <Button className="submit-button white" type="submit">Sign in</Button>
-                    <a className="right" href="/accounts/password_reset/">Forgot password?</a>
+                    <Button className="submit-button white" type="submit">
+                        <FormattedMessage
+                            id='general.signIn'
+                            defaultMessage={'Sign in'} />
+                    </Button>
+                    <a className="right" href="/accounts/password_reset/">
+                        <FormattedMessage
+                            id='login.forgotPassword'
+                            defaultMessage={'Forgot Password?'} />
+                    </a>
                     {error}
                 </form>
             </div>
diff --git a/src/components/navigation/navigation.jsx b/src/components/navigation/navigation.jsx
index 3afc16337..e32a05775 100644
--- a/src/components/navigation/navigation.jsx
+++ b/src/components/navigation/navigation.jsx
@@ -1,5 +1,9 @@
-var React = require('react');
 var classNames = require('classnames');
+var React = require('react');
+var ReactIntl = require('react-intl');
+var defineMessages = ReactIntl.defineMessages;
+var FormattedMessage = ReactIntl.FormattedMessage;
+var injectIntl = ReactIntl.injectIntl;
 var xhr = require('xhr');
 
 var Api = require('../../mixins/api.jsx');
@@ -12,6 +16,17 @@ var Session = require('../../mixins/session.jsx');
 
 require('./navigation.scss');
 
+var defaultMessages = defineMessages({
+    messages: {
+        id: 'general.messages',
+        defaultMessage: 'Messages'
+    },
+    myStuff: {
+        id: 'general.myStuff',
+        defaultMessage: 'My Stuff'
+    }
+});
+
 var Navigation = React.createClass({
     type: 'Navigation',
     mixins: [
@@ -95,11 +110,31 @@ var Navigation = React.createClass({
                 <ul>
                     <li className="logo"><a href="/"></a></li>
                     
-                    <li className="link create"><a href="/projects/editor">Create</a></li>
-                    <li className="link explore"><a href="/explore?date=this_month">Explore</a></li>
-                    <li className="link discuss"><a href="/discuss">Discuss</a></li>
-                    <li className="link about"><a href="/about">About</a></li>
-                    <li className="link help"><a href="/help">Help</a></li>
+                    <li className="link create"><a href="/projects/editor">
+                        <FormattedMessage
+                            id="general.create"
+                            defaultMessage={'Create'} />
+                    </a></li>
+                    <li className="link explore"><a href="/explore?date=this_month">
+                        <FormattedMessage
+                            id="general.explore"
+                            defaultMessage={'Explore'} />
+                    </a></li>
+                    <li className="link discuss"><a href="/discuss">
+                        <FormattedMessage
+                            id="general.discuss"
+                            defaultMessage={'Discuss'} />
+                    </a></li>
+                    <li className="link about"><a href="/about">
+                        <FormattedMessage
+                            id="general.about"
+                            defaultMessage={'About'} />
+                    </a></li>
+                    <li className="link help"><a href="/help">
+                        <FormattedMessage
+                            id="general.help"
+                            defaultMessage={'Help'} />
+                    </a></li>
 
                     <li className="search">
                         <form action="/search/google_results" method="get">
@@ -111,10 +146,20 @@ var Navigation = React.createClass({
                     </li>
                     {this.state.session.user ? [
                         <li className="link right messages" key="messages">
-                            <a href="/messages/" title="Messages">Messages</a>
+                            <a
+                                href="/messages/"
+                                title={formatMessage(defaultMessages.messages)}
+                            >
+                                <FormattedMessage {...defaultMessages.messages} />
+                            </a>
                         </li>,
                         <li className="link right mystuff" key="mystuff">
-                            <a href="/mystuff/" title="My Stuff">My Stuff</a>
+                            <a
+                                href="/mystuff/"
+                                title={formatMessage(defaultMessages.myStuff)}
+                            >
+                                <FormattedMessage {...defaultMessages.myStuff} />
+                            </a>
                         </li>,
                         <li className="link right account-nav" key="account-nav">
                             <a className="userInfo" href="#" onClick={this.handleAccountNavClick}>
@@ -125,21 +170,43 @@ var Navigation = React.createClass({
                                     as="ul"
                                     isOpen={this.state.accountNavOpen}
                                     onRequestClose={this.closeAccountNav}>
-                                <li><a href={this.getProfileUrl()}>Profile</a></li>
-                                <li><a href="/mystuff/">My Stuff</a></li>
-                                <li><a href="/accounts/settings/">Account settings</a></li>
+                                <li><a href={this.getProfileUrl()}>
+                                    <FormattedMessage
+                                        id='general.profile'
+                                        defaultMessage={'Profile'} />
+                                </a></li>
+                                <li><a href="/mystuff/">
+                                    <FormattedMessage {...defaultMessages.myStuff} />
+                                </a></li>
+                                <li><a href="/accounts/settings/">
+                                    <FormattedMessage
+                                        id='general.accountSettings'
+                                        defaultMessage={'Account settings'} />
+                                </a></li>
                                 <li className="divider">
-                                    <a href="#" onClick={this.handleLogOut}>Sign out</a>
+                                    <a href="#" onClick={this.handleLogOut}>
+                                        <FormattedMessage
+                                            id='navigation.signOut'
+                                            defaultMessage={'Sign out'} />
+                                    </a>
                                 </li>
                             </Dropdown>
                         </li>
                     ] : [
-                        <li className="link right join" key="join"><a href="/join">Join Scratch</a></li>,
+                        <li className="link right join" key="join"><a href="/join">
+                            <FormattedMessage
+                                id='general.joinScratch'
+                                defaultMessage={'Join Scratch'} />
+                        </a></li>,
                         <li className="link right login-item" key="login">
                             <a
                                 href="#"
                                 onClick={this.handleLoginClick}
-                                className="ignore-react-onclickoutside">Sign In</a>
+                                className="ignore-react-onclickoutside">
+                                    <FormattedMessage
+                                        id='general.signIn'
+                                        defaultMessage={'Sign In'} />
+                                </a>
                             <Dropdown
                                     className="login-dropdown with-arrow"
                                     isOpen={this.state.loginOpen}
@@ -156,4 +223,4 @@ var Navigation = React.createClass({
     }
 });
 
-module.exports = Navigation;
+module.exports = injectIntl(Navigation);
diff --git a/src/components/news/news.jsx b/src/components/news/news.jsx
index f241ac955..2eadd0d24 100644
--- a/src/components/news/news.jsx
+++ b/src/components/news/news.jsx
@@ -1,9 +1,23 @@
 var React = require('react');
+var ReactIntl = require('react-intl');
+var defineMessages = ReactIntl.defineMessages;
+var injectIntl = ReactIntl.injectIntl;
 
 var Box = require('../box/box.jsx');
 
 require('./news.scss');
 
+var defaultMessages = defineMessages({
+    scratchNews: {
+        id: 'news.scratchNews',
+        defaultMessage: 'Scratch News'
+    },
+    viewAll: {
+        id: 'general.viewAll',
+        defaultMessage: 'View All'
+    }
+});
+
 var News = React.createClass({
     type: 'News',
     propTypes: {
@@ -18,8 +32,8 @@ var News = React.createClass({
         return (
             <Box
                 className="news"
-                title="Scratch News"
-                moreTitle="View All"
+                title={formatMessage(defaultMessages.scratchNews)}
+                moreTitle={formatMessage(defaultMessages.viewAll)}
                 moreHref="/news">
 
                 <ul>
@@ -40,4 +54,4 @@ var News = React.createClass({
     }
 });
 
-module.exports = News;
+module.exports = injectIntl(News);