Merge branch 'dev/filtersearch-component' of https://github.com/yext/…

…answers-headless-react into dev/filtersearch-component

THIRD-PARTY-NOTICES

@@ -96,7 +96,7 @@ The following NPM packages may be included in this product:
 
  - @yext/answers-core@1.3.2
  - @yext/answers-headless-react@0.4.0-beta.0
- - @yext/answers-headless@0.1.0-beta.2
+ - @yext/answers-headless@0.1.0-beta.4
 
 These packages each contain the following license and notice below:
 

package.json

@@ -18,7 +18,7 @@
   "dependencies": {
     "@reduxjs/toolkit": "^1.6.2",
     "@types/react": "^17.0.15",
-    "@yext/answers-headless": "^0.1.0-beta.2",
+    "@yext/answers-headless": "^0.1.0-beta.4",
     "typescript": "^4.3.5"
   },
   "devDependencies": {

sample-app/package.json

@@ -17,7 +17,6 @@
     "@types/react-router-dom": "^5.3.0",
     "@typescript-eslint/eslint-plugin": "^4.5.0",
     "@typescript-eslint/parser": "^4.5.0",
-    "@yext/answers-core": "^1.2.0",
     "@yext/answers-headless-react": "file:..",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^26.6.0",
@@ -135,7 +134,7 @@
       "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
     ],
     "testEnvironment": "jsdom",
