feat(showcase): add tanstack usage for server state

feat: regenerate sdk with revivers

feat: core model for Pet

feat(ngrx): store

Author: ExFlo

apps/showcase/db/contacts.json

@@ -0,0 +1,109 @@
+{
+  "contacts": [
+    {
+      "id": "1",
+      "firstName": "Winnie",
+      "lastName": "The Pooh"
+    },
+    {
+      "id": "2",
+      "firstName": "Christopher",
+      "lastName": "Robin"
+    },
+    {
+      "id": "3",
+      "firstName": "Eyeore",
+      "lastName": "The Donkey"
+    },
+    {
+      "id": "5",
+      "firstName": "Scrooge",
+      "lastName": "McDuck"
+    },
+    {
+      "id": "6",
+      "firstName": "Tinker",
+      "lastName": "Bell"
+    },
+    {
+      "id": "7",
+      "firstName": "Peter",
+      "lastName": "Pan"
+    },
+    {
+      "id": "8",
+      "firstName": "Capitan",
+      "lastName": "Hook"
+    },
+    {
+      "id": "9",
+      "firstName": "Snow",
+      "lastName": "White"
+    },
+    {
+      "id": "10",
+      "firstName": "Prince",
+      "lastName": "Charming"
+    },
+    {
+      "id": "11",
+      "firstName": "Fairy",
+      "lastName": "Godmother"
+    },
+    {
+      "id": "12",
+      "firstName": "Simba",
+      "lastName": "The Lion"
+    },
+    {
+      "id": "13",
+      "firstName": "Mufasa",
+      "lastName": "The Lion King"
+    },
+    {
+      "id": "14",
+      "firstName": "Mike",
+      "lastName": "Wazowski"
+    },
+    {
+      "id": "15",
+      "firstName": "James",
+      "lastName": "P. Sullivan"
+    },
+    {
+      "id": "16",
+      "firstName": "Randall",
+      "lastName": "Boggs"
+    },
+    {
+      "id": "17",
+      "firstName": "Buzz",
+      "lastName": "Lightyear"
+    },
+    {
+      "id": "18",
+      "firstName": "Launchpad",
+      "lastName": "McQuack"
+    },
+    {
+      "id": "19",
+      "firstName": "Minnie",
+      "lastName": "Mouse"
+    },
+    {
+      "id": "20",
+      "firstName": "Mickey",
+      "lastName": "Mouse"
+    },
+    {
+      "id": "21",
+      "firstName": "Donald",
+      "lastName": "Duck"
+    },
+    {
+      "id": "22",
+      "firstName": "Daisy",
+      "lastName": "Duck"
+    }
+  ]
+}

apps/showcase/package.json

@@ -9,6 +9,7 @@
     "nx": "nx",
     "start": "ng run showcase:run",
     "build": "yarn run generate:translations && ng build",
+    "db": "json-server --watch db/contacts.json",
     "watch": "ng compile --watch --configuration development",
     "test": "ng test",
     "start:no-translation": "ng serve",
@@ -61,6 +62,8 @@
     "@o3r/styling": "workspace:^",
     "@o3r/testing": "workspace:^",
     "@popperjs/core": "^2.11.5",
+    "@tanstack/angular-query-devtools-experimental": "^5.28.8",
+    "@tanstack/angular-query-experimental": "^5.28.8",
     "ag-grid-angular": "~31.1.0",
     "ag-grid-community": "~31.1.0",
     "bootstrap": "5.3.3",
@@ -112,6 +115,7 @@
     "jest-environment-jsdom": "~29.7.0",
     "jest-junit": "~16.0.0",
     "jest-preset-angular": "~14.0.3",
+    "json-server": "^1.0.0-alpha.23",
     "jsonc-eslint-parser": "~2.4.0",
     "lighthouse": "9.6.8",
     "playwright-lighthouse": "2.2.2",

apps/showcase/project.json

@@ -135,8 +135,18 @@
         "^build"
       ]
     },
