@one-paragon/angular-utilities 2.0.0-beta.2 → 2.0.0-beta.4

package/{http-request-state/directives/index.d.ts → src/http-request-state/directives/index.ts}

@@ -1,5 +1,5 @@
-export * from './http-error-state-directive';
-export * from './http-inProgress-state-directive';
-export * from './http-notStarted-state-directive';
-export * from './http-success-state-directive';
-export * from './request-state-directive';
+export * from './http-error-state-directive';
+export * from './http-inProgress-state-directive';
+export * from './http-notStarted-state-directive';
+export * from './http-success-state-directive';
+export * from './request-state-directive';

package/src/http-request-state/directives/request-state-directive.spec.ts

@@ -0,0 +1,72 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Component, inject } from '@angular/core';
+import { HttpRequestModule } from '../http-state-module';
+import { HttpRequestStateStore } from '../HttpRequestStateStore';
+import { Subject } from 'rxjs';
+import { RequestStateOptions } from '../types';
+
+
+@Component({
+  template: `
+    <div *httpRequestState='requestState;let state;'>
+        <ng-container *httpNotStartedState>not started</ng-container>
+        <ng-container *httpInProgressState>in progress</ng-container>
+        <ng-container *httpSuccessState='let body' >success {{body}}</ng-container>
+        <ng-container *httpErrorState='let error' >error {{error}}</ng-container>
+    </div>
+    `,
+}) export class TestHttpRequestStateDirectiveComponent {
  requestState = inject<HttpRequestStateStore<any, any>>(HttpRequestStateStore);
+
+}
+
+export class MockHttpRequestState<T> extends HttpRequestStateStore<[], T> {
+  subject = new Subject<T>();
+  constructor(options?: RequestStateOptions) {
+    super(()=> {
+      return this.subject;
+    }, options );
+  }
+}
+
+let requestState: MockHttpRequestState<string>;
+let fixture: ComponentFixture<TestHttpRequestStateDirectiveComponent>;
+
+describe('Request State Directive', () => {
+
+  beforeEach(() => {
+    requestState = new MockHttpRequestState<string>();
+    fixture = TestBed.configureTestingModule({
+      declarations: [TestHttpRequestStateDirectiveComponent],
+      providers: [{ provide: HttpRequestStateStore, useValue: requestState }],
+      imports: [HttpRequestModule]
+    }).createComponent(TestHttpRequestStateDirectiveComponent);
+  });
+
+  it('should begin with the state of not started', () => {
+    verifyText('not started');
+  });
+
+  it('should be in progress while in progress', () => {
+    requestState.request();
+    verifyText('in progress');
+  });
+
+  it('should be success when success', () => {
+    requestState.request();
+    requestState.subject.next('yay')
+    verifyText('success yay');
+  });
+
+  it('should be error when error', () => {
+    requestState.request();
+    requestState.subject.error('ouch');
+    verifyText('error ouch');
+  });
+
+  function verifyText(text:string) {
+    fixture.detectChanges();
+    const node: HTMLElement = fixture.nativeElement;
+    expect(node.innerText).toBe(text);
+  }
+
+});

package/src/http-request-state/directives/request-state-directive.ts

