Fix: Next Queries not being calculated when using Related Tags

packages/x-components/src/x-modules/next-queries/store/__tests__/getters.spec.ts

@@ -2,7 +2,11 @@ import { NextQueriesRequest } from '@empathyco/x-types';
 import { map } from '@empathyco/x-utils';
 import Vue from 'vue';
 import Vuex, { Store } from 'vuex';
-import { createHistoryQueries, getNextQueriesStub } from '../../../../__stubs__';
+import {
+  createHistoryQueries,
+  createRelatedTagStub,
+  getNextQueriesStub
+} from '../../../../__stubs__';
 import { nextQueriesXStoreModule } from '../module';
 import { NextQueriesState } from '../types';
 import { resetNextQueriesStateWith } from './utils';
@@ -46,6 +50,29 @@ describe('testing next queries module getters', () => {
       resetNextQueriesStateWith(store, { query: ' ' });
       expect(store.getters[gettersKeys.request]).toBeNull();
     });
+
+    // eslint-disable-next-line max-len
+    it('should return a request object with a query concatenated with a related tag if there is so', () => {
+      resetNextQueriesStateWith(store, {
+        query: 'novela',
+        relatedTags: [createRelatedTagStub('novela', 'policíaca')],
+        config: {
+          maxItemsToRequest: 5
+        },
+        params: {
+          catalog: 'es'
+        }
+      });
+
+      expect(store.getters[gettersKeys.request]).toEqual<NextQueriesRequest>({
+        query: 'novela policíaca',
+        rows: 5,
+        start: 0,
+        extraParams: {
+          catalog: 'es'
+        }
+      });
+    });
   });
 
   describe(`${gettersKeys.nextQueries} getter`, () => {
@@ -77,4 +104,22 @@ describe('testing next queries module getters', () => {
       expect(store.getters[gettersKeys.nextQueries]).toEqual(nextQueries);
     });
   });
+
+  describe(`${gettersKeys.query} getter`, () => {
+    it('returns the query when there are no selected related tags', () => {
+      resetNextQueriesStateWith(store, {
+        query: 'novela',
+        relatedTags: []
+      });
+      expect(store.getters.query).toEqual('novela');
+    });
+
+    it('returns the query and the selected related tags concatenated', () => {
+      resetNextQueriesStateWith(store, {
+        query: 'novela',
+        relatedTags: [createRelatedTagStub('novela negra', 'negra')]
+      });
+      expect(store.getters.query).toEqual('novela negra');
+    });
+  });
 });

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

@@ -0,0 +1,16 @@
+import { createRelatedTagsQueryGetter } from '../../../../store/utils/query.utils';
+import { NextQueriesXStoreModule } from '../types';
+
+/**
+ * Default implementation for the next-queries query getter.
+ *
+ * @param state - Current {@link https://vuex.vuejs.org/guide/state.html | state} of the related
+ * tags' module.
+ *
+ * @returns The query with the selected related tags concatenated.
+ *
+ * @public
+ */
+export const query: NextQueriesXStoreModule['getters']['query'] = createRelatedTagsQueryGetter({
+  getRelatedTags: state => state.relatedTags
+});

packages/x-components/src/x-modules/next-queries/store/getters/request.getter.ts

