Merge branch 'staging' into feature/add-jsdoc-linting

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/atoms/Inputs/Checkbox/Checkbox.js

@@ -0,0 +1,22 @@
+import PropTypes from 'prop-types'
+import {Field} from 'formik'
+
+export default function Checkbox({className, id, label, name}) {
+  return (
+    <div className={className}>
+      {label && (
+        <label htmlFor={id}>
+          <Field name={name} type="checkbox" value={`value${id}`} />
+          {label}
+        </label>
+      )}
+    </div>
+  )
+}
+
+Checkbox.propTypes = {
+  className: PropTypes.string,
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  label: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired
+}

components/atoms/Inputs/Checkbox/index.js

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

components/atoms/Inputs/CheckboxGroup/CheckboxGroup.js

@@ -0,0 +1,51 @@
+import PropTypes from 'prop-types'
+import {ErrorMessage} from 'formik'
+import Checkbox from '@/components/atoms/Inputs/Checkbox'
+
+export default function CheckboxGroup({
+  checkboxes,
+  className,
+  description,
+  id: groupId,
+  label
+}) {
+  return (
+    <div
+      aria-labelledby={groupId}
+      className={className}
+      id={groupId}
+      role="group"
+    >
+      {label && <label htmlFor={groupId}>{label}</label>}
+      {description && <p>{description}</p>}
+      {!!checkboxes.length > 0 &&
+        checkboxes.map((checkbox) => {
+          const {id, label} = checkbox
+
+          return (
+            <Checkbox
+              id={id}
+              key={`${groupId}-${id}`}
+              label={label}
+              name={groupId}
+            />
+          )
+        })}
+      <ErrorMessage name={groupId} />
+    </div>
+  )
+}
+
+CheckboxGroup.propTypes = {
+  checkboxes: PropTypes.arrayOf(PropTypes.object).isRequired,
+  className: PropTypes.string,
+  description: PropTypes.string,
+  id: PropTypes.string.isRequired,
+  isRequired: PropTypes.bool,
+  label: PropTypes.string,
+  validation: PropTypes.func
+}
+
+CheckboxGroup.defaultProps = {
+  isRequired: false
+}

components/atoms/Inputs/CheckboxGroup/index.js

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

components/atoms/Inputs/Text/Text.js

@@ -4,33 +4,33 @@ import {Field, ErrorMessage} from 'formik'
 export default function Text({
   className,
   description,
-  fieldId,
+  id,
   isRequired,
   label,
   type,
   validation
 }) {
   return (
-    <div className={className} key={fieldId}>
-      {label && <label htmlFor={fieldId}>{label}</label>}
+    <div className={className} key={id}>
+      {label && <label htmlFor={id}>{label}</label>}
       <Field
         aria-required={isRequired}
-        id={fieldId}
-        name={fieldId}
+        id={id}
+        name={id}
         required={isRequired}
         type={type}
         validate={validation}
       />
       {description && <p>{description}</p>}
-      <ErrorMessage name={fieldId} />
+      <ErrorMessage name={id} />
     </div>
   )
 }
 
 Text.propTypes = {
   className: PropTypes.string,
   description: PropTypes.string,
-  fieldId: PropTypes.string.isRequired,
+  id: PropTypes.string.isRequired,
   isRequired: PropTypes.bool,
   label: PropTypes.string.isRequired,
   type: PropTypes.string.isRequired,

components/atoms/Inputs/index.js

@@ -1 +1,3 @@
+export {default as Checkbox} from './Checkbox'
+export {default as CheckboxGroup} from './CheckboxGroup'
 export {default as Text} from './Text'

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
+  }
+}