From 3fe4cef36799383036e16e82ca9b7147d8ffc560 Mon Sep 17 00:00:00 2001
From: Jonathan Sick <jonathan@jsick.codes>
Date: Wed, 4 Aug 2021 11:19:13 -0400
Subject: [PATCH] Add facet-based search refinements to UI

Refine the listing based on keywords and content type. Note that all
these attributes must be configured as "facets" in Algolia.
---
 .../instantsearch/refinementList.js           | 16 ++++++
 src/components/searchLayout.js                | 13 +++++
 src/pages/index.js                            | 51 ++++++++++++++++++-
 3 files changed, 78 insertions(+), 2 deletions(-)
 create mode 100644 src/components/instantsearch/refinementList.js

diff --git a/src/components/instantsearch/refinementList.js b/src/components/instantsearch/refinementList.js
new file mode 100644
index 0000000..bf93114
--- /dev/null
+++ b/src/components/instantsearch/refinementList.js
@@ -0,0 +1,16 @@
+/*
+ * Styled version of the Algolia InstantSearch RefinementList component.
+ *
+ * https://www.algolia.com/doc/api-reference/widgets/refinement-list/react/
+ */
+
+import styled from 'styled-components';
+import { RefinementList as BaseRefinementList } from 'react-instantsearch-dom';
+
+const RefinementList = styled(BaseRefinementList)`
+  .ais-RefinementList-labelText {
+    margin-left: var(--astropy-size-s);
+  }
+`;
+
+export default RefinementList;
diff --git a/src/components/searchLayout.js b/src/components/searchLayout.js
index 8cb01cf..e1c38b9 100644
--- a/src/components/searchLayout.js
+++ b/src/components/searchLayout.js
@@ -36,3 +36,16 @@ export const SearchLayout = styled.div`
     grid-row: 2 / 3;
   }
 `;
+
+/* Styled component div around a refinement widget.
+ *
+ * This styling controls spacing and the heading styling
+ */
+export const SearchRefinementsSection = styled.div`
+  margin-bottom: var(--astropy-size-l);
+
+  h2 {
+    margin-top: 0;
+    font-size: var(--astropy-font-size-ml);
+  }
+`;
diff --git a/src/pages/index.js b/src/pages/index.js
index 0cf2374..d626859 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -4,11 +4,15 @@ import PropTypes from 'prop-types';
 import { InstantSearch, SearchBox, Configure } from 'react-instantsearch-dom';
 
 import Layout from '../components/layout';
-import { SearchLayout } from '../components/searchLayout';
+import {
+  SearchLayout,
+  SearchRefinementsSection,
+} from '../components/searchLayout';
 import SEO from '../components/seo';
 import PageCover from '../components/pageCover';
 import searchClient from '../searchClient';
 import { StyledHits } from '../components/instantsearch/hits';
+import RefinementList from '../components/instantsearch/refinementList';
 import ResultCard from '../components/resultCard';
 
 export default function IndexPage({ location }) {
@@ -31,7 +35,50 @@ export default function IndexPage({ location }) {
             <SearchBox />
           </div>
           <div className="search-refinements-area">
-            <p>Refinements</p>
+            <SearchRefinementsSection>
+              <h2>Format</h2>
+              <RefinementList attribute="content_type" />
+            </SearchRefinementsSection>
+            <SearchRefinementsSection>
+              <h2>Astropy packages</h2>
+              <RefinementList
+                attribute="astropy_package_keywords"
+                limit={10}
+                showMore
+                showMoreLimit={30}
+                searchable
+              />
+            </SearchRefinementsSection>
+            <SearchRefinementsSection>
+              <h2>Python packages</h2>
+              <RefinementList
+                attribute="python_package_keywords"
+                limit={10}
+                showMore
+                showMoreLimit={30}
+                searchable
+              />
+            </SearchRefinementsSection>
+            <SearchRefinementsSection>
+              <h2>Tasks</h2>
+              <RefinementList
+                attribute="task_keywords"
+                limit={10}
+                showMore
+                showMoreLimit={30}
+                searchable
+              />
+            </SearchRefinementsSection>
+            <SearchRefinementsSection>
+              <h2>Science domains</h2>
+              <RefinementList
+                attribute="science_keywords"
+                limit={10}
+                showMore
+                showMoreLimit={30}
+                searchable
+              />
+            </SearchRefinementsSection>
           </div>
           <div className="search-results-area">
             <StyledHits hitComponent={ResultCard} />