- Fix routes

- move functions to inline rendering in ttt-tile and mw homepage

src/components/ttt-tile/ttt-tile.jsx

@@ -14,16 +14,6 @@ var TTTTile = React.createClass({
         tutorialLoc: React.PropTypes.string.isRequired,
         onGuideClick: React.PropTypes.func.isRequired
     },
-    tileGuidesIfExists: function () {
-        if (this.props.onGuideClick) {
-            return (
-                <div className="ttt-tile-guides" onClick={this.props.onGuideClick}>
-                    <FormattedMessage id='tile.guides' defaultMessage='See Cards and Guides'/>
-                    <img className="ttt-tile-see-more" src="/svgs/ttt/see-more.svg" />
-                </div>
-            );
-        }
-    },
     render: function () {
         var classes = classNames(
             'ttt-tile',
@@ -54,7 +44,12 @@ var TTTTile = React.createClass({
                     </div>
 
                 </a>
-                {this.tileGuidesIfExists()}
+                {this.props.onGuideClick && (
+                    <div className="ttt-tile-guides" onClick={this.props.onGuideClick}>
+                        <FormattedMessage id='tile.guides' defaultMessage='See Cards and Guides'/>
+                        <img className="ttt-tile-see-more" src="/svgs/ttt/see-more.svg" />
+                    </div>
+                )}
             </div>
         );
     }

src/routes.json

@@ -250,7 +250,7 @@
     {
         "name": "microworlds-homepage",
         "pattern": "^/microworlds/go/?(\\?.*)?$",
-        "routeAlias": "microworlds",
+        "routeAlias": "/microworlds",
         "view": "microworldshomepage/microworldshomepage",
         "title": "Microworlds"
     }

src/views/microworldshomepage/microworldshomepage.jsx

@@ -14,27 +14,6 @@ require('./microworldshomepage.scss');
 
 var MicroworldsHomepage = injectIntl(React.createClass({
     type: 'MicroworldsHomepage',
-    renderTTTTiles: function () {
-        var formatMessage = this.props.intl.formatMessage;
-        var translatedTiles = [];
-        var translatedTile = {};
-
-        Tiles.map(function (tile, key) {
-            translatedTile = {
-                title: formatMessage({id: tile.title}),
-                tutorialLoc: tile.tutorialLoc,
-                thumbUrl: tile.thumbUrl,
-                bannerUrl: tile.bannerUrl
-            };
-            translatedTiles.push(
-                <TTTTile
-                    key={key}
-                    {...translatedTile}
-                />
-            );
-        }, this); // don't forget to pass 'this' into map function
-        return translatedTiles;
-    },
     render: function () {
         return (
             <div className="microworlds">
@@ -48,7 +27,17 @@ var MicroworldsHomepage = injectIntl(React.createClass({
                 </TitleBanner>
                 <div className="inner">
                     <MasonryGrid >
-                        {this.renderTTTTiles()}
+                        {Tiles.map(
+                            function (tile, key) {
+                                return <TTTTile
+                                    key={key}
+                                    title={this.props.intl.formatMessage({id: tile.title})}
+                                    tutorialLoc={tile.tutorialLoc}
+                                    thumbUrl={tile.thumbUrl}
+                                    bannerUrl={tile.bannerUrl}
+                                    />;
+                            }, this)
+                        }
                     </MasonryGrid>
                 </div>
             </div>