First pass at sort

Author: JasonStoltz

src/app-search/AppSearchDriver.js

@@ -11,6 +11,7 @@ export default class AppSearchDriver {
  results: [],
  size: 0,
  searchTerm: "",
+ sort: {},
  totalResults: 0
  };
 
@@ -42,28 +43,39 @@ export default class AppSearchDriver {
  }
 
  addFilter = (name, value) => {
- const { filters, searchTerm } = this.state;
- this.updateSearchResults(searchTerm, 1, [...filters, { [name]: value }]);
+ const { filters, searchTerm, sort } = this.state;
+ this.updateSearchResults(
+ searchTerm,
+ 1,
+ [...filters, { [name]: value }],
+ sort
+ );
  };
 
  removeFilter = (name, value) => {
- const { filters, searchTerm } = this.state;
+ const { filters, searchTerm, sort } = this.state;
  const updatedFilters = filters.filter(filter => !(filter[name] === value));
- this.updateSearchResults(searchTerm, 1, updatedFilters);
+ this.updateSearchResults(searchTerm, 1, updatedFilters, sort);
  };
 
  setSearchTerm = searchTerm => {
- this.updateSearchResults(searchTerm, 1, []);
+ const { sort } = this.state;
+ this.updateSearchResults(searchTerm, 1, [], sort);
  };
 
- updatePage = current => {
+ setSort = sort => {
  const { filters, searchTerm } = this.state;
+ this.updateSearchResults(searchTerm, 1, filters, sort);
+ };
 
- this.updateSearchResults(searchTerm, current, filters);
+ updatePage = current => {
+ const { filters, searchTerm, sort } = this.state;
+
+ this.updateSearchResults(searchTerm, current, filters, sort);
  };
 
- updateSearchResults = (searchTerm, current, filters) => {
- let searchOptions = {
+ updateSearchResults = (searchTerm, current, filters, sort) => {
+ const searchOptions = {
  ...this.searchOptions,
  page: {
  size: 10,
@@ -74,6 +86,10 @@ export default class AppSearchDriver {
  }
  };
 
+ if (Object.keys(sort).length > 0) {
+ searchOptions.sort = sort;
+ }
+
  return this.client.search(searchTerm, searchOptions).then(resultList => {
  this.setState({
  current: resultList.info.meta.page.current,
@@ -82,6 +98,7 @@ export default class AppSearchDriver {
  results: resultList.results,
  size: resultList.info.meta.page.size,
  searchTerm: searchTerm,
+ sort: sort,
  totalResults: resultList.info.meta.page.total_results
  });
  });

src/app-search/AppSearchProvider.js

@@ -24,6 +24,7 @@ class AppSearchProvider extends Component {
  results,
  size,
  searchTerm,
+ sort,
  totalResults
  } = this.state;
 
@@ -34,10 +35,12 @@ class AppSearchProvider extends Component {
  results: results,
  size: size,
  searchTerm: searchTerm,
+ sort: sort,
  totalResults: totalResults,
  addFilter: driver.addFilter,
  removeFilter: driver.removeFilter,
  setSearchTerm: driver.setSearchTerm,
+ setSort: driver.setSort,
  updatePage: driver.updatePage
  };
 

src/components/Body.js

@@ -4,6 +4,7 @@ import Facets from "../containers/Facets";
 import Meta from "../containers/Meta";
 import Paging from "../containers/Paging";
 import Results from "../containers/Results";
+import Sort from "../containers/Sort";
 
 export default function Body() {
  return (
@@ -13,6 +14,7 @@ export default function Body() {
  <div className="results">
  <div className="results__header">
  <Meta />
+ <Sort />
  </div>
  <div className="results__body">
  <Results />

src/components/Meta.js

@@ -3,18 +3,12 @@ import React from "react";
 
 function Meta({ end, searchTerm, start, totalResults }) {
  return (
- <div className="results__header">
- <div className="results__result-count">
- Showing{" "}
- <strong>
- {start} - {end}
- </strong>{" "}
- of <strong>{totalResults}</strong>
- </div>
- <div className="results__powered-by powered-by">
- <span>Results for: </span>
- <span>{searchTerm}</span>
- </div>
+ <div className="results__result-count">
+ Showing{" "}
+ <strong>
+ {start} - {end}
+ </strong>{" "}
+ of <strong>{totalResults}</strong> for <strong>{searchTerm}</strong>
  </div>
  );
 }

src/components/Sort.js

@@ -0,0 +1,25 @@
+import PropTypes from "prop-types";
+import React from "react";
+
+function Sort({ onChange, options, value }) {
+ return (
+ <div className="sort">
+ <select name="sort" value={value} onChange={onChange}>
+ <option value="">None</option>
+ {options.map(option => (
+ <option value={option.value}>{option.name}</option>
+ ))}
+ </select>
+ </div>
+ );
+}
+
+Sort.propTypes = {
+ onChange: PropTypes.func.isRequired,
+ options: PropTypes.arrayOf(
+ PropTypes.shape({ name: PropTypes.string, value: PropTypes.string })
+ ).isRequired,
+ value: PropTypes.string
+};
+
+export default Sort;

src/containers/Sort.js

@@ -0,0 +1,46 @@
+import PropTypes from "prop-types";
+import React, { Component } from "react";
+
+import withAppSearch from "../app-search/withAppSearch";
+import Sort from "../components/Sort";
+
+function serialize(sortObject) {
+ const keys = Object.keys(sortObject);
+ if (keys.length === 0) return "";
+ return `${[keys[0]]}|||${sortObject[[keys[0]]]}`;
+}
+
+function deSerialize(sortString) {
+ if (!sortString) return {};
+ const [sortBy, sortDirection] = sortString.split("|||");
+ return {
+ [sortBy]: sortDirection
+ };
+}
+
+class SortContainer extends Component {
+ static propTypes = {
+ setSort: PropTypes.func.isRequired
+ };
+
+ render() {
+ const { setSort, sort } = this.props;
+
+ return (
+ <Sort
+ onChange={e => {
+ setSort(deSerialize(e.currentTarget.value));
+ }}
+ options={[
+ { name: "Name ASC", value: "name|||asc" },
+ { name: "Name DESC", value: "name|||desc" },
+ { name: "License ASC", value: "license|||asc" },
+ { name: "License DESC", value: "license|||desc" }
+ ]}
+ value={serialize(sort)}
+ />
+ );
+ }
+}
+
+export default withAppSearch(SortContainer);