@@ -0,0 +1,78 @@
+import { Directive, Input, TemplateRef, ViewContainerRef, inject } from '@angular/core';
+import { defaultShareReplay } from '../../rxjs/defaultShareReplay';
+import { isObservable, Observable, Subject, Unsubscribable } from 'rxjs';
+import { map, switchAll } from 'rxjs/operators';
+import { HttpRequestStateStore } from '../HttpRequestStateStore';
+import { HttpRequestState, HttpRequestStatus } from '../types';
+
+export interface HttpRequestStateViewContext<T> {
+  $implicit?: HttpRequestStateAny<T>;
+  state?: HttpRequestStateAny<T>;
+  status: {
+    inProgress: boolean;
+    notStarted: boolean;
+    success: boolean;
+    error: boolean;
+  };
+}
+
+@Directive({ selector: '[httpRequestState]', })
+export class HttpRequestStateDirective<TParam extends any[], V, R, T = R extends null ? V : R> {
+  private viewContainer: ViewContainerRef;
+
+  readonly ViewContext: HttpRequestStateViewContext<T> = {
+    $implicit: undefined,
+    state: undefined,
+    status: {
+      inProgress: false,
+      notStarted: true,
+      success: false,
+      error: false,
+    }
+  };
+
+
+  subject = new Subject<Observable<HttpRequestState<T>>>();
+  state = this.subject.pipe(switchAll(), defaultShareReplay());
+  subscription: Unsubscribable;
+  hooks: ((state: HttpRequestState<T>) => void)[] = [];
+
+  @Input('httpRequestState') set stateStore(store: HttpRequestStateStore<TParam, V, R, T> | Observable<HttpRequestState<T>>) {
+    if (isObservable(store)) {
+      this.subject.next(store);
+    } else {
+      this.subject.next(store.state$.pipe(map(state => state.response)));
+    }
+
+  }
+  constructor(templateRef: TemplateRef<any>, viewContainer: ViewContainerRef) {
+    this.viewContainer = viewContainer;
+    this.viewContainer.createEmbeddedView(templateRef, this.ViewContext);
+    this.subscription = this.state.subscribe(state => {
+      this.ViewContext.$implicit = state;
+      this.ViewContext.state = state;
+      this.ViewContext.status.inProgress = state.status === HttpRequestStatus.inProgress;
+      this.ViewContext.status.notStarted = state.status === HttpRequestStatus.notStarted;
+      this.ViewContext.status.success = state.status === HttpRequestStatus.success;
+      this.ViewContext.status.error = state.status === HttpRequestStatus.fail;
+      this.hooks.forEach(hook => hook(state));
+    });
+  }
+
+
+  ngOnDestroy() {
+    this.viewContainer.clear();
+    this.subscription.unsubscribe();
+  }
+
+  static ngTemplateContextGuard<V, R>(dir: HttpRequestStateDirective<any, V, R>, ctx: any): ctx is HttpRequestStateViewContext<R extends null ? V : R> {
+    return true;
+  }
+
+}
+
+export type HttpRequestStateAny<T> = {
+  status: HttpRequestStatus;
+  body?: T;
+  error?: any;
+}

package/src/http-request-state/helpers.ts

@@ -0,0 +1,30 @@
+import { HttpRequestState, HttpRequestStateError, HttpRequestStateInProgress, HttpRequestStateNotStarted, HttpRequestStateSuccess, HttpRequestStatus } from "./types";
+
+export function isErrorState<T>(state: HttpRequestState<T>): state is HttpRequestStateError {
+  return state.status === HttpRequestStatus.fail;
+}
+
+export function isSuccessState<T>(state: HttpRequestState<T>): state is HttpRequestStateSuccess<T> {
+  return state.status === HttpRequestStatus.success;
+}
+
+export function isSuccessOrErrorState<T>(state: HttpRequestState<T>): state is (HttpRequestStateSuccess<T> | HttpRequestStateError) {
+  return state.status === HttpRequestStatus.success || state.status === HttpRequestStatus.fail;
+}
+
+export function createSuccess<T>(body: T): HttpRequestStateSuccess<T> {
+  return { status: HttpRequestStatus.success, body };
+}
+
+export function createFailure(error: any): HttpRequestStateError {
+  return { status: HttpRequestStatus.fail, error };
+}
+
+export const notStarted: HttpRequestStateNotStarted = { status: HttpRequestStatus.notStarted };
+
+
+export const inProgress: HttpRequestStateInProgress = { status: HttpRequestStatus.inProgress };
+
+export function statusIsSuccessOrInProgress( status: HttpRequestStatus) {
+  return [HttpRequestStatus.success, HttpRequestStatus.inProgress].includes(status);
+}

package/src/http-request-state/http-request-state.ts

