@ethlete/query 2.5.4 → 2.6.0

package/fesm2020/ethlete-query.mjs

@@ -1,5 +1,5 @@
 import { BehaviorSubjectWithSubscriberCount, getCookie, setCookie, deleteCookie, DestroyService, equal, clone } from '@ethlete/core';
-import { Observable, filter, takeWhile, switchMap, of, BehaviorSubject, Subject, takeUntil, interval, startWith, finalize, tap, timer, fromEvent, take, concat, debounceTime, combineLatest, map, distinctUntilChanged } from 'rxjs';
+import { Observable, filter, takeWhile, switchMap, of, BehaviorSubject, Subject, takeUntil, interval, startWith, finalize, tap, timer, map, fromEvent, debounceTime, take, concat, combineLatest, distinctUntilChanged } from 'rxjs';
 import * as i0 from '@angular/core';
 import { Directive, Input, InjectionToken, inject, ChangeDetectorRef, ViewContainerRef, TemplateRef, ErrorHandler, ElementRef } from '@angular/core';
 import { FormGroup } from '@angular/forms';
@@ -704,6 +704,9 @@ class Query {
     get _enableSmartPolling() {
         return this._queryConfig.enableSmartPolling ?? true;
     }
+    get store() {
+        return this._queryConfig.entity?.store ?? null;
+    }
     constructor(_client, _queryConfig, _routeWithParams, _args) {
         this._client = _client;
         this._queryConfig = _queryConfig;
@@ -711,6 +714,7 @@ class Query {
         this._args = _args;
         this._currentId = 0;
         this._pollingSubscription = null;
+        this._entitySubscription = null;
         this._onAbort$ = new Subject();
         this._currentPollConfig = null;
         /**
@@ -721,6 +725,62 @@ class Query {
             type: "PREPARED" /* QueryStateType.Prepared */,
             meta: { id: this._currentId, triggeredVia: 'program' },
         });
+        if (this._queryConfig.entity?.store) {
+            this._entitySubscription = this._queryConfig.entity.store.events$.subscribe((event) => {
+                if (event.type !== 'update' && event.type !== 'set') {
+                    return;
+                }
+                if (!isQueryStateSuccess(this.state)) {
+                    return;
+                }
+                const response = this.state.response;
+                const rawResponse = this.state.rawResponse;
+                const key = this._queryConfig.entity?.store.config.idKey;
+                if (!key) {
+                    return;
+                }
+                const currentValue = this._queryConfig.entity?.valueSelector({
+                    args: this._args,
+                    response,
+                    rawResponse,
+                });
+                const newData = this._queryConfig.entity?.store.getOne(event.key);
+                if (Array.isArray(currentValue)) {
+                    const index = currentValue.findIndex((item) => item[key] === event.key);
+                    if (index === -1) {
+                        return;
+                    }
+                    const newValue = [...currentValue];
+                    if (newData) {
+                        newValue[index] = newData;
+                    }
+                    else {
+                        newValue.splice(index, 1);
+                    }
+                    this._state$.next({
+                        ...this.state,
+                        response: newValue,
+                        meta: {
+                            ...this.state.meta,
+                            triggeredVia: 'auto',
+                        },
+                    });
+                }
+                else {
+                    if (currentValue?.[key] !== event.key) {
+                        return;
+                    }
+                    this._state$.next({
+                        ...this.state,
+                        response: newData,
+                        meta: {
+                            ...this.state.meta,
+                            triggeredVia: 'auto',
+                        },
+                    });
+                }
+            });
+        }
     }
     clone() {
         return this._client.fetch(this._queryConfig);
@@ -809,6 +869,12 @@ class Query {
                     const transformedResponse = this._queryConfig.responseTransformer
                         ? this._queryConfig.responseTransformer(responseData)
                         : responseData;
+                    this._queryConfig.entity?.successAction?.({
+                        args: this._args,
+                        rawResponse: state.response,
+                        response: transformedResponse,
+                        store: this._queryConfig.entity.store,
+                    });
                     this._state$.next({
                         type: "SUCCESS" /* QueryStateType.Success */,
                         rawResponse: state.response,
@@ -894,6 +960,15 @@ class Query {
         }))
             .subscribe();
     }
+    /**
+     * @internal
+     */
+    _destroy() {
+        this._state$.complete();
+        this._onAbort$.complete();
+        this._pollingSubscription?.unsubscribe();
+        this._entitySubscription?.unsubscribe();
+    }
 }
 
 const isBasicAuthProvider = (authProvider) => authProvider instanceof BasicAuthProvider;
@@ -1139,9 +1214,9 @@ class QueryDirective {
         }
     }
 }
-QueryDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: QueryDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: i0.ErrorHandler }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-QueryDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.3", type: QueryDirective, isStandalone: true, selector: "[query]", inputs: { query: "query", cache: ["queryCache", "cache"] }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: QueryDirective, decorators: [{
+QueryDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.4", ngImport: i0, type: QueryDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: i0.ErrorHandler }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+QueryDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.4", type: QueryDirective, isStandalone: true, selector: "[query]", inputs: { query: "query", cache: ["queryCache", "cache"] }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.4", ngImport: i0, type: QueryDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -1202,6 +1277,7 @@ class InfinityQuery {
         this._currentQuery$ = new BehaviorSubject(null);
         this._data$ = new BehaviorSubject([]);
         this._subscriptions = [];
+        this._responsiveDataSubscription = null;
     }
     nextPage() {
         const newPage = (this._currentPage$.value ?? 0) + 1;
@@ -1239,6 +1315,7 @@ class InfinityQuery {
     _clearSubscriptions() {
         this._subscriptions.forEach((sub) => sub.unsubscribe());
         this._subscriptions = [];
+        this._responsiveDataSubscription?.unsubscribe();
     }
     _handleNewQuery(query) {
         const stateChangesSub = query.state$.pipe(takeUntilResponse(), filterSuccess()).subscribe({
@@ -1253,7 +1330,19 @@ class InfinityQuery {
                 else {
                     newData = [...this.data, ...newData];
                 }
-                this._data$.next(newData);
+                if (query.store) {
+                    this._responsiveDataSubscription?.unsubscribe();
+                    const key = query.store.idKey;
+                    const responsiveData = query.store.entities$.pipe(map((entities) => newData.map((item) => {
+                        // TODO(TRB): This is kind of unsafe. The entity array keys might not be the same as the response keys
+                        const index = entities.values.findIndex((entity) => entity[key] === item[key]);
+                        return index > -1 ? entities.values[index] : item;
+                    })));
+                    this._responsiveDataSubscription = responsiveData.subscribe((data) => this._data$.next(data));
+                }
+                else {
+                    this._data$.next(newData);
+                }
                 const totalPages = this._config.response.totalPagesExtractor?.({
                     response: state.response,
                     itemsPerPage: this.itemsPerPage,
@@ -1479,9 +1568,9 @@ class InfinityQueryDirective {
         this._data$.next([]);
     }
 }
-InfinityQueryDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: InfinityQueryDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-InfinityQueryDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.3", type: InfinityQueryDirective, isStandalone: true, selector: "[infinityQuery]", inputs: { infinityQuery: "infinityQuery" }, providers: [{ provide: INFINITY_QUERY_TOKEN, useExisting: InfinityQueryDirective }, DestroyService], exportAs: ["infinityQuery"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: InfinityQueryDirective, decorators: [{
+InfinityQueryDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.4", ngImport: i0, type: InfinityQueryDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+InfinityQueryDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.4", type: InfinityQueryDirective, isStandalone: true, selector: "[infinityQuery]", inputs: { infinityQuery: "infinityQuery" }, providers: [{ provide: INFINITY_QUERY_TOKEN, useExisting: InfinityQueryDirective }, DestroyService], exportAs: ["infinityQuery"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.4", ngImport: i0, type: InfinityQueryDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -1531,9 +1620,9 @@ class InfinityQueryTriggerDirective {
         this._observer.observe(this._elementRef.nativeElement);
     }
 }
-InfinityQueryTriggerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: InfinityQueryTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-InfinityQueryTriggerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.3", type: InfinityQueryTriggerDirective, isStandalone: true, selector: "[infinityQueryTrigger], infinity-query-trigger", inputs: { scrollContainerSelector: "scrollContainerSelector" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: InfinityQueryTriggerDirective, decorators: [{
+InfinityQueryTriggerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.4", ngImport: i0, type: InfinityQueryTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+InfinityQueryTriggerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.4", type: InfinityQueryTriggerDirective, isStandalone: true, selector: "[infinityQueryTrigger], infinity-query-trigger", inputs: { scrollContainerSelector: "scrollContainerSelector" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.4", ngImport: i0, type: InfinityQueryTriggerDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -1544,6 +1633,146 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImpor
                 type: Input
             }] } });
 
+class EntityStore {
+    get events$() {
+        return this._events$.asObservable();
+    }
+    get keys() {
+        return [...this._keys];
+    }
+    get values() {
+        return [...this._dictionary.values()];
+    }
+    get size() {
+        return this._keys.size;
+    }
+    get isEmpty() {
+        return this.size === 0;
+    }
+    get config() {
+        return this._config;
+    }
+    get idKey() {
+        return this._config.idKey || 'id';
+    }
+    constructor(_config) {
+        this._config = _config;
+        this._dictionary = new Map();
+        this._keys = new Set();
+        this._events$ = new Subject();
+        this.entities$ = this.events$.pipe(startWith(null), debounceTime(0), map(() => ({
+            keys: this.keys,
+            values: this.values,
+        })));
+    }
+    getOne(key) {
+        const value = this._dictionary.get(key);
+        if (!value) {
+            console.error(`EntityStore: ${this._config.name || 'unknown'}: missing key "${key}" for get`);
+            return null;
+        }
+        if (this._config.logActions) {
+            console.log(`EntityStore: ${this._config.name || 'unknown'}: get "${key}"`);
+        }
+        return value;
+    }
+    getMany(keys) {
+        return keys.map((key) => this.getOne(key));
+    }
+    addOne(value) {
+        const key = this.getKey(value);
+        if (this._dictionary.has(key)) {
+            console.error(`EntityStore: ${this._config.name || 'unknown'}: duplicate key "${key}" for add`);
+            return null;
+        }
+        this._dictionary.set(key, value);
+        this._keys.add(key);
+        const event = { type: 'add', key };
+        this._events$.next(event);
+        if (this._config.logActions) {
+            console.log(`EntityStore: ${this._config.name || 'unknown'}: add "${key}"`);
+        }
+        return event;
+    }
+    addMany(values) {
+        const events = values.map((value) => this.addOne(value));
+        return events;
+    }
+    updateOne(value) {
+        const key = this.getKey(value);
+        const existing = this._dictionary.get(key);
+        if (!existing) {
+            console.error(`EntityStore: ${this._config.name || 'unknown'}: missing key "${key}" for update`);
+            return null;
+        }
+        this._dictionary.set(key, value);
+        const event = { type: 'update', key };
+        this._events$.next(event);
+        if (this._config.logActions) {
+            console.log(`EntityStore: ${this._config.name || 'unknown'}: update "${key}"`);
+        }
+        return event;
+    }
+    updateMany(values) {
+        const events = values.map((value) => this.updateOne(value));
+        return events;
+    }
+    setOne(value) {
+        const key = this.getKey(value);
+        this._dictionary.set(key, value);
+        this._keys.add(key);
+        const event = { type: 'set', key };
+        this._events$.next(event);
+        if (this._config.logActions) {
+            console.log(`EntityStore: ${this._config.name || 'unknown'}: set "${key}"`);
+        }
+        return event;
+    }
+    setMany(values) {
+        const events = values.map((value) => this.setOne(value));
+        return events;
+    }
+    removeOne(key) {
+        if (!this._dictionary.has(key)) {
+            console.error(`EntityStore: ${this._config.name || 'unknown'}: missing key "${key}" for remove`);
+            return null;
+        }
+        this._dictionary.delete(key);
+        this._keys.delete(key);
+        const event = { type: 'remove', key };
+        this._events$.next(event);
+        if (this._config.logActions) {
+            console.log(`EntityStore: ${this._config.name || 'unknown'}: remove "${key}"`);
+        }
+        return event;
+    }
+    removeMany(keys) {
+        const events = keys.map((key) => this.removeOne(key));
+        return events;
+    }
+    has(key) {
+        return this._dictionary.has(key);
+    }
+    clear() {
+        this._dictionary.clear();
+        this._keys.clear();
+    }
+    getKey(value) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const key = value[this._config.idKey || 'id'];
+        if (key === undefined) {
+            throw new Error(`EntityStore: ${this._config.name || 'unknown'}: missing key`);
+        }
+        return key;
+    }
+    logState() {
+        console.log('EntityStore:', this._config.name, {
+            dictionary: this._dictionary,
+            keys: this._keys,
+        });
+    }
+}
+
 class QueryStore {
     constructor(_config) {
         this._config = _config;
@@ -1562,6 +1791,7 @@ class QueryStore {
         return this._store.get(id) ?? null;
     }
     remove(id) {
+        this.get(id)?._destroy();
         this._store.delete(id);
         this._logState(id, null, 'REMOVE');
     }
@@ -1675,9 +1905,7 @@ class QueryStore {
 const shouldCacheQuery = (method) => {
     return method === 'GET' || method === 'OPTIONS' || method === 'HEAD' || method === 'GQL_QUERY';
 };
-const buildGqlCacheKey = (
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-config, args) => {
+const buildGqlCacheKey = (config, args) => {
     const { query } = config;
     const variables = args?.variables || {};
     const queryWithoutNewLinesAndWhitespace = query.replace(/\s/g, '');
@@ -1744,7 +1972,7 @@ class QueryClient {
                         return existingQuery;
                     }
                 }
-                const query = new Query(this, queryConfig, route, args);
+                const query = new Query(this, queryConfig, route, args ?? {});
                 if (shouldCacheQuery(queryConfig.method)) {
                     this._store.add(cacheKey, query);
                 }
@@ -2031,5 +2259,5 @@ const def = () => null;
  * Generated bundle index. Do not edit.
  */
 
-export { BasicAuthProvider, BearerAuthProvider, CustomHeaderAuthProvider, INFINITY_QUERY_TOKEN, InfinityQuery, InfinityQueryDirective, InfinityQueryTriggerDirective, Query, QueryClient, QueryDirective, QueryError, QueryField, QueryForm, QueryStore, buildErrorMessage, buildGqlCacheKey, buildQueryArrayString, buildQueryString, buildRoute, buildTimestampFromSeconds, castQueryCreatorTypes, computeQueryAuthHeader, computeQueryBody, computeQueryHeaders, computeQueryMethod, computeQueryQueryParams, createInfinityQueryConfig, createQueryCollection, decryptBearer, deepFreeze, def, detectContentTypeHeader, extractExpiresInSeconds, extractQuery, filterFailure, filterInvalidParams, filterNull, filterQueryStates, filterSuccess, forEachHeader, getDefaultHeaders, getResponseUrl, gql, hasHeader, ignoreAutoRefresh, invalidBaseRouteError, invalidBodyError, invalidRouteError, isAutoRefresh, isBasicAuthProvider, isBearerAuthProvider, isCustomHeaderAuthProvider, isFetchResponse, isGqlQueryConfig, isParamValid, isQuery, isQueryStateCancelled, isQueryStateFailure, isQueryStateLoading, isQueryStatePrepared, isQueryStateSuccess, isRequestError, mergeHeaders, parseAllXhrResponseHeaders, pathParamsMissingInRouteFunctionError, queryStateAlreadyHasKeyError, queryStateCannotTransformError, queryStateDoesNotContainKeyError, request, serializeBody, shouldCacheQuery, shouldRetryRequest, skipPaginationPageParamCalculator, switchQueryCollectionState, switchQueryState, takeUntilResponse, transformGql, transformMethod, transformToBoolean, transformToBooleanArray, transformToDate, transformToDateArray, transformToNumber, transformToNumberArray, transformToSort, transformToSortQueryParam, transformToString, transformToStringArray };
+export { BasicAuthProvider, BearerAuthProvider, CustomHeaderAuthProvider, EntityStore, INFINITY_QUERY_TOKEN, InfinityQuery, InfinityQueryDirective, InfinityQueryTriggerDirective, Query, QueryClient, QueryDirective, QueryError, QueryField, QueryForm, QueryStore, buildErrorMessage, buildGqlCacheKey, buildQueryArrayString, buildQueryString, buildRoute, buildTimestampFromSeconds, castQueryCreatorTypes, computeQueryAuthHeader, computeQueryBody, computeQueryHeaders, computeQueryMethod, computeQueryQueryParams, createInfinityQueryConfig, createQueryCollection, decryptBearer, deepFreeze, def, detectContentTypeHeader, extractExpiresInSeconds, extractQuery, filterFailure, filterInvalidParams, filterNull, filterQueryStates, filterSuccess, forEachHeader, getDefaultHeaders, getResponseUrl, gql, hasHeader, ignoreAutoRefresh, invalidBaseRouteError, invalidBodyError, invalidRouteError, isAutoRefresh, isBasicAuthProvider, isBearerAuthProvider, isCustomHeaderAuthProvider, isFetchResponse, isGqlQueryConfig, isParamValid, isQuery, isQueryStateCancelled, isQueryStateFailure, isQueryStateLoading, isQueryStatePrepared, isQueryStateSuccess, isRequestError, mergeHeaders, parseAllXhrResponseHeaders, pathParamsMissingInRouteFunctionError, queryStateAlreadyHasKeyError, queryStateCannotTransformError, queryStateDoesNotContainKeyError, request, serializeBody, shouldCacheQuery, shouldRetryRequest, skipPaginationPageParamCalculator, switchQueryCollectionState, switchQueryState, takeUntilResponse, transformGql, transformMethod, transformToBoolean, transformToBooleanArray, transformToDate, transformToDateArray, transformToNumber, transformToNumberArray, transformToSort, transformToSortQueryParam, transformToString, transformToStringArray };
 //# sourceMappingURL=ethlete-query.mjs.map