@one-paragon/angular-utilities 2.2.4 → 2.2.6

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

@@ -0,0 +1,29 @@
+import { Directive, inject, Injector, TemplateRef, ViewContainerRef, OnInit } from '@angular/core';
+import { RequestState } from '../types';
+import { HttpRequestStateDirective } from './request-state-directive';
+
+@Directive()
+export abstract class HttpStateDirectiveBase<V, R = null> implements OnInit {
+  hasView = false;
+  private injector = inject(Injector);
+  protected templateRef = inject(TemplateRef<{ $implicit: R extends null ? V : R }>);
+  protected viewContainer = inject(ViewContainerRef);
+  ngOnInit() {
+    const parent = this.injector.get(HttpRequestStateDirective);
+    if(parent == null) {
+      throw new Error('You can only use an http state directive as a child of the httpRequestState directive.');
+    }
+    parent.hooks.push(this.baseRender);
+    this.baseRender(parent.ViewContext.state);
+  }
+
+  private baseRender = (state: RequestState): void => {
+    if(this.hasView) {
+      this.viewContainer.clear();
+      this.hasView = false;
+    }
+    this.hasView = this.render(state);
+  }
+
+  abstract render: (state: RequestState) => boolean;
+}

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

@@ -0,0 +1,21 @@
+import { Directive, OnInit } from '@angular/core';
+import { isErrorState } from '../helpers';
+import { RequestState } from '../types';
+import { HttpStateDirectiveBase } from './HttpStateDirectiveBase';
+
+@Directive({ selector: '[httpErrorState]', })
+export class HttpErrorStateDirective<V, R = null> extends HttpStateDirectiveBase<V, R> implements OnInit {
+
+
+  render = (state: RequestState<any>) => {
+    if(isErrorState(state)) {
+      this.viewContainer.createEmbeddedView(this.templateRef, { $implicit: state.error });
+      return true;
+    }
+    return false;
+  };
+
+  ngOnInit() {
+    super.ngOnInit();
+  }
+}

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

@@ -0,0 +1,19 @@
+import { Directive, OnInit } from '@angular/core';
+import { HttpStateDirectiveBase } from './HttpStateDirectiveBase';
+import { RequestState, RequestStatus } from '../types'
+
+
+@Directive({ selector: '[httpInProgressState]', })
+export class HttpInProgressStateDirective<V, R = null> extends HttpStateDirectiveBase<V, R> implements OnInit {
+  render = (state: RequestState<any>) => {
+    if(state.status === RequestStatus.inProgress){
+      this.viewContainer.createEmbeddedView(this.templateRef );
+      return true;
+    }
+    return false;
+  };
+
+  ngOnInit() {
+    super.ngOnInit();
+  }
+}

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

@@ -0,0 +1,19 @@
+import { Directive, OnInit } from '@angular/core';
+import { RequestState, RequestStatus } from '../types';
+import { HttpStateDirectiveBase } from './HttpStateDirectiveBase';
+
+
+@Directive({ selector: '[httpNotStartedState]', })
+export class HttpNotStartedStateDirective<V, R = null> extends HttpStateDirectiveBase<V, R> implements OnInit {
+  render = (state: RequestState<any>) => {
+    if(state.status === RequestStatus.notStarted){
+      this.viewContainer.createEmbeddedView(this.templateRef );
+      return true;
+    }
+    return false;
+  };
+
+  ngOnInit() {
+    super.ngOnInit();
+  }
+}

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

