Merge pull request #2001 from kyleplo/patch-2

Add sort scheme dropdown to search results page

src/views/search/l10n.json

@@ -0,0 +1,4 @@
+{
+  "search.trending": "Trending",
+  "search.popular": "Popular"
+}

src/views/search/search.jsx

@@ -8,14 +8,18 @@ const React = require('react');
 
 const api = require('../../lib/api');
 const Button = require('../../components/forms/button.jsx');
+const Form = require('../../components/forms/form.jsx');
 const Grid = require('../../components/grid/grid.jsx');
 const navigationActions = require('../../redux/navigation.js');
+const Select = require('../../components/forms/select.jsx');
 const TitleBanner = require('../../components/title-banner/title-banner.jsx');
 const Tabs = require('../../components/tabs/tabs.jsx');
 
 const Page = require('../../components/page/www/page.jsx');
 const render = require('../../lib/render.jsx');
 
+const ACCEPTABLE_MODES = ['trending', 'popular', ''];
+
 require('./search.scss');
 
 class Search extends React.Component {
@@ -23,14 +27,31 @@ class Search extends React.Component {
         super(props);
         bindAll(this, [
             'getSearchState',
+            'handleChangeSortMode',
             'handleGetSearchMore',
             'getTab'
         ]);
         this.state = this.getSearchState();
         this.state.loaded = [];
         this.state.loadNumber = 16;
+        this.state.mode = '';
         this.state.offset = 0;
         this.state.loadMore = false;
+        
+        let mode = '';
+        const query = window.location.search;
+        const m = query.lastIndexOf('mode=');
+        if (m !== -1) {
+            mode = query.substring(m + 5, query.length).toLowerCase();
+        }
+        while (mode.indexOf('/') > -1) {
+            mode = mode.substring(0, mode.indexOf('/'));
+        }
+        while (mode.indexOf('&') > -1) {
+            mode = mode.substring(0, mode.indexOf('&'));
+        }
+        mode = decodeURIComponent(mode.split('+').join(' '));
+        this.state.mode = mode;
     }
     componentDidMount () {
         const query = window.location.search;
@@ -65,6 +86,13 @@ class Search extends React.Component {
             loadNumber: 16
         };
     }
+    handleChangeSortMode (name, value) {
+        if (ACCEPTABLE_MODES.indexOf(value) !== -1) {
+            const term = this.props.searchTerm.split(' ').join('+');
+            window.location =
+                `${window.location.origin}/search/${this.state.tab}?q=${term}&mode=${value}`;
+        }
+    }
     handleGetSearchMore () {
         let termText = '';
         if (this.props.searchTerm !== '') {
@@ -73,7 +101,8 @@ class Search extends React.Component {
         const locale = this.props.intl.locale;
         const loadNumber = this.state.loadNumber;
         const offset = this.state.offset;
-        const queryString = `limit=${loadNumber}&offset=${offset}&language=${locale}&mode=popular${termText}`;
+        const mode = this.state.mode;
+        const queryString = `limit=${loadNumber}&offset=${offset}&language=${locale}&mode=${mode}${termText}`;
 
         api({
             uri: `/search/${this.state.tab}?${queryString}`
@@ -167,6 +196,25 @@ class Search extends React.Component {
                         {this.getTab('projects')}
                         {this.getTab('studios')}
                     </Tabs>
+                    <div className="sort-controls">
+                        <Form className="sort-mode">
+                            <Select
+                                name="sort"
+                                options={[
+                                    {
+                                        value: 'trending',
+                                        label: this.props.intl.formatMessage({id: 'search.trending'})
+                                    },
+                                    {
+                                        value: 'popular',
+                                        label: this.props.intl.formatMessage({id: 'search.popular'})
+                                    }
+                                ]}
+                                value={this.state.mode}
+                                onChange={this.handleChangeSortMode}
+                            />
+                        </Form>
+                    </div>
                     {this.getProjectBox()}
                 </div>
             </div>

src/views/search/search.scss

@@ -104,15 +104,40 @@ $base-bg: $ui-white;
             }
         }
     }
+    
+    /* HACK: sort controls are terrible. There's some sort of magic formula for height of formsy components that I can't control. */
 
-    .select {
-        select {
-            margin-bottom: 0;
-            color: $header-gray;
-        }
+    .sort-controls {
+        display: flex;
+        margin: 0 auto;
+        border-bottom: 1px solid $ui-border;
+        padding: 8px 0;
+        width: 58.75rem;
+        justify-content: space-between;
+    }
 
-        .help-block {
-            display: none;
+    .sort-mode {
+        margin-top: -4px;
+        width: 13.75rem;
+
+        .select {
+
+            select {
+                margin-bottom: 0;
+                border: 0;
+                background-color: transparent;
+                height: 32px;
+                color: $header-gray;
+
+                &:focus,
+                &:active {
+                    background-color: transparent;
+                }
+            }
+
+            .help-block {
+                display: none;
+            }
         }
     }