Merge pull request #14 from alephdata/wpf-search-ui

Search schema filter

i18n/messages.json

@@ -8,5 +8,15 @@
     "id": "nav.documents",
     "defaultMessage": "Documents",
     "filepath": "src/components/PageNavbar.js"
+  },
+  {
+    "id": "search.collections",
+    "defaultMessage": "Collections",
+    "filepath": "src/components/SearchFilter.js"
+  },
+  {
+    "id": "search.schema.all",
+    "defaultMessage": "All Results",
+    "filepath": "src/components/SearchFilterSchema.js"
   }
 ]

i18n/messages.pot

@@ -1,12 +1,26 @@
 msgid ""
 msgstr ""
-"POT-Creation-Date: 2017-07-12T10:53:50.428Z\n"
+"POT-Creation-Date: 2017-08-11T14:51:32.389Z\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "MIME-Version: 1.0\n"
 "X-Generator: react-intl-po\n"
 
 
+#: i18n/messages.json
+#. [search.schema.all]
+#. defaultMessage is:
+#. All Results
+msgid "All Results"
+msgstr ""
+
+#: i18n/messages.json
+#. [search.collections]
+#. defaultMessage is:
+#. Collections
+msgid "Collections"
+msgstr ""
+
 #: i18n/messages.json
 #. [nav.documents]
 #. defaultMessage is:

src/actions/index.js

@@ -6,14 +6,14 @@ export const fetchSearchResults = (filters) => (dispatch) => {
     filters
   });
 
-  return endpoint.get('search', {params: filters})
+  return endpoint.get('search', {params: {...filters, facet: 'schema'}})
     .then((response) => response.data)
     .then((data) => dispatch({
       type: 'FETCH_SEARCH_SUCCESS',
       filters,
       result: data
     }));
-}
+};
 
 export const fetchMetadata = () => (dispatch) => {
   dispatch({

src/components/SearchFilter.js

@@ -0,0 +1,86 @@
+import React, { Component } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { Button } from '@blueprintjs/core';
+
+import queryString from 'query-string';
+import { debounce, isEqual, pickBy } from 'lodash';
+
+import SearchFilterSchema from './SearchFilterSchema';
+
+import './SearchFilter.css';
+
+class SearchFilter extends Component {
+  constructor(props)  {
+    super(props);
+
+    this.state = {
+      params: queryString.parse(props.location.search)
+    };
+
+    this.onTextChange = this.onTextChange.bind(this);
+    this.onSchemaChange = this.onSchemaChange.bind(this);
+
+    this.debouncedUpdate = debounce(this.updateLocation, 250);
+  }
+
+  updateLocation() {
+    const { history, location } = this.props;
+    const nonEmptyParams = pickBy(this.state.params, v => !!v);
+
+    history.push({
+      pathname: location.pathname,
+      search: queryString.stringify(nonEmptyParams)
+    });
+  }
+
+  componentWillUpdate(nextProps, { params }) {
+    if (!isEqual(params, this.state.params)) {
+      this.debouncedUpdate();
+    }
+  }
+
+  handleParamChange(param, newValue) {
+    this.setState({
+      params: {
+        ...this.state.params,
+        [param]: newValue
+      }
+    });
+  }
+
+  onTextChange(e) {
+    this.handleParamChange('q', e.target.value);
+  }
+
+  onSchemaChange(type) {
+    this.handleParamChange('filter:schema', type);
+  }
+
+  render() {
+    const { params } = this.state;
+    const { result } = this.props;
+
+    return (
+      <div className="search-filter">
+        <div className="search-query">
+          <div className="search-query__text pt-input-group pt-large">
+            <span className="pt-icon pt-icon-search"/>
+            <input className="pt-input" type="search" onChange={this.onTextChange}
+              value={params.q}/>
+          </div>
+          <div className="pt-large">
+            <Button rightIconName="caret-down">
+              <FormattedMessage id="search.collections" defaultMessage="Collections"/>
+              {' '}(55)
+            </Button>
+          </div>
+        </div>
+        { result.total > 0 &&
+          <SearchFilterSchema onChange={this.onSchemaChange} result={result}
+            value={params['filter:schema']} /> }
+      </div>
+    );
+  }
+}
+
+export default SearchFilter;

src/components/SearchFilter.scss

@@ -0,0 +1,21 @@
+@import "~@blueprintjs/core/dist/variables";
+
+.search-filter {
+  padding: $pt-grid-size * 2;
+  margin-bottom: $pt-grid-size * 2;
+  background-color: $gray3;
+  color: white;
+}
+
+.search-query {
+    display: flex;
+}
+
+.search-query__text {
+  flex: 1;
+  padding-right: $pt-grid-size;
+
+  & > input[type=search] {
+    border-radius: $pt-border-radius;
+  }
+}

src/components/SearchFilterSchema.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { FormattedMessage, FormattedNumber } from 'react-intl';
+import { Tab2, Tabs2 } from '@blueprintjs/core';
+
+const SearchFilterSchema = ({ onChange, result, value }) => (
+  <Tabs2 id="schemaTypes" className="pt-large pt-dark" onChange={onChange}
+    selectedTabId={value}>
+    <Tab2 id={null}>
+      <FormattedMessage id="search.schema.all" defaultMessage="All Results"/>
+      {' '}(<FormattedNumber value={result.total} />)
+    </Tab2>
+    {result.facets.schema.values.map(schema => (
+      <Tab2 id={schema.id} key={schema.id}>
+        {schema.label} (<FormattedNumber value={schema.count} />)
+      </Tab2>
+    ))}
+  </Tabs2>
+);
+
+export default SearchFilterSchema;

src/screens/SearchScreen.js

@@ -2,22 +2,22 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux'
 import { withRouter } from 'react-router'
 import queryString from 'query-string';
+import isEqual from 'lodash/isEqual';
 
 import { fetchSearchResults } from '../actions';
 
 import SearchResultList from '../components/SearchResultList';
-import Search from '../components/Search';
+import SearchFilter from '../components/SearchFilter';
 
-const SearchWithRouter = withRouter(Search);
+const SearchFilterWithRouter = withRouter(SearchFilter);
 
 class SearchScreen extends Component {
   componentDidMount() {
     this.fetchData();
   }
 
   componentDidUpdate(prevProps) {
-    // should account for multiple filters in the future
-    if (this.props.query.q !== prevProps.query.q) {
+    if (!isEqual(this.props.query, prevProps.query)) {
       this.fetchData();
     }
   }
@@ -30,7 +30,7 @@ class SearchScreen extends Component {
   render() {
     return (
       <div>
-        <SearchWithRouter />
+        <SearchFilterWithRouter result={this.props.searchResults} />
         <SearchResultList result={this.props.searchResults} />
       </div>
     )
@@ -40,8 +40,6 @@ class SearchScreen extends Component {
 const mapStateToProps = (state, ownProps) => {
   const params = queryString.parse(ownProps.location.search);
 
-  console.log(state);
-
   return {
     query: params,
     searchResults: state.searchResults

src/translations.json

@@ -1 +1 @@
-{"de":{"nav.home":"Zuhause","nav.documents":"Dokumente"},"es":{"nav.home":"","nav.documents":""},"ru":{"nav.home":"","nav.documents":""}}
+{"de":{"nav.home":"Zuhause","nav.documents":"Dokumente","search.collections":"","search.schema.all":""},"es":{"nav.home":"","nav.documents":"","search.collections":"","search.schema.all":""},"ru":{"nav.home":"","nav.documents":"","search.collections":"","search.schema.all":""}}