feat(url): refactor module logic movig some logic to UrlHandler Compo…

…nent

EX-4864

packages/x-components/.gitignore

@@ -2,6 +2,7 @@
 /node_modules
 /dist
 /docs
+/temp
 /*.tgz
 
 /tests/e2e/videos/

packages/x-components/src/plugins/x-emitters.ts

@@ -24,14 +24,29 @@ export function registerStoreEmitters(
   const safeGettersProxy = getGettersProxyFromModule(store.getters, name, storeModule);
   forEach(storeEmitters, (event, stateSelector: AnySimpleStateSelector | AnyStateSelector) => {
     const { selector, immediate, filter, ...options } = normalizeStateSelector(stateSelector);
+    /*
+     * Due the debounce added to the watch callback, the `oldValue` would be the one from the last
+     * watcher execution instead of the last callback execution. This would cause problems receiving
+     * unstable oldValues, used in the Emitter filter.
+     * To solve this, we store the `oldValue` of the watcher in the `previousValue` variable, and we
+     * keep there until the watcher callback is finally executed (after the debounce). Then this
+     * `previousValue` is cleared to store the next `oldValue`.
+     */
+    let previousValue: any = null;
+
+    const watcherCallback = debounce((newValue, oldValue) => {
+      if (filter(newValue, oldValue)) {
+        bus.emit(event, newValue, { moduleName: name });
+      }
+      previousValue = null;
+    }, 0);
 
     store.watch(
       state => selector(state.x[name], safeGettersProxy),
-      debounce((newValue, oldValue) => {
-        if (filter(newValue, oldValue)) {
-          bus.emit(event, newValue, { moduleName: name });
-        }
-      }, 0),
+      (newValue, oldValue) => {
+        previousValue = previousValue ?? oldValue;
+        watcherCallback(newValue, previousValue);
+      },
       options
     );
 

packages/x-components/src/plugins/x-plugin.ts

