Merge pull request #40 from WebDevStudios/feature/algolia

Feature/algolia

Author: Greg Rickaby

api/algolia/connector.js

@@ -0,0 +1,33 @@
+import algoliasearch from 'algoliasearch/lite'
+import getEnvVar from '@/functions/getEnvVar'
+
+// Define env vars.
+export const algoliaIndexName = getEnvVar('ALGOLIA_INDEX_NAME', true)
+export const algoliaSearchKey = process.env.NEXT_PUBLIC_ALGOLIA_SEARCH_ONLY_KEY
+export const algoliaAppId = process.env.NEXT_PUBLIC_ALGOLIA_APPLICATION_ID
+
+const algoliaClient = algoliasearch(algoliaAppId, algoliaSearchKey)
+
+export const searchClient = {
+  search(requests) {
+    if (requests.every(({params}) => !params.query)) {
+      return Promise.resolve({
+        results: requests.map(() => ({
+          hits: [],
+          nbHits: 0,
+          nbPages: 0,
+          page: 0,
+          processingTimeMS: 0
+        }))
+      })
+    }
+
+    return algoliaClient.search(requests)
+  }
+}
+
+export const searchResultsClient = {
+  search(requests) {
+    return algoliaClient.search(requests)
+  }
+}

api/wordpress/_global/getPostTypeStaticProps.js

@@ -1,3 +1,4 @@
+import {algoliaIndexName} from '@/api/algolia/connector'
 import getPostTypeById from './getPostTypeById'
 import getPostTypeArchive from './getPostTypeArchive'
 import {addApolloState} from '@/api/apolloConfig'
@@ -50,6 +51,11 @@ export default async function getPostTypeStaticProps(
     props.error = false
   }
 
