feat(query-preview): new implementation with an internal cache

empathyco · Dec 27, 2023 · 9ecec58 · 9ecec58
1 parent a4a0802
commit 9ecec58
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 87 deletions.
diff --git a/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue b/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue
@@ -1,5 +1,5 @@
 <template>
-  <NoElement v-if="queryPreviewResults && queryPreviewResults.totalResults">
+  <NoElement v-if="internalPreviewResults && internalPreviewResults.totalResults">
     <!--
       @slot Query Preview default slot.
           @binding {QueryPreviewInfo} queryPreviewInfo - The information about the request of the
@@ -9,12 +9,12 @@
     -->
     <slot
       :queryPreviewInfo="queryPreviewInfo"
-      :results="queryPreviewResults.results"
-      :totalResults="queryPreviewResults.totalResults"
+      :results="internalPreviewResults.results"
+      :totalResults="internalPreviewResults.totalResults"
     >
       <ul data-test="query-preview" class="x-query-preview">
         <li
-          v-for="result in queryPreviewResults.results"
+          v-for="result in internalPreviewResults.results"
           :key="result.id"
           class="x-query-preview__item"
           data-test="query-preview-item"
@@ -112,15 +112,8 @@
      * The results preview of the queries preview cacheable mounted.
      * It is a dictionary, indexed by the query preview query.
      */
-    @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>;
+    @State('queriesPreview', 'queriesPreview')
+    public previewResults!: Dictionary<QueryPreviewItem>;
 
     /**
      * As the request is handled in this component, we need
@@ -166,6 +159,8 @@
      */
     public queryOfQueryPreview = getHashFromQueryPreviewInfo(this.queryPreviewInfo);
 
+    public cachedPreviewResults!: QueryPreviewItem;
+
     /**
      * The computed request object to be used to retrieve the query preview results.
      *
@@ -205,15 +200,7 @@
      * @returns The results preview of the actual query preview.
      */
     public get queryPreviewResults(): Partial<QueryPreviewItem> | undefined {
-      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];
-      }
-
+      const previewResults = this.previewResults[this.queryOfQueryPreview];
       return previewResults?.results
         ? {
             ...previewResults,
@@ -235,22 +222,6 @@
       }, 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.
      *
@@ -267,20 +238,23 @@
       );
 
       const previewItemQuery = this.queryOfQueryPreview;
-      const cachedQueryPreview = this.previewResultsCached[previewItemQuery];
+      const cachedQueryPreview = this.previewResults[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 {
-        if (this.persistInCache) {
-          this.emitQueryPreviewRequestUpdated(this.queryPreviewRequest);
-        } else {
-          this.emitQueryPreviewRequestUpdatedForNoCache(this.queryPreviewRequest);
-        }
+        this.emitQueryPreviewRequestUpdated(this.queryPreviewRequest);
       }
     }
 
+    protected get internalPreviewResults(): QueryPreviewItem {
+      this.cachedPreviewResults = this.previewResults[this.queryOfQueryPreview]
+        ? this.previewResults[this.queryOfQueryPreview]
+        : this.cachedPreviewResults;
+      return this.cachedPreviewResults;
+    }
+
     /**
      * Cancels the (remaining) requests when the component is destroyed
      * via the `debounce.cancel()` method.

diff --git a/...x-components/src/x-modules/queries-preview/store/getters/loaded-queries-preview.getter.ts b/...x-components/src/x-modules/queries-preview/store/getters/loaded-queries-preview.getter.ts
@@ -10,16 +10,8 @@ import { QueriesPreviewXStoreModule } from '../types';
  * @returns The loaded previews from the state.
  */
 export const loadedQueriesPreview: QueriesPreviewXStoreModule['getters']['loadedQueriesPreview'] =
