feat(querySuggestions): hide suggestions that match with any session …

…query (#1600)

Co-authored-by: Diego Pascual <diegopf@users.noreply.github.com>

packages/x-components/src/x-modules/query-suggestions/config.types.ts

@@ -33,4 +33,26 @@ export interface QuerySuggestionsConfig {
    * ```
    */
   hideIfEqualsQuery: boolean;
+  /**
+   * Hides the query suggestions if it has been already searched during the session.
+   *
+   * @example
+   * When set to true:
+   * ```
+   * query = 'shorts';
+   * query = 'trousers';
+   * suggestions = ['t-shirt', 'shorts', 'dress']
+   * // Suggests ['t-shirt', 'dress']
+   * ```
+   *
+   * @example
+   * When set to false:
+   * ```
+   * query = 'shorts';
+   * query = 'trousers';
+   * suggestions = ['t-shirt', 'shorts', 'dress']
+   * // Suggests ['t-shirt', 'shorts', 'dress']
+   * ```
+   */
+  hideSessionQueries: boolean;
 }

packages/x-components/src/x-modules/query-suggestions/store/__tests__/getter.spec.ts

@@ -6,6 +6,7 @@ import { normalizeString } from '../../../../utils';
 import { getQuerySuggestionsStub } from '../../../../__stubs__/query-suggestions-stubs.factory';
 import { querySuggestionsXStoreModule } from '../module';
 import { QuerySuggestionsState } from '../types';
+import { createHistoryQuery } from '../../../../__stubs__/history-queries-stubs.factory';
 import { resetQuerySuggestionsStateWith } from './utils';
 
 describe('testing query suggestions module getters', () => {
@@ -113,5 +114,42 @@ describe('testing query suggestions module getters', () => {
         expect(gettersQuerySuggestions).toHaveLength(suggestionsStub.length);
       }
     );
+
+    it('should hide queries that are equal to any history query and hideSessionQueries is true', () => {
+      const querySearch = 'dress';
+      const suggestionsStub = getQuerySuggestionsStub(querySearch);
+      const historyQueriesStub = createHistoryQuery({ query: 'dress suggestion 1' });
+      resetQuerySuggestionsStateWith(store, {
+        config: { hideSessionQueries: true },
+        suggestions: suggestionsStub,
+        searchedQueries: [historyQueriesStub],
+        query: querySearch
+      });
+
+      const gettersQuerySuggestions: Suggestion[] = store.getters[getters.querySuggestions];
+
+      const queriesSuggested = gettersQuerySuggestions.map(
+        (suggestion: Suggestion) => suggestion.query
+      );
+
+      expect(gettersQuerySuggestions).toHaveLength(suggestionsStub.length - 1);
+      expect(queriesSuggested).toEqual(['dress suggestion 0', 'dress suggestion 2']);
+    });
+
+    it('should show all suggestions when hideSessionQueries is false', () => {
+      const querySearch = 'dress';
+      const suggestionsStub = getQuerySuggestionsStub(querySearch);
+      const historyQueriesStub = createHistoryQuery({ query: 'dress suggestion 1' });
+      resetQuerySuggestionsStateWith(store, {
+        config: { hideSessionQueries: false },
+        suggestions: suggestionsStub,
+        searchedQueries: [historyQueriesStub],
+        query: querySearch
+      });
+
+      const gettersQuerySuggestions: Suggestion[] = store.getters[getters.querySuggestions];
+
+      expect(gettersQuerySuggestions).toHaveLength(suggestionsStub.length);
+    });
   });
 });

packages/x-components/src/x-modules/query-suggestions/store/getters/query-suggestions.getter.ts

@@ -1,4 +1,4 @@
-import { Suggestion } from '@empathyco/x-types';
+import { HistoryQuery, Suggestion } from '@empathyco/x-types';
 import { GettersClass } from '../../../../store/getters.types';
 import { normalizeString } from '../../../../utils/normalize';
 import { QuerySuggestionsState, QuerySuggestionsXStoreModule } from '../types';
@@ -16,11 +16,24 @@ export class QuerySuggestionsGetter implements GettersClass<QuerySuggestionsXSto
    * suggestions module.
    * @returns The filtered subset of queries, matching with the current query.
    */
-  querySuggestions({ query, suggestions, config }: QuerySuggestionsState): Suggestion[] {
+  querySuggestions({
+    query,
+    suggestions,
+    config,
+    searchedQueries
+  }: QuerySuggestionsState): Suggestion[] {
+    const queriesToFilter = searchedQueries.map((historyQuery: HistoryQuery) => historyQuery.query);
     if (!query || !config.hideIfEqualsQuery) {
-      return suggestions;
+      return config.hideSessionQueries
+        ? suggestions.filter(({ query }) => !queriesToFilter.includes(query))
+        : suggestions;
     }
-    return suggestions.filter(this.isInQuerySuggestions(normalizeString(query)));
+    const filteredSuggestions = suggestions.filter(
+      this.isInQuerySuggestions(normalizeString(query))
+    );
+    return config.hideSessionQueries
+      ? filteredSuggestions.filter(({ query }) => !queriesToFilter.includes(query))
+      : filteredSuggestions;
   }
 
   /**

packages/x-components/src/x-modules/query-suggestions/store/module.ts

@@ -21,11 +21,13 @@ export const querySuggestionsXStoreModule: QuerySuggestionsXStoreModule = {
   state: () => ({
     query: '',
     suggestions: [],
+    searchedQueries: [],
     status: 'initial',
     config: {
       debounceInMs: 200,
       maxItemsToRequest: 10,
-      hideIfEqualsQuery: true
+      hideIfEqualsQuery: true,
+      hideSessionQueries: true
     },
     params: {}
   }),
@@ -39,6 +41,9 @@ export const querySuggestionsXStoreModule: QuerySuggestionsXStoreModule = {
     setSuggestions(state, suggestions) {
       state.suggestions = suggestions;
     },
+    setSearchedQueries(state, searchedQueries) {
+      state.searchedQueries = searchedQueries;
+    },
     setStatus,
     setParams(state, params) {
       state.params = params;

packages/x-components/src/x-modules/query-suggestions/store/types.ts

@@ -1,4 +1,4 @@
-import { QuerySuggestionsRequest, Suggestion } from '@empathyco/x-types';
+import { HistoryQuery, QuerySuggestionsRequest, Suggestion } from '@empathyco/x-types';
 import { Dictionary } from '@empathyco/x-utils';
 import { XActionContext, XStoreModule } from '../../../store';
 import { QueryMutations, QueryState } from '../../../store/utils/query.utils';
@@ -15,6 +15,8 @@ import { ConfigMutations } from '../../../store/utils/config-store.utils';
 export interface QuerySuggestionsState extends StatusState, QueryState {
   /** The suggestions for the query of the state. */
   suggestions: Suggestion[];
+  /** The list of the searched queries, related to the `query` property of the state. */
+  searchedQueries: HistoryQuery[];
   /** The configuration of the query suggestions module. */
   config: QuerySuggestionsConfig;
   /** The extra params property of the state. */
@@ -59,6 +61,12 @@ export interface QuerySuggestionsMutations
    * @param params - The new extra params.
    */
   setParams(params: Dictionary<unknown>): void;
+  /**
+   * Sets the searched queries of the module.
+   *
+   * @param searchedQueries - The searched queries to save to the state.
+   */
+  setSearchedQueries(searchedQueries: HistoryQuery[]): void;
 }
 
 /**

packages/x-components/src/x-modules/query-suggestions/wiring.ts

@@ -69,6 +69,13 @@ export const setQuerySuggestionsExtraParamsFromPreview = wireCommit(
  */
 export const setQuerySuggestionsExtraParams = wireCommit('setParams');
 
+/**
+ * Sets the query suggestions state `searchedQueries` with the list of history queries.
+ *
+ * @public
+ */
+export const setSearchedQueriesInSuggestions = wireCommit('setSearchedQueries');
+
 /**
  * Clears the query-suggestions module query.
  *
@@ -145,5 +152,8 @@ export const querySuggestionsWiring = createWiring({
   },
   QueryPreviewUnselected: {
     setQuerySuggestionsExtraParams
+  },
+  SessionHistoryQueriesChanged: {
+    setSearchedQueriesInSuggestions
   }
 });