-    "testRunner": "/Users/oshi/answers-headless/react-test-site/node_modules/jest-circus/runner.js",
+    "testRunner": "<rootDir>/node_modules/jest-circus/runner.js",
     "transform": {
       "^.+\\.(js|jsx|mjs|cjs|ts|tsx)$": "<rootDir>/config/jest/babelTransform.js",
       "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",

sample-app/src/components/AlternativeVerticals.tsx

@@ -1,8 +1,7 @@
 import { processTranslation } from './utils/processTranslation';
 import { ReactComponent as Chevron } from '../icons/chevron.svg';
 import { ReactComponent as Star } from '../icons/star.svg';
-import { useAnswersState, useAnswersActions } from '@yext/answers-headless-react';
-import { VerticalResults } from '@yext/answers-core';
+import { useAnswersState, useAnswersActions, VerticalResults } from '@yext/answers-headless-react';
 import '../sass/AlternativeVerticals.scss';
 
 interface VerticalConfig {
@@ -27,9 +26,9 @@ interface Props {
 export default function AlternativeVerticals (props: Props): JSX.Element | null {
   const { currentVerticalLabel, verticalsConfig, displayAllResults = true } = props;
 
-  const alternativeVerticals = useAnswersState(state => state.vertical.alternativeVerticals) || [];
-  const allResultsForVertical = useAnswersState(state => state.vertical.results?.allResultsForVertical?.verticalResults.results) || [];
-  const query = useAnswersState(state => state.query.latest);
+  const alternativeVerticals = useAnswersState(state => state.vertical.noResults?.alternativeVerticals) || [];
+  const allResultsForVertical = useAnswersState(state => state.vertical.noResults?.allResultsForVertical.results) || [];
+  const query = useAnswersState(state => state.query.mostRecentSearch);
   const actions = useAnswersActions();
 
   const verticalSuggestions = buildVerticalSuggestions(verticalsConfig, alternativeVerticals);

sample-app/src/components/AppliedFilters.tsx

@@ -75,11 +75,7 @@ function RemovableFilter({ filter }: {filter: DisplayableFilter }): JSX.Element
   }
 
   const onRemoveStaticFilterOption = () => {
-    if (!filter.filterCollectionId) {
-      console.error(`Undefined filter collection id. Unable to remove this filter in AppliedFilters component:\n${JSON.stringify(filter)}`);
-      return;
-    }
-    answersAction.setFilterOption({ ...filter.filter, selected: false }, filter.filterCollectionId);
+    answersAction.setFilterOption({ ...filter.filter, selected: false });
     answersAction.executeVerticalQuery();
   }
 

sample-app/src/components/DecoratedAppliedFilters.tsx

@@ -1,6 +1,5 @@
 import AppliedFilters from "./AppliedFilters";
-import { AppliedQueryFilter } from "@yext/answers-core";
-import { useAnswersState } from '@yext/answers-headless-react';
+import { useAnswersState, AppliedQueryFilter } from '@yext/answers-headless-react';
 import { GroupedFilters } from '../models/groupedFilters';
 import { getGroupedAppliedFilters } from '../utils/appliedfilterutils';
 
@@ -30,6 +29,6 @@ export function DecoratedAppliedFiltersDisplay(props : DecoratedAppliedFiltersCo
 export default function DecoratedAppliedFilters(
   props : Omit<DecoratedAppliedFiltersConfig, 'appliedQueryFilters'>
 ): JSX.Element {
-  const nlpFilters = useAnswersState(state => state.vertical?.results?.verticalResults.appliedQueryFilters) || [];  
+  const nlpFilters = useAnswersState(state => state.vertical?.appliedQueryFilters) || [];  
   return <DecoratedAppliedFiltersDisplay appliedQueryFilters={nlpFilters} {...props}/>
 };

sample-app/src/components/Facet.tsx

@@ -1,5 +1,4 @@
-import { useAnswersUtilities } from '@yext/answers-headless-react'
-import { DisplayableFacet, DisplayableFacetOption } from '@yext/answers-core';
+import { useAnswersUtilities, DisplayableFacet, DisplayableFacetOption } from '@yext/answers-headless-react'
 import { useState } from 'react';
 import useCollapse from 'react-collapsed';
 import '../sass/Facet.scss';

sample-app/src/components/Facets.tsx

@@ -1,5 +1,4 @@
-import { useAnswersState, useAnswersActions } from '@yext/answers-headless-react'
-import { DisplayableFacetOption } from "@yext/answers-core";
+import { useAnswersState, useAnswersActions, DisplayableFacetOption } from '@yext/answers-headless-react'
 import Facet, { FacetTextConfig } from './Facet';
 import '../sass/Facets.scss';
 

sample-app/src/components/InputDropdown.tsx

@@ -178,8 +178,8 @@ export default function InputDropdown({
             setScreenReaderKey(screenReaderKey + 1);
           }}
           onClick={() => {
-            dispatch({ type: 'ShowOptions' });
             updateDropdown(inputValue);
+            dispatch({ type: 'ShowOptions' });
             if (options[0]?.results.length || inputValue) {
               setScreenReaderKey(screenReaderKey + 1);
             }

sample-app/src/components/LocationBias.tsx

@@ -1,6 +1,4 @@
-
-import { LocationBiasMethod } from '@yext/answers-core';
-import { useAnswersActions, useAnswersState } from '@yext/answers-headless-react';
+import { useAnswersActions, useAnswersState, LocationBiasMethod } from '@yext/answers-headless-react';
 
 interface Props {
   isVertical: boolean,

sample-app/src/components/ResultsCount.tsx

@@ -18,8 +18,8 @@ export function ResultsCountDisplay(props: ResultsCountConfig): JSX.Element {
 
 
 export default function ResultsCount() {
-  const resultsCount = useAnswersState(state => state.vertical?.results?.verticalResults.resultsCount) || 0;
-  const resultsLength = useAnswersState(state => state.vertical?.results?.verticalResults.results.length) || 0;
+  const resultsCount = useAnswersState(state => state.vertical?.resultsCount) || 0;
+  const resultsLength = useAnswersState(state => state.vertical?.results?.length) || 0;
   const offset = useAnswersState(state => state.vertical?.offset) || 0;
   return <ResultsCountDisplay resultsCount={resultsCount} resultsLength={resultsLength} offset={offset}/>;
 }

sample-app/src/components/SearchBar.tsx

@@ -1,11 +1,11 @@
-import { useAnswersActions, useAnswersState, StateSelector } from '@yext/answers-headless-react';
-import { AutocompleteResult } from '@yext/answers-core';
+import { useAnswersActions, useAnswersState } from '@yext/answers-headless-react';
 import InputDropdown from './InputDropdown';
 import renderWithHighlighting from './utils/renderWithHighlighting';
 import { ReactComponent as MagnifyingGlassIcon } from '../icons/magnifying_glass.svg';
 import '../sass/SearchBar.scss';
 import '../sass/Autocomplete.scss';
 import LoadingIndicator from './LoadingIndicator';
+import { useAutocomplete } from '../hooks/useAutocomplete';
 
 const SCREENREADER_INSTRUCTIONS = 'When autocomplete results are available, use up and down arrows to review and enter to select.'
 
@@ -20,18 +20,9 @@ interface Props {
  */
 export default function SearchBar({ placeholder, isVertical, screenReaderInstructionsId }: Props) {
   const answersActions = useAnswersActions();
-  const query = useAnswersState(state => state.query.query);
-  const mapStateToAutocompleteResults: StateSelector<AutocompleteResult[] | undefined> = isVertical
-    ? state => state.vertical.autoComplete?.results
-    : state => state.universal.autoComplete?.results;
-  const autocompleteResults = useAnswersState(mapStateToAutocompleteResults) || [];
-  const isLoading = useAnswersState(state => state.vertical.searchLoading || state.universal.searchLoading);
-
-  function executeAutocomplete () {
-    isVertical
-      ? answersActions.executeVerticalAutoComplete()
-      : answersActions.executeUniversalAutoComplete()
-  }
+  const query = useAnswersState(state => state.query.input);
+  const [ autocompleteResults, executeAutocomplete ] = useAutocomplete(isVertical);
+  const isLoading = useAnswersState(state => state.searchStatus.isLoading);
 
   function executeQuery () {
     isVertical

sample-app/src/components/StaticFilters.tsx

@@ -1,6 +1,4 @@
-import { Fragment } from 'react';
-import { Filter, Matcher } from '@yext/answers-core';
-import { useAnswersActions, useAnswersState } from '@yext/answers-headless-react';
+import { useAnswersActions, useAnswersState, Filter, Matcher } from '@yext/answers-headless-react';
 import { isDuplicateFilter } from '../utils/filterutils';
 
 interface CheckBoxProps {
@@ -19,8 +17,7 @@ interface FilterOption {
 
 interface StaticFiltersProps {
   options: FilterOption[],
-  title: string,
-  filterCollectionId: string
+  title: string
 }
 
 function CheckboxFilter({ fieldId, value, label, selected, optionHandler }: CheckBoxProps) {
@@ -31,25 +28,25 @@ function CheckboxFilter({ fieldId, value, label, selected, optionHandler }: Chec
   }
   const id = fieldId + "_" + value
   return (
-    <Fragment>
+    <>
       <label htmlFor={id}>{label}</label>
       <input 
         type="checkbox"
         id={id}
         checked={selected}
         onChange={evt => optionHandler(filter, evt.target.checked)}
       />
-    </Fragment>
+    </>
   );
 }
 
 export default function StaticFilters(props: StaticFiltersProps): JSX.Element {
   const answersActions = useAnswersActions();
-  const { filterCollectionId, options, title } = props;
+  const { options, title } = props;
 
-  const filterCollection = useAnswersState(state =>  state.filters.static?.[filterCollectionId]);
+  const selectableFilters = useAnswersState(state =>  state.filters.static);
   const getOptionSelectStatus = (option: FilterOption): boolean => {
-    const foundFilter = filterCollection?.find(storedSelectableFilter => {
+    const foundFilter = selectableFilters?.find(storedSelectableFilter => {
       const { selected, ...storedFilter } = storedSelectableFilter;
       const targetFilter = {
         fieldId: option.fieldId,
@@ -62,7 +59,8 @@ export default function StaticFilters(props: StaticFiltersProps): JSX.Element {
   };
 
   const handleFilterOptionChange = (option: Filter, isChecked: boolean) => {
-    answersActions.setFilterOption({ ...option, selected: isChecked }, filterCollectionId);
+    answersActions.resetFacets();
+    answersActions.setFilterOption({ ...option, selected: isChecked });
     answersActions.executeVerticalQuery();
   }