feedback

sample-app/src/components/SearchBar.tsx

@@ -7,7 +7,8 @@ import '../sass/Autocomplete.scss';
 import LoadingIndicator from './LoadingIndicator';
 import { useAutocomplete } from '../hooks/useAutocomplete';
 import SearchHandler from '../utils/searchhandler';
-import { SearchIntent } from '@yext/answers-headless';
+import { useRef } from 'react';
+import { AutocompleteResponse } from '@yext/answers-headless';
 
 const SCREENREADER_INSTRUCTIONS = 'When autocomplete results are available, use up and down arrows to review and enter to select.'
 
@@ -30,26 +31,13 @@ export default function SearchBar({
   const answersActions = useAnswersActions();
   const query = useAnswersState(state => state.query.input);
   const isLoading = useAnswersState(state => state.searchStatus.isLoading);
-  const [ 
-    autocompleteResponse,
-    responseToLatestRequestRef,
-    executeAutocomplete
-  ] = useAutocomplete(isVertical);
+  const responseToLatestRequestRef = useRef<Promise<AutocompleteResponse|undefined>>(Promise.resolve(undefined));
+  const [ autocompleteResponse, executeAutocomplete] = useAutocomplete(isVertical);
 
   async function executeQuery () {
     const responseToLatestRequest = await responseToLatestRequestRef.current;
-    if (responseToLatestRequest?.inputIntents.includes(SearchIntent.NearMe)) {
-      try {
-        const position = await SearchHandler.getUserLocation(geolocationOptions);
-        answersActions.setUserLocation({
-          latitude: position.coords.latitude,
-          longitude: position.coords.longitude,
-        });
-      } catch(e) {
-        console.error(e);
-      }
-    }
-    SearchHandler.executeSearch(answersActions, isVertical);
+    const intents = responseToLatestRequest?.inputIntents || [];
+    SearchHandler.executeSearchWithIntents(answersActions, isVertical, intents, geolocationOptions);
   }
 
   function renderSearchButton () {
@@ -84,7 +72,7 @@ export default function SearchBar({
           answersActions.setQuery(value);
         }}
         updateDropdown={() => {
-          executeAutocomplete();
+          responseToLatestRequestRef.current = executeAutocomplete();
         }}
         renderButtons={renderSearchButton}
         cssClasses={{

sample-app/src/hooks/useAutocomplete.tsx

@@ -1,21 +1,19 @@
-import { MutableRefObject, useRef, useState } from "react";
+import { useRef, useState } from "react";
 import { AutocompleteResponse, useAnswersActions } from '@yext/answers-headless-react';
 
 export function useAutocomplete(
   isVertical: boolean
 ): [ 
     AutocompleteResponse|undefined,
-    MutableRefObject<Promise<AutocompleteResponse|undefined>>,
-    () => Promise<void> 
+    () => Promise<AutocompleteResponse|undefined> 
   ]
 {
   const answersActions = useAnswersActions();
   const autocompleteNetworkIds = useRef({ latestRequest: 0, responseInState: 0 });
   const [ autocompleteResponse, setAutocompleteResponse ] = useState<AutocompleteResponse>();
-  const responseToLatestRequestRef = useRef<Promise<AutocompleteResponse|undefined>>(Promise.resolve(undefined));
-  async function executeAutocomplete () {
+  async function executeAutocomplete (): Promise<AutocompleteResponse|undefined>  {
     const requestId = ++autocompleteNetworkIds.current.latestRequest;
-    responseToLatestRequestRef.current = new Promise(async (resolve) => {
+    return new Promise(async (resolve) => {
       const response = isVertical
         ? await answersActions.executeVerticalAutocomplete()
         : await answersActions.executeUniversalAutocomplete();
@@ -26,5 +24,5 @@ export function useAutocomplete(
       resolve(response);
     });
   }
-  return [ autocompleteResponse, responseToLatestRequestRef, executeAutocomplete ]
+  return [ autocompleteResponse, executeAutocomplete ]
 };

sample-app/src/pages/UniversalSearchPage.tsx

@@ -4,7 +4,6 @@ import { useAnswersActions } from '@yext/answers-headless-react';
 import '../sass/UniversalSearchPage.scss';
 import { UniversalResultsConfig } from '../universalResultsConfig';
 import SearchHandler from '../utils/searchhandler';
-import { SearchIntent } from '@yext/answers-headless';
 
 const universalResultsFilterConfig = {
   show: true
@@ -21,18 +20,7 @@ export default function UniversalSearchPage(props: { universalResultsConfig: Uni
     answersActions.setVerticalKey('');
     const executeQuery = async () => {
       const searchIntents = await SearchHandler.getSearchIntents(answersActions, false);
-      if (searchIntents?.includes(SearchIntent.NearMe)) {
-        try {
-          const position = await SearchHandler.getUserLocation();
-          answersActions.setUserLocation({
-            latitude: position.coords.latitude,
-            longitude: position.coords.longitude,
-          });
-        } catch (e) {
-          console.error(e);
-        }
-      }
-      SearchHandler.executeSearch(answersActions, false);
+      SearchHandler.executeSearchWithIntents(answersActions, false, searchIntents || []);
     };
     executeQuery();
   }, [answersActions]);

sample-app/src/pages/VerticalSearchPage.tsx

@@ -11,7 +11,6 @@ import { StandardCard } from '../components/cards/StandardCard';
 import { useLayoutEffect } from 'react';
 import { useAnswersActions } from '@yext/answers-headless-react';
 import SearchHandler from '../utils/searchhandler';
-import { SearchIntent } from '@yext/answers-headless';
 
 const countryFilterOptions = [
   {
@@ -72,18 +71,7 @@ export default function VerticalSearchPage(props: {
     answersActions.setVerticalKey(props.verticalKey);
     const executeQuery = async () => {
       const searchIntents = await SearchHandler.getSearchIntents(answersActions, false);
-      if (searchIntents?.includes(SearchIntent.NearMe)) {
-        try {
-          const position = await SearchHandler.getUserLocation();
-          answersActions.setUserLocation({
-            latitude: position.coords.latitude,
-            longitude: position.coords.longitude,
-          });
-        } catch (e) {
-          console.error(e);
-        }
-      }
-      SearchHandler.executeSearch(answersActions, true);
+      SearchHandler.executeSearchWithIntents(answersActions, true, searchIntents || []);
     };
     executeQuery();
   }, [answersActions, props.verticalKey]);

sample-app/src/utils/searchhandler.ts

@@ -1,4 +1,5 @@
-import { AnswersActions } from "../../../lib";
+import { AnswersActions } from "@yext/answers-headless-react";
+import { SearchIntent } from "@yext/answers-headless";
 
 
 const defaultGeolocationOptions: PositionOptions = {
@@ -21,6 +22,26 @@ export default class SearchHandler {
     return;
   }
 
+  static async executeSearchWithIntents(
+    answersActions: AnswersActions,
+    isVertical: boolean,
+    intents: SearchIntent[],
+    geolocationOptions?: PositionOptions
+  ) {
+    if (intents.includes(SearchIntent.NearMe)) {
+      try {
+        const position = await SearchHandler.getUserLocation(geolocationOptions);
+        answersActions.setUserLocation({
+          latitude: position.coords.latitude,
+          longitude: position.coords.longitude,
+        });
+      } catch(e) {
+        console.error(e);
+      }
+    }
+    SearchHandler.executeSearch(answersActions, isVertical);
+  }
+
   static async getSearchIntents(answersActions: AnswersActions, isVertical: boolean) {
     const results = isVertical
       ? await answersActions.executeVerticalAutocomplete()