@@ -0,0 +1,69 @@
+import { map, startWith, switchMap } from 'rxjs/operators';
+import { getRequestorBody } from './rxjs/getRequestorBody';
+import { getRequestorStatus } from './rxjs/getRequestorState';
+import { mapError } from '../rxjs/mapError';
+import { defaultShareReplay } from '../rxjs/defaultShareReplay';
+import { Observable, of, ReplaySubject } from 'rxjs';
+import { HttpRequestFactory, HttpRequestState, HttpRequestStatus } from './types';
+import { createFailure, createSuccess, inProgress, notStarted } from './helpers';
+
+export type HttpRequestState$ <T> = Observable<HttpRequestState<T>>;
+
+export interface HttpRequestor <Res, Req> {
+  httpState$: Observable<HttpRequestState<Res>>;
+  status$: Observable<HttpRequestStatus>;
+  body$: Observable<Res>;
+  request: Req;
+}
+
+export function httpRequest<T = any>(req: Observable<T>): HttpRequestState$<T> {
+  return req.pipe(
+    map(createSuccess),
+    mapError(createFailure),
+    startWith(inProgress),
+    defaultShareReplay()
+  );
+}
+
+export function httpRequestor<TParam extends any[], T>(req: HttpRequestFactory<TParam,T> ): HttpRequestor<T, (...params: [...TParam]) => Observable<HttpRequestState<T>>> {
+  const request$ = new ReplaySubject<[...TParam]>(1);
+  const httpState$ : HttpRequestState$<T> = request$.pipe(
+    switchMap( (params) => httpRequest<T>(req(...params)) ),
+    startWith(notStarted),
+    defaultShareReplay(),
+  );
+  const request = (...params: [...TParam]) => {
+    request$.next(params);
+    return httpState$;
+  };
+  return ({
+    request,
+    httpState$,
+    body$: httpState$.pipe(getRequestorBody),
+    status$: httpState$.pipe(getRequestorStatus)
+  });
+}
+
+export function chainRequest<TParam extends any[], T, TT>(
+  httpState$: Observable<HttpRequestState<T>>,
+  request:HttpRequestFactory<TParam,TT>,
+  requestParams: ((responseFromPrevious: T) => [...TParam]) | (() => [...TParam])
+  ): Observable<HttpRequestState<TT>> {
+  return httpState$.pipe(
+    switchMap( res => {
+      if(res.status === HttpRequestStatus.success) {
+        const secondReq = httpRequestor<[...TParam], TT>(request);
+        const param = requestParams(res.body);
+        secondReq.request(...param );
+        return secondReq.httpState$;
+      } else {
+        return of(res);
+      }
+    }),
+  );
+}
+
+
+
+
+

package/src/http-request-state/http-state-module.ts

@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { HttpSuccessStateDirective } from './directives/http-success-state-directive';
+import { HttpRequestStateDirective } from './directives/request-state-directive';
+import { HttpErrorStateDirective } from './directives/http-error-state-directive';
+import { HttpInProgressStateDirective } from './directives/http-inProgress-state-directive';
+import { HttpNotStartedStateDirective } from './directives/http-notStarted-state-directive';
+
+@NgModule({
+    imports: [
+        HttpSuccessStateDirective,
+        HttpRequestStateDirective,
+        HttpErrorStateDirective,
+        HttpInProgressStateDirective,
+        HttpNotStartedStateDirective,
+    ],
+    exports: [
+        HttpSuccessStateDirective,
+        HttpRequestStateDirective,
+        HttpErrorStateDirective,
+        HttpInProgressStateDirective,
+        HttpNotStartedStateDirective,
+    ]
+}) export class HttpRequestModule { }

package/{http-request-state/index.d.ts → src/http-request-state/index.ts}

@@ -1,6 +1,6 @@
-export * from './helpers';
-export * from './http-request-state';
-export * from './http-state-module';
-export * from './HttpRequestStateFactory';
-export * from './HttpRequestStateStore';
-export * from './types';
+export * from './helpers';
+export * from './http-request-state';
+export * from './http-state-module';
+export * from './HttpRequestStateFactory';
+export * from './HttpRequestStateStore';
+export * from './types';

package/src/http-request-state/observable.spec.ts

