Update deposit module to get deposits

src/app/access/access.action.ts

-import {AipModel, DipModel} from '@app/generated-api';
+import {DipModel} from '@app/generated-api';
 import {CollectionTypedModel} from '@app/model/collection-typed.model';
 
 export class GetAllDip {

src/app/access/access.state.ts

@@ -66,9 +66,9 @@ export class AccessState {
         tap((collectionDips: CollectionTypedModel<DipModel>) => {
           ctx.dispatch(new SearchDipSuccess(collectionDips));
         }),
-        catchError(e => {
+        catchError(error => {
           ctx.dispatch(new SearchDipFail());
-          throw e;
+          throw error;
         }),
       );
   }

src/app/access/views/access-view/access-view.component.html

-<form class="search-form">
-  <dlcm-search (value)="search($event)"></dlcm-search>
-</form>
+<dlcm-search (value)="search($event)"></dlcm-search>
 
 {{(dips$ | async) | json}}
 

src/app/access/views/access-view/access-view.component.ts

 import {Component, OnInit} from '@angular/core';
 import {SearchDip} from '@app/access/access.action';
+import {AccessStateModel} from '@app/access/access.state';
+import {DipModel} from '@app/generated-api';
 import {Select, Store} from '@ngxs/store';
 import {Observable} from 'rxjs';
 
@@ -10,8 +12,8 @@ import {Observable} from 'rxjs';
   styleUrls: ['./access-view.component.scss'],
 })
 export class AccessViewComponent implements OnInit {
-  @Select((state) => state.access.isLoading) isLoading$: Observable<string>;
-  @Select((state) => state.access.dips) dips$: Observable<string>;
+  @Select((state) => ((state.access) as AccessStateModel).isLoading) isLoading$: Observable<boolean>;
+  @Select((state) => ((state.access) as AccessStateModel).dips) dips$: Observable<DipModel[]>;
 
   constructor(private store: Store) {
   }

src/app/app.module.ts

@@ -35,7 +35,7 @@ import {AppRoutingModule} from './module/app-routing.module';
     BrowserAnimationsModule,
     AppRoutingModule,
     NgxsModule.forRoot([], {
-      developmentMode: !environment.production, // Allow to freeze store
+      developmentMode: !environment.production, // Allow to enable freeze store in dev env
     }),
     NgxsLoggerPluginModule.forRoot({
       logger: console,

src/app/deposit/deposit.action.ts

-export class AddDIP {
-  static readonly type = '[Deposit] Add DIP';
+import {DepositsModel} from '@app/generated-api';
+import {CollectionTypedModel} from '@app/model/collection-typed.model';
 
-  constructor(public name: string) {
+export class GetAll {
+  static readonly type = '[Deposit] Get All';
+
+  constructor() {
   }
 }
 
-export class GetAll {
-  static readonly type = '[Deposit] Get All';
+export class GetAllSuccess {
+  static readonly type = '[Deposit] Get All Success';
+
+  constructor(public deposits: CollectionTypedModel<DepositsModel>) {
+  }
+}
+
+export class GetAllFail {
+  static readonly type = '[Deposit] Get All Fail';
 
   constructor() {
   }

src/app/deposit/deposit.state.ts

 import {AppStateModel} from '@app/app.state';
-import {AddDIP, GetAll} from '@app/deposit/deposit.action';
-import {DepositService} from '@app/deposit/services/deposit.service';
+import {GetAll, GetAllFail, GetAllSuccess} from '@app/deposit/deposit.action';
+import {DepositsModel, DipModel} from '@app/generated-api';
+import {CollectionTypedModel} from '@app/model/collection-typed.model';
+import {DlcmExtendedService} from '@app/service/dlcm.extended.service';
 import {Action, State, StateContext} from '@ngxs/store';
-import {tap} from 'rxjs/internal/operators/tap';
+import {catchError} from 'rxjs/internal/operators/catchError';
+import {tap} from 'rxjs/operators';
 
 export interface DepositStateModel extends AppStateModel {
-  feed: boolean;
-  dip: string;
-  dips: [];
+  totalDeposit: number;
+  deposits: DipModel[];
 }
 
 @State<DepositStateModel>({
   name: 'deposit',
   defaults: {
-    feed: false,
-    dip: 'test',
-    dips: [],
+    totalDeposit: 0,
+    deposits: [],
     isLoading: false,
   },
 })
 export class DepositState {
-  constructor(private depositService: DepositService) {
+  constructor(private dlcmService: DlcmExtendedService) {
   }
 
-  @Action(AddDIP)
-  addDIP(ctx: StateContext<DepositStateModel>, action: AddDIP) {
-    // const state = ctx.getState();
-    // ctx.setState({
-    //   ...state,
-    //   feed: !state.feed,
-    //   dip: action.name,
-    //   isLoading: true,
-    // });
-
-    // equals to
-    // ctx.setState((state) => ({...state, dip: action.name}));
-
-    // equals to
+  @Action(GetAll, {cancelUncompleted: true})
+  getAll(ctx: StateContext<DepositStateModel>, action: GetAll) {
     ctx.patchState({
-      dip: action.name,
+      isLoading: true,
     });
 
-    // return ctx.dispatch(new GetAll());
+    return this.dlcmService.preingestDepositsGet()
+      .pipe(
+        tap((collectionDips: CollectionTypedModel<DepositsModel>) => {
+          ctx.dispatch(new GetAllSuccess(collectionDips));
+        }),
+        catchError(error => {
+          ctx.dispatch(new GetAllFail());
+          throw error;
+        }),
+      );
   }
 
-  @Action(GetAll)
-  getAll(ctx: StateContext<DepositStateModel>, action: GetAll) {
+  @Action(GetAllSuccess)
+  getAllSuccess(ctx: StateContext<DepositStateModel>, action: GetAllSuccess) {
     ctx.patchState({
-      isLoading: true,
+      deposits: action.deposits._data,
+      totalDeposit: action.deposits._page.totalItems,
+      isLoading: false,
     });
+  }
 
-    return this.depositService.getAll().pipe(
-      tap((deposits: any) => {
-        console.log('test', deposits);
-        const state = ctx.getState();
-        // ctx.patchState()
-        ctx.setState({
-          ...state,
-          dips: deposits._data,
-          isLoading: false,
-        });
-      }),
-    );
+  @Action(GetAllFail)
+  getAllFail(ctx: StateContext<DepositStateModel>) {
+    ctx.patchState({
+      isLoading: false,
+    });
   }
 }

src/app/deposit/views/deposit-view/deposit-view.component.html

-<button mat-flat-button color="primary">New Deposit</button>
+<button mat-flat-button color="primary" (click)="addDeposit()">New Deposit</button>
+<button mat-flat-button color="secondary" (click)="getAll()">Refresh</button>
 
-<button (click)="getAll()">Get All deposit</button>
-<!--<button (click)="addDIP()">Add DIP</button>-->
+{{(deposits$ | async) | json}}
 
-<ul>
-  <li *ngFor="let dip of (deposit$ | async).dips">
-    {{dip | json}}
-  </li>
-</ul>
+<mat-spinner *ngIf="(isLoading$ | async)"></mat-spinner>
 
-<!--Deposits :-->
-
-<!--DIPS :-->
-<!--&lt;!&ndash;{{dips$ | async}}&ndash;&gt;-->
-<!--<br>-->
-<!--DIP :-->
-<!--{{(depositState$ | async).dip}}-->
-<!--<br>-->
-<!--DIP 2 :-->
-<!--{{(deposit$ | async).dip}}-->
-<!--<br>-->
-<!--DIP 3 :-->
-<!--{{dip3$ | async}}-->
-<!--<br>-->
-<!--DIP 4 :-->
-<!--{{dip4$ | async}}-->
-<!--<br>-->
-<!--&lt;!&ndash;Don't work&ndash;&gt;-->
-<!--DIP Panda :-->
-<!--&lt;!&ndash;{{dipPanda$ | async}}&ndash;&gt;-->
-<!--<br>-->
-<!--All :-->
-<!--<ul>-->
-<!--  <li *ngFor="let dip of (deposit$ | async).dips">-->
-<!--    {{dip | json}}-->
-<!--  </li>-->
-<!--</ul>-->
-
-<!--<fa-icon [icon]="faCoffee"></fa-icon>-->
-<!--<fa-icon icon="coffee"></fa-icon>-->
-
-<!--<mat-spinner *ngIf="(deposit$ | async).isLoading"></mat-spinner>-->
 

src/app/deposit/views/deposit-view/deposit-view.component.ts

 import {Component, OnInit} from '@angular/core';
-import {AddDIP, GetAll} from '@app/deposit/deposit.action';
-import {DepositState, DepositStateModel} from '@app/deposit/deposit.state';
+import {GetAll} from '@app/deposit/deposit.action';
+import {DepositStateModel} from '@app/deposit/deposit.state';
+import {DepositsModel} from '@app/generated-api';
 import {faCoffee} from '@fortawesome/free-solid-svg-icons';
 import {Select, Store} from '@ngxs/store';
 import {Observable} from 'rxjs';
@@ -13,31 +14,21 @@ import {Observable} from 'rxjs';
 export class DepositViewComponent implements OnInit {
   faCoffee = faCoffee;
 
-  // @Select((state: DepositStateModel) => state.dips) dips$: Observable<any>;
-  // @Select(DepositState.dip) dip$: Observable<string>;
-  @Select(DepositState) depositState$: Observable<DepositStateModel>;
-
-  // Uses the pandas memoized selector to only return pandas
-  // @Select(DepositState.dip) dipPanda$: Observable<string>;
-
-  @Select((state) => state.deposit.dip) dip3$: Observable<string>;
-
-  @Select() deposit$: Observable<DepositStateModel>;
-
-  dip4$: Observable<string>;
+  @Select((state) => ((state.deposit) as DepositStateModel).isLoading) isLoading$: Observable<boolean>;
+  @Select((state) => ((state.deposit) as DepositStateModel).deposits) deposits$: Observable<DepositsModel[]>;
 
   constructor(private store: Store) {
-    this.dip4$ = this.store.select(state => state.deposit.dip);
   }
 
   ngOnInit() {
+    this.getAll();
   }
 
   getAll() {
     this.store.dispatch(new GetAll());
   }
 
-  addDIP() {
-    this.store.dispatch(new AddDIP('My new dip'));
+  addDeposit() {
+
   }
 }