From aa3cbe552ae7438ed909adaaef08e9c348160cac Mon Sep 17 00:00:00 2001
From: Matthew Taylor <mewtaylor@gmail.com>
Date: Tue, 5 Jul 2016 13:36:51 -0400
Subject: [PATCH] Make category options into key/value

so that we can store the query string with the tab name, since it's not the same in every instance. fixes #666, and makes a couple other style tweaks.
---
 src/views/explore/explore.jsx | 64 +++++++++++++++++------------------
 1 file changed, 32 insertions(+), 32 deletions(-)

diff --git a/src/views/explore/explore.jsx b/src/views/explore/explore.jsx
index 0b1cd7d69..7485a4243 100644
--- a/src/views/explore/explore.jsx
+++ b/src/views/explore/explore.jsx
@@ -1,3 +1,4 @@
+var classNames = require('classnames');
 var injectIntl = require('react-intl').injectIntl;
 var FormattedMessage = require('react-intl').FormattedMessage;
 var React = require('react');
@@ -17,7 +18,14 @@ require('./explore.scss');
 var Explore = injectIntl(React.createClass({
     type: 'Explore',
     getDefaultProps: function () {
-        var categoryOptions = ['all','animations','art','games','music','stories'];
+        var categoryOptions = {
+            all: '*',
+            animations: 'animations',
+            art: 'art',
+            games: 'games',
+            music: 'music',
+            stories: 'stories'
+        };
         var typeOptions = ['projects','studios'];
 
         var pathname = window.location.pathname.toLowerCase();
@@ -28,7 +36,7 @@ var Explore = injectIntl(React.createClass({
         var currentCategory = pathname.substring(slash + 1,pathname.length);
         var typeStart = pathname.indexOf('explore/');
         var type = pathname.substring(typeStart + 8,slash);
-        if (categoryOptions.indexOf(currentCategory) === -1 || typeOptions.indexOf(type) === -1) {
+        if (Object.keys(categoryOptions).indexOf(currentCategory) === -1 || typeOptions.indexOf(type) === -1) {
             window.location = window.location.origin + '/explore/projects/all/';
         }
 
@@ -50,10 +58,8 @@ var Explore = injectIntl(React.createClass({
         this.getExploreMore();
     },
     getExploreMore: function () {
-        var qText = '';
-        if (this.props.tab != 'all') {
-            qText = '&q=' + this.props.category;
-        }
+        var qText = '&q=' + this.props.acceptableTabs[this.props.category] || '*';
+        
         api({
             uri: '/search/' + this.props.itemType +
                  '?limit=' + this.props.loadNumber +
@@ -80,34 +86,28 @@ var Explore = injectIntl(React.createClass({
         window.location = window.location.origin + '/explore/' + newType + '/' + this.props.tab;
     },
     getBubble: function (type) {
-        var allBubble = <a href={'/explore/' + this.props.itemType + '/' + type + '/'}>
-                        <li>
-                            <FormattedMessage id={'general.' + type} />
-                        </li>
-                    </a>;
-        if (this.props.category === type) {
-            allBubble = <a href={'/explore/' + this.props.itemType+'/' + type + '/'}>
-                        <li className='active'>
-                            <FormattedMessage id={'general.' + type} />
-                        </li>
-                    </a>;
-        }
-        return allBubble;
+        let classes = classNames({
+            active: (this.props.category === type)
+        });
+        return (
+            <a href={'/explore/' + this.props.itemType + '/' + type + '/'}>
+                <li className={classes}>
+                    <FormattedMessage id={'general.' + type} />
+                </li>
+            </a>
+        );
     },
     getTab: function (type) {
-        var allTab = <a href={'/explore/' + type + '/' + this.props.category + '/'}>
-                        <li>
-                            <FormattedMessage id={'general.' + type} />
-                        </li>
-                    </a>;
-        if (this.props.itemType === type) {
-            allTab = <a href={'/explore/' + type +' /' + this.props.category + '/'}>
-                        <li className='active'>
-                            <FormattedMessage id={'general.' + type} />
-                        </li>
-                    </a>;
-        }
-        return allTab;
+        let classes = classNames({
+            active: (this.props.itemType === type)
+        });
+        return (
+            <a href={'/explore/' + type + '/' + this.props.category + '/'}>
+                <li className={classes}>
+                    <FormattedMessage id={'general.' + type} />
+                </li>
+            </a>
+        );
     },
     render: function () {
         return (