@@ -0,0 +1,43 @@
+import { MockHttpRequestState } from "./directives/request-state-directive.spec";
+import { createSuccess, inProgress, notStarted, createFailure } from "./helpers";
+
+describe('HttpRequestStateStore', () => {
+
+    it('should begin with the state of not started',  (done) =>  {
+        const requestState = new MockHttpRequestState<string>();
+        requestState.state$.subscribe( state => {
+            expect(state).toEqual({ requestParams: null as any , response: notStarted});
+            done();
+        });
+    });
+
+    it('should be in progress when request is made',  (done) =>  {
+        const requestState = new MockHttpRequestState<string>();
+        requestState.request();
+        requestState.state$.subscribe( state => {
+            expect(state).toEqual({ requestParams: [], response: inProgress});
+            done();
+        });
+    });
+
+    it('should be in success when request completes successfully',  (done) =>  {
+        const requestState = new MockHttpRequestState<string>();
+        requestState.request();
+        requestState.subject.next('hi');
+        requestState.state$.subscribe( state => {
+            expect(state).toEqual({ requestParams: [], response: createSuccess('hi')});
+            done();
+        });
+    });
+
+    it('should be in error when request errors',  (done) =>  {
+        const requestState = new MockHttpRequestState<string>();
+        requestState.request();
+        requestState.subject.error('error');
+        requestState.state$.subscribe( state => {
+            expect(state).toEqual({ requestParams: [], response: createFailure('error') });
+            done();
+        });
+    });
+
+});

package/src/http-request-state/rxjs/getRequestorBody.ts

@@ -0,0 +1,10 @@
+import { isSuccessState } from '../helpers';
+import { HttpRequestState } from '../types';
+import { Observable } from 'rxjs';
+import { filter, map } from 'rxjs/operators';
+
+export const getRequestorBody = <T>(source: Observable<HttpRequestState<T>>) =>
+  source.pipe(
+    filter(isSuccessState),
+    map( res => res.body)
+  );

package/src/http-request-state/rxjs/getRequestorState.ts

@@ -0,0 +1,8 @@
+import { HttpRequestState } from '../types';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+export const getRequestorStatus = <T>(source: Observable<HttpRequestState<T>>) =>
+  source.pipe(
+    map( res => res.status)
+  );

package/{http-request-state/rxjs/index.d.ts → src/http-request-state/rxjs/index.ts}

@@ -1,4 +1,4 @@
-export * from './getRequestorBody';
-export * from './getRequestorState';
-export * from './tapError';
-export * from './tapSuccess';
+export * from './getRequestorBody';
+export * from './getRequestorState';
+export * from './tapError';
+export * from './tapSuccess';

package/src/http-request-state/rxjs/tapError.ts

@@ -0,0 +1,16 @@
+import { Observable } from 'rxjs';
+import { tap } from 'rxjs/operators';
+import { HttpRequestState } from '../types';
+import { isErrorState } from '../helpers';
+
+export function tapError(onError: (error: any) => void) {
+  return function (src: Observable<HttpRequestState>): Observable<HttpRequestState> {
+    return src.pipe(
+        tap( result => {
+            if(isErrorState(result)) {
+                onError(result.error);
+            }
+        })
+    );
+  };
+}

package/src/http-request-state/rxjs/tapSuccess.ts

@@ -0,0 +1,16 @@
+import { Observable } from 'rxjs';
+import { tap } from 'rxjs/operators';
+import { HttpRequestState } from '../types';
+import { isSuccessState } from '../helpers';
+
+export function tapSuccess<T>(onSuccess: (body: T) => void) {
+  return function (src: Observable<HttpRequestState<T>>): Observable<HttpRequestState<T>> {
+    return src.pipe(
+        tap( result => {
+            if(isSuccessState(result)) {
+                onSuccess(result.body);
+            }
+        })
+    );
+  };
+}

package/src/http-request-state/strategies.spec.ts