@@ -5,16 +5,18 @@ import { NextQueriesXStoreModule } from '../types';
  *
  * @param state - Current {@link https://vuex.vuejs.org/guide/state.html | state} of the next
  * queries module.
+ * @param getters - Current {@link https://vuex.vuejs.org/guide/getters.html | getters} of the
+ * search module.
+ *
  * @returns The next queries request to fetch data from the API.
  *
  * @public
  */
-export const request: NextQueriesXStoreModule['getters']['request'] = ({
-  query,
-  config,
-  params
-}) => {
-  return query.trim()
+export const request: NextQueriesXStoreModule['getters']['request'] = (
+  { config, params },
+  { query }
+) => {
+  return query
     ? {
         query,
         rows: config.maxItemsToRequest,

packages/x-components/src/x-modules/next-queries/store/index.ts

@@ -4,5 +4,6 @@ export * from './actions/set-query-from-last-history-query.action';
 export * from './emitters';
 export { request as nextQueriesRequest } from './getters/request.getter';
 export * from './getters/next-queries.getter';
+export * from './getters/next-queries-query.getter';
 export * from './module';
 export * from './types';

packages/x-components/src/x-modules/next-queries/store/module.ts

@@ -11,6 +11,7 @@ import { setUrlParams } from './actions/set-url-params.action';
 import { fetchNextQueryPreview } from './actions/fetch-next-query-preview.action';
 import { fetchAndSaveNextQueryPreview } from './actions/fetch-and-save-next-query-preview.action';
 import { nextQueries } from './getters/next-queries.getter';
+import { query } from './getters/next-queries-query.getter';
 import { request } from './getters/request.getter';
 import { NextQueriesXStoreModule } from './types';
 
@@ -24,6 +25,7 @@ export const nextQueriesXStoreModule: NextQueriesXStoreModule = {
     query: '',
     nextQueries: [],
     searchedQueries: [],
+    relatedTags: [],
     status: 'initial',
     config: {
       maxItemsToRequest: 20,
@@ -36,7 +38,8 @@ export const nextQueriesXStoreModule: NextQueriesXStoreModule = {
   }),
   getters: {
     request,
-    nextQueries
+    nextQueries,
+    query
   },
   mutations: {
     setQuery,
@@ -46,6 +49,9 @@ export const nextQueriesXStoreModule: NextQueriesXStoreModule = {
     setSearchedQueries(state, searchedQueries) {
       state.searchedQueries = searchedQueries;
     },
+    setRelatedTags(state, relatedTags) {
+      state.relatedTags = relatedTags;
+    },
     setStatus,
     setParams(state, params) {
       state.params = params;

packages/x-components/src/x-modules/next-queries/store/types.ts

@@ -3,7 +3,8 @@ import {
   NextQuery,
   NextQueriesRequest,
   SearchResponse,
-  PreviewResults
+  PreviewResults,
+  RelatedTag
 } from '@empathyco/x-types';
 import { Dictionary } from '@empathyco/x-utils';
 import { XActionContext, XStoreModule } from '../../../store';
@@ -25,6 +26,8 @@ export interface NextQueriesState extends StatusState, QueryState {
   /** The list of the searched queries, related to the `query` property of the state. */
   //TODO Changes to uses the base extended class Previewable or what we decide.
   searchedQueries: HistoryQuery[];
+  /** The list of the related tags, related to the `query` property of the state. */
+  relatedTags: RelatedTag[];
   /** Configuration options of the next queries module. */
   config: NextQueriesConfig;
   /** The extra params property of the state. */
@@ -46,6 +49,8 @@ export interface NextQueriesGetters {
   request: NextQueriesRequest | null;
   /** List of next queries that have not been searched before. */
   nextQueries: NextQuery[];
+  /** The combination of the query and the selected related tags. */
+  query: string;
 }
 
 /**
@@ -69,6 +74,12 @@ export interface NextQueriesMutations
    * @param searchedQueries - The searched queries to save to the state.
    */
   setSearchedQueries(searchedQueries: HistoryQuery[]): void;
+  /**
+   * Sets the related tags of the module.
+   *
+   * @param relatedTags - The new related tags to save to the state.
+   */
+  setRelatedTags(relatedTags: RelatedTag[]): void;
   /**
    * Sets the extra params of the module.
    *

packages/x-components/src/x-modules/next-queries/wiring.ts

@@ -45,6 +45,13 @@ const wireDispatch: NamespacedWireDispatch<typeof moduleName> = namespacedWireDi
  */
 export const setNextQueriesQuery = wireCommit('setQuery');
 
+/**
+ * Sets the next queries state `relatedTags`.
+ *
+ * @public
+ */
+export const setNextQueriesRelatedTags = wireCommit('setRelatedTags');
+
 /**
  * Sets the next queries state `query` with a selectedQueryPreview's query.
  *
@@ -136,6 +143,9 @@ export const nextQueriesWiring = createWiring({
   UserAcceptedAQuery: {
     setNextQueriesQuery
   },
+  SelectedRelatedTagsChanged: {
+    setNextQueriesRelatedTags
+  },
   SessionHistoryQueriesChanged: {
     setSearchedQueries,
     // TODO setQueryFromLastHistoryQuery it has to be called only one time