code cleanup

Author: mythz

MyApp.Client/src/app/bookings/booking-create.component.html

@@ -40,8 +40,8 @@
         <div class="flex justify-between">
             <div></div>
             <div class="flex gap-x-4">
-                <secondary-button (click)="cancel()">
-                    Cancel
+                <secondary-button (click)="close()">
+                    Close
                 </secondary-button>
                 <primary-button type="submit" [disabled]="api.loading()">
                     {{ api.loading() ? 'Saving...' : 'Create Booking' }}

MyApp.Client/src/app/bookings/booking-create.component.ts

@@ -12,9 +12,9 @@ import { ApiState, provideApiState, tailwindComponents } from 'src/components';
 @Component({
   selector: 'app-booking-create',
   templateUrl: './booking-create.component.html',
-    providers: [
-        ...provideApiState()
-    ],
+  providers: [
+    ...provideApiState()
+  ],
   imports: [
     CommonModule,
     FormsModule,
@@ -52,7 +52,7 @@ export class BookingCreateComponent {
     this.api.complete(api.error);
   }
 
-  cancel(): void {
+  close(): void {
     // Navigate back without saving
     this.router.navigate(['/bookings']);
   }

MyApp.Client/src/app/bookings/booking-list.component.html

@@ -1,16 +1,12 @@
 <app-page title="Bookings" class="max-w-6xl">
 
-    @if (error()) {
-    <error-summary [status]="error()"></error-summary>
-    }
+    <form-loading text="Loading Bookings..."></form-loading>
+    <error-summary></error-summary>
 
     <div class="my-2 flex justify-end">
         <primary-button (click)="navigateToCreate()">New Booking</primary-button>
     </div>
 
-    @if (loading()) {
-        <form-loading [loading]="loading()" text="Loading Bookings..."></form-loading>
-    }
     @if (allBookings().length > 0) {
     <data-grid [items]="allBookings()" 
         [visibleFrom]="{ name:'xl', bookingStartDate:'sm', bookingEndDate:'xl' }"
@@ -80,7 +76,6 @@
     </data-grid>
     }
     @else {
-    <!-- No bookings message -->
     <div class="text-center py-4 bg-gray-50 rounded-md">
         <p class="text-gray-500">No bookings found</p>
     </div>

MyApp.Client/src/app/bookings/booking-list.component.ts

@@ -6,15 +6,18 @@ import { JsonServiceClient, ResponseStatus } from '@servicestack/client';
 import { Booking, QueryBookings } from 'src/dtos';
 import { SrcPageComponent } from 'src/shared/src-page.component';
 import { PageComponent } from '../page.component';
-import { tailwindComponents } from 'src/components';
+import { ApiState, provideApiState, tailwindComponents } from 'src/components';
 
 @Component({
     selector: 'app-booking-list',
     templateUrl: './booking-list.component.html',
+    providers: [
+        ...provideApiState()
+    ],
     imports: [
-        CommonModule, 
+        CommonModule,
         FormsModule,
-        DatePipe, 
+        DatePipe,
         CurrencyPipe,
         PageComponent,
         SrcPageComponent,
@@ -24,30 +27,26 @@ import { tailwindComponents } from 'src/components';
 export class BookingListComponent implements OnInit {
     private router = inject(Router);
     private client = inject(JsonServiceClient);
+    api = inject(ApiState);
 
     // Signals for state
     allBookings = signal<Booking[]>([]);
-    
-    loading = signal<boolean>(true);
-    error = signal<ResponseStatus | undefined>(undefined);
 
     ngOnInit(): void {
         this.loadBookings();
     }
 
     async loadBookings(): Promise<void> {
-        this.loading.set(true);
-        this.error.set(undefined);
+        this.api.begin();
 
         const api = await this.client.api(new QueryBookings({
-            orderByDesc:'BookingStartDate',
+            orderByDesc: 'BookingStartDate',
         }));
         if (api.succeeded) {
             this.allBookings.set(api.response!.results);
-        } else if (api.error) {
-            this.error.set(api.error);
         }
-        this.loading.set(false);
+        
+        this.api.complete(api.error);
     }
 
     navigateToCreate(): void {

MyApp.Client/src/app/signin/signin.component.ts

@@ -29,7 +29,7 @@ export class SignInComponent implements OnInit {
     private router = inject(Router);
     private route = inject(ActivatedRoute);
     private authService = inject(AuthService);
-    client = inject(JsonServiceClient);
+    private client = inject(JsonServiceClient);
     api = inject(ApiState);
 
     request = signal<Authenticate>(new Authenticate({

MyApp.Client/src/app/signup/signup.component.ts

@@ -76,7 +76,6 @@ export class SignUpComponent {
 
         this.api.begin();
 
-
         const api = await this.client.api(request);
         if (api.succeeded) {
             await this.authService.revalidate();

MyApp.Client/src/app/todomvc/todos.component.html

@@ -1,6 +1,5 @@
 <app-page title="Todos Application" class="max-w-lg">
     <div class="px-6 py-4">
-        <!-- Loading and Error States -->
         @if (loading) {
         <div class="flex justify-center mb-4">
             <div class="animate-spin rounded-full h-6 w-6 border-b-2 border-gray-900"></div>
@@ -27,7 +26,6 @@
         </div>
 
         @if (filteredTodos.length > 0) {
-        <!-- Todo List -->
         <ul class="divide-y divide-gray-200">
             @for (todo of filteredTodos; track todo.id) {
             <li class="py-3 flex items-center group">
@@ -71,7 +69,6 @@
         }
 
         @if (todos.length === 0 && !loading) {
-        <!-- Empty State -->
         <div class="py-6 text-center text-gray-500">
             <p>No todos yet. Add one above!</p>
         </div>

…App.Client/src/app/app.component.spec.ts …rc/app/weather/weather.component.spec.tsMyApp.Client/src/app/app.component.spec.ts renamed to MyApp.Client/src/app/weather/weather.component.spec.ts MyApp.Client/src/app/app.component.spec.ts renamed to MyApp.Client/src/app/weather/weather.component.spec.ts

@@ -1,27 +1,29 @@
 import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { provideHttpClient } from '@angular/common/http';
-import { AppComponent } from './app.component';
 import { ApiHttpClient } from 'src/components/services/api-http-client.service';
+import { WeatherComponent } from './weather.component';
+import { tailwindComponents } from 'src/components';
 
-describe('AppComponent', () => {
-  let component: AppComponent;
-  let fixture: ComponentFixture<AppComponent>;
+describe('WeatherComponent', () => {
+  let component: WeatherComponent;
+  let fixture: ComponentFixture<WeatherComponent>;
   let httpMock: HttpTestingController;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports:[AppComponent],
+      imports:[WeatherComponent],
       providers:[
         provideHttpClient(),
         provideHttpClientTesting(),
         ApiHttpClient,
+        ...tailwindComponents(),
       ]
     }).compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(AppComponent);
+    fixture = TestBed.createComponent(WeatherComponent);
     component = fixture.componentInstance;
     httpMock = TestBed.inject(HttpTestingController);
   });

MyApp.Client/src/app/weather/weather.component.ts

@@ -2,19 +2,17 @@ import { Component, inject, OnInit } from '@angular/core';
 import { Forecast, GetWeatherForecast, ResponseStatus } from 'src/dtos';
 import { ApiHttpClient } from 'src/components/services/api-http-client.service';
 import { PageComponent } from "../page.component";
-import { ErrorSummaryComponent } from 'src/components/error-summary.component';
-import { DataGridComponent } from 'src/components/data-grid.component';
 import { SrcPageComponent } from 'src/shared/src-page.component';
 import { DatePipe } from '@angular/common';
+import { tailwindComponents } from 'src/components';
 
 @Component({
   selector: 'weather',
   imports: [
     DatePipe,
     PageComponent,
-    DataGridComponent,
-    ErrorSummaryComponent,
     SrcPageComponent,
+    ...tailwindComponents(),
   ],
   templateUrl: './weather.component.html'
 })