working category navigation and filtering

app/scripts/App.jsx

@@ -1,4 +1,5 @@
 var React  = require('react'),
+    Isvg   = require('react-inlinesvg'),
     Header = require('./components/Header'),
     Footer = require('./components/Footer'),
     Loader = require('./components/Loader'),
@@ -8,12 +9,13 @@ var React  = require('react'),
 var App = React.createClass({
     getInitialState () {
         return {
+            columns: 3,
             logos: json.items,
-            columns: 3
+            category: 'anyone'
         };
     },
-    componentDidMount: function () {
 
+    componentDidMount: function () {
         this
             .getDOMNode()
             .offsetParent
@@ -40,11 +42,16 @@ var App = React.createClass({
     _onClickTag (e) {
         e.preventDefault();
 
-        var el  = e.currentTarget;
-
+        var el = e.currentTarget;
         console.log(el);
     },
 
+    _selectCategory (value) {
+        this.setState({
+            category: value
+        });
+    },
+
     _changeColumns (num) {
         this.setState({
             columns: num
@@ -57,25 +64,29 @@ var App = React.createClass({
 
     render () {
         var state = this.state,
-            logos = [];
+            hidden,
+            logos = [],
+            visible = 0;
 
         state.logos.forEach(function (d, i) {
+            hidden =  state.category !== 'anyone' && d.categories.indexOf(state.category) === -1;
             d.files.forEach(function (f, j) {
-                logos.push(<Logo key={i + '-' + j} info={{
-                    name: d.name,
-                    shortname: d.shortname,
-                    url: d.url,
-                    image: f
-                }}/>);
-            });
-        });
+                logos.push(<Logo key={i + '-' + j} info={d} image={f} hidden={hidden} onClickTag={this._onClickTag}/>);
+
+                if (!hidden) {
+                    visible++;
+                }
+            }, this);
+        }, this);
 
         return (
             <div className="app">
+                <Isvg src="../media/icons.svg" uniquifyIDs={false}/>
+
                 <div className="container">
-                    <Header logos={state.logos} columns={state.columns}
-                            onClickChangeColumns={this._onClickChangeColumns}
-                            onClickTag={this._onClickTag}/>
+                    <Header logos={state.logos} columns={state.columns} visible={visible}
+                            onClickChangeColumns={this._onClickChangeColumns} onClickTag={this._onClickTag}
+                            category={state.category} selectCategory={this._selectCategory}/>
                     <main>
                         <ul className={'logos col-' + state.columns}>
                             {logos}

app/scripts/components/Header.jsx

@@ -2,7 +2,8 @@ var React    = require('react/addons'),
     lodash   = require('lodash'),
     Colors   = require('../utils/Colors'),
     ScaleLog = require('../utils/ScaleLog'),
-    config   = require('../config');
+    config   = require('../config'),
+    Icon     = require('./Icon');
 
 var Header = React.createClass({
     mixins: [React.addons.PureRenderMixin],
@@ -11,12 +12,13 @@ var Header = React.createClass({
         columns: React.PropTypes.number.isRequired,
         logos: React.PropTypes.array.isRequired,
         onClickChangeColumns: React.PropTypes.func.isRequired,
-        onClickTag: React.PropTypes.func.isRequired
+        onClickTag: React.PropTypes.func.isRequired,
+        selectCategory: React.PropTypes.func.isRequired,
+        visible: React.PropTypes.number.isRequired
     },
 
     getInitialState () {
         return {
-            category: 'developers',
             ready: false,
             showCategoriesMenu: false
         };
@@ -41,7 +43,7 @@ var Header = React.createClass({
                 });
             });
 
-            categories = this._sortObject(categories, 'value');
+            categories = [{key: 'anyone', value: 0}].concat(this._sortObject(categories, 'value'));
         }
 
         if (config.features.tags) {
@@ -110,7 +112,9 @@ var Header = React.createClass({
         e.preventDefault();
 
         var el = e.currentTarget;
-        console.log(el);
+
+        this.props.selectCategory(el.dataset.value);
+        this._toggleCategoriesMenu();
     },
 
     _toggleCategoriesMenu () {
@@ -120,9 +124,9 @@ var Header = React.createClass({
     },
 
     render () {
-        var props = this.props,
-            state = this.state,
-            categories = state.category,
+        var props      = this.props,
+            state      = this.state,
+            categories = props.category,
             tags,
             style;
 
@@ -150,10 +154,12 @@ var Header = React.createClass({
             if (config.features.categories) {
                 categories = (
                     <span className="categories">
-                    <a href="#" className="categories__toggle" onClick={this._onClickShowCategories}>{state.category}</a>
+                    <a href="#" className="categories__toggle"
+                       onClick={this._onClickShowCategories}>{props.category} <Icon id="caret-down"/></a>
                     <ul className="categories__menu">
                         {state.categories.map((d, i) => {
-                            return (<li key={i} data-value={d.value}><a href="#" onClick={this._onClickSelectCategory}>{d.key}<span className="svg-check"></span></a></li>);
+                            return (<li key={i}><a href="#" onClick={this._onClickSelectCategory} data-value={d.key}>{d.key}
+                            {d.key === props.category ? <Icon id="check"/> : ''}</a></li>);
                         })}
                     </ul>
                 </span>
@@ -165,7 +171,7 @@ var Header = React.createClass({
             <header className={state.showCategoriesMenu ? 'show-menu' : ''}>
                 <img src="media/svg-porn.svg" className="logo"/>
 
-                <h3>A collection of svg logos for {categories}</h3>
+                <h3>A collection of {props.visible} svg logos for {categories}</h3>
 
                 <ul className="menu">
                     <li><span className="title">Columns</span>

app/scripts/components/Logo.jsx

@@ -4,23 +4,35 @@ var Logo = React.createClass({
     mixins: [React.addons.PureRenderMixin],
 
     propTypes: {
-        info: React.PropTypes.object.isRequired
+        image: React.PropTypes.string.isRequired,
+        hidden: React.PropTypes.bool.isRequired,
+        info: React.PropTypes.object.isRequired,
+        onClickTag: React.PropTypes.func.isRequired
     },
 
     toggleInfo (e) {
         var el = e.currentTarget;
-        el.parentNode.classList.toggle('visible');
+        el.classList.toggle('show-info');
     },
 
     render () {
-        var info = this.props.info;
+        var props = this.props,
+            info  = this.props.info;
         return (
-            <li>
+            <li className={props.hidden ? 'hidden' : ''} onMouseEnter={this.toggleInfo} onMouseLeave={this.toggleInfo}>
                 <a href={info.url} target="_blank" className="logo-item">
-                    <img src={'../logos/' + info.image} alt={info.name} className={info.shotname}
-                         onMouseEnter={this.toggleInfo} onMouseLeave={this.toggleInfo}/>
-                    <span className="name">{info.name}</span>
+                    <img src={'../logos/' + this.props.image} alt={info.name} className={info.shotname}/>
                 </a>
+
+                <div className="info">
+                    <h5><a href={info.url} target="_blank">{info.name}</a></h5>
+
+                    <div className="tags">{
+                        info.tags.map((t, i) => {
+                            return (<a key={i} href="#" onClick={props.onClickTag} data-tag={t}>#{t}</a>);
+                        })
+                    }</div>
+                </div>
             </li>
         );
     }