Refactored Sort Container

Author: JasonStoltz

src/App.js

@@ -17,7 +17,11 @@ function createDriver() {
  searchKey,
  engineName,
  initialState: {
- resultsPerPage: 20
+ resultsPerPage: 20,
+ sort: {
+ value: "",
+ direction: ""
+ }
  },
  searchOptions: buildSearchOptionsFromConfig()
  });

src/app-search/AppSearchDriver.js

@@ -118,8 +118,14 @@ export default class AppSearchDriver {
  }
  };
 
- if (Object.keys(sort).length > 0) {
- searchOptions.sort = sort;
+ if (
+ Object.keys(sort).length > 0 &&
+ sort.value.length > 1 &&
+ sort.direction.length > 1
+ ) {
+ searchOptions.sort = {
+ [sort.value]: sort.direction
+ };
  }
 
  return this.client.search(searchTerm, searchOptions).then(resultList => {

src/components/Body.js

@@ -6,12 +6,41 @@ import Paging from "../containers/Paging";
 import Results from "../containers/Results";
 import ResultsPerPage from "../containers/ResultsPerPage";
 import Sort from "../containers/Sort";
+import { create } from "../types/SortOption";
 
 export default function Body() {
  return (
  <div className="search-demo__body">
  <div className="search-results">
- <Sort />
+ <Sort
+ sortOptions={[
+ create({
+ name: "None",
+ value: "",
+ direction: ""
+ }),
+ create({
+ name: "Name ASC",
+ value: "name",
+ direction: "asc"
+ }),
+ create({
+ name: "Name DESC",
+ value: "name",
+ direction: "desc"
+ }),
+ create({
+ name: "License ASC",
+ value: "license",
+ direction: "asc"
+ }),
+ create({
+ name: "License DESC",
+ value: "license",
+ direction: "desc"
+ })
+ ]}
+ />
  <Facets />
  <div className="results">
  <div className="results__header">

src/components/Sort.js

@@ -5,7 +5,6 @@ function Sort({ onChange, options, value }) {
  return (
  <div className="sort">
  <select name="sort" value={value} onChange={onChange}>
- <option value="">None</option>
  {options.map(option => (
  <option key={option.value} value={option.value}>
  {option.name}

src/config/engine.json.example

@@ -12,5 +12,9 @@
  "titleField": "title",
  "urlField": "url",
  "urlFieldTemplate": "http://www.example.com/{{id}}",
+ "sortFields": [
+ "title",
+ "anotherField"
+ ]
  "facets": ["anotherField", "someField"]
 }

src/containers/Sort.js

@@ -3,43 +3,41 @@ import React, { Component } from "react";
 
 import withAppSearch from "../app-search/withAppSearch";
 import Sort from "../components/Sort";
+import SortOption from "../types/SortOption";
 
-function serialize(sortObject) {
- const keys = Object.keys(sortObject);
- if (keys.length === 0) return "";
- return `${[keys[0]]}|||${sortObject[[keys[0]]]}`;
+function findSortOption(sortOptions, sortString) {
+ const [value, direction] = sortString.split("|||");
+ return sortOptions.find(
+ option => option.value === value && option.direction === direction
+ );
 }
 
-function deSerialize(sortString) {
- if (!sortString) return {};
- const [sortBy, sortDirection] = sortString.split("|||");
+function formatOption(sortOption) {
  return {
- [sortBy]: sortDirection
+ name: sortOption.name,
+ value: `${sortOption.value}|||${sortOption.direction}`
  };
 }
-
 class SortContainer extends Component {
  static propTypes = {
+ // Injected
  setSort: PropTypes.func.isRequired,
  sort: PropTypes.shape({ name: PropTypes.string, value: PropTypes.string })
- .isRequired
+ .isRequired,
+ // Passed
+ sortOptions: PropTypes.arrayOf(SortOption).isRequired
  };
 
  render() {
- const { setSort, sort } = this.props;
+ const { setSort, sort, sortOptions } = this.props;
 
  return (
  <Sort
  onChange={e => {
- setSort(deSerialize(e.currentTarget.value));
+ setSort(findSortOption(sortOptions, 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)}
+ options={sortOptions.map(formatOption)}
+ value={formatOption(sort).value}
  />
  );
  }

src/types/SortOption.js

@@ -0,0 +1,18 @@
+import PropTypes from "prop-types";
+
+export default PropTypes.shape({
+ // A display name, like "Name"
+ name: PropTypes.string,
+ // A field name, like "name".
+ value: PropTypes.string,
+ // asc or desc
+ direction: PropTypes.oneOf(["asc", "desc", ""])
+});
+
+export function create({ name, value, direction }) {
+ return {
+ name,
+ value,
+ direction
+ };
+}