Tag browser page

js/components/tag-list.js

@@ -0,0 +1,40 @@
+/**
+ * @jsx React.DOM
+ */
+
+var React = require('react/addons');
+
+var Tag = require('./tag');
+
+var TagList = React.createClass({
+    getTags:function(){
+        return this.props.data.getTags().map(function(tag){
+            return (<Tag tag={tag}>{tag}</Tag>);
+        });
+    },
+    getCountries:function(){
+        return this.props.data.getCountries().map(function(country){
+            var country = country.replace('.','');
+            return (<img className="artist-country" title="" src={"/flags/_flag_" + country + ".png"} />);
+        });
+    },
+    render: function() {
+
+        return (
+            <div className="release-full article">
+                <div className="centered-article">
+
+                    <div className="post">
+                        <h1 className="article-title">Countries</h1>
+                        <p>{this.getCountries()}</p>
+                        <h1 className="article-title">Tags</h1>
+                        <p>{this.getTags()}</p>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+});
+
+module.exports = TagList;

js/components/topbar.js

@@ -21,6 +21,9 @@ var Topbar = React.createClass({
         }, {
             link: '/about',
             label: 'About'
+        }, {
+            link: '/tag',
+            label: 'Tags'
         }, {
             link: '/blog',
             label: 'Blog'

js/index.js

@@ -18,6 +18,7 @@ var Releases = require('./components/releases');
 var ReleaseDetail = require('./components/release-detail');
 var About = require('./components/about');
 var Blog = require('./components/blog');
+var TagList = require('./components/tag-list');
 
 // slim stat tracking
 // the router calls it every time the route changes, so we track internal navigation 
@@ -27,6 +28,7 @@ var SlimStat = require('./lib/slimstat');
 React.renderComponent(
     <Routes onActiveStateChange={SlimStat} location="history">
         <Route name="home" path="/" handler={App} data={enrReleases}>
+            <Route name="tags"      path="tag" handler={TagList} data={enrReleases} />
             <Route name="tag"       path="tag/:tag" handler={Releases} data={enrReleases} />
             <Route name="release"   path="release/:cat" handler={ReleaseDetail} data={enrReleases} />
             <Route name="about"     path="about" handler={About} data={enrReleases} />

js/models/release.js

@@ -45,6 +45,11 @@ var ReleaseModel = Backbone.Model.extend({
 
 
 				_.each(tags, function(tag){
+					// can remove once https://github.com/enoughrec/arecordlabel/issues/48 is fixed
+					if (tag == '') {
+						return;
+					}
+
 					if (tag[0] === '.') {
 						country.push(tag);
 					} else {