+  // Add Algolia env vars.
+  props.algolia = {
+    indexName: algoliaIndexName
+  }
+
   // Merge in query results as Apollo state.
   return addApolloState(apolloClient, {
     props,

components/common/AlgoliaProvider.js

@@ -0,0 +1,27 @@
+import PropTypes from 'prop-types'
+import {createContext} from 'react'
+
+// Initialize Algolia context object.
+export const AlgoliaContext = createContext({
+  algolia: null
+})
+
+/**
+ * Provide indexName env var.
+ *
+ * @param  {Object} props The component attributes as props.
+ * @return {Element}      The child elements wrapped in a context provider.
+ */
+export default function AlgoliaProvider(props) {
+  const {value, children} = props
+
+  return (
+    <AlgoliaContext.Provider value={value}>{children}</AlgoliaContext.Provider>
+  )
+}
+
+AlgoliaProvider.propTypes = {
+  indexName: PropTypes.string,
+  children: PropTypes.object,
+  value: PropTypes.object
+}

components/molecules/AlgoliaResults/AlgoliaResults.js

@@ -0,0 +1,43 @@
+import {searchResultsClient} from '@/api/algolia/connector'
+import cn from 'classnames'
+import PropTypes from 'prop-types'
+import {AlgoliaContext} from '@/components/common/AlgoliaProvider'
+import React, {useContext} from 'react'
+import {Configure, InstantSearch} from 'react-instantsearch-dom'
+import styles from './AlgoliaResults.module.css'
+import NoResults from './templates/NoResults'
+import SearchResults from './templates/SearchResults'
+
+// TODO: Create Storybook for this component.
+
+export default function AlgoliaResults({config}) {
+  const {indexName} = useContext(AlgoliaContext)
+  return (
+    <section className={cn('container', styles.algoliaResults)}>
+      {config.query !== '' && (
+        <InstantSearch
+          searchClient={config.query !== '' ? searchResultsClient : ''}
+          indexName={indexName}
+        >
+          <Configure {...config} />
+          <SearchResults indexName={indexName} />
+        </InstantSearch>
+      )}
+      {config.query === '' && <NoResults query={config.query} />}
+    </section>
+  )
+}
+
+AlgoliaResults.propTypes = {
+  config: PropTypes.shape({
+    query: PropTypes.string,
+    hitsPerPage: PropTypes.number.isRequired
+  })
+}
+
+AlgoliaResults.defaultProps = {
+  config: {
+    query: '',
+    hitsPerPage: 15
+  }
+}

components/molecules/AlgoliaResults/AlgoliaResults.module.css

@@ -0,0 +1,77 @@
+.algoliaResults {
+  @apply pt-20 pb-40;
+
+  & h1 {
+    @apply mb-8;
+
+    font-size: 30px;
+  }
+
+  /* Results Header */
+  & .resultsHeader {
+    @apply flex justify-between items-center;
+    @apply mb-32;
+
+    & .total {
+      & span {
+        @apply font-semibold;
+      }
+    }
+  }
+
+  /* Results Listing */
+  & .results {
+    @apply grid grid-cols-12 gap-24;
+
+    & > aside.sidebar {
+      @apply col-span-3;
+
+      & .filterPanel {
+        @apply mb-16;
+
+        & h3 {
+          @apply font-bold mb-8;
+        }
+      }
+    }
+
+    & > .content {
+      @apply col-span-9;
+    }
+
+    /* Hits/Results */
+    & .aisHits {
+      @apply text-center;
+
+      & > ul {
+        @apply grid gap-12 grid-cols-1 text-left;
+      }
+
+      /* Hit */
+      & .hit {
+        @apply p-20 border;
+
+        & h3 {
+          @apply font-semibold;
+        }
+
+        & .date {
+          @apply italic mb-8;
+        }
+      }
+
+      & > button {
+        @apply inline-block m-auto mt-44 border rounded px-24 py-8 transition-colors duration-200 ease-in-out;
+
+        &[disabled] {
+          @apply opacity-25 cursor-not-allowed;
+        }
+      }
+    }
+  }
+
+  /* No results */
+  & .empty {
+    @apply py-20;
+  }
+}

components/molecules/AlgoliaResults/facets/Authors.js

@@ -0,0 +1,27 @@
+import PropTypes from 'prop-types'
+import CustomRefinementList from '../refinements/CustomRefinementList'
+
+/**
+ * Component for displaying Post Type facets.
+ */
+export default function Authors({refinements, defaultRefinement, className}) {
+  const data = {
+    title: 'Authors',
+    attribute: 'post_author.display_name',
+    showMore: true,
+    limit: refinements.limit,
+    translations: refinements.translations,
+    defaultRefinement: defaultRefinement ? [defaultRefinement] : [],
+    className: className
+  }
+  return <CustomRefinementList {...data} />
+}
+
+Authors.propTypes = {
+  refinements: PropTypes.shape({
+    limit: PropTypes.number,
+    translations: PropTypes.any
+  }),
+  defaultRefinement: PropTypes.string,
+  className: PropTypes.string
+}

components/molecules/AlgoliaResults/facets/PostType.js

@@ -0,0 +1,27 @@
+import PropTypes from 'prop-types'
+import CustomRefinementList from '../refinements/CustomRefinementList'
+
+/**
+ * Component for displaying Post Type facets.
+ */
+export default function PostType({refinements, defaultRefinement, className}) {
+  const data = {
+    title: 'Content Type',
+    attribute: 'post_type_label',
+    showMore: true,
+    limit: refinements.limit,
+    translations: refinements.translations,
+    defaultRefinement: defaultRefinement ? [defaultRefinement] : [],
+    className: className
+  }
+  return <CustomRefinementList {...data} />
+}
+
+PostType.propTypes = {
+  refinements: PropTypes.shape({
+    limit: PropTypes.number,
+    translations: PropTypes.any
+  }),
+  defaultRefinement: PropTypes.string,
+  className: PropTypes.string
+}

components/molecules/AlgoliaResults/facets/Sort.js

@@ -0,0 +1,34 @@
+import PropTypes from 'prop-types'
+import {SortBy} from 'react-instantsearch-dom'
+
+/**
+ * Component for displaying Post Type facets.
+ */
+export default function Sort({index, defaultRefinement}) {
+  return (
+    <SortBy
+      items={[
+        {
+          value: index,
+          label: '-- Sort by -- '
+        },
+        {
+          value: `${index}_title_asc`,
+          label: 'Alphabetical'
+        },
+        {
+          value: `${index}_date_desc`,
+          label: 'Most Recent'
+        }
+      ]}
+      defaultRefinement={
+        defaultRefinement ? `${index}${defaultRefinement}` : index
+      }
+    />
+  )
+}
+
+Sort.propTypes = {
+  index: PropTypes.string.isRequired,
+  defaultRefinement: PropTypes.string
+}

components/molecules/AlgoliaResults/index.js

@@ -0,0 +1 @@
+export {default} from './AlgoliaResults'

components/molecules/AlgoliaResults/refinements/CustomClearRefinements.js

@@ -0,0 +1,31 @@
+import PropTypes from 'prop-types'
+import {connectCurrentRefinements} from 'react-instantsearch-dom'
+import styles from '../AlgoliaResults.module.css'
+
+/**
+ * Custom display of Algolia [ClearRefinements](https://www.algolia.com/doc/api-reference/widgets/clear-refinements/react/) widget.
+ */
+function ClearRefinements({items, refine}) {
+  return (
+    <>
+      {!!items?.length && (
+        <button
+          type="button"
+          onClick={() => refine(items)}
+          disabled={!items.length}
+          className={styles.clearBtn}
+        >
+          Clear All Filters
+        </button>
+      )}
+    </>
+  )
+}
+
+ClearRefinements.propTypes = {
+  items: PropTypes.any.isRequired,
+  refine: PropTypes.func
+}
+
+const CustomClearRefinements = connectCurrentRefinements(ClearRefinements)
+export default CustomClearRefinements