+    "serve-db": {
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": ["yarn db", "yarn ng serve showcase"],
+        "parallel": true
+      }
+    },
     "serve-app": {
       "executor": "@angular-devkit/build-angular:dev-server",
+      "options": {
+        "proxyConfig": "./proxy.config.js"
+      },
       "configurations": {
         "production": {
           "buildTarget": "showcase:compile:production"

apps/showcase/src/app/app-routing.module.ts

@@ -13,6 +13,7 @@ const appRoutes: Routes = [
   {path: 'run-app-locally', loadComponent: () => import('./run-app-locally/index').then((m) => m.RunAppLocallyComponent), title: 'Otter Showcase - Run App Locally'},
   {path: 'sdk', loadComponent: () => import('./sdk/index').then((m) => m.SdkComponent), title: 'Otter Showcase - SDK'},
   {path: 'placeholder', loadComponent: () => import('./placeholder/index').then((m) => m.PlaceholderComponent), title: 'Otter Showcase - Placeholder'},
+  {path: 'tanstack', loadComponent: () => import('./tanstack/index').then((m) => m.TanstackComponent)},
   {path: '**', redirectTo: '/home', pathMatch: 'full'}
 ];
 

apps/showcase/src/app/app.component.ts

@@ -39,6 +39,12 @@ export class AppComponent implements OnDestroy {
       links: [
         { url: '/sdk', label: 'Generator' }
       ]
+    },
+    {
+      label: 'Server side storage',
+      links: [
+        { url: '/tanstack', label: 'Tanstack' }
+      ]
     }
   ];
 

apps/showcase/src/app/app.module.ts

@@ -33,6 +33,13 @@ import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 
 
+// Tanstack
+import {
+  provideAngularQuery,
+  QueryClient
+} from '@tanstack/angular-query-experimental';
+import { HttpClientModule } from '@angular/common/http';
+
 const runtimeChecks: Partial<RuntimeChecks> = {
   strictActionImmutability: false,
   strictActionSerializability: false,
@@ -87,6 +94,7 @@ export function registerCustomComponents(): Map<string, any> {
   ],
   imports: [
     BrowserModule,
+    HttpClientModule,
     BrowserAnimationsModule.withConfig({disableAnimations: prefersReducedMotion()}),
     EffectsModule.forRoot([]),
     StoreModule.forRoot({}, { runtimeChecks }),
@@ -133,7 +141,8 @@ export function registerCustomComponents(): Map<string, any> {
     {provide: OTTER_RULES_ENGINE_DEVTOOLS_OPTIONS, useValue: {isActivatedOnBootstrap: true}},
     {provide: OTTER_COMPONENTS_DEVTOOLS_OPTIONS, useValue: {isActivatedOnBootstrap: true}},
     {provide: OTTER_APPLICATION_DEVTOOLS_OPTIONS, useValue: {isActivatedOnBootstrap: true}},
-    {provide: OTTER_STYLING_DEVTOOLS_OPTIONS, useValue: {isActivatedOnBootstrap: true}}
+    {provide: OTTER_STYLING_DEVTOOLS_OPTIONS, useValue: {isActivatedOnBootstrap: true}},
+    provideAngularQuery(new QueryClient())
   ],
   bootstrap: [AppComponent]
 })

apps/showcase/src/app/tanstack/README.md

@@ -0,0 +1,3 @@
+# Tanstack usage
+
+the Tanstack query page

apps/showcase/src/app/tanstack/index.ts

@@ -0,0 +1 @@
+export * from './tanstack.component';

apps/showcase/src/app/tanstack/tanstack.component.ts

@@ -0,0 +1,40 @@
+import { AsyncPipe } from '@angular/common';
+import { AfterViewInit, ChangeDetectionStrategy, Component, QueryList, ViewChildren, ViewEncapsulation } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { O3rComponent } from '@o3r/core';
+import {
+  CopyTextPresComponent,
+  IN_PAGE_NAV_PRES_DIRECTIVES,
+  InPageNavLink,
+  InPageNavLinkDirective,
+  InPageNavPresService,
+  TanstackPresComponent
+} from '../../components';
+
+@O3rComponent({ componentType: 'Page' })
+@Component({
+  selector: 'o3r-tanstack',
+  standalone: true,
+  imports: [
+    CopyTextPresComponent,
+    RouterLink,
+    TanstackPresComponent,
+    IN_PAGE_NAV_PRES_DIRECTIVES,
+    AsyncPipe
+  ],
+  templateUrl: './tanstack.template.html',
+  styleUrls: ['./tanstack.style.scss'],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class TanstackComponent implements AfterViewInit {
+  @ViewChildren(InPageNavLinkDirective)
+  private readonly inPageNavLinkDirectives!: QueryList<InPageNavLink>;
+  public links$ = this.inPageNavPresService.links$;
+
+  constructor(private readonly inPageNavPresService: InPageNavPresService) {}
+
+  public ngAfterViewInit() {
+    this.inPageNavPresService.initialize(this.inPageNavLinkDirectives);
+  }
+}

apps/showcase/src/app/tanstack/tanstack.spec.ts

@@ -0,0 +1,35 @@
+import { PetApi } from '@ama-sdk/showcase-sdk';
+import { PetApiFixture } from '@ama-sdk/showcase-sdk/fixtures';
+import { AsyncPipe } from '@angular/common';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterModule } from '@angular/router';
+
+import { TanstackComponent } from './tanstack.component';
+import '@angular/localize/init';
+
+describe('TanstackComponent', () => {
+  let component: TanstackComponent;
+  let fixture: ComponentFixture<TanstackComponent>;
+  const petApiFixture = new PetApiFixture();
+  petApiFixture.findPetsByStatus = petApiFixture.findPetsByStatus.mockResolvedValue([]);
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        TanstackComponent,
+        RouterModule.forRoot([]),
+        AsyncPipe
+      ],
+      providers: [
+        {provide: PetApi, useValue: petApiFixture}
+      ]
+    });
+    fixture = TestBed.createComponent(TanstackComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});