Updates based on feedback

1. changes intl filenames to `[view].intl.js`
2. Move nav/footer rendering to `render.jsx`
3. Set locale cookie before submitting language change form

Thanks @thisandagain !

.gitignore

@@ -9,6 +9,7 @@ npm-*
 /build
 
 # Locales
+/locales
 /intl
 
 # Elastic Beanstalk Files

server/index.js

@@ -38,7 +38,6 @@ app.use(compression());
 if (isProduction) {
     app.use(express.static(path.resolve(__dirname, '../build'), {
         etag: 'strong',
-        lastModified: true,
         maxAge: '1y'
     }));
 }

server/template.html

@@ -51,7 +51,7 @@
         <script src="/js/lib/react-intl-with-locales{{min}}.js"></script>
         <script src="/js/lib/raven.min.js"></script>
 
-        <script src="/js/intl/{{view}}.js"></script>
+        <script src="/js/{{view}}.intl.js"></script>
         <script src="/js/{{view}}.bundle.js"></script>
 
         <!-- Error logging (Sentry) -->

src/components/languagechooser/languagechooser.jsx

@@ -1,8 +1,8 @@
 var classNames = require('classnames');
 var React = require('react');
-var ReactDOM = require('react-dom');
 
 var Api = require('../../mixins/api.jsx');
+var jar  = require('../../lib/jar.js');
 var languages = require('../../../languages.json');
 var Select = require('../forms/select.jsx');
 
