feat(ngrx): store with otter

Author: ExFlo

apps/showcase/src/components/showcase/tanstack/store/petstore/petstore.actions.ts

@@ -24,12 +24,12 @@ const ACTION_UPDATE_ENTITIES = '[Petstore] update entities';
 const ACTION_UPSERT_ENTITIES = '[Petstore] upsert entities';
 const ACTION_SET_ENTITIES = '[Petstore] set entities';
 const ACTION_FAIL_ENTITIES = '[Petstore] fail entities';
-const ACTION_CREATE_ENTITIES_FROM_API = '[Petstore] create entity';
 
 /** Async Actions */
 const ACTION_SET_ENTITIES_FROM_API = '[Petstore] set entities from api';
 const ACTION_UPDATE_ENTITIES_FROM_API = '[Petstore] update entities from api';
 const ACTION_UPSERT_ENTITIES_FROM_API = '[Petstore] upsert entities from api';
+const ACTION_CREATE_ENTITIES_FROM_API = '[Petstore] create entity';
 
 
 /** Action to clear the StateDetails of the store and replace it */

apps/showcase/src/components/showcase/tanstack/tanstack-pres.component.ts

@@ -6,6 +6,7 @@ import { OtterPickerPresComponent } from '../../utilities';
 import { TanstackService } from './tanstack.service';
 import { AngularQueryDevtools } from '@tanstack/angular-query-devtools-experimental';
 import { AsyncPipe, JsonPipe } from '@angular/common';
+import { PetstoreStoreModule } from './store/petstore/index';
 
 
 @O3rComponent({ componentType: 'Component' })
@@ -20,7 +21,8 @@ import { AsyncPipe, JsonPipe } from '@angular/common';
     NgbPaginationPages,
     AngularQueryDevtools,
     JsonPipe,
-    AsyncPipe
+    AsyncPipe,
+    PetstoreStoreModule
   ],
   providers: [TanstackService],
   templateUrl: './tanstack-pres.template.html',

apps/showcase/src/components/showcase/tanstack/tanstack-pres.template.html

@@ -1,5 +1,8 @@
 <div class="card mb-3">
   <div class="card-body">
+    <span>isloading here:</span>
+    {{ service.isLoading | async}}
+    <span>was it here?</span>
     <form>
       <div class="row gap-3">
         <label for="pet-name" class="col-xs-3 col-sm-auto col-form-label">Name</label>
@@ -177,6 +180,4 @@
   </div>
 </div>
 
-{{ service.isLoading | async}}
-
 <angular-query-devtools initialIsOpen />

apps/showcase/src/components/showcase/tanstack/tanstack.service.ts

@@ -10,7 +10,7 @@ const FILTER_PAG_REGEX = /[^0-9]/g;
 // Tanstack
 import {injectMutation, injectQuery, injectQueryClient, type QueryClient } from '@tanstack/angular-query-experimental';
 import { BackEndService } from './backend.service';
-import { setPetstoreEntityFromApi } from './store/petstore/petstore.actions';
+import { setPetstoreEntitiesFromApi, setPetstoreEntityFromApi } from './store/petstore/petstore.actions';
 import { selectPetstoreStorePendingStatus } from './store/petstore/petstore.selectors';
 
 @Injectable()
@@ -50,7 +50,6 @@ export class TanstackService {
 
   public isLoading = this.store.select(selectPetstoreStorePendingStatus);
 
-
   /**
    * Complete list of pets retrieved from the API
    */
@@ -142,15 +141,26 @@ export class TanstackService {
   /** Base URL where the images can be fetched */
   public baseUrl = location.href.split('/#', 1)[0];
 
+  constructor() {
+    this.loadPets();
+  }
+
   private getNextId() {
     return this.pets.data().reduce((maxId: number, pet: Pet) => pet.id && pet.id < Number.MAX_SAFE_INTEGER ? Math.max(maxId, pet.id) : maxId, 0) + 1;
   }
 
+  public loadPets = (/* abortSignal: AbortSignal*/) => {
+    this.store.dispatch(setPetstoreEntitiesFromApi({call: this.petStoreApi.findPetsByStatus({status: 'available'}/* , {signal: abortSignal}*/).then((pets: Pet[]) =>
+      pets.filter((p: Pet) => p.category?.name === 'otter').sort((a: Pet, b: Pet) => a.id && b.id && a.id - b.id || 0))}));
+  };
+
   /**
    * Trigger a full reload of the list of pets by calling the API
    */
-  public async reload() {
-    await this.queryClient.invalidateQueries({ queryKey: ['findPetsByStatus'] });
+  public reload() {
+  // public async reload() {
+    // await this.queryClient.invalidateQueries({ queryKey: ['findPetsByStatus'] });
+    this.loadPets();
   }
 
 
@@ -170,6 +180,7 @@ export class TanstackService {
     // this.store.dispatch()
     // eslint-disable-next-line @typescript-eslint/naming-convention
     this.store.dispatch(setPetstoreEntityFromApi({call: this.petStoreApi.addPet({Pet: pet})}));
+    // await this.reload();
   }
 
   public delete(petToDelete: Pet) {