add Storage

app/logos.json

@@ -1651,7 +1651,7 @@
       ],
       "categories": [
         "developers",
-        "everybody"
+        "bloggers"
       ]
     },
     {
@@ -2064,7 +2064,7 @@
         "service integration"
       ],
       "categories": [
-        "everybody"
+        "geeks"
       ]
     },
     {
@@ -4414,7 +4414,7 @@
       ],
       "categories": [
         "teams",
-        "everybody"
+        "geeks"
       ]
     },
     {
@@ -4696,7 +4696,8 @@
         "mysql"
       ],
       "categories": [
-        "developers"
+        "developers",
+        "bloggers"
       ]
     },
     {

app/scripts/App.jsx

@@ -1,10 +1,11 @@
-var React  = require('react'),
-    Isvg   = require('react-inlinesvg'),
-    Header = require('./components/Header'),
-    Footer = require('./components/Footer'),
-    Loader = require('./components/Loader'),
-    Logo   = require('./components/Logo'),
-    json   = require('../logos.json');
+var React   = require('react'),
+    Isvg    = require('react-inlinesvg'),
+    Storage = require('./utils/Storage'),
+    Header  = require('./components/Header'),
+    Footer  = require('./components/Footer'),
+    Loader  = require('./components/Loader'),
+    Logo    = require('./components/Logo'),
+    json    = require('../logos.json');
 
 var App = React.createClass({
     getInitialState () {
@@ -15,6 +16,16 @@ var App = React.createClass({
         };
     },
 
+    componentWillMount: function () {
+        var category = Storage.getItem('category'),
+            columns  = Storage.getItem('columns');
+
+        this.setState({
+            category: category && this.state.category !== category ? category : this.state.category,
+            columns: columns && this.state.columns !== columns ? columns : this.state.columns
+        });
+    },
+
     componentDidMount: function () {
         this
             .getDOMNode()
@@ -46,16 +57,18 @@ var App = React.createClass({
         console.log(el);
     },
 
-    _selectCategory (value) {
+    _changeCategory (value) {
         this.setState({
             category: value
         });
+        Storage.setItem('category', value);
     },
 
     _changeColumns (num) {
         this.setState({
             columns: num
         });
+        Storage.setItem('columns', num);
     },
 
     _filterLogos (tag) {
@@ -63,13 +76,13 @@ var App = React.createClass({
     },
 
     render () {
-        var state = this.state,
+        var state   = this.state,
             hidden,
-            logos = [],
+            logos   = [],
             visible = 0;
 
         state.logos.forEach(function (d, i) {
-            hidden =  state.category !== 'anyone' && d.categories.indexOf(state.category) === -1;
+            hidden = state.category !== 'anyone' && d.categories.indexOf(state.category) === -1;
             d.files.forEach(function (f, j) {
                 logos.push(<Logo key={i + '-' + j} info={d} image={f} hidden={hidden} onClickTag={this._onClickTag}/>);
 
@@ -86,7 +99,7 @@ var App = React.createClass({
                 <div className="container">
                     <Header logos={state.logos} columns={state.columns} visible={visible}
                             onClickChangeColumns={this._onClickChangeColumns} onClickTag={this._onClickTag}
-                            category={state.category} selectCategory={this._selectCategory}/>
+                            category={state.category} changeCategory={this._changeCategory}/>
                     <main>
                         <ul className={'logos col-' + state.columns}>
                             {logos}

app/scripts/components/Header.jsx

@@ -13,7 +13,7 @@ var Header = React.createClass({
         logos: React.PropTypes.array.isRequired,
         onClickChangeColumns: React.PropTypes.func.isRequired,
         onClickTag: React.PropTypes.func.isRequired,
-        selectCategory: React.PropTypes.func.isRequired,
+        changeCategory: React.PropTypes.func.isRequired,
         visible: React.PropTypes.number.isRequired
     },
 
@@ -104,16 +104,15 @@ var Header = React.createClass({
     _onClickShowCategories (e) {
         e.preventDefault();
 
-        var el = e.currentTarget;
         this._toggleCategoriesMenu();
     },
 
-    _onClickSelectCategory (e) {
+    _onClickChangeCategory (e) {
         e.preventDefault();
 
         var el = e.currentTarget;
 
-        this.props.selectCategory(el.dataset.value);
+        this.props.changeCategory(el.dataset.value);
         this._toggleCategoriesMenu();
     },
 
@@ -158,7 +157,7 @@ var Header = React.createClass({
                        onClick={this._onClickShowCategories}>{props.category} <Icon id="caret-down"/></a>
                     <ul className="categories__menu">
                         {state.categories.map((d, i) => {
-                            return (<li key={i}><a href="#" onClick={this._onClickSelectCategory} data-value={d.key}>{d.key}
+                            return (<li key={i}><a href="#" onClick={this._onClickChangeCategory} data-value={d.key}>{d.key}
                             {d.key === props.category ? <Icon id="check"/> : ''}</a></li>);
                         })}
                     </ul>

app/scripts/utils/Storage.js

@@ -0,0 +1,19 @@
+var Storage = {
+    getItem: function (name) {
+        return JSON.parse(localStorage.getItem(name));
+    },
+
+    setItem: function (name, value) {
+        localStorage.setItem(name, JSON.stringify(value));
+    },
+
+    removeItem: function (name) {
+        localStorage.removeItem(name);
+    },
+
+    clearAll: function () {
+        localStorage.clear();
+    }
+};
+
+module.exports = Storage;

app/styles/components/_icons.scss

@@ -1,19 +0,0 @@
-%svg-common {
-  background: url('#{$media-path}icons.svg') no-repeat;
-  display: inline-block;
-}
-
-.svg-caret-down {
-  @extend %svg-common;
-  background-position: 0 0;
-  height: 10px;
-  width: 17px;
-}
-
-.svg-check {
-  @extend %svg-common;
-  background-position: 0 100%;
-  height: 14px;
-  width: 17px;
-}
-

app/styles/main.scss

@@ -5,7 +5,6 @@
 
 @import 'components/header';
 @import 'components/logos';
-@import 'components/icons';
 
 html {
   font-size: 62.5%;