@@ -13,20 +13,16 @@ var LanguageChooser = React.createClass({
     mixins: [
         Api
     ],
-    getInitialState: function () {
-        return {
-            choice: window._locale
-        };
-    },
     getDefaultProps: function () {
         return {
-            languages: languages
+            languages: languages,
+            locale: window._locale
         };
     },
     onSetLanguage: function (e) {
         e.preventDefault();
-        this.setState({'choice': e.target.value});
+        jar.set('scratchlanguage', e.target.value);
-        ReactDOM.findDOMNode(this.refs.languageForm).submit();
+        window.location.reload();
     },
     render: function () {
         var classes = classNames(
@@ -35,15 +31,15 @@ var LanguageChooser = React.createClass({
         );
 
         return (
-            <form ref="languageForm" className={classes} action="/i18n/setlang/" method="POST">
+            <div className={classes}>
-                <Select name="language" defaultValue={this.state.choice} onChange={this.onSetLanguage}>
+                <Select name="language" defaultValue={this.props.locale} onChange={this.onSetLanguage}>
                     {Object.keys(this.props.languages).map(function (value) {
                         return <option value={value} key={value}>
                                     {this.props.languages[value]}
                                 </option>;
                     }.bind(this))}
                 </Select>
-            </form>
+            </div>
         );
     }
 });

src/lib/render.jsx

@@ -3,6 +3,9 @@ var ReactDOM = require('react-dom');
 var ReactIntl = require('./intl.jsx');
 var IntlProvider = ReactIntl.IntlProvider;
 
+var Navigation = require('../components/navigation/navigation.jsx');
+var Footer = require('../components/footer/footer.jsx');
+
 var render = function (jsx, element) {
     // Get locale and messages from global namespace (see "init.js")
     var locale = window._locale || 'en';
@@ -16,7 +19,29 @@ var render = function (jsx, element) {
     }
     var messages = window._messages[locale];
 
-    // Render component
+
+    // Render nav and footer for page.
+    var nav = ReactDOM.render(
+        <IntlProvider locale={locale} messages={messages}>
+            <Navigation />
+        </IntlProvider>,
+        document.getElementById('navigation')
+    );
+
+    var footer = ReactDOM.render(
+        <IntlProvider locale={locale} messages={messages}>
+            <Footer />
+        </IntlProvider>,
+        document.getElementById('footer')
+    );
+
+    // Provide list of rendered components
+    window._renderedComponents = window._renderedComponents || [];
+    window._renderedComponents.push(nav);
+    window._renderedComponents.push(footer);
+
+
+    // Render view component
     var component = ReactDOM.render(
         <IntlProvider locale={locale} messages={messages}>
             {jsx}
@@ -24,8 +49,6 @@ var render = function (jsx, element) {
         element
     );
 
-    // Provide list of rendered components
-    window._renderedComponents = window._renderedComponents || [];
     window._renderedComponents.push(component);
 };
 

src/views/about/about.jsx

@@ -6,9 +6,6 @@ var render = require('../../lib/render.jsx');
 require('../../main.scss');
 require('./about.scss');
 
-var Navigation = require('../../components/navigation/navigation.jsx');
-var Footer = require('../../components/footer/footer.jsx');
-
 var About = React.createClass({
     type: 'About',
     render: function () {
@@ -104,6 +101,4 @@ var About = React.createClass({
     }
 });
 
-render(<Navigation />, document.getElementById('navigation'));
-render(<Footer />, document.getElementById('footer'));
 render(<About />, document.getElementById('view'));

src/views/components/components.jsx

@@ -11,9 +11,6 @@ var Spinner = require('../../components/spinner/spinner.jsx');
 require('../../main.scss');
 require('./components.scss');
 
-var Navigation = require('../../components/navigation/navigation.jsx');
-var Footer = require('../../components/footer/footer.jsx');
-
 var Components = React.createClass({
     type: 'Components',
     render: function () {
@@ -48,6 +45,4 @@ var Components = React.createClass({
     }
 });
 
-render(<Navigation />, document.getElementById('navigation'));
-render(<Footer />, document.getElementById('footer'));
 render(<Components />, document.getElementById('view'));

src/views/credits/credits.jsx

@@ -4,9 +4,6 @@ var render = require('../../lib/render.jsx');
 require('../../main.scss');
 require('./credits.scss');
 
-var Navigation = require('../../components/navigation/navigation.jsx');
-var Footer = require('../../components/footer/footer.jsx');
-
 var Credits = React.createClass({
     type: 'Credits',
     render: function () {
@@ -298,6 +295,4 @@ var Credits = React.createClass({
     }
 });
 
-render(<Navigation />, document.getElementById('navigation'));
-render(<Footer />, document.getElementById('footer'));
 render(<Credits />, document.getElementById('view'));

src/views/hoc/hoc.jsx

@@ -11,9 +11,6 @@ var SubNavigation = require('../../components/subnavigation/subnavigation.jsx');
 require('../../main.scss');
 require('./hoc.scss');
 
-var Navigation = require('../../components/navigation/navigation.jsx');
-var Footer = require('../../components/footer/footer.jsx');
-
 var Hoc = React.createClass({
     type: 'Hoc',
 
@@ -409,6 +406,4 @@ var Hoc = React.createClass({
     }
 });
 
-render(<Navigation />, document.getElementById('navigation'));
-render(<Footer />, document.getElementById('footer'));
 render(<Hoc />, document.getElementById('view'));

src/views/splash/splash.jsx

@@ -20,9 +20,6 @@ var Welcome = require('../../components/welcome/welcome.jsx');
 require('../../main.scss');
 require('./splash.scss');
 
-var Navigation = require('../../components/navigation/navigation.jsx');
-var Footer = require('../../components/footer/footer.jsx');
-
 var Splash = injectIntl(React.createClass({
     type: 'Splash',
     mixins: [
@@ -415,6 +412,4 @@ var Splash = injectIntl(React.createClass({
     }
 }));
 
-render(<Navigation />, document.getElementById('navigation'));
-render(<Footer />, document.getElementById('footer'));
 render(<Splash />, document.getElementById('view'));

webpack.config.js

@@ -53,7 +53,7 @@ module.exports = {
     plugins: [
         new CopyWebpackPlugin([
             {from: 'static'},
-            {from: 'intl', to: 'js/intl'}
+            {from: 'intl', to: 'js'}
         ]),
         new webpack.optimize.UglifyJsPlugin({
             compress: {