Make LanguageChooser isolated in funcitonality

and only set cookie client side, rather than using the post request

server/proxies.json

@@ -6,7 +6,6 @@
             "/accounts/",
             "/csrf_token/",
             "/get_image/",
-            "/i18n/",
             "/session/",
             "/site-api/"
         ]

src/components/footer/footer.jsx

@@ -1,43 +1,11 @@
 var React = require('react');
 
-var log = require('../../log.js');
-
-var Api = require('../../mixins/api.jsx');
-var CookieMixinFactory = require('../../mixins/cookieMixinFactory.jsx');
 var LanguageChooser = require('../languagechooser/languagechooser.jsx');
 
 require('./footer.scss');
 
 var Footer = React.createClass({
     type: 'Footer',
-    mixins: [
-        Api,
-        // Provides useScratchlanguage
-        CookieMixinFactory('scratchlanguage', '/site-api/i18n/set-preferred-language/')
-    ],
-    getInitialState: function () {
-        return {
-            language: 'en'
-        };
-    },
-    componentDidMount: function () {
-        this.updateLanguage();
-    },
-    updateLanguage: function () {
-        this.useScratchlanguage(function (err, language) {
-            if (err) return log.error(err);
-            this.setState({language: language});
-        }.bind(this));
-    },
-    handleSetLanguage: function (e) {
-        if (e) e.preventDefault();
-        this.api({
-            host: '',
-            uri: '/i18n/setlang/'
-        }, function (err, body) {
-            if (body) this.updateLanguage();
-        }.bind(this));
-    },
     render: function () {
         return (
             <div className="inner">
@@ -86,7 +54,7 @@ var Footer = React.createClass({
                     </dl>
                 </div>
 
-                <LanguageChooser onSetLanguage={this.handleSetLanguage} choice={this.state.language} />
+                <LanguageChooser />
 
                 <div className="copyright">
                     <p>Scratch is a project of the Lifelong Kindergarten Group at the MIT Media Lab</p>

src/components/languagechooser/languagechooser.jsx

@@ -1,39 +1,42 @@
 var classNames = require('classnames');
-
 var React = require('react');
 
+var jar = require('../../lib/jar.js');
+var languages = require('../../../languages.json');
 var Select = require('../forms/select.jsx');
 
 require('./languagechooser.scss');
 
 var LanguageChooser = React.createClass({
     type: 'LanguageChooser',
-    propTypes: {
+    getInitialState: function () {
-        choice: React.PropTypes.string,
+        return {
-        languages: React.PropTypes.object
+            choice: window._locale
+        };
     },
     getDefaultProps: function () {
         return {
-            choice: 'en',
+            languages: languages
-            languages: require('./languages.json')
         };
     },
+    onSetLanguage: function (e) {
+        e.preventDefault();
+        jar.set('scratchlanguage', e.target.value);
+        document.location.reload(true);
+    },
     render: function () {
         var classes = classNames(
             'language-chooser',
             this.props.className
         );
+
         return (
-            <form
+            <form ref="languageForm" className={classes}>
-                    ref="languageForm"
+                <Select name="language" defaultValue={this.state.choice} onChange={this.onSetLanguage}>
-                    method="post"
-                    action="/i18n/setlang/"
-                    {... this.props}
-                    className={classes}
-                    onSubmit={this.props.onSetLanguage}>
-                <Select name="language" value={this.props.choice} onChange={this.props.onSetLanguage}>
                     {Object.keys(this.props.languages).map(function (value) {
-                        return <option value={value} key={value}>{this.props.languages[value]}</option>;
+                        return <option value={value} key={value}>
+                                    {this.props.languages[value]}
+                                </option>;
                     }.bind(this))}
                 </Select>
             </form>