@@ -0,0 +1,29 @@
+import { Directive, Input, OnInit } from '@angular/core';
+import { isSuccessState } from '../helpers';
+import { HttpStateDirectiveBase } from './HttpStateDirectiveBase';
+import { RequestState } from '../types';
+import { RequestStateStore } from '../RequestStateStore';
+import { Observable } from 'rxjs';
+
+export interface HttpSuccessStateViewContext<T> {
+  $implicit: T;
+}
+@Directive({ selector: '[httpSuccessState]', })
+export class HttpSuccessStateDirective<V, R = null> extends HttpStateDirectiveBase<V, R> implements OnInit {
+  @Input() httpSuccessStateTypeSafety?: RequestStateStore<any, V, R> | Observable<RequestState<V>>;
+  render = (state: RequestState<R extends null ? V : R>) => {
+    if(isSuccessState(state)) {
+      this.viewContainer.createEmbeddedView(this.templateRef, { $implicit: state.body });
+      return true;
+    }
+    return false;
+  };
+
+  ngOnInit() {
+    super.ngOnInit();
+  }
+
+  static ngTemplateContextGuard<V, R>(dir: HttpSuccessStateDirective<V, R>, ctx: any): ctx is HttpSuccessStateViewContext<R extends null ? V : R> {
+    return true;
+  }
+}

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,73 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Component, inject } from '@angular/core';
+import { HttpRequestModule } from '../http-state-module';
+import { RequestStateStore } from '../RequestStateStore';
+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<RequestStateStore<any, any>>(RequestStateStore);
+
+}
+
+export class MockHttpRequestState<T> extends RequestStateStore<[], 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: RequestStateStore, 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, OnDestroy } from '@angular/core';
+import { defaultShareReplay } from '../../rxjs/defaultShareReplay';
+import { isObservable, Observable, Subject, Unsubscribable } from 'rxjs';
+import { map, switchAll } from 'rxjs/operators';
+import { RequestStateStore } from '../RequestStateStore';
+import { RequestState, RequestStatus } 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> implements OnDestroy {
+  private viewContainer: ViewContainerRef;
+
+  readonly ViewContext: HttpRequestStateViewContext<T> = {
+    $implicit: undefined,
+    state: undefined,
+    status: {
+      inProgress: false,
+      notStarted: true,
+      success: false,
+      error: false,
+    }
+  };
+
+
+  subject = new Subject<Observable<RequestState<T>>>();
+  state = this.subject.pipe(switchAll(), defaultShareReplay());
+  subscription: Unsubscribable;
+  hooks: ((state: RequestState<T>) => void)[] = [];
+
+  @Input('httpRequestState') set stateStore(store: RequestStateStore<TParam, V, R, T> | Observable<RequestState<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 === RequestStatus.inProgress;
+      this.ViewContext.status.notStarted = state.status === RequestStatus.notStarted;
+      this.ViewContext.status.success = state.status === RequestStatus.success;
+      this.ViewContext.status.error = state.status === RequestStatus.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: RequestStatus;
+  body?: T;
+  error?: any;
+}

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

@@ -0,0 +1,30 @@
+import { RequestState, RequestStateError, RequestStateInProgress, RequestStateNotStarted, RequestStateSuccess, RequestStatus } from "./types";
+
+export function isErrorState<T>(state: RequestState<T>): state is RequestStateError {
+  return state.status === RequestStatus.fail;
+}
+
+export function isSuccessState<T>(state: RequestState<T>): state is RequestStateSuccess<T> {
+  return state.status === RequestStatus.success;
+}
+
+export function isSuccessOrErrorState<T>(state: RequestState<T>): state is (RequestStateSuccess<T> | RequestStateError) {
+  return state.status === RequestStatus.success || state.status === RequestStatus.fail;
+}
+
+export function createSuccess<T>(body: T): RequestStateSuccess<T> {
+  return { status: RequestStatus.success, body };
+}
+
+export function createFailure(error: any): RequestStateError {
+  return { status: RequestStatus.fail, error };
+}
+
+export const notStarted: RequestStateNotStarted = { status: RequestStatus.notStarted };
+
+
+export const inProgress: RequestStateInProgress = { status: RequestStatus.inProgress };
+
+export function statusIsSuccessOrInProgress( status: RequestStatus) {
+  return [RequestStatus.success, RequestStatus.inProgress].includes(status);
+}

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,7 +1,7 @@
-export * from './helpers';
-export * from './request-state';
-export * from './http-state-module';
-export * from './RequestStateFactory';
-export * from './RequestStateStore';
-export * from './types';
-export * from './deprecated';
+export * from './helpers';
+export * from './request-state';
+export * from './http-state-module';
+export * from './RequestStateFactory';
+export * from './RequestStateStore';
+export * from './types';
+export * from './deprecated'

package/src/http-request-state/models/view-context.ts

@@ -0,0 +1,18 @@
+import { RequestStatus } from "../types";
+
+export interface HttpRequestStateViewContext<T> {
+  $implicit?: HttpRequestStateAny<T>;
+  state?: HttpRequestStateAny<T>;
+  status: {
+    inProgress: boolean;
+    notStarted: boolean;
+    success: boolean;
+    error: boolean;
+  };
+}
+
+export type HttpRequestStateAny<T> = {
+  status: RequestStatus;
+  body?: T;
+  error?: any;
+}

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/request-state.ts

@@ -0,0 +1,66 @@
+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 { RequestFactory, RequestState, RequestStatus } from './types';
+import { createFailure, createSuccess, inProgress, notStarted } from './helpers';
+
+export type HttpRequestState$ <T> = Observable<RequestState<T>>;
+
+export interface HttpRequestor <Res, Req> {
+  httpState$: Observable<RequestState<Res>>;
+  status$: Observable<RequestStatus>;
+  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: RequestFactory<TParam, T> ): HttpRequestor<T, (...params: [...TParam]) => Observable<RequestState<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<RequestState<T>>,
+  request:RequestFactory<TParam, TT>,
+  requestParams: ((responseFromPrevious: T) => [...TParam]) | (() => [...TParam])
+): Observable<RequestState<TT>> {
+  return httpState$.pipe(
+    switchMap( res => {
+      if(res.status === RequestStatus.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/rxjs/getRequestorBody.ts

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

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

@@ -0,0 +1,8 @@
+import { RequestState } from '../types';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+export const getRequestorStatus = <T>(source: Observable<RequestState<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 { RequestState } from '../types';
+import { isErrorState } from '../helpers';
+
+export function tapError(onError: (error: any) => void) {
+  return function (src: Observable<RequestState>): Observable<RequestState> {
+    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 { RequestState } from '../types';
+import { isSuccessState } from '../helpers';
+
+export function tapSuccess<T>(onSuccess: (body: T) => void) {
+  return function (src: Observable<RequestState<T>>): Observable<RequestState<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 { RequestStrategy } from "./types";
+
+describe('HttpRequestStateStore', () => {
+
+  it('should throw when strategy is use once and it was reused', () => {
+    const requestState = new MockHttpRequestState<string>({ strategy: RequestStrategy.singleUse });
+    requestState.request();
+    expect( () => {
+      requestState.request();
+    } ).toThrow();
+  });
+
+
+  it('should emit both when strategy is concurrent', (done) => {
+    const requestState = new MockHttpRequestState<string>({ strategy: RequestStrategy.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: RequestStrategy.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,54 @@
+import { Injector } from '@angular/core';
+import { Observable } from 'rxjs';
+export enum RequestStatus {
+    notStarted,
+    inProgress,
+    success,
+    fail,
+    cancelled,
+  }
+
+export type RequestStateCancelled = {
+    status: RequestStatus.cancelled
+  }
+
+export type RequestStateNotStarted = {
+    status: RequestStatus.notStarted
+  }
+
+export type RequestStateInProgress = {
+    status: RequestStatus.inProgress
+  }
+
+export type RequestStateSuccess<T> = {
+    status: RequestStatus.success;
+    body: T;
+  }
+
+export type RequestStateError = {
+    status: RequestStatus.fail;
+    error: any;
+  }
+
+
+export type RequestState<T = any> =
+    RequestStateCancelled |
+    RequestStateNotStarted |
+    RequestStateInProgress |
+    RequestStateSuccess<T> |
+    RequestStateError ;
+
+export enum RequestStrategy {
+  concurrent = 1,
+  singleUse = 2,
+  cancelPrevious = 3,
+  sequential = 4,
+}
+export interface RequestStateOptions<TParam extends any[] = any> {
+  strategy?: RequestStrategy;
+  autoRequest?: TParam extends never[] ? true : never;
+}
+
+export interface RequestCreatorOptions<TParam extends any[] = any> extends RequestStateOptions<TParam> { injector?: Injector }
+
+export type RequestFactory<TParam extends any[], T> = (...params: [...TParam]) => Observable<T>