@@ -0,0 +1,42 @@
+import { toArray } from "rxjs/operators";
+import { MockHttpRequestState } from "./directives/request-state-directive.spec";
+import { HttpRequestStrategy } from "./types";
+
+describe('HttpRequestStateStore', () => {
+
+    it('should throw when strategy is use once and it was reused',  () =>  {
+        const requestState = new MockHttpRequestState<string>({strategy: HttpRequestStrategy.singleUse});
+        requestState.request();
+        expect( ()=>{
+            requestState.request();
+        } ).toThrow();
+    });
+
+    
+    it('should emit both when strategy is concurrent',  (done) =>  {
+        const requestState = new MockHttpRequestState<string>({strategy: HttpRequestStrategy.concurrent});
+        requestState.request();
+        requestState.request();
+        requestState.selectResponse$.pipe( toArray()
+        ).subscribe( d => {
+            expect(d.length).toBe(2);
+            done();
+        });
+        requestState.subject.next('hi');
+        requestState.ngOnDestroy();
+    });
+
+    it('should emit only one when strategy is cancel previous',  (done) =>  {
+        const requestState = new MockHttpRequestState<string>({strategy: HttpRequestStrategy.cancelPrevious});
+        requestState.request();
+        requestState.request();
+        requestState.selectResponse$.pipe( toArray()
+        ).subscribe( d => {
+            expect(d.length).toBe(1);
+            done();
+        });
+        requestState.subject.next('hi');
+        requestState.ngOnDestroy();
+
+    });
+});

package/src/http-request-state/types.ts

@@ -0,0 +1,55 @@
+import { Injector } from '@angular/core';
+import { Observable } from 'rxjs';
+export enum HttpRequestStatus {
+    notStarted,
+    inProgress,
+    success,
+    fail,
+    cancelled,
+  }
+
+  export type HttpRequestStateCancelled = {
+    status: HttpRequestStatus.cancelled
+  }
+
+  export type HttpRequestStateNotStarted = {
+    status: HttpRequestStatus.notStarted
+  }
+
+  export type HttpRequestStateInProgress = {
+    status: HttpRequestStatus.inProgress
+  }
+
+  export type HttpRequestStateSuccess<T> = {
+    status: HttpRequestStatus.success;
+    body: T;
+  }
+
+  export type HttpRequestStateError = {
+    status: HttpRequestStatus.fail;
+    error: any;
+  }
+
+
+  export type HttpRequestState<T = any> =
+    HttpRequestStateCancelled |
+    HttpRequestStateNotStarted |
+    HttpRequestStateInProgress |
+    HttpRequestStateSuccess<T> |
+    HttpRequestStateError ;
+
+export enum HttpRequestStrategy {
+  concurrent = 1,
+  singleUse = 2,
+  cancelPrevious = 3,
+  sequential = 4,
+}
+export interface RequestStateOptions<TParam extends any[] = any> {
+  strategy?: HttpRequestStrategy;
+  autoRequestWith?: [...TParam];
+  injector?: Injector;
+}
+
+export interface RequestCreatorOptions<TParam extends any[] = any> extends RequestStateOptions<TParam> {}
+
+export type HttpRequestFactory<TParam extends any[], T> = (...params: [...TParam]) => Observable<T>

package/src/ngrx/actionable-selector.ts