-  ({ queriesPreviewCached, queriesPreviewNonCached }) => {
-    const cachedQueries = objectFilter(queriesPreviewCached, (_, preview) => {
+  ({ queriesPreview }) => {
+    return objectFilter(queriesPreview, (_, 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))
-    );
   };
diff --git a/packages/x-components/src/x-modules/queries-preview/store/module.ts b/packages/x-components/src/x-modules/queries-preview/store/module.ts
@@ -18,8 +18,7 @@ export const queriesPreviewXStoreModule: QueriesPreviewXStoreModule = {
     config: {
       maxItemsToRequest: 24
     },
-    queriesPreviewCached: {},
-    queriesPreviewNonCached: {},
+    queriesPreview: {},
     selectedQueryPreview: {
       query: '',
       extraParams: undefined,
@@ -30,23 +29,16 @@ export const queriesPreviewXStoreModule: QueriesPreviewXStoreModule = {
   getters: { loadedQueriesPreview },
   mutations: {
     clearQueryPreview(state, query) {
-      Vue.delete(state.queriesPreviewNonCached, query);
+      Vue.delete(state.queriesPreview, query);
     },
     setParams(state, params) {
       state.params = params;
     },
     setQueryPreviewCached(state, queryPreview) {
-      Vue.set(state.queriesPreviewCached, getHashFromQueryPreviewItem(queryPreview), queryPreview);
-    },
-    setQueryPreviewNonCached(state, queryPreview) {
-      Vue.set(
-        state.queriesPreviewNonCached,
-        getHashFromQueryPreviewItem(queryPreview),
-        queryPreview
-      );
+      Vue.set(state.queriesPreview, getHashFromQueryPreviewItem(queryPreview), queryPreview);
     },
     setStatus(state, { query, status }) {
-      state.queriesPreviewCached[query].status = status;
+      state.queriesPreview[query].status = status;
     },
     setSelectedQueryPreview(state, selectedQueryPreview) {
       state.selectedQueryPreview = selectedQueryPreview;

diff --git a/packages/x-components/src/x-modules/queries-preview/store/types.ts b/packages/x-components/src/x-modules/queries-preview/store/types.ts
@@ -50,9 +50,7 @@ export interface QueryPreviewInfo {
  */
 export interface QueriesPreviewState {
   /** The list of cached queries preview. */
-  queriesPreviewCached: Dictionary<QueryPreviewItem>;
-  /** The list of not cached queries preview. */
-  queriesPreviewNonCached: Dictionary<QueryPreviewItem>;
+  queriesPreview: Dictionary<QueryPreviewItem>;
   /** The configuration of the queries preview module. */
   config: QueriesPreviewConfig;
   /** The extra params property of the state. */
@@ -97,12 +95,6 @@ export interface QueriesPreviewMutations extends ConfigMutations<QueriesPreviewS
    * @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.
-   */
-  setQueryPreviewNonCached(queryPreview: QueryPreviewItem): void;
   /**
    * Sets the status of a query preview request.
    *

diff --git a/packages/x-components/src/x-modules/queries-preview/wiring.ts b/packages/x-components/src/x-modules/queries-preview/wiring.ts
@@ -32,15 +32,6 @@ const wireDispatch = namespacedWireDispatch(moduleName);
  */
 export const fetchAndSaveQueryPreviewWire = wireDispatch('fetchAndSaveQueryPreview');
 
-/**
- * Requests and stores the no cacheable query preview results.
- *
- * @public
- */
-export const fetchAndSaveQueryPreviewNonCacheWire = wireDispatch(
-  'fetchAndSaveQueryPreviewNonCache'
-);
-
 /**
  * Clears a query preview from queries preview module.
  *
@@ -78,9 +69,6 @@ export const queriesPreviewWiring = createWiring({
   QueryPreviewRequestUpdated: {
     fetchAndSaveQueryPreviewWire
   },
-  QueryPreviewRequestUpdatedForNoCache: {
-    fetchAndSaveQueryPreviewNonCacheWire
-  },
   NonCacheableQueryPreviewUnmounted: {
     clearQueryPreviewWire
   },