@@ -245,7 +245,7 @@ export class XPlugin implements PluginObject<XPluginOptions> {
    * @param xModule - The module to customize.
    * @returns The customized xModule.
    *
-   * @public
+   * @internal
    */
   customizeXModule({
     name,

packages/x-components/src/types/index.ts

@@ -1 +1,2 @@
 export * from './query-origin';
+export * from './url-params';

packages/x-components/src/types/url-params.ts

@@ -0,0 +1,14 @@
+/**
+ * URL store params.
+ *
+ * @public
+ */
+export interface UrlParams {
+  query: string;
+  page: number;
+  filter: string[];
+  sort: string;
+  tag: string[];
+  scroll: number;
+  [extraParamKey: string]: unknown;
+}

packages/x-components/src/utils/__tests__/object.spec.ts

@@ -325,6 +325,11 @@ describe('testing object utils', () => {
       expect(returnedValue).toBeNull();
     });
 
+    it('returns arrays untouched', () => {
+      const returnedValue = cleanUndefined({ a: [undefined, 1] });
+      expect(returnedValue.a).toEqual([undefined, 1]);
+    });
+
     function hasProperty(obj: any, key: string): boolean {
       return key in obj;
     }

packages/x-components/src/utils/object.ts

@@ -81,7 +81,7 @@ export function map<T extends Dictionary, W>(
  * @public
  */
 export function cleanUndefined<T>(obj: T): T {
-  return typeof obj !== 'object' || obj === null
+  return typeof obj !== 'object' || obj === null || Array.isArray(obj)
     ? obj
     : reduce(
         obj,

packages/x-components/src/views/Layout.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <UrlHandler />
+    <UrlHandler query="q" portal="portal" />
     <BaseEventsModalOpen>Start</BaseEventsModalOpen>
     <h1>Test controls</h1>
     <ul class="x-test-controls x-list x-list--gap-05">
@@ -331,11 +331,9 @@
                         <div style="padding-top: 100%; background-color: lightsalmon"></div>
                       </template>
                     </BaseResultImage>
-                    <BaseResultLink :result="item" class="x-result-link">
-                      <span class="x-result__title" data-test="partial-result-item">
-                        {{ item.name }}
-                      </span>
-                    </BaseResultLink>
+                    <span class="x-result__title" data-test="partial-result-item">
+                      {{ item.name }}
+                    </span>
                   </article>
                 </template>
               </BaseGrid>

packages/x-components/src/x-modules/extra-params/components/renderless-extra-param.vue

@@ -43,7 +43,7 @@
     public defaultValue?: unknown;
 
     /**
-     * A dictionary with the extra params from the store.
+     * A dictionary with the extra params.
      *
      * @public
      */

packages/x-components/src/x-modules/facets/service/facets.service.ts

@@ -54,8 +54,9 @@ export class DefaultFacetsService implements FacetsService {
     this.createEntity(filter).deselect(filter);
   }
 
-  select(filter: Filter): void {
-    this.createEntity(filter).select(filter);
+  select(filterOrFilters: Filter | Filter[]): void {
+    const filters = Array.isArray(filterOrFilters) ? filterOrFilters : [filterOrFilters];
+    filters.forEach(filter => this.createEntity(filter).select(filter));
   }
 
   toggle(filter: Filter): void {

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

@@ -54,11 +54,11 @@ export interface FacetsService {
    */
   setFacets(facetsGroup: FacetsGroup): void;
   /**
-   * Selects filter, adding it to the store if it was not present.
+   * Selects filter/filters, adding it/them to the store if it/they was not present.
    *
-   * @param filter - The filter to select.
+   * @param filter - The filter/filters to select.
    */
-  select(filter: Filter): void;
+  select(filter: Filter | Filter[]): void;
   /**
    * Selects a deselected filter, and deselects a selected filter, adding them to the store
    * in both cases.

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

@@ -1,6 +1,5 @@
 import { Facet } from '@empathyco/x-types';
 import Vue from 'vue';
-import { setFiltersFromUrl } from './actions/set-filters-from-url.action';
 import { facets } from './getters/facets.getter';
 import { selectedFiltersByFacet } from './getters/selected-filters-by-facet.getter';
 import { selectedFilters } from './getters/selected-filters.getter';
@@ -45,7 +44,5 @@ export const facetsXStoreModule: FacetsXStoreModule = {
       Vue.set(state.facets, facet.id, facet);
     }
   },
-  actions: {
-    setFiltersFromUrl
-  }
+  actions: {}
 };

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

@@ -1,7 +1,5 @@
 import { Facet, Filter } from '@empathyco/x-types';
 import { XActionContext, XStoreModule } from '../../../store';
-import { Dictionary } from '../../../utils';
-import { UrlParamValue } from '../../url';
 
 /**
  * Facets store state.
@@ -93,13 +91,7 @@ export interface FacetsMutations {
  *
  * @public
  */
-export interface FacetsActions {
-  /**
-   * Receives a list of params from the url, builds the entities and
-   * set them in the store.
-   */
-  setFiltersFromUrl(urlParams: Dictionary<UrlParamValue>): void;
-}
+export interface FacetsActions {}
 
 /**
  * The type of the context object for the facets module actions.

packages/x-components/src/x-modules/facets/wiring.ts

@@ -1,5 +1,6 @@
 import { Facet } from '@empathyco/x-types';
-import { namespacedWireDispatch } from '../../wiring/namespaced-wires.factory';
+import { UrlParams } from '../../types/url-params';
+import { createRawFilters } from '../../utils/filters';
 import { wireService, wireServiceWithoutPayload } from '../../wiring/wires.factory';
 import { mapWire } from '../../wiring/wires.operators';
 import { createWiring } from '../../wiring/wiring.utils';
@@ -15,13 +16,6 @@ const wireFacetsService = wireService(DefaultFacetsService.instance);
  */
 const wireFacetsServiceWithoutPayload = wireServiceWithoutPayload(DefaultFacetsService.instance);
 
-/**
- * WireCommit for {@link FacetsXModule}.
- *
- * @internal
- */
-const facetsWireDispatch = namespacedWireDispatch('facets');
-
 /**
  * Saves the facets contained in the `search` group, removing the previous ones, and keeping the
  * previous filters selected state.
@@ -78,7 +72,9 @@ const selectFilterWire = wireFacetsService('select');
  *
  * @public
  */
-const setFiltersFromUrl = facetsWireDispatch('setFiltersFromUrl');
+const setFiltersFromUrl = mapWire(wireFacetsService('select'), ({ filter }: UrlParams) =>
+  createRawFilters(filter)
+);
 
 /**
  * Wiring configuration for the {@link FacetsXModule | facets module}.
@@ -107,7 +103,7 @@ export const facetsWiring = createWiring({
   UserClearedQuery: {
     clearAllFiltersWire
   },
-  UrlChanged: {
+  ParamsLoadedFromUrl: {
     setFiltersFromUrl
   }
 });

packages/x-components/src/x-modules/history-queries/store/actions/set-url-params.action.ts

@@ -0,0 +1,19 @@
+import { HistoryQueriesXStoreModule } from '../types';
+
+/**
+ * Default implementation for the {@link HistoryQueriesActions.setUrlParams}.
+ *
+ * @param context - The {@link https://vuex.vuejs.org/guide/actions.html | context} of the actions,
+ * provided by Vuex.
+ *
+ * @param urlParams - List of params from the url.
+ * @public
+ */
+export const setUrlParams: HistoryQueriesXStoreModule['actions']['setUrlParams'] = (
+  { commit },
+  { query }
+) => {
+  if (query) {
+    commit('setQuery', query);
+  }
+};

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

@@ -4,6 +4,7 @@ import { loadHistoryQueriesFromBrowserStorage } from './actions/load-history-que
 import { refreshSession } from './actions/refresh-session.action';
 import { removeFromHistory } from './actions/remove-query-from-history.action';
 import { setHistoryQueries } from './actions/set-history-queries.action';
+import { setUrlParams } from './actions/set-url-params.action';
 import { historyQueries } from './getters/history-queries.getter';
 import { normalizedQuery } from './getters/normalized-query.getter';
 import { sessionHistoryQueries } from './getters/session-history-queries.getter';
@@ -48,7 +49,8 @@ export const historyQueriesXStoreModule: HistoryQueriesXStoreModule = {
     addQueryToHistory,
     loadHistoryQueriesFromBrowserStorage,
     refreshSession,
-    removeFromHistory: removeFromHistory,
-    setHistoryQueries
+    removeFromHistory,
+    setHistoryQueries,
+    setUrlParams
   }
 };

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

@@ -1,5 +1,6 @@
 import { HistoryQuery } from '@empathyco/x-types';
 import { XActionContext, XStoreModule } from '../../../store';
+import { UrlParams } from '../../../types/url-params';
 import { HistoryQueriesConfig } from '../config.types';
 
 /**
@@ -150,6 +151,12 @@ export interface HistoryQueriesActions {
    * @param historyQueries - The new history queries to save to the state and the browser storage.
    */
   setHistoryQueries(historyQueries: HistoryQuery[]): void;
+  /**
+   * Checks if the url has a query on it and then updates the state with that value.
+   *
+   * @param urlParams - List of params from the url.
+   */
+  setUrlParams(urlParams: UrlParams): void;
 }
 /**
  * HistoryQueries type safe store module.

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

@@ -46,6 +46,13 @@ export const addQueryToHistoryQueries = wireDispatch('addQueryToHistory');
  */
 export const setHistoryQueriesQuery = wireCommit('setQuery');
 
+/**
+ * Sets the history queries state `query` from url.
+ *
+ * @public
+ */
+const setUrlParams = wireDispatch('setUrlParams');
+
 /**
  * Sets the query of the history queries module to an empty string.
  *
@@ -121,5 +128,8 @@ export const historyQueriesWiring = createWiring({
   },
   UserPressedRemoveHistoryQuery: {
     removeHistoryQuery
+  },
+  ParamsLoadedFromUrl: {
+    setUrlParams
   }
 });

packages/x-components/src/x-modules/identifier-results/store/actions/set-url-params.action.ts

@@ -0,0 +1,19 @@
+import { IdentifierResultsXStoreModule } from '../types';
+
+/**
+ * Default implementation for the {@link IdentifierResultsActions.setUrlParams}.
+ *
+ * @param context - The {@link https://vuex.vuejs.org/guide/actions.html | context} of the actions,
+ * provided by Vuex.
+ *
+ * @param urlParams - List of params from the url.
+ * @public
+ */
+export const setUrlParams: IdentifierResultsXStoreModule['actions']['setUrlParams'] = (
+  { commit },
+  { query }
+) => {
+  if (query) {
+    commit('setQuery', query);
+  }
+};

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

@@ -4,6 +4,7 @@ import {
   fetchAndSaveIdentifierResults
 } from './actions/fetch-and-save-identifier-results.action';
 import { fetchIdentifierResults } from './actions/fetch-identifier-results.action';
+import { setUrlParams } from './actions/set-url-params.action';
 import { saveQuery } from './actions/save-query.action';
 import { identifierDetectionRegexp } from './getters/identifier-detection-regexp.getter';
 import { identifierHighlightRegexp } from './getters/identifier-highlight-regexp.getter';
@@ -45,6 +46,7 @@ export const identifierResultsXStoreModule: IdentifierResultsXStoreModule = {
     cancelFetchAndSaveIdentifierResults,
     fetchIdentifierResults,
     fetchAndSaveIdentifierResults,
-    saveQuery
+    saveQuery,
+    setUrlParams
   }
 };

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

@@ -2,6 +2,7 @@ import { SearchByIdRequest } from '@empathyco/x-adapter';
 import { Result } from '@empathyco/x-types';
 import { XActionContext, XStoreModule } from '../../../store';
 import { StatusMutations, StatusState } from '../../../store/utils/status-store.utils';
+import { UrlParams } from '../../../types/url-params';
 import { IdentifierResultsConfig } from '../config.types';
 
 /**
@@ -79,6 +80,12 @@ export interface IdentifierResultsActions {
    * Stores the query in the module if it matches the regex.
    */
   saveQuery(query: string): void;
+  /**
+   * Checks if the url has a query on it and then updates the state with that value.
+   *
+   * @param urlParams - List of params from the url.
+   */
+  setUrlParams(urlParams: UrlParams): void;
 }
 
 /**