feat(query-preview): save only queries in the history list

+ rm first state.queriesPreview item if the list length exceeds the max allowed

EMP-2867

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

@@ -130,10 +130,10 @@
 
     /**
      * The queryPreviewHistory of the queries that have been searched.
-     * It is a list of QueryPreviewItems.
+     * It is a list of queries.
      */
     @State('queriesPreview', 'queryPreviewHistory')
-    public queryPreviewHistory!: QueryPreviewItem[];
+    public queryPreviewHistory!: string[];
 
     /**
      * The results to render from the state.
@@ -216,16 +216,18 @@
     }
 
     /**
-     * Checks whether the current queryPreviewItem has been saved
+     * Checks whether the current queryPreviewItem query has been saved
      * in the queryPreviewHistory in the state.
      *
      * @internal
      *
      * @returns True if the query has been saved.
      */
     protected get isSavedQuery(): boolean {
-      const previewItem = this.previewResults[this.queryPreviewInfo.query];
-      return this.queryPreviewHistory.some(item => deepEqual(item, previewItem));
+      const previewItemQuery = this.previewResults[this.queryPreviewInfo.query];
+      return previewItemQuery
+        ? this.queryPreviewHistory.some(item => item === previewItemQuery.request.query)
+        : false;
     }
 
     /**

packages/x-components/src/x-modules/queries-preview/store/actions/update-query-preview-history.action.ts

@@ -1,4 +1,3 @@
-import { deepEqual } from '@empathyco/x-utils';
 import { QueriesPreviewXStoreModule } from '../types';
 
 /**
@@ -14,29 +13,23 @@ import { QueriesPreviewXStoreModule } from '../types';
 export const updateQueryPreviewHistory: QueriesPreviewXStoreModule['actions']['updateQueryPreviewHistory'] =
   ({ commit, state, getters }, request) => {
     const { query } = request;
-    const loadedQueryPreview = getters.loadedQueriesPreview[query];
+    const loadedQueryPreview = getters.loadedQueriesPreview[query].request.query;
 
-    // If the query preview item was already stored, remove the old one.
-    if (state.queryPreviewHistory.some(item => deepEqual(item, loadedQueryPreview))) {
-      commit('clearFromQueryPreviewHistory', {
-        request,
-        results: loadedQueryPreview.results,
-        status: loadedQueryPreview.status,
-        totalResults: loadedQueryPreview.totalResults
-      });
+    // If the query preview was already stored, remove the old one.
+    if (state.queryPreviewHistory.some(item => item === loadedQueryPreview)) {
+      commit('clearFromQueryPreviewHistory', query);
     }
 
     // If the queryPreviewHistory list exceeds the configured max.length to store,
-    // remove the first item
+    // remove the first item from the list and from the QueriesPreview state.
     if (state.queryPreviewHistory.length === state.config.maxQueryPreviewHistoryLength) {
       commit('shiftQueryPreviewHistory');
+      commit(
+        'clearQueryPreview',
+        state.queriesPreview[Object.keys(state.queriesPreview)[0]].request.query
+      );
     }
 
-    // Add query preview item to the queryPreviewHistory.
-    commit('setQueryPreviewHistory', {
-      request,
-      results: loadedQueryPreview.results,
-      status: loadedQueryPreview.status,
-      totalResults: loadedQueryPreview.totalResults
-    });
+    // Add the query preview item query to the queryPreviewHistory.
+    commit('setQueryPreviewHistory', query);
   };

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

@@ -45,11 +45,11 @@ export const queriesPreviewXStoreModule: QueriesPreviewXStoreModule = {
     },
     setConfig,
     mergeConfig,
-    setQueryPreviewHistory(state, queryPreview) {
-      state.queryPreviewHistory.push(queryPreview);
+    setQueryPreviewHistory(state, query) {
+      state.queryPreviewHistory.push(query);
     },
-    clearFromQueryPreviewHistory(state, queryPreviewItem) {
-      state.queryPreviewHistory.splice(state.queryPreviewHistory.indexOf(queryPreviewItem), 1);
+    clearFromQueryPreviewHistory(state, query) {
+      state.queryPreviewHistory.splice(state.queryPreviewHistory.indexOf(query), 1);
     },
     shiftQueryPreviewHistory(state) {
       state.queryPreviewHistory.shift();

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

@@ -51,8 +51,8 @@ export interface QueryPreviewInfo {
 export interface QueriesPreviewState {
   /* The request and results */
   queriesPreview: Dictionary<QueryPreviewItem>;
-  /* List of the most recent used queries preview */
-  queryPreviewHistory: QueryPreviewItem[];
+  /* List of the most recent used queries preview queries */
+  queryPreviewHistory: string[];
   /** The configuration of the queries preview module. */
   config: QueriesPreviewConfig;
   /** The extra params property of the state. */
@@ -112,15 +112,15 @@ export interface QueriesPreviewMutations extends ConfigMutations<QueriesPreviewS
   /**
    * Adds a new entry to the queryPreviewHistory list.
    *
-   * @param queryPreview - The query preview item to add.
+   * @param query - The query to add.
    */
-  setQueryPreviewHistory(queryPreview: QueryPreviewItem): void;
+  setQueryPreviewHistory(query: string): void;
   /**
-   * Removes a queryPreview item from the queryPreviewHistory list.
+   * Removes a query from the queryPreviewHistory list.
    *
-   * @param queryPreview - The query preview item to remove.
+   * @param query - The query to remove.
    */
-  clearFromQueryPreviewHistory(queryPreview: QueryPreviewItem): void;
+  clearFromQueryPreviewHistory(query: string): void;
   /**
    * Removes the first item from the queryPreviewHistory list.
    */

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

@@ -47,7 +47,10 @@ export const clearQueryPreviewWire = wireCommit(
  *
  * @public
  */
-export const clearFromQueryPreviewHistoryWire = wireCommit('clearFromQueryPreviewHistory');
+export const clearFromQueryPreviewHistoryWire = wireCommit(
+  'clearFromQueryPreviewHistory',
+  ({ eventPayload: { request } }) => request['query']
+);
 
 /**
  * Sets the queries preview state `params`.