Facets

Author: JasonStoltz

src/App.js

@@ -28,9 +28,19 @@ function buildSearchOptionsFromConfig(config) {
  return acc;
  }, undefined);
 
+ const facets = (config.facets || []).reduce((acc, n) => {
+ acc = acc || {};
+ acc[n] = {
+ type: "value",
+ size: 10
+ };
+ return acc;
+ }, undefined);
+
  return {
- search_fields: searchFields,
- result_fields: resultFields
+ facets: facets,
+ result_fields: resultFields,
+ search_fields: searchFields
  };
 }
 

src/app-search/AppSearchDriver.js

@@ -6,6 +6,7 @@ import * as SwiftypeAppSearch from "swiftype-app-search-javascript";
 export default class AppSearchDriver {
  state = {
  current: 1,
+ facets: {},
  results: [],
  size: 0,
  searchTerm: "",
@@ -63,6 +64,7 @@ export default class AppSearchDriver {
  .then(resultList => {
  this.setState({
  current: resultList.info.meta.page.current,
+ facets: resultList.info.facets,
  results: resultList.results,
  size: resultList.info.meta.page.size,
  searchTerm: searchTerm,

src/app-search/AppSearchProvider.js

@@ -17,12 +17,20 @@ class AppSearchProvider extends Component {
 
  render() {
  const { children, driver } = this.props;
- const { current, results, size, searchTerm, totalResults } = this.state;
+ const {
+ current,
+ facets,
+ results,
+ size,
+ searchTerm,
+ totalResults
+ } = this.state;
 
  return (
  <AppSearchContext.Provider
  value={{
  current: current,
+ facets: facets,
  results: results,
  size: size,
  searchTerm: searchTerm,

src/components/Body.css

@@ -2,4 +2,13 @@
  min-height: 100px;
  width: 100%;
  padding: 10px 0;
+ display: flex;
+}
+
+.Body-left {
+ width: 250px;
+ margin-right: 10px;
+}
+.Body-right {
+ flex: 1;
 }

src/components/Body.js

@@ -2,16 +2,22 @@ import React from "react";
 
 import "./Body.css";
 
+import Facets from "../containers/Facets";
 import Meta from "../containers/Meta";
 import Paging from "../containers/Paging";
 import Results from "../containers/Results";
 
 export default function Body() {
  return (
  <div className="Body">
- <Meta />
- <Results />
- <Paging />
+ <div className="Body-left">
+ <Facets />
+ </div>
+ <div className="Body-right">
+ <Meta />
+ <Results />
+ <Paging />
+ </div>
  </div>
  );
 }

src/components/Facet.css

@@ -0,0 +1,9 @@
+.Facet {
+ min-height: 100px;
+ padding: 10px;
+ border: 1px solid darkgray;
+}
+
+.Facet + .Facet {
+ margin-top: 10px;
+}

src/components/Facet.js

@@ -0,0 +1,20 @@
+import React from "react";
+
+import "./Facet.css";
+
+function Facet({ name, options }) {
+ return (
+ <div className="Facet">
+ <div className="Facet-title">{name}</div>
+ <ul className="Facet-list">
+ {options.map(option => (
+ <div key={option.value}>
+ {option.value} ({option.count})
+ </div>
+ ))}
+ </ul>
+ </div>
+ );
+}
+
+export default Facet;

src/components/Facets.css

@@ -0,0 +1,3 @@
+.Facets {
+ margin-top: 35px;
+}

src/components/Facets.js

@@ -0,0 +1,14 @@
+import PropTypes from "prop-types";
+import React from "react";
+
+import "./Facets.css";
+
+function Facets({ children }) {
+ return <div className="Facets">{children}</div>;
+}
+
+Facets.propTypes = {
+ children: PropTypes.arrayOf(PropTypes.element).isRequired
+};
+
+export default Facets;

src/config/engine.json.example

@@ -8,5 +8,6 @@
  "someField",
  "created"
  ],
- "titleField": "title"
+ "titleField": "title",
+ "facets": ["anotherField", "someField"]
 }