@@ -0,0 +1,150 @@
+import { EnvironmentInjector, inject, Injector, makeEnvironmentProviders, provideAppInitializer, runInInjectionContext } from "@angular/core";
+import { Action, createSelector, MemoizedSelector, Store } from "@ngrx/store";
+
+let _store: Store<any>;
+let _cache: AppStoreCache;
+let _ei : EnvironmentInjector;
+
+/**
+ * Creates a selector that can dispatch an action if conditions are met.
+ * Note: The props of the selector factory must include the props of the action.
+ * @param selectorFactory A method that returns selector.
+ * @param action The action that will be dispatched when conditions are met.
+ * @param [dispatchIf = defaultFilter] Optional. A method that takes the result of the selector and returns a boolean. The actions gets dispatched
+ * if true is returned. If no method is passed in than the action will be dispatched if the selector returns undefined or null.
+ */
+export const createActionableSelector = <State, Result, Props extends any[]>(
+  selectorFactory: ((...props: Props) => MemoizedSelector<State, Result>),
+  action: ActionReturner<Props>,
+  dispatchIf: (data: Result) => boolean = defaultFilter,
+) => {
+  const options = {
+    selectorFactory,
+    action: (...props: Props) => () => _store.dispatch(action(...props)),
+    dispatchIf
+  }
+  const actionable = createActionResultSelector(options);
+  return (...props: Props) => createSelector(actionable(...props), b => b.result);
+}
+
+export const createActionSelector = <State, Result, Props extends any[] = any[]>(options: CreateActionResultsOptions<State, Result, Props>) => {
+  const actionable = createActionResultSelector(options);
+  return ((...props: Props) => createSelector(actionable(...props), b => b.result));
+}
+
+export const createActionableResultSelector = <State, Result, Props extends any[]>(
+  selectorFactory: ((...props: Props) => MemoizedSelector<State, Result>),
+  action: ActionReturner<Props>,
+  dispatchIf: (data: Result) => boolean = defaultFilter,
+) => {
+  const options: CreateActionResultsOptions<State, Result, Props> = { 
+    selectorFactory,
+    action: (...props: Props) => () => _store.dispatch(action(...props)),
+    dispatchIf
+  };
+
+  return createActionResultSelector(options);
+}
+
+export const createActionResultSelector = <State, Result, Props extends any[] = any[]>(options: CreateActionResultsOptions<State, Result, Props>) => {
+  const id = crypto.randomUUID();
+  const slctr = (...props: Props) => createSelector(
+    options.selectorFactory(...props),
+    (selected: Result) => {
+      const needsDispatch = (options.dispatchIf || defaultFilter)(selected);
+      if(needsDispatch && !_cache.isInCache(id, ...props)){
+        queueMicrotask(() =>  
+          runInInjectionContext(options.injector || _ei, () => {
+            options.action(...props)()
+          }));
+      }
+      return ({
+        loading: needsDispatch,
+        result: selected
+      });
+    }
+  ) as ActionableMemoizedSelector<State, LoadingState<Result>>;
+  return slctr;
+}
+
+class AppStoreCache {
+  cache: Cache = {};
+  isInCache = (actionableSelectorId: string, ...p: any[]): boolean => {
+    const props = p.reduce((a, b) => {
+      if(typeof b != 'object') b = { b };
+      return({ ...a, ...b })
+    }, {});
+
+    let itemsInCache = this.cache[actionableSelectorId] = (this.cache[actionableSelectorId] || []);
+
+    if(itemsInCache.some(itemInCache => shallowEquals(itemInCache, props))){
+      return true;
+    }
+
+    itemsInCache.push(props);
+    return false;
+  }
+}
+
+export const clearActionableSelectorRequestCache = () => _cache.cache = {};
+
+const shallowEquals = (cachedItem: object, newItem: object): boolean => {
+  const cachedItemKeys = Object.keys(cachedItem);
+  const secondKeys = Object.keys(newItem);
+  if(cachedItemKeys.length !== secondKeys.length) {
+    return false;
+  }
+  for(let index = 0; index < cachedItemKeys.length; index++) {
+    const currentKey = cachedItemKeys[index];
+    if(cachedItem[currentKey] !== newItem[currentKey]){
+      return false;
+    }
+  }
+  return true;
+}
+
+export function defaultFilter(data: any) {
+  return data == null || data == undefined;
+}
+
+const setStore = (store: Store) => {
+  if(store instanceof Store) _store ??= store;
+};
+
+const setEnvironmentInjector = (ei: EnvironmentInjector) => {
+  if(ei instanceof EnvironmentInjector) _ei ??= ei;
+};
+
+export function provideActionableSelector(){
+  return makeEnvironmentProviders([
+    provideAppInitializer(setUpStoreFactory)
+  ])
+}
+
+export const setUpStoreFactory = () => {
+  const store = inject(Store);
+  const env = inject(EnvironmentInjector);
+  _cache ??= new AppStoreCache();
+  setStore(store);
+  setEnvironmentInjector(env)
+}
+
+export interface CreateActionResultsOptions<State, Result, Props extends any[]>{
+  selectorFactory: (...props: Props) => MemoizedSelector<State, Result>,
+  action: (...props: Props) => () => void,
+  dispatchIf?: (data: Result) => boolean,
+  injector?: Injector
+}
+
+interface LoadingState<T> {
+  loading: boolean;
+  result?: T;
+}
+
+type ActionableMemoizedSelector<State, Result> = MemoizedSelector<State, Result>;
+
+export type ActionReturner<Props extends any[]> = (...props: Props) => Action;
+
+type Cache = {
+  [key: string]: { [key: string]: any }[];
+}

package/src/ngrx/index.ts

@@ -0,0 +1 @@
+export * from './actionable-selector';