feat(query-preview): implementation with 2 lists

packages/x-components/src/x-modules/queries-preview/components/query-preview.vue

@@ -109,11 +109,18 @@
     public persistInCache!: boolean;
 
     /**
-     * The results preview of the queries preview mounted.
+     * The results preview of the queries preview cacheable mounted.
      * It is a dictionary, indexed by the query preview query.
      */
-    @State('queriesPreview', 'queriesPreview')
-    public previewResults!: Dictionary<QueryPreviewItem>;
+    @State('queriesPreview', 'queriesPreviewCached')
+    public previewResultsCached!: Dictionary<QueryPreviewItem>;
+
+    /**
+     * The results preview of the queries preview no cacheable mounted.
+     * It is a dictionary, indexed by the query preview query.
+     */
+    @State('queriesPreview', 'queriesPreviewNonCached')
+    public previewResultsNonCached!: Dictionary<QueryPreviewItem>;
 
     /**
      * As the request is handled in this component, we need
@@ -198,7 +205,15 @@
      * @returns The results preview of the actual query preview.
      */
     public get queryPreviewResults(): Partial<QueryPreviewItem> | undefined {
-      const previewResults = this.previewResults[this.queryOfQueryPreview];
+      let previewResults: QueryPreviewItem | undefined;
+      if (this.persistInCache) {
+        previewResults = this.previewResultsCached[this.queryOfQueryPreview];
+      } else {
+        previewResults = this.previewResultsCached[this.queryOfQueryPreview]
+          ? this.previewResultsCached[this.queryOfQueryPreview]
+          : this.previewResultsNonCached[this.queryOfQueryPreview];
+      }
+
       return previewResults?.results
         ? {
             ...previewResults,
@@ -208,7 +223,8 @@
     }
 
     /**
-     * The debounce method to trigger the request after the debounceTimeMs defined.
+     * The debounce method to trigger the request after the debounceTimeMs defined
+     * for cacheable queries.
      *
      * @returns The search request object.
      * @internal
@@ -219,6 +235,22 @@
       }, this.debounceTimeMs);
     }
 
+    /**
+     * The debounce method to trigger the request after the debounceTimeMs defined
+     * for no cacheable queries.
+     *
+     * @returns The search request object.
+     * @internal
+     */
+    protected get emitQueryPreviewRequestUpdatedForNoCache(): DebouncedFunction<[SearchRequest]> {
+      return debounce(request => {
+        this.$x.emit('QueryPreviewRequestUpdatedForNoCache', request, {
+          priority: 0,
+          replaceable: false
+        });
+      }, this.debounceTimeMs);
+    }
+
     /**
      * Initialises watcher to emit debounced requests, and first value for the requests.
      *
@@ -235,20 +267,17 @@
       );
 
       const previewItemQuery = this.queryOfQueryPreview;
-      const cachedQueryPreview = this.previewResults[previewItemQuery];
+      const cachedQueryPreview = this.previewResultsCached[previewItemQuery];
 
       // If the query has been saved it will emit load instead of the emitting the updated request.
       if (cachedQueryPreview?.status === 'success') {
         this.$emit('load', previewItemQuery);
       } else {
-        this.emitQueryPreviewRequestUpdated(this.queryPreviewRequest);
-      }
-    }
-
-    @Watch('queryPreviewResults')
-    protected enableCache(): void {
-      if (this.persistInCache && !this.previewResults[this.queryOfQueryPreview].cache) {
-        this.$x.emit('EnableCacheForQueryPreview', this.queryOfQueryPreview);
+        if (this.persistInCache) {
+          this.emitQueryPreviewRequestUpdated(this.queryPreviewRequest);
+        } else {
+          this.emitQueryPreviewRequestUpdatedForNoCache(this.queryPreviewRequest);
+        }
       }
     }
 

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

@@ -10,10 +10,15 @@ import { QueryPreviewInfo } from './store/index';
  */
 export interface QueriesPreviewXEvents {
   /**
-   * Any property of the queries preview request has changed.
+   * Any property of cacheable queries preview request has changed.
    * Payload: The new {@link @empathyco/x-types#SearchRequest | request}.
    */
   QueryPreviewRequestUpdated: SearchRequest;
+  /**
+   * Any property of no cacheable queries preview request has changed.
+   * Payload: The new {@link @empathyco/x-types#SearchRequest | request}.
+   */
+  QueryPreviewRequestUpdatedForNoCache: SearchRequest;
   /**
    * The component that shows a Query preview has been unmounted.
    * Payload: The query whose preview has been removed.
@@ -31,9 +36,4 @@ export interface QueriesPreviewXEvents {
    * query preview selection.
    */
   QueryPreviewUnselected: Dictionary<unknown>;
-  /**
-   * The query preview has been cached.
-   * Payload: The query whose preview has been cached.
-   */
-  EnableCacheForQueryPreview: string;
 }

packages/x-components/src/x-modules/queries-preview/store/actions/fetch-and-save-query-preview-non-cache.action.ts

@@ -0,0 +1,45 @@
+import { QueriesPreviewXStoreModule } from '../types';
+
+/**
+ * Default implementation for the {@link QueriesPreviewActions.fetchAndSaveQueryPreview}.
+ *
+ * @param _context - The {@link https://vuex.vuejs.org/guide/actions.html | context} of the actions,
+ * provided by Vuex.
+ * @param request - The query preview request to make.
+ * @returns A Promise of a SearchResponse when it fetches the results.
+ *
+ * @public
+ */
+// eslint-disable-next-line max-len
+export const fetchAndSaveQueryPreviewNonCache: QueriesPreviewXStoreModule['actions']['fetchAndSaveQueryPreviewNonCache'] =
+  ({ dispatch, commit }, request) => {
+    const { query } = request;
+
+    if (!query) {
+      return;
+    }
+    //const persistInCache = request.extraParams?.persistInCache as boolean;
+
+    commit('setQueryPreviewNonCached', {
+      request,
+      results: [],
+      status: 'loading',
+      totalResults: 0
+    });
+
+    return dispatch('fetchQueryPreview', request)
+      .then(response => {
+        commit('setQueryPreviewNonCached', {
+          request,
+          results: response?.results ?? [],
+          status: 'success',
+          totalResults: response?.totalResults ?? 0
+          //cache: persistInCache ?? false
+        });
+      })
+      .catch(error => {
+        // eslint-disable-next-line no-console
+        console.error(error);
+        commit('setStatus', { query, status: 'error' });
+      });
+  };

packages/x-components/src/x-modules/queries-preview/store/actions/fetch-and-save-query-preview.action.ts

@@ -20,7 +20,7 @@ export const fetchAndSaveQueryPreview: QueriesPreviewXStoreModule['actions']['fe
     }
     //const persistInCache = request.extraParams?.persistInCache as boolean;
 
-    commit('setQueryPreview', {
+    commit('setQueryPreviewCached', {
       request,
       results: [],
       status: 'loading',
@@ -29,7 +29,7 @@ export const fetchAndSaveQueryPreview: QueriesPreviewXStoreModule['actions']['fe
 
     return dispatch('fetchQueryPreview', request)
       .then(response => {
-        commit('setQueryPreview', {
+        commit('setQueryPreviewCached', {
           request,
           results: response?.results ?? [],
           status: 'success',

packages/x-components/src/x-modules/queries-preview/store/getters/loaded-queries-preview.getter.ts

@@ -10,8 +10,16 @@ import { QueriesPreviewXStoreModule } from '../types';
  * @returns The loaded previews from the state.
  */
 export const loadedQueriesPreview: QueriesPreviewXStoreModule['getters']['loadedQueriesPreview'] =
-  ({ queriesPreview }) => {
-    return objectFilter(queriesPreview, (_, preview) => {
+  ({ queriesPreviewCached, queriesPreviewNonCached }) => {
+    const cachedQueries = objectFilter(queriesPreviewCached, (_, preview) => {
       return preview.status === 'success' && preview.totalResults > 0;
     });
+
+    const nonCachedQueries = objectFilter(queriesPreviewNonCached, (_, preview) => {
+      return preview.status === 'success' && preview.totalResults > 0;
+    });
+
+    return Object.fromEntries(
+      Object.entries(cachedQueries).concat(Object.entries(nonCachedQueries))
+    );
   };

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

@@ -5,6 +5,8 @@ import { QueriesPreviewXStoreModule } from './types';
 import { fetchQueryPreview } from './actions/fetch-query-preview.action';
 import { fetchAndSaveQueryPreview } from './actions/fetch-and-save-query-preview.action';
 import { loadedQueriesPreview } from './getters/loaded-queries-preview.getter';
+// eslint-disable-next-line max-len
+import { fetchAndSaveQueryPreviewNonCache } from './actions/fetch-and-save-query-preview-non-cache.action';
 
 /**
  * {@link XStoreModule} For the `queries-preview` module.
@@ -16,7 +18,8 @@ export const queriesPreviewXStoreModule: QueriesPreviewXStoreModule = {
     config: {
       maxItemsToRequest: 24
     },
-    queriesPreview: {},
+    queriesPreviewCached: {},
+    queriesPreviewNonCached: {},
     selectedQueryPreview: {
       query: '',
       extraParams: undefined,
@@ -27,21 +30,23 @@ export const queriesPreviewXStoreModule: QueriesPreviewXStoreModule = {
   getters: { loadedQueriesPreview },
   mutations: {
     clearQueryPreview(state, query) {
-      if (state.queriesPreview[query].cache !== true) {
-        Vue.delete(state.queriesPreview, query);
-      }
+      Vue.delete(state.queriesPreviewNonCached, query);
     },
     setParams(state, params) {
       state.params = params;
     },
-    setQueryPreview(state, queryPreview) {
-      Vue.set(state.queriesPreview, getHashFromQueryPreviewItem(queryPreview), queryPreview);
+    setQueryPreviewCached(state, queryPreview) {
+      Vue.set(state.queriesPreviewCached, getHashFromQueryPreviewItem(queryPreview), queryPreview);
     },
-    setStatus(state, { query, status }) {
-      state.queriesPreview[query].status = status;
+    setQueryPreviewNonCached(state, queryPreview) {
+      Vue.set(
+        state.queriesPreviewNonCached,
+        getHashFromQueryPreviewItem(queryPreview),
+        queryPreview
+      );
     },
-    setCache(state, query) {
-      state.queriesPreview[query].cache = true;
+    setStatus(state, { query, status }) {
+      state.queriesPreviewCached[query].status = status;
     },
     setSelectedQueryPreview(state, selectedQueryPreview) {
       state.selectedQueryPreview = selectedQueryPreview;
@@ -51,6 +56,7 @@ export const queriesPreviewXStoreModule: QueriesPreviewXStoreModule = {
   },
   actions: {
     fetchQueryPreview,
-    fetchAndSaveQueryPreview
+    fetchAndSaveQueryPreview,
+    fetchAndSaveQueryPreviewNonCache
   }
 };

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

@@ -23,8 +23,6 @@ export interface QueryPreviewItem extends StatusState {
   results: Result[];
   /** The total number of results for the search query. */
   totalResults: number;
-  /** A flag to know if we should keep the query preview in the state. */
-  cache?: boolean;
 }
 
 /**
@@ -51,8 +49,10 @@ export interface QueryPreviewInfo {
  * @public
  */
 export interface QueriesPreviewState {
-  /* The request and results */
-  queriesPreview: Dictionary<QueryPreviewItem>;
+  /** The list of cached queries preview. */
+  queriesPreviewCached: Dictionary<QueryPreviewItem>;
+  /** The list of not cached queries preview. */
+  queriesPreviewNonCached: Dictionary<QueryPreviewItem>;
   /** The configuration of the queries preview module. */
   config: QueriesPreviewConfig;
   /** The extra params property of the state. */
@@ -85,20 +85,24 @@ export interface QueriesPreviewMutations extends ConfigMutations<QueriesPreviewS
    * @param query - Query whose entry will be removed.
    */
   clearQueryPreview(query: string): void;
-
-  setCache(query: string): void;
   /**
    * Sets the extra params of the module.
    *
    * @param params - The new extra params.
    */
   setParams(params: Dictionary<unknown>): void;
   /**
-   * Adds a new entry to the queries preview's dictionary.
+   * Adds a new entry to the cached queries preview's dictionary.
+   *
+   * @param queryPreview - The query preview item to add.
+   */
+  setQueryPreviewCached(queryPreview: QueryPreviewItem): void;
+  /**
+   * Adds a new entry to the no cached queries preview's dictionary.
    *
    * @param queryPreview - The query preview item to add.
    */
-  setQueryPreview(queryPreview: QueryPreviewItem): void;
+  setQueryPreviewNonCached(queryPreview: QueryPreviewItem): void;
   /**
    * Sets the status of a query preview request.
    *
@@ -129,11 +133,18 @@ export interface QueriesPreviewActions {
   fetchQueryPreview(request: SearchRequest): SearchResponse | null;
 
   /**
-   * Requests the results for a query preview and saves them in the state.
+   * Requests the results for a cacheable query preview and saves them in the state.
    *
    * @param request - The request object to retrieve the query preview.
    */
   fetchAndSaveQueryPreview(request: SearchRequest): void;
+
+  /**
+   * Requests the results for a no cacheable query preview and saves them in the state.
+   *
+   * @param request - The request object to retrieve the query preview.
+   */
+  fetchAndSaveQueryPreviewNonCache(request: SearchRequest): void;
 }
 
 /**