(feat) Implement config utils in the modules with config (#1321)

BREAKING CHANGE: setPageSize search module mutation has been replaced by the setConfig mutation. 
setTaggingConfig tagging module mutation and setFacetsConfig facets module mutation have been replaced by the mergeConfig mutation.

EMP-2328

---------

Co-authored-by: Guillermo <cachedacodes@gmail.com>

packages/x-components/src/store/utils/config-store.utils.ts

@@ -1,3 +1,5 @@
+import Vue from 'vue';
+
 /**
  * Config mutations, containing a method to change the current config and other to merge
  * a new one.
@@ -28,7 +30,7 @@ export interface ConfigMutations<T extends { config: T['config'] }> {
  * @public
  */
 export function setConfig<T extends { config: T['config'] }>(state: T, config: T['config']): void {
-  state.config = config;
+  Vue.set(state, 'config', config);
 }
 
 /**
@@ -43,8 +45,5 @@ export function mergeConfig<T extends { config: T['config'] }>(
   state: T,
   config: Partial<T['config']>
 ): void {
-  state.config = {
-    ...state.config,
-    ...config
-  };
+  Object.assign(<object>state.config, config);
 }

packages/x-components/src/x-modules/empathize/store/module.ts

@@ -1,3 +1,4 @@
+import { setConfig, mergeConfig } from '../../../store/utils/config-store.utils';
 import { EmpathizeXStoreModule } from './types';
 
 /**
@@ -14,7 +15,9 @@ export const empathizeXStoreModule: EmpathizeXStoreModule = {
   mutations: {
     setIsOpen(state, isOpen) {
       state.isOpen = isOpen;
-    }
+    },
+    setConfig,
+    mergeConfig
   },
   actions: {}
 };

packages/x-components/src/x-modules/empathize/store/types.ts

@@ -1,5 +1,6 @@
 import { XStoreModule } from '../../../store';
 import { EmpathizeConfig } from '../config.types';
+import { ConfigMutations } from '../../../store/utils/config-store.utils';
 
 /**
  * Empathize store state.
@@ -33,7 +34,7 @@ export interface EmpathizeGetters {}
  *
  * @public
  */
-export interface EmpathizeMutations {
+export interface EmpathizeMutations extends ConfigMutations<EmpathizeState> {
   /**
    * Sets the isOpen state of the module, which is used in the Alias API.
    *

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

@@ -239,7 +239,7 @@ describe('testing facets module getters', () => {
       );
 
       const store = createFacetsStore([parentFilter, childFilter, parentFilterWithoutChild], []);
-      store.commit('setFacetsConfig', {
+      store.commit('setConfig', {
         filtersStrategyForRequest: 'leaves-only'
       });
 

packages/x-components/src/x-modules/facets/store/module.ts

@@ -1,9 +1,11 @@
 import { Facet } from '@empathyco/x-types';
 import Vue from 'vue';
+import { mergeConfig, setConfig } from '../../../store/utils/config-store.utils';
+import { setQuery } from '../../../store/utils/query.utils';
 import { facets } from './getters/facets.getter';
 import { selectedFiltersByFacet } from './getters/selected-filters-by-facet.getter';
 import { selectedFilters } from './getters/selected-filters.getter';
-import { FacetGroupEntry, FacetsConfig, FacetsXStoreModule } from './types';
+import { FacetGroupEntry, FacetsXStoreModule } from './types';
 import { selectedFiltersForRequest } from './getters/selected-filters-for-request.getter';
 
 /**
@@ -55,12 +57,9 @@ export const facetsXStoreModule: FacetsXStoreModule = {
     setFacet(state, facet: Facet) {
       Vue.set(state.facets, facet.id, facet);
     },
-    setFacetsConfig(state, config: FacetsConfig) {
-      state.config = config;
-    },
-    setQuery(state, query) {
-      state.query = query;
-    },
+    setConfig,
+    mergeConfig,
+    setQuery,
     setStickyFilter(state, filter) {
       if (!state.stickyFilters[filter.id]) {
         Vue.set(state.stickyFilters, filter.id, filter);

packages/x-components/src/x-modules/facets/store/types.ts

@@ -1,5 +1,6 @@
 import { Facet, Filter, RawFilter } from '@empathyco/x-types';
 import { XActionContext, XStoreModule } from '../../../store';
+import { ConfigMutations } from '../../../store/utils/config-store.utils';
 
 /**
  * Facets store state.
@@ -52,7 +53,7 @@ export interface FacetsGetters {
  *
  * @public
  */
-export interface FacetsMutations {
+export interface FacetsMutations extends ConfigMutations<FacetsState> {
   /**
    * Updates the state of a filter.
    *
@@ -109,12 +110,6 @@ export interface FacetsMutations {
    * @param facet - The facet to set in the store.
    */
   setFacet(facet: Facet): void;
-  /**
-   * Sets the {@link FacetsState.facets | facets} config.
-   *
-   * @param config - The new config.
-   */
-  setFacetsConfig(config: FacetsConfig): void;
   /**
    * Adds the filter to the {@link FacetsState.stickyFilters | sticky filters} record.
    *

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

@@ -1,5 +1,6 @@
 import { setQuery } from '../../../store/utils/query.utils';
 import { localStorageService } from '../../../utils/storage';
+import { mergeConfig, setConfig } from '../../../store/utils/config-store.utils';
 import { addQueryToHistory } from './actions/add-query-to-history.action';
 // eslint-disable-next-line max-len
 import { loadHistoryQueriesFromBrowserStorage } from './actions/load-history-queries-from-browser-storage.action';
@@ -51,6 +52,8 @@ export const historyQueriesXStoreModule: HistoryQueriesXStoreModule = {
       state.sessionTimeStampInMs = sessionTimeStamp;
     },
     setQuery,
+    setConfig,
+    mergeConfig,
     setIsEnabled(state, isEnabled) {
       state.isEnabled = isEnabled;
     },

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

@@ -4,6 +4,7 @@ import { QueryMutations, QueryState } from '../../../store/utils/query.utils';
 import { UrlParams } from '../../../types/url-params';
 import { HistoryQueriesConfig } from '../config.types';
 import { InternalSearchResponse } from '../../search/index';
+import { ConfigMutations } from '../../../store/utils/config-store.utils';
 
 /**
  * HistoryQueries store state.
@@ -68,7 +69,9 @@ export interface HistoryQueriesGetters {
  *
  * @public
  */
-export interface HistoryQueriesMutations extends QueryMutations {
+export interface HistoryQueriesMutations
+  extends QueryMutations,
+    ConfigMutations<HistoryQueriesState> {
   /**
    * Sets the {@link HistoryQueriesState.historyQueries} property.
    *

packages/x-components/src/x-modules/identifier-results/store/module.ts

@@ -1,5 +1,6 @@
 import { setQuery } from '../../../store/utils/query.utils';
 import { setStatus } from '../../../store/utils/status-store.utils';
+import { mergeConfig, setConfig } from '../../../store/utils/config-store.utils';
 import {
   cancelFetchAndSaveIdentifierResults,
   fetchAndSaveIdentifierResults
@@ -47,7 +48,9 @@ export const identifierResultsXStoreModule: IdentifierResultsXStoreModule = {
       state.params = params;
     },
     setQuery,
-    setStatus
+    setStatus,
+    setConfig,
+    mergeConfig
   },
   actions: {
     cancelFetchAndSaveIdentifierResults,

packages/x-components/src/x-modules/identifier-results/store/types.ts

@@ -5,6 +5,7 @@ import { QueryMutations, QueryState } from '../../../store/utils/query.utils';
 import { StatusMutations, StatusState } from '../../../store/utils/status-store.utils';
 import { QueryOrigin, QueryOriginInit } from '../../../types/origin';
 import { IdentifierResultsConfig } from '../config.types';
+import { ConfigMutations } from '../../../store/utils/config-store.utils';
 
 /**
  * IdentifierResults store state.
@@ -49,7 +50,10 @@ export interface IdentifierResultsGetters {
  *
  * @public
  */
-export interface IdentifierResultsMutations extends StatusMutations, QueryMutations {
+export interface IdentifierResultsMutations
+  extends StatusMutations,
+    QueryMutations,
+    ConfigMutations<IdentifierResultsState> {
   /**
    * Sets the identifier results of the module.
    *

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

@@ -1,5 +1,6 @@
 import { setQuery } from '../../../store/utils/query.utils';
 import { setStatus } from '../../../store/utils/status-store.utils';
+import { mergeConfig, setConfig } from '../../../store/utils/config-store.utils';
 import {
   cancelFetchAndSaveNextQueries,
   fetchAndSaveNextQueries
@@ -54,7 +55,9 @@ export const nextQueriesXStoreModule: NextQueriesXStoreModule = {
     },
     resetResultsPreview(state) {
       state.resultsPreview = {};
-    }
+    },
+    setConfig,
+    mergeConfig
   },
   actions: {
     cancelFetchAndSaveNextQueries,

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

@@ -12,6 +12,7 @@ import { StatusMutations, StatusState } from '../../../store/utils/status-store.
 import { UrlParams } from '../../../types/url-params';
 import { NextQueriesConfig } from '../config.types';
 import { FeatureLocation } from '../../../types/index';
+import { ConfigMutations } from '../../../store/utils/config-store.utils';
 
 /**
  * Next queries module state.
@@ -42,7 +43,7 @@ export interface NextQueriesState extends StatusState, QueryState {
 export interface NextQueriesGetters {
   /**
    * Request object to retrieve the next queries using the search adapter, or null if there is
-   * not valid data to conform a valid request.
+   * no valid data to conform a valid request.
    */
   request: NextQueriesRequest | null;
   /** List of next queries that have not been searched before. */
@@ -54,7 +55,10 @@ export interface NextQueriesGetters {
  *
  * @public
  */
-export interface NextQueriesMutations extends StatusMutations, QueryMutations {
+export interface NextQueriesMutations
+  extends StatusMutations,
+    QueryMutations,
+    ConfigMutations<NextQueriesState> {
   /**
    * Sets the query of the module, which is used to retrieve the next-queries.
    *
@@ -79,15 +83,13 @@ export interface NextQueriesMutations extends StatusMutations, QueryMutations {
    * @param params - The new extra params.
    */
   setParams(params: Dictionary<unknown>): void;
-
   /**
    * Adds a new entry to the result's dictionary.
    *
    * @param resultsPreview - Object containing the next query,
    * the totalResults and the results to add.
    */
   setResultsPreview(resultsPreview: Dictionary<PreviewResults>): void;
-
   /**
    * Resets the result's dictionary.
    */

packages/x-components/src/x-modules/popular-searches/store/module.ts

@@ -1,4 +1,5 @@
 import { setStatus } from '../../../store/utils/status-store.utils';
+import { mergeConfig, setConfig } from '../../../store/utils/config-store.utils';
 import {
   cancelFetchAndSaveSuggestions,
   fetchAndSaveSuggestions
@@ -35,10 +36,12 @@ export const popularSearchesXStoreModule: PopularSearchesXStoreModule = {
     setSearchedQueries(state, searchedQueries) {
       state.searchedQueries = searchedQueries;
     },
-    setStatus,
     setParams(state, params) {
       state.params = params;
-    }
+    },
+    setStatus,
+    setConfig,
+    mergeConfig
   },
   actions: {
     cancelFetchAndSaveSuggestions,

packages/x-components/src/x-modules/popular-searches/store/types.ts

@@ -3,6 +3,7 @@ import { Dictionary } from '@empathyco/x-utils';
 import { XActionContext, XStoreModule } from '../../../store';
 import { StatusMutations, StatusState } from '../../../store/utils/status-store.utils';
 import { PopularSearchesConfig } from '../config.types';
+import { ConfigMutations } from '../../../store/utils/config-store.utils';
 
 /**
  * Popular searches module state.
@@ -38,7 +39,9 @@ export interface PopularSearchesGetters {
  *
  * @public
  */
-export interface PopularSearchesMutations extends StatusMutations {
+export interface PopularSearchesMutations
+  extends StatusMutations,
+    ConfigMutations<PopularSearchesState> {
   /**
    * Sets the suggestions of the module.
    *

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

@@ -1,4 +1,5 @@
 import Vue from 'vue';
+import { mergeConfig, setConfig } from '../../../store/utils/config-store.utils';
 import { QueriesPreviewXStoreModule } from './types';
 import { fetchQueryPreview } from './actions/fetch-query-preview.action';
 import { fetchAndSaveQueryPreview } from './actions/fetch-and-save-query-preview.action';
@@ -38,7 +39,9 @@ export const queriesPreviewXStoreModule: QueriesPreviewXStoreModule = {
     },
     setSelectedQueryPreview(state, selectedQueryPreview) {
       state.selectedQueryPreview = selectedQueryPreview;
-    }
+    },
+    setConfig,
+    mergeConfig
   },
   actions: {
     fetchQueryPreview,

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

@@ -4,6 +4,7 @@ import { XActionContext } from '../../../store/actions.types';
 import { XStoreModule } from '../../../store/store.types';
 import { RequestStatus, StatusState } from '../../../store/utils/status-store.utils';
 import { QueriesPreviewConfig } from '../config.types';
+import { ConfigMutations } from '../../../store/utils/config-store.utils';
 
 /**
  * QueriesPreview store state.
@@ -75,7 +76,7 @@ export interface QueriesPreviewGetters {
  *
  * @public
  */
-export interface QueriesPreviewMutations {
+export interface QueriesPreviewMutations extends ConfigMutations<QueriesPreviewState> {
   /**
    * Removes a query preview entry from the queries preview's dictionary.
    *

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

@@ -1,5 +1,6 @@
 import { setQuery } from '../../../store/utils/query.utils';
 import { setStatus } from '../../../store/utils/status-store.utils';
+import { mergeConfig, setConfig } from '../../../store/utils/config-store.utils';
 import {
   cancelFetchAndSaveSuggestions,
   fetchAndSaveSuggestions
@@ -41,7 +42,9 @@ export const querySuggestionsXStoreModule: QuerySuggestionsXStoreModule = {
     setStatus,
     setParams(state, params) {
       state.params = params;
-    }
+    },
+    setConfig,
+    mergeConfig
   },
   actions: {
     cancelFetchAndSaveSuggestions,

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

@@ -5,6 +5,7 @@ import { QueryMutations, QueryState } from '../../../store/utils/query.utils';
 import { StatusMutations, StatusState } from '../../../store/utils/status-store.utils';
 import { UrlParams } from '../../../types/url-params';
 import { QuerySuggestionsConfig } from '../config.types';
+import { ConfigMutations } from '../../../store/utils/config-store.utils';
 
 /**
  * QuerySuggestions store state.
@@ -44,7 +45,10 @@ export interface QuerySuggestionsGetters {
  *
  * @public
  */
-export interface QuerySuggestionsMutations extends StatusMutations, QueryMutations {
+export interface QuerySuggestionsMutations
+  extends StatusMutations,
+    QueryMutations,
+    ConfigMutations<QuerySuggestionsState> {
   /**
    * Sets the query of the query suggestions module.
    *

packages/x-components/src/x-modules/recommendations/store/module.ts

@@ -1,4 +1,5 @@
 import { setStatus } from '../../../store/utils/status-store.utils';
+import { mergeConfig, setConfig } from '../../../store/utils/config-store.utils';
 import {
   cancelFetchAndSaveRecommendations,
   fetchAndSaveRecommendations
@@ -41,7 +42,9 @@ export const recommendationsXStoreModule: RecommendationsXStoreModule = {
       if (stateRecommendation) {
         Object.assign(stateRecommendation, recommendation);
       }
-    }
+    },
+    setConfig,
+    mergeConfig
   },
   actions: {
     cancelFetchAndSaveRecommendations,